Start the NPS Unigrid visual redesign

Black topbar banner with live map-center coordinates, a black header
(with NPS pictogram) on waypoint popups, offline basemap wood/park
colors unified with the online Liberty green, and the sidebar grouped
into the planned Explorer / Offline hub / Navigation menu sections.

public/css/style.css

@@ -14,16 +14,24 @@ html, body {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  height: 48px;
+  height: 44px;
   padding: 0 16px;
-  background: #fff;
-  border-bottom: 1px solid #ddd;
+  background: #1a1a1a;
 }
 
 .topbar__brand {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 700;
-  color: #333;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #fff;
+}
+
+.topbar__coords {
+  margin: 0 auto;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: #bbb;
 }
 
 .topbar__auth {
@@ -32,7 +40,11 @@ html, body {
   align-items: center;
   gap: 8px;
   font-size: 13px;
-  color: #555;
+  color: #ccc;
+}
+
+.topbar__auth a {
+  color: #fff;
 }
 
 .app-body {
@@ -61,6 +73,17 @@ html, body {
   position: relative;
 }
 
+.sidebar-group-label {
+  width: 28px;
+  height: 1px;
+  margin: 4px 0;
+  background: #ddd;
+}
+
+.sidebar-group-label:first-child {
+  display: none;
+}
+
 .sidebar-icon {
   width: 36px;
   height: 36px;
@@ -649,6 +672,29 @@ html, body {
   user-select: none;
 }
 
+.gpx-popup__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: -15px -10px 8px;
+  padding: 10px 12px;
+  background: #1a1a1a;
+  color: #fff;
+}
+
+.gpx-popup__header-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: #fff;
+}
+
+.gpx-popup__header-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
 .gpx-popup__time {
   color: #888;
   font-size: 12px;