Migrate static theme inline styles to Tailwind utilities and extract page sub-components

Replace the static, color-only inline `style={{ ... 'var(--bg-primary)' ... }}` props with the new semantic Tailwind utilities (bg-surface, text-content, border-edge, ...) wherever the result is byte-identical; dynamic/conditional theme styles and hardcoded status colors are left inline. Extract the Atlas country-search autocomplete, the Admin update banner, and two Journey dialogs into their own presentational components to shrink the oversized page files, keeping behaviour and markup identical.

client/src/components/shared/Skeleton.tsx

@@ -28,8 +28,8 @@ export function Skeleton({
 export function SpotlightSkeleton(): React.ReactElement {
   return (
     <div
-      className="relative rounded-3xl overflow-hidden mb-8"
-      style={{ minHeight: 340, background: 'var(--bg-tertiary)' }}
+      className="relative rounded-3xl overflow-hidden mb-8 bg-surface-tertiary"
+      style={{ minHeight: 340 }}
     >
       <div className="trek-skeleton absolute inset-0" style={{ borderRadius: 24 }} />
       <div className="relative p-6 flex flex-col justify-end" style={{ minHeight: 340 }}>
@@ -44,8 +44,7 @@ export function SpotlightSkeleton(): React.ReactElement {
 export function TripCardSkeleton(): React.ReactElement {
   return (
     <div
-      className="rounded-2xl border border-zinc-200 dark:border-zinc-700 overflow-hidden"
-      style={{ background: 'var(--bg-card)' }}
+      className="rounded-2xl border border-zinc-200 dark:border-zinc-700 overflow-hidden bg-surface-card"
     >
       <Skeleton height={140} radius={0} />
       <div className="p-4 flex flex-col gap-2">