diff --git a/src/server/request-handler.ts b/src/server/request-handler.ts
index c21d485..2828954 100644
--- a/src/server/request-handler.ts
+++ b/src/server/request-handler.ts
@@ -127,16 +127,21 @@ function htmlPage(): string {
         --empty-border: rgba(148, 163, 184, 0.18);
         --overlay-bg: rgba(2, 6, 23, 0.84);
         --card-border: rgba(148, 163, 184, 0.12);
-        --leaflet-popup-bg: rgba(15, 23, 42, 0.96);
-        --leaflet-popup-text: #e2e8f0;
-        --timeline-bg: #f0f0f0c0;
-        --timeline-bar-border: rgba(55, 65, 81, 0.92);
-        --timeline-bar-fill: rgba(156, 163, 175, 0.78);
-        --timeline-bar-hover: rgba(203, 213, 225, 0.9);
-        --timeline-bar-selected: rgba(209, 213, 219, 0.92);
+        --timeline-surface: #f0f0f0c0;
+        --timeline-surface-soft: rgba(255, 255, 255, 0.76);
+        --timeline-surface-strong: rgba(255, 255, 255, 0.94);
+        --timeline-border: rgba(75, 85, 99, 0.24);
+        --timeline-border-strong: rgba(75, 85, 99, 0.36);
+        --timeline-text: #303030;
+        --timeline-text-muted: rgba(48, 48, 48, 0.7);
+        --timeline-bar-border: rgba(64, 64, 64, 0.96);
+        --timeline-bar-fill: rgba(128, 128, 128, 0.92);
+        --timeline-bar-fill-hover: rgba(144, 144, 144, 0.96);
+        --timeline-bar-fill-selected: rgba(160, 160, 160, 0.96);
+        --timeline-bar-fill-selected-active: rgba(176, 176, 176, 0.98);
         --timeline-axis-color: rgba(156, 163, 175, 0.55);
-        --timeline-axis-label: rgba(156, 163, 175, 0.72);
-        --timeline-meta: rgba(156, 163, 175, 0.68);
+        --timeline-axis-label: #303030;
+        --timeline-meta: var(--timeline-axis-label);
         --timeline-selection-border: rgba(107, 114, 128, 0.42);
         --timeline-selection-bg: rgba(107, 114, 128, 0.08);
         --timeline-brush-border: rgba(107, 114, 128, 0.62);
@@ -175,16 +180,21 @@ function htmlPage(): string {
         --empty-border: rgba(15, 23, 42, 0.16);
         --overlay-bg: rgba(8, 12, 18, 0.78);
         --card-border: rgba(15, 23, 42, 0.11);
-        --leaflet-popup-bg: rgba(255, 255, 255, 0.97);
-        --leaflet-popup-text: #0f172a;
-        --timeline-bg: #f0f0f0c0;
-        --timeline-bar-border: rgba(75, 85, 99, 0.9);
-        --timeline-bar-fill: rgba(156, 163, 175, 0.74);
-        --timeline-bar-hover: rgba(209, 213, 219, 0.88);
-        --timeline-bar-selected: rgba(220, 224, 230, 0.92);
+        --timeline-surface: #f0f0f0c0;
+        --timeline-surface-soft: rgba(255, 255, 255, 0.76);
+        --timeline-surface-strong: rgba(255, 255, 255, 0.94);
+        --timeline-border: rgba(75, 85, 99, 0.24);
+        --timeline-border-strong: rgba(75, 85, 99, 0.36);
+        --timeline-text: #303030;
+        --timeline-text-muted: rgba(48, 48, 48, 0.7);
+        --timeline-bar-border: rgba(64, 64, 64, 0.96);
+        --timeline-bar-fill: rgba(128, 128, 128, 0.92);
+        --timeline-bar-fill-hover: rgba(144, 144, 144, 0.96);
+        --timeline-bar-fill-selected: rgba(160, 160, 160, 0.96);
+        --timeline-bar-fill-selected-active: rgba(176, 176, 176, 0.98);
         --timeline-axis-color: rgba(107, 114, 128, 0.52);
-        --timeline-axis-label: rgba(107, 114, 128, 0.7);
-        --timeline-meta: rgba(107, 114, 128, 0.66);
+        --timeline-axis-label: #303030;
+        --timeline-meta: var(--timeline-axis-label);
         --timeline-selection-border: rgba(107, 114, 128, 0.3);
         --timeline-selection-bg: rgba(107, 114, 128, 0.08);
         --timeline-brush-border: rgba(107, 114, 128, 0.52);
@@ -249,8 +259,8 @@ function htmlPage(): string {
         overflow: hidden;
         z-index: 700;
         backdrop-filter: blur(16px);
-        background: var(--panel-float);
-        border-color: rgba(255, 255, 255, 0.08);
+        background: var(--timeline-surface-soft);
+        border-color: var(--timeline-border);
         transition: width 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
       }
 
@@ -283,8 +293,9 @@ function htmlPage(): string {
         min-width: 0;
         padding: 10px;
         border-radius: var(--radius-lg);
-        border: 1px solid var(--card-border);
-        background: var(--surface-float);
+        border: 1px solid var(--timeline-border);
+        background: var(--timeline-surface-soft);
+        color: var(--timeline-text);
         backdrop-filter: blur(16px);
       }
 
@@ -301,7 +312,7 @@ function htmlPage(): string {
 
       .card p,
       .card small {
-        color: var(--muted);
+        color: var(--timeline-text-muted);
       }
 
       label {
@@ -500,8 +511,9 @@ function htmlPage(): string {
         align-items: center;
         padding: 8px;
         border-radius: var(--radius-md);
-        background: var(--photo-bg);
-        border: 1px solid var(--card-border);
+        background: var(--timeline-surface-soft);
+        border: 1px solid var(--timeline-border);
+        color: var(--timeline-text);
         min-width: 0;
       }
 
@@ -521,7 +533,7 @@ function htmlPage(): string {
       }
 
       .photo span {
-        color: var(--muted);
+        color: var(--timeline-text-muted);
         font-size: 0.7rem;
         display: block;
         overflow: hidden;
@@ -530,16 +542,16 @@ function htmlPage(): string {
       }
 
       .photo.active {
-        border-color: var(--photo-active-border);
-        background: var(--photo-active-bg);
+        border-color: var(--timeline-border-strong);
+        background: var(--timeline-surface-strong);
       }
 
       .empty-state {
         padding: 10px;
         border-radius: var(--radius-md);
-        border: 1px dashed var(--empty-border);
-        color: var(--muted);
-        background: var(--surface);
+        border: 1px dashed var(--timeline-border);
+        color: var(--timeline-text-muted);
+        background: var(--timeline-surface);
         text-align: center;
       }
 
@@ -586,15 +598,19 @@ function htmlPage(): string {
         width: min(1120px, 100%);
         overflow: hidden;
         border-radius: 0;
+        background: var(--timeline-surface-soft);
+        border-color: var(--timeline-border);
+        color: var(--timeline-text);
       }
 
       .overlay-card header {
         padding: 16px 18px;
-        border-bottom: 1px solid var(--border);
+        border-bottom: 1px solid var(--timeline-border);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        background: var(--panel-strong);
+        background: var(--timeline-surface-strong);
+        color: var(--timeline-text);
       }
 
       .overlay-card img {
@@ -602,12 +618,12 @@ function htmlPage(): string {
         width: 100%;
         max-height: 78vh;
         object-fit: contain;
-        background: #111;
+        background: var(--timeline-surface-strong);
       }
 
       .close {
-        background: var(--surface-strong);
-        color: var(--text);
+        background: var(--timeline-surface);
+        color: var(--timeline-text);
       }
 
       .thumb {
@@ -615,6 +631,13 @@ function htmlPage(): string {
         padding: 8px;
         display: grid;
         gap: 8px;
+        background: var(--timeline-surface-soft);
+        border: 1px solid var(--timeline-border);
+        color: var(--timeline-text);
+      }
+
+      .thumb small {
+        color: var(--timeline-text-muted);
       }
 
       .thumb img {
@@ -626,8 +649,8 @@ function htmlPage(): string {
 
       .leaflet-popup-content-wrapper,
       .leaflet-popup-tip {
-        background: var(--leaflet-popup-bg);
-        color: var(--leaflet-popup-text);
+        background: var(--timeline-surface-strong);
+        color: var(--timeline-text);
       }
 
       .leaflet-popup-content-wrapper {
@@ -637,7 +660,11 @@ function htmlPage(): string {
 
       .leaflet-popup-content {
         margin: 10px 12px;
-        color: var(--leaflet-popup-text);
+        color: var(--timeline-text);
+      }
+
+      .leaflet-popup-content small {
+        color: var(--timeline-text-muted);
       }
 
       .photo-map-marker {
@@ -678,7 +705,7 @@ function htmlPage(): string {
         backdrop-filter: none;
         background: transparent;
         opacity: 1;
-        border-color: rgba(255, 255, 255, 0.08);
+        border-color: var(--timeline-border);
         transition: height 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
       }
 
@@ -700,7 +727,7 @@ function htmlPage(): string {
       }
 
       .timeline-summary {
-        color: var(--muted);
+        color: var(--timeline-text-muted);
         font-size: 0.72rem;
       }
 
@@ -717,7 +744,7 @@ function htmlPage(): string {
         padding: 4px 6px 4px;
         border-radius: 0;
         border: 0;
-        background: var(--timeline-bg);
+        background: var(--timeline-surface);
         overflow: hidden;
         touch-action: none;
         user-select: none;
@@ -755,8 +782,8 @@ function htmlPage(): string {
         width: 100%;
         border-radius: inherit;
         min-height: 3px;
-        background: #808080;
-        border: 1px solid #404040;
+        background: var(--timeline-bar-fill);
+        border: 1px solid var(--timeline-bar-border);
         transition: transform 140ms ease, background 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
         transform-origin: bottom;
         box-shadow: none;
@@ -765,11 +792,11 @@ function htmlPage(): string {
 
       .timeline-bar:hover .timeline-bar-fill,
       .timeline-bar.active .timeline-bar-fill {
-        background: #909090;
+        background: var(--timeline-bar-fill-hover);
       }
 
       .timeline-bar.selected .timeline-bar-fill {
-        background: #a0a0a0;
+        background: var(--timeline-bar-fill-selected);
       }
 
       .timeline-bar.active .timeline-bar-fill {
@@ -777,7 +804,7 @@ function htmlPage(): string {
       }
 
       .timeline-bar.selected.active .timeline-bar-fill {
-        background: #b0b0b0;
+        background: var(--timeline-bar-fill-selected-active);
       }
 
       .timeline-bar-meta {
@@ -787,7 +814,7 @@ function htmlPage(): string {
         transform: translateX(-50%);
         white-space: nowrap;
         font-size: 0.62rem;
-        color: var(--timeline-meta);
+        color: var(--timeline-axis-label);
         font-variant-numeric: tabular-nums;
         pointer-events: none;
       }
@@ -806,10 +833,10 @@ function htmlPage(): string {
         height: 28px;
         padding: 0;
         justify-content: center;
-        background: rgba(255, 255, 255, 0.42);
-        color: var(--text);
+        background: var(--timeline-surface-soft);
+        color: var(--timeline-text);
         box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
-        border: 1px solid rgba(75, 85, 99, 0.24);
+        border: 1px solid var(--timeline-border);
       }
 
       @media (max-width: 920px) {