:root { --ok:#2e9e4f; --warn:#e0a800; --crit:#d9480f; --down:#b00020; --stale:#9e9e9e; --bg:#fafafa; --fg:#222; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.4 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem; background:#263238; color:#fff; }
header a { color:#fff; text-decoration:none; }
header .brand { font-weight:600; }
main { padding:1rem; max-width:1400px; margin:0 auto; }
h1 { font-size:1.4rem; margin:.2rem 0 .8rem; }
h1 small { font-weight:normal; color:#666; }
h2 { font-size:1.1rem; margin:1.4rem 0 .5rem; }
.hint { color:#666; }
.empty { padding:2rem; text-align:center; color:#666; }
.error { color:var(--down); }
.scroll { overflow-x:auto; }
table { border-collapse:collapse; background:#fff; }
th, td { padding:.4rem .6rem; border:1px solid #ddd; text-align:left; white-space:nowrap; }
thead th { background:#eceff1; }
small { color:#666; font-weight:normal; }
.matrix th.client { text-align:left; }
.matrix th.client.offline { color:#999; }
.matrix td.cell { text-align:center; min-width:8rem; }
.matrix td.cell a { display:block; color:inherit; text-decoration:none; }
.matrix td.cell small { color:inherit; opacity:.8; }
.cell.ok { background:#e6f4ea; }
.cell.warn { background:#fff3cd; }
.cell.crit { background:#ffd9c7; }
.cell.down { background:#f8c9d0; }
.cell.stale { background:#eeeeee; color:#777; }
.cell.none { color:#aaa; text-align:center; }
.cell.skip { background:#f5f5f5; color:#bbb; }
.legend .pill { display:inline-block; padding:.1rem .5rem; border-radius:1rem; margin-right:.4rem; color:#fff; font-size:.85rem; }
.pill.ok { background:var(--ok); } .pill.warn { background:var(--warn); } .pill.crit { background:var(--crit); }
.pill.down { background:var(--down); } .pill.stale { background:var(--stale); } .pill.skip { background:#c5c5c5; }
.hops td, .runs td { text-align:right; }
.hops td.host, .runs td:first-child { text-align:left; font-family:ui-monospace, monospace; }
tr.lossy td { background:#fff3cd; }
tr.down td { background:#f8c9d0; }
form.login { max-width:22rem; margin:4rem auto; background:#fff; padding:1.5rem; border:1px solid #ddd; border-radius:.5rem; }
form.login label { display:block; margin:1rem 0; }
form.login input { display:block; width:100%; padding:.5rem; margin-top:.3rem; font-size:1rem; }
form.login button { padding:.5rem 1rem; font-size:1rem; }