body { font-family: Arial, sans-serif; margin:15px; background:#f7f9fb; color:#222; }
h1 { margin:0 0 12px; font-size:22px; }
.controls { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.controls label { font-size:14px; }
select { padding:4px 6px; }
#statusBar { font-size:12px; color:#555; margin-top:4px; }
.tabs { display:flex; overflow-x:auto; gap:4px; margin:10px 0; }
.tab-btn { padding:6px 12px; background:#e0e6ed; border:1px solid #c0c7d0; cursor:pointer; font-size:13px; border-radius:4px; }
.tab-btn.active { background:#2d7bdc; color:#fff; border-color:#2d7bdc; }
.race-header { background:#fff; border:1px solid #d5dde4; padding:10px; border-radius:6px; display:flex; gap:40px; flex-wrap:wrap; font-size:14px; margin-bottom:10px; }
.race-header div span.label { font-weight:600; color:#555; margin-right:4px; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { padding:6px 8px; border:1px solid #d8dfe5; font-size:13px; text-align:center; }
th { background:#eef3f7; font-weight:600; }
tbody tr:nth-child(even) { background:#f9fcfe; }


.placeholder { padding:30px; text-align:center; color:#777; background:#fff; border:1px dashed #ccc; border-radius:6px; }
.footer-note { font-size:11px; color:#777; margin-top:18px; }
.badge-live { background:#ff4d4f; color:#fff; padding:2px 6px; border-radius:4px; font-size:11px; margin-left:6px; }



/* Pulse animation for LIVE badge */
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}

.badge-live{
  display: inline-block; /* ensure transform works */
  animation: pulse 2s ease-in-out infinite;
}