:root {
  color-scheme: light;
  --bg: #f6f6f4; --surface: #fcfcfb; --border: #e3e2de; --text: #0b0b0b; --text-2: #52514e; --muted: #7a7974;
  --accent: #2a78d6; --good: #0a7d32; --bad: #c62828; --warn: #a15c00; --grid: #ecebe7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211; --surface: #1a1a19; --border: #2e2e2c; --text: #f0efec; --text-2: #c3c2b7; --muted: #8f8e86;
    --accent: #3987e5; --good: #4cbb6c; --bad: #ef6b6b; --warn: #e0a040; --grid: #262624;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211; --surface: #1a1a19; --border: #2e2e2c; --text: #f0efec; --text-2: #c3c2b7; --muted: #8f8e86;
  --accent: #3987e5; --good: #4cbb6c; --bad: #ef6b6b; --warn: #e0a040; --grid: #262624;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, sans-serif; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; }
header .brand { font-weight: 650; margin-right: 8px; }
header nav a { color: var(--text-2); text-decoration: none; padding: 6px 8px; border-radius: 6px; }
header nav a.on { color: var(--text); background: var(--bg); font-weight: 600; }
header .right { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
main { max-width: 1080px; margin: 0 auto; padding: 16px; }
h1 { font-size: 20px; margin: 4px 0 12px; } h2 { font-size: 16px; margin: 22px 0 8px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.tile .k { color: var(--muted); font-size: 12px; } .tile .v { font-size: 20px; font-weight: 650; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--good); } .neg { color: var(--bad); } .muted { color: var(--muted); } .small { font-size: 12px; }
.pill { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-2); white-space: nowrap; }
.pill.won, .pill.winning, .pill.ok { color: var(--good); border-color: var(--good); }
.pill.lost, .pill.losing { color: var(--bad); border-color: var(--bad); }
.pill.paper { color: var(--warn); border-color: var(--warn); }
a { color: var(--accent); }
button, .btn { font: inherit; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
input { font: inherit; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); }
form.inline { display: inline; }
.login { max-width: 360px; margin: 12vh auto; }
.login input { width: 100%; margin: 8px 0 12px; }
.err { color: var(--bad); }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .zero { stroke: var(--grid); stroke-width: 1; }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; opacity: 0; }
.chart .dot.on { opacity: 1; }
.chart .hit { fill: transparent; }
.chart .xh { stroke: var(--muted); stroke-width: 1; opacity: 0; } .chart .xh.on { opacity: .6; }
.tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; font-size: 12px; color: var(--text); display: none; white-space: nowrap; }
.leg { padding: 4px 0; border-top: 1px dashed var(--border); } .leg:first-child { border-top: 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 12px; }
@media (max-width: 560px) { .hide-sm { display: none; } header .right { width: 100%; margin-left: 0; } }

.syncbox{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:16px}
.syncbox>div:first-child{flex:1 1 320px}
.syncbox>.small:last-child{flex-basis:100%}

.pill.on-pace { color: var(--good); border-color: var(--good); }
.pill.behind { color: var(--warn); border-color: var(--warn); }
.pill.live { color: var(--text-2); }
svg.pace { display: block; width: 100%; max-width: 360px; height: 8px; margin: 4px 0 2px; }
svg.pace .track { fill: var(--border); }
svg.pace .have { fill: var(--muted); }
svg.pace.on-pace .have, svg.pace.won .have { fill: var(--good); }
svg.pace.behind .have { fill: var(--warn); }
svg.pace.lost .have { fill: var(--bad); }
svg.pace .par { fill: var(--text); }