:root {
  --bg: #f6f7f5;
  --fg: #1d2420;
  --muted: #66706a;
  --card: #fff;
  --line: #dde2de;
  --accent: #0b6e4f;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121614; --fg: #e6ebe8; --muted: #93a09a; --card: #1b201d; --line: #2c342f; --accent: #3fbf8f; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
main { max-width: 900px; margin: 0 auto; padding: 16px; }
a { color: var(--accent); }
nav { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
nav form { margin-left: auto; }
button { font: inherit; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; }
input, select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
.login { max-width: 320px; margin: 10vh auto; display: grid; gap: 10px; }
.login label { display: grid; gap: 4px; }
.error { color: #c0392b; }
.message { padding: 8px 12px; background: var(--card); border-left: 3px solid var(--accent); }
.muted { color: var(--muted); }
h1 { font-size: 1.4rem; margin: 8px 0 12px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
h3 { font-size: .95rem; margin: 14px 0 6px; color: var(--muted); }
.matches { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.match { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.match .meta { grid-column: 2; color: var(--muted); font-size: .85rem; }
.badge { grid-row: span 2; align-self: center; font-weight: 700; font-size: .8rem; padding: 2px 6px; border-radius: 5px; background: var(--line); }
.p1 .badge { background: #c0392b; color: #fff; }
.p2 .badge { background: #e67e22; color: #fff; }
.p3 .badge { background: var(--accent); color: #fff; }
.live { color: #c0392b; font-weight: 600; }
.now { border-left: 3px solid #c0392b; padding-left: 10px; margin-bottom: 16px; }
.day { font-weight: 600; margin-top: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--card); }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
form.inline { display: inline-flex; gap: 4px; margin-left: auto; }
.rows li form.inline + form.inline { margin-left: 0; }
.stack div { display: grid; gap: 4px; margin-bottom: 10px; max-width: 320px; }
.errorlist { color: #c0392b; margin: 0; padding-left: 18px; }