Updated Web UI

internal/ui/dashboard.go

@@ -167,46 +167,53 @@ func (m DashboardModel) View() string {
 
 	titleStyle := lipgloss.NewStyle().
 		Foreground(lipgloss.Color(colorF1Red)).
-		Bold(true)
+		Bold(true).
+		MarginBottom(1)
 
 	now := time.Now()
 	weekendUnderway := meetingHasStarted(*m.next, now)
 
-	sb.WriteString("\n")
+	// Left panel: Meeting Info & Countdown
+	var leftSide strings.Builder
+	leftSide.WriteString("\n")
 	if weekendUnderway {
-		sb.WriteString(titleStyle.Render(fmt.Sprintf("  CURRENT RACE: %s", m.next.MeetingOfficialName)) + "\n")
+		leftSide.WriteString(titleStyle.Render(fmt.Sprintf("CURRENT RACE: %s", m.next.MeetingOfficialName)) + "\n")
 	} else {
-		sb.WriteString(titleStyle.Render(fmt.Sprintf("  NEXT RACE: %s", m.next.MeetingOfficialName)) + "\n")
+		leftSide.WriteString(titleStyle.Render(fmt.Sprintf("NEXT RACE: %s", m.next.MeetingOfficialName)) + "\n")
 	}
-	sb.WriteString(fmt.Sprintf("  %s • %s\n", countryFlag(m.next.CountryCode), m.next.Location))
+	leftSide.WriteString(fmt.Sprintf(" %s • %s\n", countryFlag(m.next.CountryCode), m.next.Location))
 
 	currentSession, nextSession := currentAndNextSession(m.sessions, now)
 
-	sb.WriteString("\n")
+	leftSide.WriteString("\n")
 	if currentSession != nil {
-		liveBadge := lipgloss.NewStyle().Background(lipgloss.Color(colorSoft)).Foreground(lipgloss.Color(colorSurface0)).Bold(true).Padding(0, 1).Render("LIVE")
+		liveBadge := lipgloss.NewStyle().Background(lipgloss.Color(colorF1Red)).Foreground(lipgloss.Color(colorWhite)).Bold(true).Padding(0, 1).Render("LIVE")
-		sb.WriteString(fmt.Sprintf("  %s %s\n", liveBadge, currentSession.SessionName))
+		leftSide.WriteString(fmt.Sprintf(" %s %s\n", liveBadge, currentSession.SessionName))
 	} else if nextSession != nil {
 		nextStart, err := sessionStartTime(*nextSession)
 		if err != nil {
-			sb.WriteString("  " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Schedule unavailable") + "\n")
+			leftSide.WriteString(" " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Schedule unavailable") + "\n")
 		} else {
 			diff := nextStart.Sub(now)
 			days := int(diff.Hours() / 24)
 			hours := int(diff.Hours()) % 24
 			mins := int(diff.Minutes()) % 60
 			secs := int(diff.Seconds()) % 60
-			sb.WriteString(fmt.Sprintf("  Next: %s in %dd %02dh %02dm %02ds\n", nextSession.SessionName, days, hours, mins, secs))
+
+			countdown := fmt.Sprintf("%dd %02dh %02dm %02ds", days, hours, mins, secs)
+			leftSide.WriteString(fmt.Sprintf(" Next: %s\n", styleBold.Render(nextSession.SessionName)))
+			leftSide.WriteString(fmt.Sprintf(" Starts in: %s\n", styleCountdown.Render(countdown)))
 		}
 	} else {
-		sb.WriteString("  " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Weekend Finished") + "\n")
+		leftSide.WriteString(" " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Weekend Finished") + "\n")
 	}
 
-	sb.WriteString("\n")
+	leftPanel := stylePanelBorder.Width(w/2 - 4).Render(leftSide.String())
 
-	// Weekend Schedule
+	// Right panel: Weekend Schedule
+	var rightSide strings.Builder
 	if len(m.sessions) > 0 {
-		sb.WriteString(lipgloss.NewStyle().Foreground(lipgloss.Color(colorWhite)).Bold(true).Render("  WEEKEND SCHEDULE (Local Time)") + "\n")
+		rightSide.WriteString(lipgloss.NewStyle().Foreground(lipgloss.Color(colorWhite)).Bold(true).Render("WEEKEND SCHEDULE (Local Time)") + "\n\n")
 		for _, s := range m.sessions {
 			stLocal, err := sessionStartTime(s)
 			if err != nil {
@@ -219,13 +226,20 @@ func (m DashboardModel) View() string {
 			if end, err := sessionEndTime(s); err == nil && !now.Before(end) {
 				rowStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted))
 			} else if currentSession != nil && currentSession.SessionKey == s.SessionKey {
-				rowStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(colorSoft)).Bold(true)
+				rowStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(colorF1Red)).Bold(true)
 			}
 
-			sb.WriteString(rowStyle.Render(fmt.Sprintf("  %-15s %-12s %s", s.SessionName, day, tStr)) + "\n")
+			rightSide.WriteString(rowStyle.Render(fmt.Sprintf("%-15s %-12s %s", s.SessionName, day, tStr)) + "\n")
 		}
 	}
+	rightPanel := stylePanelBorder.Width(w/2 - 4).Render(rightSide.String())
 
-	sb.WriteString("\n" + helpBar("1-6 tabs", "q quit"))
+	if m.width > 80 {
+		sb.WriteString(lipgloss.JoinHorizontal(lipgloss.Top, leftPanel, "  ", rightPanel))
+	} else {
+		sb.WriteString(leftPanel + "\n" + rightPanel)
+	}
+
+	sb.WriteString("\n\n" + helpBar("1-7 tabs", "q quit"))
 	return sb.String()
 }

internal/ui/standings.go

@@ -347,13 +347,23 @@ func (m StandingsModel) renderDriverStandings() string {
 		colorBar := lipgloss.NewStyle().Foreground(lipgloss.Color(teamColor)).Render("┃")
 		pointsBar := renderPointsBar(s.PointsCurrent, maxPoints, barWidth, teamColor)
 
+		// Styling for top 3
+		nameStyle := lipgloss.NewStyle()
+		if i == 0 {
+			nameStyle = stylePositionFirst
+		} else if i == 1 {
+			nameStyle = stylePositionSecond
+		} else if i == 2 {
+			nameStyle = stylePositionThird
+		}
+
 		var row string
 		if compact {
 			row = fmt.Sprintf("  %s  %s  %s  %s  %s  %s",
 				padRightVisible(pos, 3),
 				delta,
 				colorBar,
-				padRight(acronym, 4),
+				nameStyle.Render(padRight(acronym, 4)),
 				padRight(truncate(team, teamWidth), teamWidth),
 				padLeft(fmt.Sprintf("%.0f", s.PointsCurrent), 5),
 			)
@@ -362,8 +372,8 @@ func (m StandingsModel) renderDriverStandings() string {
 				padRightVisible(pos, 4),
 				delta,
 				colorBar,
-				padRight(acronym, 4),
+				nameStyle.Render(padRight(acronym, 4)),
-				padRight(truncate(name, nameWidth), nameWidth),
+				nameStyle.Render(padRight(truncate(name, nameWidth), nameWidth)),
 				padRight(truncate(team, teamWidth), teamWidth),
 				padLeft(fmt.Sprintf("%.0f", s.PointsCurrent), 6),
 				pointsBar,

internal/web/assets/app.js

@@ -615,6 +615,32 @@ function standingsPage() {
           : [];
       } catch (_) { this.teamStandings = []; }
     },
+
+    standingsBarWidth(pts, list) {
+      if (!list || !list.length) return 0;
+      const max = list[0].points_current;
+      return max > 0 ? Math.round((pts / max) * 100) : 0;
+    },
+
+    teamColor(name) {
+      // Map known constructor names to brand colors
+      const map = {
+        'Red Bull Racing': '#3671C6',
+        'Mercedes':        '#27F4D2',
+        'Ferrari':         '#E8002D',
+        'McLaren':         '#FF8000',
+        'Aston Martin':    '#229971',
+        'Alpine':          '#FF87BC',
+        'Williams':        '#64C4FF',
+        'Racing Bulls':    '#6692FF',
+        'Kick Sauber':     '#52E252',
+        'Haas F1 Team':    '#B6BABD',
+      };
+      for (const key of Object.keys(map)) {
+        if (name && name.includes(key.split(' ')[0])) return map[key];
+      }
+      return '#666688';
+    },
   };
 }
 

internal/web/assets/index.html

@@ -40,6 +40,16 @@
       <div class="home-hero" x-show="!loading">
         <!-- Next race -->
         <div class="card next-race" x-show="nextRace">
+          <!-- Speed lines background -->
+          <div class="speed-lines" aria-hidden="true">
+            <div class="speed-line"></div><div class="speed-line"></div><div class="speed-line"></div>
+            <div class="speed-line"></div><div class="speed-line"></div><div class="speed-line"></div>
+            <div class="speed-line"></div><div class="speed-line"></div>
+          </div>
+          <!-- Circuit watermark -->
+          <div class="circuit-watermark" x-text="nextRace?.circuit_short_name||''"></div>
+          <!-- Checkered flag pattern -->
+          <div class="checkered-corner" aria-hidden="true"></div>
           <div class="card-label" x-text="heroLabel"></div>
           <div class="next-race-flag" x-text="flagEmoji(nextRace?.country_code)"></div>
           <h2 class="next-race-name" x-text="nextRace?.meeting_name||''"></h2>
@@ -51,8 +61,10 @@
         <!-- Championship sidebar -->
         <div class="card champ-sidebar">
           <div class="card-label">DRIVERS' CHAMPIONSHIP</div>
-          <template x-for="d in champDrivers.slice(0,5)" :key="d.driver_number">
+          <template x-for="(d, idx) in champDrivers.slice(0,10)" :key="d.driver_number">
-            <div class="champ-row" :style="`--team-color:#${d.team_colour}`">
+            <div class="champ-row" 
+                 :class="idx === 0 ? 'podium-1' : (idx === 1 ? 'podium-2' : (idx === 2 ? 'podium-3' : ''))"
+                 :style="`--team-color:#${d.team_colour}`">
               <span class="champ-pos" x-text="d.position_current"></span>
               <span class="team-swatch"></span>
               <span class="champ-tla" x-text="d.name_acronym||d.driver_number"></span>
@@ -74,7 +86,8 @@
       <div class="section-label" x-text="season + ' SEASON'"></div>
       <div class="meetings-grid" x-show="!loading">
         <template x-for="m in meetings" :key="m.meeting_key">
-          <a class="meeting-card" :class="{past: isPast(m)}" :href="`#/race/${m.meeting_key}`">
+          <a class="meeting-card" :class="{past: isPast(m), 'meeting-next': m === nextRace}" :href="`#/race/${m.meeting_key}`">
+            <div class="meeting-card-accent"></div>
             <div class="meeting-flag" x-text="flagEmoji(m.country_code)"></div>
             <div class="meeting-name" x-text="m.meeting_name"></div>
             <div class="meeting-circuit" x-text="m.circuit_short_name"></div>
@@ -285,32 +298,73 @@
         </template>
       </div>
 
-      <table class="data-table" x-show="!loading && view==='drivers'">
+      <!-- Drivers standings table -->
-        <thead><tr><th>POS</th><th>DRIVER</th><th>TEAM</th><th>PTS</th></tr></thead>
+      <div class="standings-table" x-show="!loading && view==='drivers'">
-        <tbody>
+        <div class="standings-header">
-          <template x-for="d in driverStandings" :key="d.driver_number">
+          <span class="sh-pos">POS</span>
-            <tr :style="`--team-color:#${d.team_colour}`">
+          <span class="sh-driver">DRIVER</span>
-              <td x-text="d.position_current"></td>
+          <span class="sh-team">TEAM</span>
-              <td><span class="team-swatch"></span><span x-text="d.full_name||d.driver_number"></span></td>
+          <span class="sh-bar"></span>
-              <td x-text="d.team_name||'-'"></td>
+          <span class="sh-pts">PTS</span>
-              <td x-text="d.points_current"></td>
+          <span class="sh-gap">GAP</span>
-            </tr>
+        </div>
-          </template>
+        <template x-for="(d, idx) in driverStandings" :key="d.driver_number">
-        </tbody>
+          <div class="standings-row"
-      </table>
+               :class="idx === 0 ? 'podium-1' : (idx === 1 ? 'podium-2' : (idx === 2 ? 'podium-3' : ''))"
+               :style="`--team-color:#${d.team_colour}`">
+            <!-- Team color left border (via CSS) -->
+            <div class="sr-pos">
+              <span class="trophy-icon" x-show="idx < 3" x-text="['🥇','🥈','🥉'][idx]"></span>
+              <span x-show="idx >= 3" x-text="d.position_current" class="pos-num"></span>
+            </div>
+            <div class="sr-driver">
+              <span class="driver-num-badge" :style="`background:#${d.team_colour}22; color:#${d.team_colour}; border-color:#${d.team_colour}55`" x-text="d.driver_number"></span>
+              <div class="sr-driver-info">
+                <span class="sr-full-name" x-text="d.full_name||d.driver_number"></span>
+                <span class="sr-tla" x-text="d.name_acronym||''"></span>
+              </div>
+            </div>
+            <div class="sr-team" x-text="d.team_name||'-'"></div>
+            <div class="sr-bar-wrap">
+              <div class="sr-bar" :style="`width:${standingsBarWidth(d.points_current, driverStandings)}%;`"></div>
+            </div>
+            <div class="sr-pts" x-text="d.points_current"></div>
+            <div class="sr-gap" x-text="idx === 0 ? 'LEADER' : '-' + (driverStandings[0].points_current - d.points_current)"></div>
+          </div>
+        </template>
+      </div>
 
-      <table class="data-table" x-show="!loading && view==='teams'">
+      <!-- Constructors standings table -->
-        <thead><tr><th>POS</th><th>TEAM</th><th>PTS</th></tr></thead>
+      <div class="standings-table" x-show="!loading && view==='teams'">
-        <tbody>
+        <div class="standings-header constructor-header">
-          <template x-for="t in teamStandings" :key="t.team_name">
+          <span class="sh-pos">POS</span>
-            <tr>
+          <span class="sh-driver">CONSTRUCTOR</span>
-              <td x-text="t.position_current"></td>
+          <span class="sh-bar"></span>
-              <td x-text="t.team_name"></td>
+          <span class="sh-pts">PTS</span>
-              <td x-text="t.points_current"></td>
+          <span class="sh-gap">GAP</span>
-            </tr>
+        </div>
-          </template>
+        <template x-for="(t, idx) in teamStandings" :key="t.team_name">
-        </tbody>
+          <div class="standings-row constructor-row"
-      </table>
+               :class="idx === 0 ? 'podium-1' : (idx === 1 ? 'podium-2' : (idx === 2 ? 'podium-3' : ''))"
+               :style="`--team-color:${teamColor(t.team_name)}`">
+            <div class="sr-pos">
+              <span class="trophy-icon" x-show="idx < 3" x-text="['🥇','🥈','🥉'][idx]"></span>
+              <span x-show="idx >= 3" x-text="t.position_current" class="pos-num"></span>
+            </div>
+            <div class="sr-driver">
+              <div class="constructor-color-block" :style="`background:${teamColor(t.team_name)}`"></div>
+              <div class="sr-driver-info">
+                <span class="sr-full-name" x-text="t.team_name"></span>
+              </div>
+            </div>
+            <div class="sr-bar-wrap">
+              <div class="sr-bar" :style="`width:${standingsBarWidth(t.points_current, teamStandings)}%;`"></div>
+            </div>
+            <div class="sr-pts" x-text="t.points_current"></div>
+            <div class="sr-gap" x-text="idx === 0 ? 'LEADER' : '-' + (teamStandings[0].points_current - t.points_current)"></div>
+          </div>
+        </template>
+      </div>
     </div>
   </template>
 

internal/web/assets/style.css

@@ -145,74 +145,183 @@ a { color: inherit; text-decoration: none; }
   .home-hero { grid-template-columns: 1fr; }
 }
 
-/* Next race card */
+/* ---- Next race card — rich hero ---- */
-.next-race { text-align: center; }
+.next-race {
-.next-race-flag   { font-size: 3rem; margin: 0.25rem 0; }
+  text-align: center;
-.next-race-name   { font-size: 1.4rem; font-weight: 700; margin: 0.25rem 0; }
+  background: linear-gradient(135deg, #1a0000 0%, #2d0a0a 40%, var(--surface-2) 100%);
-.next-race-circuit { color: var(--text-2); font-size: 0.85rem; margin-bottom: 0.5rem; }
+  position: relative;
+  overflow: hidden;
+  border-color: rgba(225,6,0,0.25);
+  padding: 2rem 1.5rem 1.5rem;
+}
+.next-race::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--f1-red), #ff4422, var(--f1-red));
+  background-size: 200% 100%;
+  animation: shimmer-red 2.5s linear infinite;
+}
+@keyframes shimmer-red {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Animated speed lines */
+.speed-lines {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.speed-line {
+  position: absolute;
+  left: -10%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(225,6,0,0.18), transparent);
+  width: 60%;
+  animation: speedline 3s ease-in-out infinite;
+}
+.speed-line:nth-child(1)  { top: 18%; animation-delay: 0s;    animation-duration: 2.8s; width: 55%; }
+.speed-line:nth-child(2)  { top: 30%; animation-delay: 0.4s;  animation-duration: 3.2s; width: 70%; }
+.speed-line:nth-child(3)  { top: 42%; animation-delay: 0.9s;  animation-duration: 2.5s; width: 45%; }
+.speed-line:nth-child(4)  { top: 55%; animation-delay: 1.3s;  animation-duration: 3.5s; width: 65%; }
+.speed-line:nth-child(5)  { top: 65%; animation-delay: 0.2s;  animation-duration: 2.9s; width: 50%; }
+.speed-line:nth-child(6)  { top: 75%; animation-delay: 1.7s;  animation-duration: 3.1s; width: 60%; }
+.speed-line:nth-child(7)  { top: 85%; animation-delay: 0.6s;  animation-duration: 2.7s; width: 40%; }
+.speed-line:nth-child(8)  { top: 92%; animation-delay: 1.1s;  animation-duration: 3.4s; width: 55%; }
+@keyframes speedline {
+  0%   { transform: translateX(-20%); opacity: 0; }
+  20%  { opacity: 1; }
+  80%  { opacity: 1; }
+  100% { transform: translateX(220%); opacity: 0; }
+}
+
+/* Circuit name watermark */
+.circuit-watermark {
+  position: absolute;
+  bottom: -0.25rem;
+  right: -0.5rem;
+  font-size: 4.5rem;
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.03);
+  pointer-events: none;
+  user-select: none;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Checkered flag corner decoration */
+.checkered-corner {
+  position: absolute;
+  top: 0; right: 0;
+  width: 64px; height: 64px;
+  background-image:
+    repeating-conic-gradient(rgba(255,255,255,0.07) 0% 25%, transparent 0% 50%);
+  background-size: 16px 16px;
+  mask-image: linear-gradient(225deg, rgba(0,0,0,0.5) 30%, transparent 70%);
+  -webkit-mask-image: linear-gradient(225deg, rgba(0,0,0,0.5) 30%, transparent 70%);
+  pointer-events: none;
+}
+
+.next-race .card-label { position: relative; z-index: 1; }
+.next-race-flag   { font-size: 3.5rem; margin: 0.5rem 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); position: relative; z-index: 1; }
+.next-race-name   { font-size: 1.8rem; font-weight: 800; margin: 0.25rem 0; letter-spacing: -0.02em; position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
+.next-race-circuit { color: var(--text-2); font-size: 0.95rem; margin-bottom: 0.75rem; font-weight: 500; position: relative; z-index: 1; }
 .next-race-session {
-  color: var(--text-1);
+  display: inline-block;
-  font-size: 0.9rem;
+  background: rgba(225, 6, 0, 0.15);
-  font-weight: 600;
+  color: var(--f1-red);
-  letter-spacing: 0.04em;
+  padding: 0.25rem 0.75rem;
-  margin-bottom: 0.45rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  margin-bottom: 0.75rem;
+  border: 1px solid rgba(225, 6, 0, 0.3);
+  position: relative; z-index: 1;
 }
 .next-race-countdown {
-  font-size: 1.6rem;
+  font-size: 2.2rem;
-  font-weight: 800;
+  font-weight: 900;
   font-variant-numeric: tabular-nums;
-  color: var(--f1-red);
+  color: var(--text-1);
-  letter-spacing: 0.04em;
+  letter-spacing: 0.02em;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  position: relative; z-index: 1;
 }
 
 /* Championship sidebar */
-.champ-sidebar { display: flex; flex-direction: column; gap: 0.45rem; }
+.champ-sidebar { display: flex; flex-direction: column; gap: 0.45rem; background: var(--surface-1); }
 .champ-row {
   display: grid;
-  grid-template-columns: 20px 12px 36px 1fr 40px;
+  grid-template-columns: 24px 4px 40px 1fr 45px;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.6rem;
+  padding: 0.4rem 0.6rem;
+  border-radius: 6px;
+  transition: background 0.2s;
 }
-.champ-pos  { color: var(--text-2); font-size: 0.8rem; text-align: right; }
+.champ-row:hover { background: var(--surface-2); }
-.champ-tla  { font-weight: 600; font-size: 0.85rem; }
+.champ-row.podium-1 { background: rgba(255, 215, 0, 0.05); border: 1px solid rgba(255, 215, 0, 0.1); }
+.champ-row.podium-1 .champ-pos { color: #FFD700; font-weight: 800; }
+.champ-row.podium-2 .champ-pos { color: #C0C0C0; font-weight: 800; }
+.champ-row.podium-3 .champ-pos { color: #CD7F32; font-weight: 800; }
+
+.champ-pos  { color: var(--text-2); font-size: 0.9rem; text-align: center; font-weight: 600; }
+.champ-tla  { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
 .champ-bar-wrap {
   background: var(--surface-3);
-  border-radius: 2px;
+  border-radius: 3px;
-  height: 6px;
+  height: 8px;
   overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
 }
 .champ-bar {
   height: 100%;
   background: var(--team-color, var(--f1-red));
-  border-radius: 2px;
+  border-radius: 3px;
-  transition: width 0.4s;
+  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.champ-pts { font-size: 0.8rem; color: var(--text-2); text-align: right; }
+.champ-pts { font-size: 0.9rem; color: var(--text-1); text-align: right; font-weight: 700; }
 
 /* Team color swatch */
 .team-swatch {
   display: inline-block;
-  width: 3px;
+  width: 4px;
-  height: 14px;
+  height: 18px;
   background: var(--team-color, #666);
   border-radius: 2px;
   vertical-align: middle;
-  margin-right: 6px;
 }
 
 /* ---- Season meetings grid ---- */
 .section-label {
-  font-size: 0.7rem;
+  font-size: 0.72rem;
-  font-weight: 700;
+  font-weight: 800;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--text-3);
+  color: var(--text-2);
-  padding: 0 1.5rem;
+  padding: 0.75rem 1.5rem 0.5rem;
-  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.section-label::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 1em;
+  background: var(--f1-red);
+  border-radius: 2px;
+  flex-shrink: 0;
 }
 .meetings-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
   gap: 0.75rem;
   padding: 0 1.5rem 2rem;
 }
@@ -223,11 +332,36 @@ a { color: inherit; text-decoration: none; }
   border-radius: 8px;
   padding: 0.75rem 1rem;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: background 0.15s, border-color 0.15s, transform 0.15s;
+  position: relative;
+  overflow: hidden;
 }
-.meeting-card:hover { background: var(--surface-2); border-color: var(--text-3); }
+.meeting-card:hover {
-.meeting-card.past  { opacity: 0.55; }
+  background: var(--surface-2);
-.meeting-flag   { font-size: 1.5rem; margin-bottom: 0.3rem; }
+  border-color: var(--text-3);
+  transform: translateY(-2px);
+}
+.meeting-card.past  { opacity: 0.5; }
+.meeting-card-accent {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  background: var(--surface-3);
+  transition: background 0.2s;
+}
+.meeting-card:not(.past) .meeting-card-accent {
+  background: linear-gradient(90deg, var(--f1-red), #ff4422);
+}
+.meeting-card.meeting-next .meeting-card-accent {
+  background: linear-gradient(90deg, var(--f1-red), #ff8844, var(--f1-red));
+  background-size: 200% 100%;
+  animation: shimmer-red 2s linear infinite;
+}
+.meeting-card.meeting-next {
+  border-color: rgba(225,6,0,0.35);
+  box-shadow: 0 0 0 1px rgba(225,6,0,0.12), 0 4px 16px rgba(225,6,0,0.1);
+}
+.meeting-flag   { font-size: 1.5rem; margin: 0.3rem 0 0.3rem; }
 .meeting-name   { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
 .meeting-circuit { color: var(--text-2); font-size: 0.78rem; margin-top: 0.15rem; }
 .meeting-date   { color: var(--text-3); font-size: 0.75rem; margin-top: 0.3rem; }
@@ -292,23 +426,30 @@ a { color: inherit; text-decoration: none; }
   width: calc(100% - 3rem);
 }
 .data-table th {
-  background: var(--surface-1);
+  background: var(--surface-2);
-  border-bottom: 1px solid var(--surface-3);
+  border-bottom: 2px solid var(--surface-3);
-  color: var(--text-3);
+  color: var(--text-2);
-  font-size: 0.68rem;
+  font-size: 0.72rem;
-  font-weight: 700;
+  font-weight: 800;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 1rem;
   text-align: left;
   text-transform: uppercase;
 }
 .data-table td {
   border-bottom: 1px solid var(--surface-3);
-  padding: 0.5rem 0.75rem;
+  padding: 0.85rem 1rem;
   vertical-align: middle;
 }
-.data-table tr:hover td { background: var(--surface-1); }
+.data-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
-.pos-cell { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
+.data-table tr.podium-1 td { background: rgba(255, 215, 0, 0.03); }
+.data-table tr.podium-1 .pos-cell { color: #FFD700; font-weight: 900; }
+.data-table tr.podium-2 .pos-cell { color: #C0C0C0; font-weight: 900; }
+.data-table tr.podium-3 .pos-cell { color: #CD7F32; font-weight: 900; }
+
+.pos-cell { font-weight: 700; font-size: 1rem; }
+.driver-cell { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.95rem; }
+.pts-cell { font-weight: 800; font-size: 1rem; color: var(--text-1); }
 
 /* ---- Badges ---- */
 .badge {
@@ -488,3 +629,177 @@ a { color: inherit; text-decoration: none; }
   position: fixed;
   z-index: 200;
 }
+
+/* ============================================================
+   Standings — custom row layout
+   ============================================================ */
+.standings-table {
+  padding: 0 1.5rem 2rem;
+}
+.standings-header {
+  display: grid;
+  grid-template-columns: 52px 1fr 180px 120px 70px 70px;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem 0.5rem 1.25rem;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  color: var(--text-3);
+  text-transform: uppercase;
+  border-bottom: 2px solid var(--surface-3);
+  margin-bottom: 0.25rem;
+}
+@media (max-width: 700px) {
+  .standings-header { grid-template-columns: 44px 1fr 0 80px 55px 55px; }
+  .sh-team { display: none; }
+}
+.standings-row {
+  display: grid;
+  grid-template-columns: 52px 1fr 180px 120px 70px 70px;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1rem 0.6rem 0;
+  border-bottom: 1px solid var(--surface-3);
+  transition: background 0.15s;
+  position: relative;
+  border-left: 3px solid var(--team-color, transparent);
+  padding-left: 1rem;
+  border-radius: 0 4px 4px 0;
+}
+.standings-row:hover { background: rgba(255,255,255,0.025); }
+.standings-row.podium-1 { background: rgba(255,215,0,0.04); }
+.standings-row.podium-2 { background: rgba(192,192,192,0.03); }
+.standings-row.podium-3 { background: rgba(205,127,50,0.03); }
+@media (max-width: 700px) {
+  .standings-row { grid-template-columns: 44px 1fr 0 80px 55px 55px; }
+  .sr-team { display: none; }
+}
+
+/* Position column */
+.sr-pos {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+}
+.trophy-icon  { font-size: 1.3rem; line-height: 1; }
+.pos-num      { font-size: 1rem; font-weight: 800; color: var(--text-2); }
+.standings-row.podium-1 .pos-num { color: #FFD700; }
+.standings-row.podium-2 .pos-num { color: #C0C0C0; }
+.standings-row.podium-3 .pos-num { color: #CD7F32; }
+
+/* Driver number badge */
+.driver-num-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  height: 24px;
+  border-radius: 4px;
+  font-size: 0.78rem;
+  font-weight: 900;
+  letter-spacing: 0.03em;
+  border: 1px solid;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Driver column */
+.sr-driver {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 0;
+}
+.sr-driver-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.sr-full-name {
+  font-weight: 700;
+  font-size: 0.92rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sr-tla {
+  font-size: 0.72rem;
+  color: var(--text-3);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* Team column */
+.sr-team {
+  font-size: 0.82rem;
+  color: var(--text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Points bar */
+.sr-bar-wrap {
+  background: var(--surface-3);
+  border-radius: 3px;
+  height: 6px;
+  overflow: hidden;
+}
+.sr-bar {
+  height: 100%;
+  background: var(--team-color, var(--f1-red));
+  border-radius: 3px;
+  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+  min-width: 2px;
+}
+
+/* Points */
+.sr-pts {
+  font-weight: 800;
+  font-size: 1rem;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-1);
+}
+
+/* Gap */
+.sr-gap {
+  font-size: 0.78rem;
+  color: var(--text-3);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.standings-row.podium-1 .sr-gap {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--f1-red);
+  text-transform: uppercase;
+}
+
+/* Constructor color block */
+.constructor-color-block {
+  width: 5px;
+  height: 32px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.constructor-row .sr-full-name {
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+/* Constructor table has no TEAM column — use 5-col grid */
+.constructor-header,
+.constructor-row {
+  grid-template-columns: 52px 1fr 140px 70px 70px;
+}
+@media (max-width: 700px) {
+  .constructor-header,
+  .constructor-row {
+    grid-template-columns: 44px 1fr 80px 55px 55px;
+  }
+}