:root { color-scheme: light; --ink:#161616; --muted:#777872; --line:#e3e3de; --accent:#0f8b8d; font-family:'Segoe UI',Arial,sans-serif; background:#fafaf8; color:var(--ink); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; padding:26px 22px; min-width:320px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
main { max-width:1240px; margin:auto; }
.eyebrow { margin:0 0 6px; text-transform:uppercase; font-size:11px; letter-spacing:.18em; color:var(--muted); }
h1 { margin:0; font-size:25px; letter-spacing:-.03em; }
.sync { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; white-space:nowrap; }
.signal { width:6px; height:6px; border-radius:50%; background:#999; }
.signal.healthy { background:var(--accent); }
.signal.stale { background:#ba3930; }
.pagehead { margin:0 0 20px; }
.pagehead .eyebrow { color:var(--accent); font-weight:750; }
.pagehead h1 { font-size:24px; letter-spacing:-.03em; margin:0 0 8px; }
.pagehead > p:last-child { font-size:15px; line-height:1.6; margin:0; }
.score-strip { display:flex; align-items:center; gap:25px; border-bottom:1px solid var(--line); padding:14px 0 20px; margin-bottom:18px; }
.score-strip > div { display:flex; align-items:baseline; gap:6px; }
.score-strip strong { font-size:13px; font-variant-numeric:tabular-nums; }
.score-strip span { font-size:11px; color:var(--muted); }
.score-strip .date-block { flex-direction:column; gap:3px; margin-right:auto; }
.date-nav { display:flex; align-items:center; gap:5px; }
.date-nav input { min-height:28px; width:132px; color:var(--accent); font-weight:700; }
.date-nav button { min-width:28px; min-height:28px; border:1px solid var(--line); border-radius:4px; background:white; color:var(--ink); line-height:1; }
.date-nav button:disabled { cursor:not-allowed; opacity:.35; }
.date-nav .today-button { width:auto; padding:0 8px; color:var(--accent); font-size:11px; font-weight:700; }
.status-tabs { display:inline-flex; border:1px solid var(--line); background:white; }
.status-tabs button { border:0; border-right:1px solid var(--line); padding:7px 12px; color:var(--muted); font-size:12px; font-weight:650; background:transparent; }
.status-tabs button:last-child { border-right:0; }
.status-tabs button.active { background:var(--accent); color:white; }
.controls { display:flex; align-items:end; flex-wrap:wrap; gap:14px; margin:16px 0; }
.controls label { display:grid; gap:4px; font-size:11px; color:var(--muted); }
input,select { background:white; border:1px solid var(--line); color:var(--ink); border-radius:5px; padding:6px 8px; font-size:12px; min-height:30px; max-width:210px; }
.ranking-source { max-width:860px; background:#f3f2ed; border-left:3px solid var(--accent); padding:9px 12px; color:#62635e; font-size:11.5px; line-height:1.6; margin:8px 0 22px; }
.score-section { margin:0 0 28px; }
.section-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; border-bottom:2px solid var(--ink); margin-bottom:12px; padding-bottom:6px; }
.section-heading h3 { font-size:15px; margin:0; }
.section-heading span { font-size:11px; color:var(--muted); }
.games { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:start; }
.game-card { min-width:0; border:1px solid var(--line); background:white; padding:9px 11px; }
.game-card[data-status='scheduled'] { background:#fcfbf8; }
.team { display:grid; grid-template-columns:27px minmax(0,1fr) 26px; align-items:center; gap:6px; padding:4px 0; font-variant-numeric:tabular-nums; }
.rank { color:var(--accent); font-size:10px; font-weight:750; }
.team-copy { display:flex; align-items:baseline; gap:7px; min-width:0; }
.team-copy strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; }
.team-copy > span { color:#94958e; font-size:10px; white-space:nowrap; }
.sets { font-size:20px; color:#999b94; text-align:right; line-height:1; }
.team.has-set-scores { grid-template-columns:27px minmax(0,1fr) 22px 98px; }
.inline-scores { display:grid; grid-template-columns:repeat(5,16px); gap:3px; justify-content:end; margin-left:6px; font-size:11px; font-variant-numeric:tabular-nums; text-align:right; color:#92948c; }
.inline-scores .set-winner { color:var(--ink); font-weight:750; }
.team.has-set-scores .team-copy { flex-wrap:wrap; column-gap:5px; row-gap:0; }
.winner strong,.winner .sets { font-weight:750; color:var(--ink); }
.game-meta { display:flex; align-items:center; gap:8px; margin-top:7px; padding-top:7px; border-top:1px solid #f0f0eb; font-size:10px; }
.status-pill { text-transform:uppercase; font-size:9px; font-weight:750; color:var(--muted); }
.status-live { background:#b4372e; color:white; border-radius:2px; padding:2px 4px; }
.start-time { font-size:10px; color:var(--muted); font-weight:650; }
.box-toggle { margin-left:auto; background:transparent; color:var(--accent); border:0; padding:0; font-size:11px; font-weight:650; }
.set-line { display:flex; gap:8px; padding:10px 0 4px; overflow-x:auto; }
.set-team-labels,.set-cell { display:grid; grid-template-rows:12px 16px 16px; gap:2px; min-width:20px; text-align:right; font-variant-numeric:tabular-nums; font-size:11px; }
.set-team-labels { margin-right:auto; text-align:left; color:var(--accent); font-size:10px; }
.set-team-labels::before { content:''; }
.set-cell small { color:var(--muted); font-size:9px; }
.set-line.no-detail { color:var(--muted); font-size:11px; }
.empty { padding:28px 12px; color:var(--muted); text-align:center; font-size:13px; }
.empty span { display:block; margin-top:7px; }
.section-empty { font-size:12px; color:var(--muted); margin:6px 0 0; }
.stale-banner { padding:10px 12px; border-left:3px solid #b4372e; background:#fbece7; font-size:12px; margin-bottom:18px; }
@media(max-width:1000px) { .games { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
  body { padding:18px 14px; }
  .pagehead { margin:0 0 20px; }
  .pagehead h1 { font-size:22px; }
  .games { grid-template-columns:minmax(0,1fr); }
  .score-strip { gap:12px; flex-wrap:wrap; }
  .score-strip .date-block { flex-basis:100%; }
  .controls { gap:10px; }
  .controls label { flex:1; min-width:120px; }
  input,select { width:100%; max-width:none; }
  .controls .status-tabs { margin-top:4px; }
}