feat: add Soviet Military Topo and Google Topo, remove HERE API dependency, relocate and restyle floating ViewNav

apps/web/src/main.tsx

@@ -15,21 +15,50 @@ maplibregl.setRTLTextPlugin(
 // Lightweight hash router (no dependency). '#compare' and '#review' are additive
 // views; anything else falls back to the existing map app, untouched.
 const NAV = [
-  { hash: '#map', label: 'Map' },
-  { hash: '#review', label: 'Review' },
-  { hash: '#compare', label: 'Compare' },
+  { hash: '#map', label: 'Map', icon: '🗺️' },
+  { hash: '#review', label: 'Review', icon: '🔍' },
+  { hash: '#compare', label: 'Compare', icon: '⚖️' },
 ]
 
 function ViewNav({ hash }: { hash: string }) {
   const isMap = hash !== '#compare' && hash !== '#review'
   return (
-    <div style={{ position: 'fixed', top: 8, left: '50%', transform: 'translateX(-50%)', zIndex: 9999, display: 'flex', gap: 4, background: 'rgba(15,23,42,0.9)', border: '1px solid #334155', borderRadius: 999, padding: 3, fontFamily: 'Inter, system-ui, sans-serif' }}>
+    <div style={{
+      position: 'fixed',
+      top: 10,
+      right: 16,
+      zIndex: 9999,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 4,
+      background: 'rgba(15, 23, 42, 0.88)',
+      backdropFilter: 'blur(12px)',
+      border: '1px solid rgba(255, 255, 255, 0.12)',
+      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.45)',
+      borderRadius: 999,
+      padding: '3px 4px',
+      fontFamily: 'Inter, system-ui, sans-serif'
+    }}>
       {NAV.map(n => {
         const active = n.hash === '#map' ? isMap : hash === n.hash
         return (
           <a key={n.hash} href={n.hash}
-            style={{ textDecoration: 'none', fontSize: 12, fontWeight: 600, color: active ? '#fff' : '#94a3b8', background: active ? '#6366f1' : 'transparent', padding: '5px 12px', borderRadius: 999 }}>
-            {n.label}
+            style={{
+              textDecoration: 'none',
+              fontSize: 12,
+              fontWeight: 600,
+              color: active ? '#fff' : '#94a3b8',
+              background: active ? 'linear-gradient(135deg, #6366f1, #4f46e5)' : 'transparent',
+              boxShadow: active ? '0 2px 8px rgba(99, 102, 241, 0.4)' : 'none',
+              padding: '5px 13px',
+              borderRadius: 999,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 5,
+              transition: 'all 0.15s ease'
+            }}>
+            <span>{n.icon}</span>
+            <span>{n.label}</span>
           </a>
         )
       })}