:root { color-scheme: dark; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0b0f17; color:#e7edf6; }
header { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top:0; background: rgba(11,15,23,.9); backdrop-filter: blur(10px); z-index: 10; }
.muted { color: rgba(231,237,246,.7); }
.pill { display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: #7a879a; }
.dot.ok { background:#2dd4bf; }
.dot.bad { background:#fb7185; }
.container { max-width: 1200px; margin: 0 auto; padding: 18px; }
.section { margin-bottom: 32px; }
.section-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.game-card { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; margin-bottom: 10px; display:flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; transition: background 0.2s; }
.game-card:hover { background: rgba(255,255,255,.1); }
.game-card a { text-decoration: none; color: inherit; flex: 1; }
.game-info { flex: 1; }
.game-time { font-size: 12px; color: rgba(231,237,246,.6); margin-bottom: 4px; }
.game-teams { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.team { font-weight: 600; }
.score { font-size: 16px; font-weight: 700; min-width: 40px; text-align: center; }
.court { font-size: 11px; color: rgba(231,237,246,.5); margin-top: 4px; }
.team-badge { display: flex; align-items: center; gap: 6px; }
.team-badge img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background: rgba(255,255,255,.08); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-size: 11px; white-space: nowrap; }
.badge.live { border-color: rgba(251, 113, 133, .35); background: rgba(251, 113, 133, .14); }
.badge.past { border-color: rgba(122, 135, 154, .35); background: rgba(122, 135, 154, .14); }
.badge.future { border-color: rgba(45, 212, 191, .35); background: rgba(45, 212, 191, .14); }
.live-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #fb7185;
	box-shadow: 0 0 0 rgba(251, 113, 133, 0.6);
	animation: livePulse 2.5s ease-out infinite;
}
.toast { position: fixed; bottom: 14px; right: 14px; max-width: 420px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); display:none; }
.loading { text-align: center; padding: 40px; }
.spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.2); border-top-color: #2dd4bf; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes livePulse {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.6); }
	52% { transform: scale(1); box-shadow: 0 0 0 8px rgba(251, 113, 133, 0); }
	74% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }