:root {
  --bg: #0a0e0c;
  --panel: #0f1512;
  --line: #1d2a24;
  --text: #c9d6cf;
  --dim: #6b7f74;
  --accent: #39ff88;
  --amber: #ffb347;
  --red: #ff5c5c;
  --blue: #5cc8ff;
  --mono: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 var(--mono); }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.dim { color: var(--dim); }
strong { color: #e6efe9; }

.top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto; padding: 28px 20px 12px;
}
h1 { margin: 0; font-size: 26px; letter-spacing: .02em; }
.prompt { color: var(--accent); }
.role { margin: 4px 0 0; color: var(--text); }
.actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 7px 16px; border: 1px solid var(--accent); border-radius: 3px;
  color: var(--accent); letter-spacing: .05em;
}
.btn:hover, .btn:focus-visible { background: var(--accent); color: var(--bg); text-decoration: none; }

.state { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.badge { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }
.badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.badge.ok .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.badge.ok { color: var(--accent); }
.badge.stale .dot { background: var(--amber); }
.badge.stale { color: var(--amber); }
.badge.down .dot { background: var(--red); }
.badge.down { color: var(--red); }
.ts { color: var(--dim); font-size: 11px; }

.intro { max-width: 1100px; margin: 0 auto; padding: 0 20px 8px; color: var(--dim); }
.intro strong { color: var(--text); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; padding: 16px 20px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0 0 14px; min-width: 0; }
.panel h2 {
  margin: 0 0 12px; padding: 10px 16px; font-size: 13px; text-transform: uppercase; letter-spacing: .14em;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
}
.tag { color: var(--bg); background: var(--accent); padding: 0 6px; border-radius: 2px; font-size: 11px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.stats.small { margin-top: 12px; }
.stat { display: flex; flex-direction: column; min-width: 0; }
.label { color: var(--dim); text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.value { font-size: 28px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.25; }
.stats.small .value { font-size: 18px; }
.value-sm { font-size: 15px !important; color: var(--text) !important; font-weight: 600; }
.value.warn { color: var(--amber); }
.value.bad { color: var(--red); }
.value.na { color: var(--dim); }
.value.batt { color: var(--blue); font-size: 22px; }

.meter { margin: 14px 16px 0; height: 8px; background: var(--line); border-radius: 2px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--accent); transition: width .6s ease; }

.spark { display: block; width: calc(100% - 32px); height: 60px; margin: 12px 16px 0; }
.spark .area { fill: rgba(57, 255, 136, .12); }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark .empty { fill: var(--dim); font: 11px var(--mono); }

.sev { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 14px 16px 0; background: var(--line); border: 1px solid var(--line); }
.sev div { background: var(--bg); padding: 6px 8px; text-align: center; }
.sev .n { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sev .k { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.sev .critical .n { color: var(--red); } .sev .high .n { color: var(--amber); }
.sev .medium .n { color: var(--accent); } .sev .low .n { color: var(--blue); }

.note { margin: 12px 16px 0; color: var(--dim); font-size: 12px; }

.how { max-width: 1100px; margin: 0 auto; padding: 8px 20px; }
.how h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); font-weight: 400; }
.how ol { margin: 0; padding-left: 22px; }
.how li { margin: 6px 0; }

.foot { max-width: 1100px; margin: 0 auto; padding: 20px 20px 36px; text-align: center; color: var(--dim); }
.foot .sep { margin: 0 8px; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .top { padding-top: 20px; }
  .state { align-items: flex-start; }
  .value { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }