:root {
  --bg:#0e1116; --panel:#161b22; --line:#252c36;
  --text:#e6edf3; --muted:#7d8590;
  --weather:#f0a35e; --air:#4ec9c9; --ok:#3fb950; --off:#6e7681;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:var(--sans); padding:28px 18px; line-height:1.4;
}
.wrap { max-width:680px; margin:0 auto; }

header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
h1 { font-size:1.15rem; font-weight:650; letter-spacing:.02em; margin:0; }
h1 span { color:var(--muted); font-weight:400; }
.actions { display:flex; align-items:center; gap:14px; }
.status { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--off); transition:background .3s; }
.dot.live { background:var(--ok); box-shadow:0 0 0 4px rgba(63,185,80,.18); }

button {
  font-family:inherit; font-size:.9rem; font-weight:550; cursor:pointer;
  color:var(--bg); background:var(--air); border:0; border-radius:8px; padding:10px 18px;
  transition:opacity .15s, transform .05s;
}
button:hover { opacity:.9; } button:active { transform:translateY(1px); }
button:disabled { background:var(--line); color:var(--muted); cursor:default; }

.group { margin-bottom:24px; }
.group-label {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); margin:0 0 10px 2px; display:flex; align-items:center; gap:8px;
}
.group-label::before { content:""; width:18px; height:2px; border-radius:2px; }
.group.weather .group-label::before { background:var(--weather); }
.group.air .group-label::before { background:var(--air); }

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:520px){ .grid { grid-template-columns:1fr; } }

metric-card {
  display:block;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 14px 10px; overflow:hidden; cursor:pointer;
  transition:border-color .15s;
}
metric-card:hover { border-color:var(--accent); }
metric-card .name { font-size:.74rem; color:var(--muted); letter-spacing:.04em; }
metric-card .val  {
  font-family:var(--mono); font-size:1.55rem; font-weight:600; margin-top:6px;
  font-variant-numeric:tabular-nums; color:var(--off);
}
metric-card .val .unit { font-size:.78rem; color:var(--muted); margin-left:3px; }
metric-card .val.live { color:var(--accent); }
.group.weather metric-card { --accent:var(--weather); }
.group.air     metric-card { --accent:var(--air); }

.spark { display:block; width:100%; height:40px; margin-top:8px; }

.note { font-size:.78rem; color:var(--muted); margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.note code { font-family:var(--mono); color:var(--text); }

/* ---- Detail popup -------------------------------------------------------- */
.modal-overlay {
  position:fixed; inset:0; z-index:50;
  display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(2px);
}
.modal-overlay.open { display:flex; }
.modal {
  --accent:var(--air);
  width:100%; max-width:640px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 20px;
}
.modal-overlay[data-group="weather"] .modal { --accent:var(--weather); }
.modal-overlay[data-group="air"]     .modal { --accent:var(--air); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-title { font-size:1.05rem; font-weight:600; margin:0; }
.modal-close {
  background:transparent; color:var(--muted); border:0; border-radius:8px;
  font-size:1.4rem; line-height:1; padding:4px 10px; cursor:pointer;
}
.modal-close:hover { background:var(--line); color:var(--text); }
.modal-stats {
  display:flex; flex-wrap:wrap; gap:14px; margin:12px 0 14px;
  font-size:.8rem; color:var(--muted); font-family:var(--mono);
}
.modal-stats b { color:var(--text); font-weight:600; }
.modal-chart-wrap { position:relative; touch-action:none; }
.modal-chart {
  display:block; width:100%; height:260px;
  background:#0b0e13; border:1px solid var(--line); border-radius:10px;
}

/* Hover/tap cursor on the popup chart */
.cursor-line, .cursor-dot, .cursor-tip { position:absolute; pointer-events:none; display:none; }
.modal-chart-wrap.active .cursor-line,
.modal-chart-wrap.active .cursor-dot,
.modal-chart-wrap.active .cursor-tip { display:block; }
.cursor-line { top:0; width:1px; background:var(--accent); opacity:.45; }
.cursor-dot  {
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--panel);
}
.cursor-tip {
  transform:translate(-50%,calc(-100% - 12px));
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:4px 8px; font-family:var(--mono); font-size:.72rem; color:var(--text); white-space:nowrap;
}
.spark path, .modal-chart path { fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.spark .area, .modal-chart .area { fill:var(--accent); opacity:.10; stroke:none; }