:root {
  --bg: #0e1116;
  --card: #161b23;
  --line: #262e3b;
  --text: #e8edf4;
  --muted: #8b96a7;
  --primary: #2f9e44;
  --primary-hi: #37b24d;
  /* zone colors */
  --z-rest: #6b7686;
  --z-end: #4dabf7;   /* Endurance  — calm blue   */
  --z-aer: #51cf66;   /* Aerobic    — green       */
  --z-thr: #ffa94d;   /* Threshold  — amber       */
  --z-max: #ff6b6b;   /* Maximum    — red         */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cabin {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plate h1 {
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  margin: 8px 0 2px;
}
.plate .sub { color: var(--muted); margin: 0; font-size: 0.95rem; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn {
  background: #232b38;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
  flex: 1;
}
.btn.primary:active { background: var(--primary-hi); }
.btn.primary:disabled {
  background: #2a3140; color: var(--muted); cursor: not-allowed;
}
.btn.ghost { background: transparent; }
.hidden { display: none !important; }
.status { color: var(--muted); font-size: 0.9rem; margin: 10px 0 0; }
.status.ok { color: var(--z-aer); }
.warn {
  color: #ffd8a8;
  background: #241c10;
  border: 1px solid #5c4a25;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.92rem;
}
.setup-label { margin: 0 0 8px; color: var(--muted); font-size: 0.92rem; }
input[type=number] {
  background: #0f1319;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 1rem;
  width: 90px;
}
.bands { color: var(--muted); font-size: 0.85rem; margin: 10px 0 0; }
.live { text-align: center; }
.big-wrap { padding: 8px 0 14px; }
.big {
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--z-rest);
}
.zone-name {
  margin-top: 6px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--z-rest);
}
.counters {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  text-align: left;
}
.counter {
  flex: 1;
  background: #10151d;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.c-value { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-note { font-size: 0.72rem; color: var(--muted); }
.fineprint { color: #5b6675; font-size: 0.8rem; margin: 12px 0 0; }