rediction-baren är nu färgkodad

src/app.js

@@ -3804,7 +3804,7 @@ function renderOverlayLeaderboard(rows) {
                     <span>${row.predictedRemainingMs !== null ? formatLap(row.predictedRemainingMs) : "-"}</span>
                   </div>
                   <div class="overlay-prediction-track">
-                    <div class="overlay-prediction-fill" style="width:${Math.max(0, Math.min(100, Math.round((row.predictedProgress || 0) * 100)))}%"></div>
+                    <div class="overlay-prediction-fill overlay-prediction-${escapeHtml(row.predictionTone || "good")}" style="width:${Math.max(0, Math.min(100, Math.round((row.predictedProgress || 0) * 100)))}%"></div>
                   </div>
                 </div>
               </div>
@@ -4540,6 +4540,12 @@ function buildLeaderboard(session) {
     const currentLapElapsedMs = row.lastTimestamp ? Math.max(0, nowTs - row.lastTimestamp) : 0;
     const predictedRemainingMs = predictionBaseMs ? Math.max(0, predictionBaseMs - currentLapElapsedMs) : null;
     const predictedProgress = predictionBaseMs ? Math.min(1.25, currentLapElapsedMs / predictionBaseMs) : 0;
+    const predictionTone =
+      !predictionBaseMs || predictedProgress <= 0.85
+        ? "good"
+        : predictedProgress <= 1
+        ? "warn"
+        : "late";
     return {
       ...row,
       totalElapsedMs,
@@ -4549,6 +4555,7 @@ function buildLeaderboard(session) {
       lapDeltaMs,
       predictedRemainingMs,
       predictedProgress,
+      predictionTone,
       comparisonMs:
         isRollingPractice
           ? row.bestLapMs || row.lastLapMs || Number.MAX_SAFE_INTEGER

src/styles.css

@@ -881,7 +881,18 @@ select:focus {
 .overlay-prediction-fill {
   height: 100%;
   border-radius: 999px;
-  background: linear-gradient(90deg, #ffffff, #e10600);
+}
+
+.overlay-prediction-good {
+  background: linear-gradient(90deg, #b7ffd4, #26c281);
+}
+
+.overlay-prediction-warn {
+  background: linear-gradient(90deg, #ffe69a, #f5a623);
+}
+
+.overlay-prediction-late {
+  background: linear-gradient(90deg, #ffd0d0, #e10600);
 }
 
 .overlay-race-metric strong,