:root {
  color-scheme: light dark;
  --bg: #fafafa;
  --fg: #222;
  --border: #d0d0d0;
  --accent: #0267c1;
  --danger: #c10202;
  --success: #048c3a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
}
body {
  margin: 2rem;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.4;
}
h1 { margin-top: 0; }
form { display: flex; gap: .5rem; margin-bottom: 1rem; }
input {
  flex: 1;
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1rem;
}
button {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: .6rem 1rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
#status { margin: .5rem 0; min-height: 1.2rem; font-size: .9rem; }
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: .9rem;
}
th, td {
  border: 1px solid var(--border);
  padding: .45rem .5rem;
  vertical-align: top;
}
th { background: #f0f0f0; position: sticky; top: 0; }
tr:nth-child(even) { background: #f9f9f9; }
.success { color: var(--success); font-weight: 600; }
.danger { color: var(--danger); font-weight: 600; }
footer { margin-top: 3rem; font-size: .75rem; opacity: .7; }
@media (max-width: 720px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { margin-bottom: .7rem; border: 1px solid var(--border); padding: .3rem; }
  td { border: none; padding: .2rem .3rem; }
  td::before {
    content: attr(data-label);
    font-weight: 600;
    display: inline-block;
    min-width: 7.5rem;
  }
}