:root { color-scheme: light dark; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; max-width: 640px;
       margin: 3rem auto; padding: 0 1rem; line-height: 1.5; }
h1 { font-size: 1.3rem; word-break: break-all; }
.badge { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-weight: 600; }
.badge.ok { background: #16a34a22; color: #16a34a; }
.badge.warn { background: #ca8a0422; color: #ca8a04; }
.badge.down { background: #dc262622; color: #dc2626; }
.badge.unknown { background: #6b728022; color: #6b7280; }
form { display: flex; gap: .5rem; margin: 1.5rem 0; }
input[type=text] { flex: 1; padding: .6rem .8rem; font-size: 1rem; }
button { padding: .6rem 1.2rem; font-size: 1rem; cursor: pointer; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin-top: 1rem; font-size: .85rem; }
td.nowrap { white-space: nowrap; }
th, td { border-bottom: 1px solid #8883; padding: .4rem .5rem; text-align: left; }
img.screenshot { max-width: 100%; border: 1px solid #8883; border-radius: 6px; margin-top: 1rem; }
small.muted { color: #6b7280; display: block; margin-top: .3rem; }
a { color: inherit; }