diff --git a/frontend/css/styles.css b/frontend/css/styles.css
index 3e5be5c..3ab245f 100644
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -1310,20 +1310,9 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
   cursor: pointer;
 }
 /* Keep Leaflet zoom controls below the status bar on the recording map. */
-.rec-map-wrap .leaflet-top { margin-top: var(--safe-area-top, 0px); }
-/* Status-bar backdrop. The recording map is edge-to-edge (draws behind the system
-   status bar), so the bar had no backing and its icons were unreadable over the map
-   tiles. Paint a solid strip the height of the top inset — like the header on every
-   other screen — so the status bar stays visible. Controls already start below it. */
-.rec-map-wrap::before {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: var(--safe-area-top, 0px);
-  background: var(--surface);
-  z-index: 1100;
-  pointer-events: none;
-}
+/* The top strip (.rec-topbar) now sits above the map and already backs the status bar, so the
+   map no longer draws under the status bar — no backdrop strip, and controls start at the map top. */
+.rec-map-wrap .leaflet-top { margin-top: 0; }
 .rec-screen.rot-90 .rec-map-wrap::before,
 .rec-screen.rot-270 .rec-map-wrap::before { display: none; }
 .rec-compass-arrow { position: absolute; inset: 0; transition: transform 0.12s linear; }
@@ -1411,14 +1400,15 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
   color: var(--on-surface);
 }
 
-/* Top strip (external info): training time (left), temperature (centre), clock (right). */
+/* Top strip (external info): training time (left), temperature (centre), clock (right).
+   Same big digits as the bottom stats (.rec-val). */
 .rec-topbar {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 6px 16px; padding-top: calc(6px + var(--safe-area-top));
-  background: var(--surface); border-bottom: 1px solid var(--border);
-  font-size: 15px; font-weight: 600; color: var(--on-surface);
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding: 4px 16px; padding-top: calc(4px + var(--safe-area-top));
+  background: var(--surface);
 }
-.rec-topbar .rec-top-mid { color: var(--muted); font-weight: 500; }
+.rec-topbar .rec-top { font-size: 27px; font-weight: 700; color: var(--on-surface); }
+.rec-topbar .rec-top-mid { color: var(--muted); }
 /* Status line now stands alone under the stats (no longer stealing the buttons' width). */
 .rec-panel > .rec-status { font-size: 12px; color: var(--muted); text-align: center; padding: 0 12px 4px; min-height: 14px; }