:root {
  --bg: #0b1b2b;
  --panel: #162a3d;
  --fg: #e8eef5;
  --muted: #9fb0c4;
  --dim: #6c7d92;
  --flash-up: rgba(168, 230, 207, 0.55);
  --flash-down: rgba(255, 214, 214, 0.55);
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 24px;
  font-size: 14px;
}
h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 15px; margin: 24px 0 8px; font-weight: 600; }
p.sub { color: var(--muted); margin: 0 0 10px; max-width: 980px; font-size: 13px; }
p.status { color: var(--muted); margin: 0 0 14px; font-size: 12px; }
p.status .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px #4ade80; vertical-align: middle;
  margin-right: 6px;
}
.legend { display: flex; gap: 18px; margin: 14px 0; font-size: 12px; color: var(--muted); }
.legend span.sw {
  display: inline-block; width: 14px; height: 14px; vertical-align: middle;
  margin-right: 6px; border-radius: 3px;
}
table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 12px;
}
th, td {
  padding: 5px 7px;
  text-align: center;
  min-width: 30px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
th.team {
  text-align: left;
  background: var(--panel);
  color: var(--fg);
  min-width: 170px;
}
td.pts { background: var(--panel); color: var(--muted); }
thead th { color: #0b1b2b; font-weight: 700; }
td.cell-flash-up { animation: flashUp 1.2s ease-out; }
td.cell-flash-down { animation: flashDown 1.2s ease-out; }
@keyframes flashUp {
  0% { box-shadow: 0 0 0 3px var(--flash-up); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes flashDown {
  0% { box-shadow: 0 0 0 3px var(--flash-down); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
ul.fixtures {
  columns: 2;
  column-gap: 24px;
  font-size: 13px;
  color: var(--muted);
  padding-left: 18px;
}
ul.fixtures li { margin: 3px 0; break-inside: avoid; }
.vs { color: var(--dim); }
.score { color: var(--fg); font-weight: 600; margin-left: 6px; }
.badge {
  display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 700;
  border-radius: 3px; margin-left: 6px; vertical-align: middle;
}
.badge.live { background: #ef4444; color: #fff; }
.badge.ft { background: #475569; color: #fff; }
footer {
  margin-top: 28px;
  color: var(--dim);
  font-size: 11px;
  max-width: 980px;
  line-height: 1.5;
}