:root {
  --bg: #fff;
  --text: #1c2027;
  --muted: #6b7280;
  --line: #eceef1;
  --hover: #f5f7fa;
  --link: #2f6fed;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b;
    --text: #e6e8ec;
    --muted: #9099a8;
    --line: #262a31;
    --hover: #1d2026;
    --link: #7aa2ff;
  }
}

body {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px; word-break: break-all; }
h1 a { color: var(--link); text-decoration: none; }

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th:hover { color: var(--text); }
th[aria-sort="ascending"]::after { content: " ▲"; font-size: 10px; }
th[aria-sort="descending"]::after { content: " ▼"; font-size: 10px; }

td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
tr:hover td { background: var(--hover); }

td a { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; }
td a svg { width: 20px; height: 20px; flex: none; }

.num, .date { text-align: right; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
th.num, th.date { text-align: right; }

@media (max-width: 560px) { .date { display: none; } }

#status { color: var(--muted); text-align: center; padding: 32px 0; }