:root { color-scheme: light dark; --fg: #1b1f24; --bg: #fff; --muted: #5b6570; --line: #d0d7de; --accent: #0b5cad; --warn: #9a5b00; --err: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --fg: #e6e9ec; --bg: #14181c; --muted: #9aa5b1; --line: #2d353d; --accent: #6cb2f5; --warn: #e0a64a; --err: #f2867f; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
header, main, footer { max-width: 64rem; margin: 0 auto; padding: 0.75rem 1rem; }
header { display: flex; align-items: center; gap: 1.25rem; border-bottom: 1px solid var(--line); }
header form { margin-left: auto; }
nav a { margin-right: 1rem; }
a, button.link { color: var(--accent); }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
footer { color: var(--muted); font-size: 0.8rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
audio { width: 14rem; max-width: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.stack { display: grid; gap: 0.75rem; max-width: 22rem; }
label { display: grid; gap: 0.25rem; font-size: 0.9rem; }
input, select, button { font: inherit; padding: 0.4rem 0.5rem; }
.error { color: var(--err); }
.warn { color: var(--warn); }
.pager a { margin-right: 1rem; }
@media (max-width: 40rem) { th:nth-child(3), td:nth-child(3) { display: none; } }