:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c2230;
  --border: #2a3140;
  --text: #e6edf3;
  --muted: #9aa7b4;
  --accent: #4aa8ff;
  --good: #34d399;
  --warn: #fbbf24;
  --event: #f472b6;
  --idle: #6b7684;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding: 20px;
  max-width: 640px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.35rem; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 20px; }

.controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
button {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 120px;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #04121f; }

.sensor-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--muted); margin-bottom: 16px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--idle); }
.dot.live { background: var(--good); box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: pulse 1.4s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

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

.state-badge {
  display: inline-block; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 12px; border-radius: 999px; font-size: 0.85rem;
  background: var(--panel-2); color: var(--idle); border: 1px solid var(--border);
}
.state-badge.IDLE { color: var(--idle); }
.state-badge.ACTIVE { color: var(--good); border-color: var(--good); }
.state-badge.REFRACTORY { color: var(--warn); border-color: var(--warn); }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.metric { background: var(--panel-2); border-radius: 10px; padding: 12px; text-align: center; }
.metric .label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.metric .value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.metric .unit { font-size: 0.72rem; color: var(--muted); }

.bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin-top: 8px; }
.bar > span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 0.12s linear; }

h2 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 10px; }

#log {
  list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto;
  font-variant-numeric: tabular-nums;
}
#log li {
  padding: 9px 12px; border-radius: 8px; margin-bottom: 6px; font-size: 0.9rem;
  background: var(--panel-2); border-left: 3px solid var(--border); display: flex; gap: 10px;
}
#log li .t { color: var(--muted); font-size: 0.8rem; min-width: 62px; }
#log li.start { border-left-color: var(--good); }
#log li.end   { border-left-color: var(--idle); }
#log li.event { border-left-color: var(--event); }
#log li.info  { border-left-color: var(--accent); }
#log li .badge {
  font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: rgba(244,114,182,0.15); color: var(--event); align-self: center;
}
.empty { color: var(--muted); font-size: 0.9rem; }

.disclaimer {
  font-size: 0.8rem; color: var(--muted); background: rgba(244,114,182,0.08);
  border: 1px solid rgba(244,114,182,0.25); border-radius: 10px; padding: 10px 12px; margin-top: 6px;
}
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }