changed the location of the travel summary to left

src/lib/layout/TopBar.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <nav class="topbar">
-  <span class="logo">🗺 MapJournal</span>
+  <span class="logo">Map Journal</span>
   <div class="nav-links">
     <button class="nav-btn" class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Map</button>
     <button class="nav-btn" class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button>
@@ -15,19 +15,20 @@
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 24px;
+    padding: 0 32px;
     height: 52px;
     border-bottom: 1px solid var(--border);
-    background: var(--bg-raised);
+    background: var(--bg);
     flex-shrink: 0;
+    z-index: 10;
   }
 
   .logo {
     font-family: var(--heading);
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 400;
     color: var(--text-h);
-    letter-spacing: -0.4px;
+    letter-spacing: 0.01em;
   }
 
   .nav-links {
@@ -36,8 +37,9 @@
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    background: var(--accent-bg);
-    border-radius: 10px;
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    border-radius: 8px;
     padding: 3px;
   }
 
@@ -45,18 +47,19 @@
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 300;
-    padding: 5px 16px;
-    border-radius: 8px;
+    padding: 4px 18px;
+    border-radius: 6px;
     border: none;
     background: none;
     color: var(--text);
     cursor: pointer;
     transition: background 0.15s, color 0.15s;
+    letter-spacing: 0.01em;
   }
-  .nav-btn:hover { color: var(--accent); }
+  .nav-btn:hover { color: var(--text-h); }
   .nav-btn.active {
-    background: var(--bg-raised);
-    color: var(--accent-dark);
-    box-shadow: 0 1px 4px rgba(99,102,241,0.15);
+    background: var(--bg);
+    color: var(--text-h);
+    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
   }
 </style>