:root{
  --bg:#0f172a;         /* slate-900 */
  --panel:#111827;      /* gray-900 */
  --text:#e5e7eb;       /* gray-200 */
  --muted:#9ca3af;      /* gray-400 */
  --accent:#22d3ee;     /* cyan-400 */
  --border:#1f2937;     /* gray-800 */
  --ok:#10b981;         /* emerald-500 */
  --warn:#f59e0b;       /* amber-500 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#0b1020 0%, #0f172a 100%);
  color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}
.container{width:min(960px,92%); margin:24px auto}
h1{margin:0 0 6px 0; font-weight:800; letter-spacing:.2px}
.subtitle{margin:4px 0 16px 0; color:var(--muted)}
.controls{display:flex; gap:12px; align-items:center; margin:12px 0}
button{
  background:var(--accent); color:#022c22; border:0; border-radius:8px; padding:8px 12px;
  font-weight:700; cursor:pointer;
}
button:hover{filter:brightness(0.95)}
.toggle{display:flex; align-items:center; gap:8px; color:var(--muted); user-select:none}
.status{min-height:20px; color:var(--muted); font-size:14px}

.teams{display:grid; gap:10px}
.team-row{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:12px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
}
.team-row:focus{outline:2px solid var(--accent); outline-offset:2px}
.team-main{display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:10px}
.pos{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.06); font-weight:800
}
.name{font-weight:700}
.meta{color:var(--muted); font-size:14px}
.chevron{color:var(--muted); transition:transform .18s ease}
.team-row[aria-expanded="true"] .chevron{transform:rotate(90deg)}

.matches{
  margin:10px 0 0 58px; border-left:2px dotted var(--border); padding-left:12px;
  display:grid; gap:6px
}
.match{
  display:flex; gap:8px; color:var(--text); font-size:14px
}
.match .md{color:var(--muted); width:64px}
.match .teams{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.badge{
  font-size:12px; padding:2px 6px; border-radius:999px; border:1px solid var(--border); color:var(--muted)
}
.badge.ok{border-color:var(--ok); color:var(--ok)}
.badge.warn{border-color:var(--warn); color:var(--warn)}
``