:root {
  color-scheme: light dark;
  --bg: Canvas;
  --fg: CanvasText;
  --muted: GrayText;
  --line: color-mix(in srgb, CanvasText 15%, transparent);
  --ok: #1a7f37;
  --warn: #9a6700;
  --bad: #cf222e;
  --info: #0969da;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); }
header h1 { font-size: 18px; margin: 0; }
.controls { display: flex; gap: 10px; align-items: center; }
main { max-width: 1100px; margin: 0 auto; padding: 16px 20px 60px; }
section { margin-bottom: 28px; }
h2 { font-size: 15px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
ul { list-style: none; margin: 0; padding: 0; }
li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.post { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.post header { padding: 0 0 6px; border: 0; display: block; }
.destinations li { padding-left: 8px; }
.actions { display: flex; gap: 8px; margin-top: 8px; }
button { font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
button.quiet { opacity: 0.75; }
button.danger { border-color: var(--bad); color: var(--bad); }
input, select { font: inherit; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: inherit; }
.muted { color: var(--muted); font-size: 12px; }
.pill { font-size: 12px; border-radius: 999px; padding: 0 8px; border: 1px solid var(--line); }
.status { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; }
.status.published, .status.ok { color: var(--ok); }
.status.failed, .status.partial, .status.needs_review, .status.uncertain, .status.revoked, .status.expired, .status.blocked { color: var(--bad); }
.status.deferred, .status.awaiting_human_finish, .status.expiring, .status.cancelled { color: var(--warn); }
.status.pending, .status.in_progress, .status.queued, .status.scheduled, .status.publishing, .status.draft, .status.unknown { color: var(--info); }
.warn { color: var(--warn); font-weight: 600; }
#message.error { color: var(--bad); }
pre { font-size: 12px; white-space: pre-wrap; }