:root {
  --bg: #0f1117;
  --fg: #e6edf3;
  --dim: #8b949e;
  --green: #3fb950;
  --yellow: #d29922;
  --red: #f85149;
  --cyan: #79c0ff;
  --line: #1f2630;
  --panel: rgba(255, 255, 255, 0.02);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  padding: 22px;
  margin: 0;
}

.wrap { max-width: 980px; margin: 0 auto; }
.title { display: flex; align-items: center; gap: 12px; }
.badge { padding: 4px 10px; border-radius: 999px; font-weight: 900; letter-spacing: 0.3px; }
.ok { background: rgba(63, 185, 80, 0.18); color: var(--green); border: 1px solid rgba(63, 185, 80, 0.35); }
.warn { background: rgba(210, 153, 34, 0.18); color: var(--yellow); border: 1px solid rgba(210, 153, 34, 0.35); }
.bad { background: rgba(248, 81, 73, 0.18); color: var(--red); border: 1px solid rgba(248, 81, 73, 0.35); }
.hdr { color: var(--cyan); font-weight: 900; letter-spacing: 0.5px; }
.dim { color: var(--dim); }
.sep { border-top: 1px solid var(--line); margin: 14px 0; }

pre {
  margin: 0;
  white-space: pre;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  line-height: 1.35;
}

.k { color: var(--cyan); font-weight: 900; }
.g { color: var(--green); font-weight: 900; }
.y { color: var(--yellow); font-weight: 900; }
.r { color: var(--red); font-weight: 900; }
.mut { color: var(--dim); }
.symG { color: var(--green); font-weight: 900; }
.symR { color: var(--red); font-weight: 900; }
.symY { color: var(--yellow); font-weight: 900; }
.symD { color: var(--dim); }