:root {
  --up: #1b8a3a;
  --down: #c0392b;
  --unknown: #777;
  --bg: #f5f6f8;
  --card: #fff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: #1a1a1a;
}
header, main { max-width: 760px; margin: 0 auto; padding: 1rem; }
h1 { margin: .2rem 0; }
.target { color: #555; margin: 0 0 1rem; }
.banner {
  border-radius: 12px;
  padding: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
}
.banner--up { background: var(--up); }
.banner--down { background: var(--down); }
.banner--unknown { background: var(--unknown); }
.banner__state { font-size: 2rem; font-weight: 700; text-transform: uppercase; }
.banner__detail { font-size: 1.1rem; margin-top: .25rem; }
.banner__check { font-size: .85rem; opacity: .85; margin-top: .5rem; }
.toolbar { display: flex; gap: .5rem; margin-bottom: 1rem; }
button {
  padding: .5rem .9rem;
  border: 1px solid #ccc;
  background: var(--card);
  border-radius: 8px;
  cursor: pointer;
  font-size: .95rem;
}
button:hover { background: #eee; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid #eee; }
th { background: #fafafa; }
.tag { font-weight: 700; }
.tag--up { color: var(--up); }
.tag--down { color: var(--down); }
.tag--unknown { color: var(--unknown); }
.empty { color: #777; }