diff --git a/dashboard/ambient.html b/dashboard/ambient.html
index 397269b..9cf703a 100644
--- a/dashboard/ambient.html
+++ b/dashboard/ambient.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="css/ambient.css">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="theme-color" content="#1a1a2e">
+    <meta name="theme-color" content="#18191b">
 </head>
 <body class="ambient-mode">
     <div class="app-shell app-shell--full">
diff --git a/dashboard/css/apdetection.css b/dashboard/css/apdetection.css
index 3919fe9..10c259c 100644
--- a/dashboard/css/apdetection.css
+++ b/dashboard/css/apdetection.css
@@ -30,7 +30,7 @@
 	padding: 16px 24px;
 	max-width: 800px;
 	margin: 0 auto;
-	color: white;
+	color: var(--text-on-accent);
 }
 
 .ap-detection-icon {
@@ -161,7 +161,7 @@
 }
 
 .ap-btn-primary {
-	background: white;
+	background: var(--slate-12);
 	color: var(--blue-7);
 }
 
@@ -173,7 +173,7 @@
 
 .ap-btn-secondary {
 	background: var(--border-strong);
-	color: white;
+	color: var(--text-on-accent);
 	border: 1px solid var(--slate-7);
 }
 
diff --git a/dashboard/css/explainability.css b/dashboard/css/explainability.css
index b9240eb..2881eae 100644
--- a/dashboard/css/explainability.css
+++ b/dashboard/css/explainability.css
@@ -225,7 +225,7 @@
 
 .contributing-yes .contributing-badge {
     background: var(--ok);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .contributing-no .contributing-badge {
diff --git a/dashboard/css/panels.css b/dashboard/css/panels.css
index 1dc4155..75a3423 100644
--- a/dashboard/css/panels.css
+++ b/dashboard/css/panels.css
@@ -849,7 +849,7 @@
     left: 0;
     right: 0;
     background: linear-gradient(135deg, var(--alert), var(--alert-muted));
-    color: white;
+    color: var(--text-on-accent);
     padding: 16px 20px;
     z-index: 5000;
     display: flex;
@@ -915,7 +915,7 @@
 
 .alert-banner-btn-acknowledge {
     background: var(--border-strong);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .alert-banner-btn-acknowledge:hover {
@@ -923,7 +923,7 @@
 }
 
 .alert-banner-btn-view {
-    background: white;
+    background: var(--slate-12);
     color: var(--alert);
 }
 
diff --git a/dashboard/css/quick-actions.css b/dashboard/css/quick-actions.css
index 7ca123a..ed6e106 100644
--- a/dashboard/css/quick-actions.css
+++ b/dashboard/css/quick-actions.css
@@ -231,7 +231,7 @@
     left: 50%;
     transform: translateX(-50%);
     background: var(--blue-10);
-    color: white;
+    color: var(--text-on-accent);
     padding: 10px 20px;
     border-radius: var(--radius-modal);
     font-size: var(--text-sm);
diff --git a/dashboard/css/security.css b/dashboard/css/security.css
index ff3e62b..df8640a 100644
--- a/dashboard/css/security.css
+++ b/dashboard/css/security.css
@@ -286,7 +286,7 @@
     left: 0;
     right: 0;
     background: linear-gradient(135deg, var(--alert), var(--alert));
-    color: white;
+    color: var(--text-on-accent);
     padding: 16px 20px;
     z-index: 5000;
     display: flex;
@@ -369,7 +369,7 @@
 
 .alert-banner-btn.acknowledge {
     background: var(--border-strong);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .alert-banner-btn.acknowledge:hover {
@@ -377,12 +377,12 @@
 }
 
 .alert-banner-btn.view {
-    background: white;
+    background: var(--slate-12);
     color: var(--alert);
 }
 
 .alert-banner-btn.view:hover {
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--slate-12);
 }
 
 /* ── Security Mode Indicator (full page overlay when armed) ──────────────────────── */
diff --git a/dashboard/css/simple.css b/dashboard/css/simple.css
index bda7eb4..f43b9c4 100644
--- a/dashboard/css/simple.css
+++ b/dashboard/css/simple.css
@@ -105,7 +105,7 @@ body.simple-mode {
 /* ===== Alert Banner ===== */
 .simple-alert-banner {
     background: linear-gradient(135deg, var(--simple-accent-red), var(--alert));
-    color: white;
+    color: var(--text-on-accent);
     padding: 16px;
     border-radius: var(--radius-card);
     margin-bottom: 16px;
@@ -154,7 +154,7 @@ body.simple-mode {
 .simple-alert-banner .alert-dismiss {
     background: var(--border-strong);
     border: none;
-    color: white;
+    color: var(--text-on-accent);
     width: 28px;
     height: 28px;
     border-radius: 50%;
@@ -173,7 +173,7 @@ body.simple-mode {
 /* ===== Morning Briefing Card ===== */
 .simple-morning-briefing {
     background: linear-gradient(135deg, var(--blue-7), var(--blue-9));
-    color: white;
+    color: var(--text-on-accent);
     padding: 20px;
     border-radius: var(--radius-modal);
     margin-bottom: 16px;
@@ -252,7 +252,7 @@ body.simple-mode {
     margin-top: 8px;
     background: var(--border-strong);
     border: none;
-    color: white;
+    color: var(--text-on-accent);
     padding: 8px 16px;
     border-radius: var(--radius-card);
     font-size: var(--text-sm);
@@ -386,7 +386,7 @@ body.simple-mode {
     justify-content: center;
     font-size: var(--text-sm);
     font-weight: 600;
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .simple-room-card .room-activity {
@@ -450,7 +450,7 @@ body.simple-mode {
 
 .simple-activity-feed .filter-btn.active {
     background: var(--simple-accent-blue);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .simple-activity-feed .feed-empty {
@@ -629,7 +629,7 @@ body.simple-mode {
     top: 4px;
     right: 4px;
     background: var(--simple-accent-red);
-    color: white;
+    color: var(--text-on-accent);
     font-size: 10px;
     font-weight: 600;
     padding: 2px 6px;
@@ -641,7 +641,7 @@ body.simple-mode {
 /* ===== Sleep Summary Card ===== */
 .simple-sleep-summary {
     background: linear-gradient(135deg, var(--blue-10), var(--blue-8));
-    color: white;
+    color: var(--text-on-accent);
     padding: 20px;
     border-radius: var(--radius-modal);
     margin-bottom: 16px;
@@ -723,7 +723,7 @@ body.simple-mode {
     margin-top: 12px;
     background: var(--border-strong);
     border: none;
-    color: white;
+    color: var(--text-on-accent);
     padding: 10px 16px;
     border-radius: var(--radius-card);
     font-size: var(--text-sm);
@@ -922,12 +922,12 @@ body.simple-mode {
 
 .simple-security-toggle .security-toggle-btn.disarmed {
     background: var(--simple-accent-green);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .simple-security-toggle .security-toggle-btn.armed {
     background: var(--simple-accent-red);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .simple-security-toggle .security-status {
diff --git a/dashboard/css/timeline.css b/dashboard/css/timeline.css
index 40ee2fa..80f302e 100644
--- a/dashboard/css/timeline.css
+++ b/dashboard/css/timeline.css
@@ -606,7 +606,7 @@
 /* Event Count Badge */
 .timeline-count {
   background: var(--accent-color, var(--blue-9));
-  color: white;
+  color: var(--text-on-accent);
   font-size: 11px;
   font-weight: 600;
   padding: 2px 6px;
diff --git a/dashboard/fleet.html b/dashboard/fleet.html
index 343c7af..12f06bf 100644
--- a/dashboard/fleet.html
+++ b/dashboard/fleet.html
@@ -35,78 +35,77 @@
         </div>
     </nav>
 
-    <!-- Page Header -->
-    <header class="fleet-header">
-        <div class="header-content">
-            <h1>Fleet Status</h1>
-            <div class="fleet-summary">
-                <span class="summary-item">
-                    <span class="summary-label">Total:</span>
-                    <span class="summary-value" id="fleet-total">0</span>
-                </span>
-                <span class="summary-item">
-                    <span class="summary-label">Online:</span>
-                    <span class="summary-value online" id="fleet-online">0</span>
-                </span>
-            </div>
-        </div>
-        <div class="header-actions">
-            <button id="fleet-refresh-btn" class="btn btn-secondary" title="Refresh fleet data">
-                <span class="icon">&#x21BB;</span>
-                <span class="label">Refresh</span>
-            </button>
-            <button id="fleet-update-all-btn" class="btn btn-action" title="Update all nodes to latest firmware">
-                <span class="icon">&#x2191;</span>
-                <span class="label">Update All</span>
-            </button>
-            <button id="fleet-download-btn" class="btn btn-secondary" title="Download CSV report">
-                <span class="icon">&#x2193;</span>
-                <span class="label">Download Report</span>
-            </button>
-        </div>
-    </header>
-
-    <!-- Filter and Sort Bar -->
-    <div class="fleet-toolbar" id="fleet-toolbar" style="display: none;">
-        <div class="toolbar-section">
-            <div class="filter-group">
-                <input type="text" id="fleet-search" class="search-input" placeholder="Search by label or MAC...">
-                <select id="filter-status" class="filter-select">
-                    <option value="">All Status</option>
-                    <option value="online">Online</option>
-                    <option value="offline">Offline</option>
-                    <option value="updating">Updating</option>
-                </select>
-                <select id="filter-firmware" class="filter-select">
-                    <option value="">All Firmware</option>
-                    <option value="outdated">Outdated Only</option>
-                </select>
-                <select id="filter-role" class="filter-select" multiple>
-                    <option value="tx">TX</option>
-                    <option value="rx">RX</option>
-                    <option value="tx_rx">TX-RX</option>
-                    <option value="passive">Passive</option>
-                </select>
-            </div>
-            <div class="active-filters" id="active-filters"></div>
-        </div>
-    </div>
-
-    <!-- Bulk Actions Bar (shown when nodes are selected) -->
-    <div class="bulk-actions-bar" id="bulk-actions-bar" style="display: none;">
-        <div class="bulk-content">
-            <span class="bulk-count"><span id="bulk-selected-count">0</span> nodes selected</span>
-            <div class="bulk-buttons">
-                <button id="bulk-ota-btn" class="btn btn-action">Update Selected</button>
-                <button id="bulk-role-btn" class="btn btn-secondary">Re-assign Roles</button>
-                <button id="bulk-remove-btn" class="btn btn-danger">Remove Selected</button>
-                <button id="bulk-clear-btn" class="btn btn-link">Clear Selection</button>
-            </div>
-        </div>
-    </div>
-
     <!-- Fleet Table -->
     <main class="app-main fleet-main">
+        <header class="fleet-header">
+            <div class="header-content">
+                <h1>Fleet Status</h1>
+                <div class="fleet-summary">
+                    <span class="summary-item">
+                        <span class="summary-label">Total:</span>
+                        <span class="summary-value" id="fleet-total">0</span>
+                    </span>
+                    <span class="summary-item">
+                        <span class="summary-label">Online:</span>
+                        <span class="summary-value online" id="fleet-online">0</span>
+                    </span>
+                </div>
+            </div>
+            <div class="header-actions">
+                <button id="fleet-refresh-btn" class="btn btn-secondary" title="Refresh fleet data">
+                    <span class="icon">&#x21BB;</span>
+                    <span class="label">Refresh</span>
+                </button>
+                <button id="fleet-update-all-btn" class="btn btn-action" title="Update all nodes to latest firmware">
+                    <span class="icon">&#x2191;</span>
+                    <span class="label">Update All</span>
+                </button>
+                <button id="fleet-download-btn" class="btn btn-secondary" title="Download CSV report">
+                    <span class="icon">&#x2193;</span>
+                    <span class="label">Download Report</span>
+                </button>
+            </div>
+        </header>
+
+        <!-- Filter and Sort Bar -->
+        <div class="fleet-toolbar" id="fleet-toolbar" style="display: none;">
+            <div class="toolbar-section">
+                <div class="filter-group">
+                    <input type="text" id="fleet-search" class="search-input" placeholder="Search by label or MAC...">
+                    <select id="filter-status" class="filter-select">
+                        <option value="">All Status</option>
+                        <option value="online">Online</option>
+                        <option value="offline">Offline</option>
+                        <option value="updating">Updating</option>
+                    </select>
+                    <select id="filter-firmware" class="filter-select">
+                        <option value="">All Firmware</option>
+                        <option value="outdated">Outdated Only</option>
+                    </select>
+                    <select id="filter-role" class="filter-select" multiple>
+                        <option value="tx">TX</option>
+                        <option value="rx">RX</option>
+                        <option value="tx_rx">TX-RX</option>
+                        <option value="passive">Passive</option>
+                    </select>
+                </div>
+                <div class="active-filters" id="active-filters"></div>
+            </div>
+        </div>
+
+        <!-- Bulk Actions Bar (shown when nodes are selected) -->
+        <div class="bulk-actions-bar" id="bulk-actions-bar" style="display: none;">
+            <div class="bulk-content">
+                <span class="bulk-count"><span id="bulk-selected-count">0</span> nodes selected</span>
+                <div class="bulk-buttons">
+                    <button id="bulk-ota-btn" class="btn btn-action">Update Selected</button>
+                    <button id="bulk-role-btn" class="btn btn-secondary">Re-assign Roles</button>
+                    <button id="bulk-remove-btn" class="btn btn-danger">Remove Selected</button>
+                    <button id="bulk-clear-btn" class="btn btn-link">Clear Selection</button>
+                </div>
+            </div>
+        </div>
+
         <div class="table-container">
             <table class="fleet-table" id="fleet-table">
                 <thead>
@@ -164,7 +163,9 @@
         </div>
     </main>
 
-    <!-- OTA Confirmation Modal -->
+    </div><!-- /.app-shell -->
+
+    <!-- Modals and toasts (outside grid shell) -->
     <div class="modal" id="ota-modal" style="display: none;">
         <div class="modal-content">
             <div class="modal-header">
@@ -195,7 +196,6 @@
         </div>
     </div>
 
-    <!-- Role Assignment Modal -->
     <div class="modal" id="role-modal" style="display: none;">
         <div class="modal-content">
             <div class="modal-header">
@@ -234,7 +234,6 @@
         </div>
     </div>
 
-    <!-- Remove Confirmation Modal -->
     <div class="modal" id="remove-modal" style="display: none;">
         <div class="modal-content">
             <div class="modal-header">
@@ -253,11 +252,8 @@
         </div>
     </div>
 
-    <!-- Toast Notifications -->
     <div class="toast-container" id="toast-container"></div>
 
-    </div><!-- /.app-shell -->
-
     <!-- Mobile bottom nav -->
     <nav class="app-mobile-nav" aria-label="Main navigation">
         <ul class="app-mobile-nav__list">
diff --git a/dashboard/integrations.html b/dashboard/integrations.html
index b70852d..ac6627a 100644
--- a/dashboard/integrations.html
+++ b/dashboard/integrations.html
@@ -384,18 +384,18 @@
     </div>
     </main>
 
-    <!-- ── Mobile bottom nav ── -->
-    <nav class="app-mobile-nav">
-        <ul class="app-mobile-nav__list">
-            <li class="app-mobile-nav__item"><a href="/" class="app-mobile-nav__link">Home</a></li>
-            <li class="app-mobile-nav__item"><a href="/live" class="app-mobile-nav__link">Live</a></li>
-            <li class="app-mobile-nav__item"><a href="/fleet" class="app-mobile-nav__link">Fleet</a></li>
-            <li class="app-mobile-nav__item"><a href="/integrations" class="app-mobile-nav__link app-mobile-nav__link--active">Integrations</a></li>
-        </ul>
-    </nav>
-
 </div><!-- /.app-shell -->
 
+<!-- ── Mobile bottom nav (outside grid) ── -->
+<nav class="app-mobile-nav">
+    <ul class="app-mobile-nav__list">
+        <li class="app-mobile-nav__item"><a href="/" class="app-mobile-nav__link">Home</a></li>
+        <li class="app-mobile-nav__item"><a href="/live" class="app-mobile-nav__link">Live</a></li>
+        <li class="app-mobile-nav__item"><a href="/fleet" class="app-mobile-nav__link">Fleet</a></li>
+        <li class="app-mobile-nav__item"><a href="/integrations" class="app-mobile-nav__link app-mobile-nav__link--active">Integrations</a></li>
+    </ul>
+</nav>
+
     <script src="js/integrations.js"></script>
     <script>
         // Override the panel rendering for standalone page
diff --git a/dashboard/js/timeline.js b/dashboard/js/timeline.js
index d2440c5..e24cef8 100644
--- a/dashboard/js/timeline.js
+++ b/dashboard/js/timeline.js
@@ -1352,70 +1352,102 @@
 	// Seek Handler (Time-Travel)
 	// ============================================
 	function handleSeek(timestamp, entryElement) {
-		// Convert timestamp to ISO8601
-		const targetDate = new Date(timestamp);
-		const iso8601 = targetDate.toISOString();
+		if (state.dashboardMode !== 'expert') {
+			return;
+		}
 
-		// Create a replay window around the event timestamp
-		const windowMs = CONFIG.replaySeekWindowSec * 1000;
-		const fromDate = new Date(timestamp - windowMs);
-		const toDate = new Date(timestamp + windowMs);
+		// Highlight selected event
+		clearSelectedEvent();
+		if (entryElement) {
+			entryElement.classList.add('timeline-event-selected');
+			state.replay.selectedEventId = entryElement.dataset.id;
+		}
 
-		// Create replay session
-		const startPayload = {
-			from_iso8601: fromDate.toISOString(),
-			to_iso8601: toDate.toISOString(),
-			speed: 1
+		// Use jump-to-time API for single-call replay session creation
+		var payload = {
+			timestamp_ms: timestamp,
+			window_ms: CONFIG.replaySeekWindowSec * 1000
 		};
 
-		fetch('/api/replay/start', {
+		fetch('/api/replay/jump-to-time', {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify(startPayload)
+			body: JSON.stringify(payload)
 		})
 			.then(function(res) {
 				if (!res.ok) {
-					throw new Error('Failed to start replay session');
+					throw new Error('Failed to jump to time');
 				}
 				return res.json();
 			})
 			.then(function(data) {
-				const sessionId = data.session_id;
+				state.replay.activeSessionId = data.session_id;
+				state.replay.isReplaying = true;
+				state.replay.replayTimestamp = timestamp;
 
-				// Seek to the specific timestamp
-				return fetch('/api/replay/seek', {
-					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify({
-						session_id: sessionId,
-						timestamp_iso8601: iso8601
-					})
-				});
-			})
-			.then(function(res) {
-				if (!res.ok) {
-					throw new Error('Failed to seek in replay');
-				}
-				return res.json();
-			})
-			.then(function(data) {
-				// Navigate to replay mode
+				// Show "Now replaying" chip
+				showNowReplayingChip(timestamp);
+
+				// Navigate to replay mode if router available
 				if (window.SpaxelRouter) {
 					SpaxelRouter.navigate('replay');
 				}
 
+				// Notify replay module about the jump
+				if (window.SpaxelReplay && SpaxelReplay.onJumpToTime) {
+					SpaxelReplay.onJumpToTime(data.session_id, timestamp);
+				}
+
 				if (window.SpaxelApp && SpaxelApp.showToast) {
-					SpaxelApp.showToast('Replay mode: viewing ' + formatTimestamp(timestamp), 'info');
+					SpaxelApp.showToast('Viewing ' + formatTimestamp(timestamp), 'info');
 				}
 			})
 			.catch(function(err) {
-				console.error('[Timeline] Replay seek failed:', err);
+				console.error('[Timeline] Jump to time failed:', err);
 				if (window.SpaxelApp && SpaxelApp.showToast) {
 					SpaxelApp.showToast('Failed to jump to replay: ' + err.message, 'warning');
 				}
 			});
 	}
 
+	// ============================================
+	// Selected Event Highlighting
+	// ============================================
+	function clearSelectedEvent() {
+		if (elements.eventsList) {
+			var prev = elements.eventsList.querySelector('.timeline-event-selected');
+			if (prev) {
+				prev.classList.remove('timeline-event-selected');
+			}
+		}
+		state.replay.selectedEventId = null;
+	}
+
+	// ============================================
+	// Now Replaying Chip
+	// ============================================
+	function showNowReplayingChip(timestampMs) {
+		var chip = elements.nowReplayingChip;
+		if (!chip) return;
+
+		var timeStr = formatTimestamp(timestampMs);
+		chip.innerHTML = '<span class="now-replaying-dot"></span> Now replaying: ' + timeStr;
+		chip.style.display = 'inline-flex';
+		chip.classList.add('visible');
+	}
+
+	function hideNowReplayingChip() {
+		var chip = elements.nowReplayingChip;
+		if (!chip) return;
+
+		chip.classList.remove('visible');
+		chip.style.display = 'none';
+		state.replay.isReplaying = false;
+		state.replay.activeSessionId = null;
+		state.replay.replayTimestamp = null;
+		clearSelectedEvent();
+	}
+
 	function updateFilterOptions(events) {
 		// Extract unique values from events
 		const types = new Set();
diff --git a/dashboard/live.html b/dashboard/live.html
index ed17833..cfc0383 100644
--- a/dashboard/live.html
+++ b/dashboard/live.html
@@ -36,7 +36,7 @@
         }
 
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            font-family: var(--font-body);
             background: var(--bg-page);
             color: var(--text-primary);
             overflow: hidden;
@@ -59,7 +59,7 @@
             position: sticky;
             top: 0;
             height: 44px; /* Increased to 44px for touch target */
-            background: rgba(0, 0, 0, 0.7);
+            background: var(--live-status-bg);
             display: flex;
             align-items: center;
             padding: 0 16px;
@@ -146,7 +146,7 @@
             left: 20px;
             width: 280px;
             max-height: calc(100vh - 80px);
-            background: rgba(0, 0, 0, 0.8);
+            background: var(--live-node-bg);
             border-radius: 8px;
             padding: 12px;
             z-index: 100;
@@ -164,7 +164,7 @@
         .node-item {
             padding: 8px;
             margin-bottom: 4px;
-            background: rgba(255, 255, 255, 0.05);
+            background: var(--highlight-subtle);
             border-radius: 4px;
             font-size: 13px;
             cursor: pointer;
@@ -172,12 +172,12 @@
         }
 
         .node-item:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
         }
 
         .node-item.selected {
-            background: rgba(79, 195, 247, 0.2);
-            border: 1px solid rgba(79, 195, 247, 0.5);
+            background: var(--blue-interact-bg);
+            border: 1px solid var(--blue-interact-border);
         }
 
         .node-mac {
@@ -193,19 +193,19 @@
         }
 
         .node-status.online {
-            background: rgba(76, 175, 80, 0.3);
+            background: var(--ok-border);
             color: var(--ok);
         }
 
         .node-status.offline {
-            background: rgba(244, 67, 54, 0.3);
+            background: var(--alert-border);
             color: var(--alert);
         }
 
         .node-identify-btn {
             float: right;
-            background: rgba(255, 193, 7, 0.2);
-            border: 1px solid rgba(255, 193, 7, 0.4);
+            background: var(--warn-bg);
+            border: 1px solid var(--warn-border);
             color: var(--warn);
             font-size: 14px;
             padding: 2px 6px;
@@ -215,12 +215,12 @@
         }
 
         .node-identify-btn:hover {
-            background: rgba(255, 193, 7, 0.3);
-            border-color: rgba(255, 193, 7, 0.6);
+            background: var(--warn-muted);
+            border-color: var(--warn-border);
         }
 
         .node-identify-btn:active {
-            background: rgba(255, 193, 7, 0.4);
+            background: var(--warn-border);
         }
 
         /* Empty state */
@@ -234,7 +234,7 @@
         /* Link list */
         .link-section {
             margin-top: 16px;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            border-top: 1px solid var(--bg-hover);
             padding-top: 12px;
         }
 
@@ -242,7 +242,7 @@
             font-size: 11px;
             text-transform: uppercase;
             letter-spacing: 0.5px;
-            color: rgba(255, 255, 255, 0.5);
+            color: var(--text-muted);
             margin-bottom: 8px;
         }
 
@@ -254,11 +254,11 @@
             padding: 6px 0;
             cursor: pointer;
             font-size: 12px;
-            color: rgba(255, 255, 255, 0.7);
+            color: var(--text-secondary);
         }
 
         .pattern-checkbox:hover {
-            color: rgba(255, 255, 255, 0.9);
+            color: var(--text-primary);
         }
 
         .pattern-checkbox input[type="checkbox"] {
@@ -274,17 +274,17 @@
             gap: 8px;
             margin-top: 8px;
             padding-top: 8px;
-            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            border-top: 1px solid var(--bg-hover);
             font-size: 11px;
         }
 
         .pattern-filter label {
-            color: rgba(255, 255, 255, 0.5);
+            color: var(--text-muted);
         }
 
         .pattern-filter select {
-            background: rgba(255, 255, 255, 0.08);
-            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: var(--bg-hover);
+            border: 1px solid var(--border-strong);
             border-radius: 4px;
             color: var(--text-primary);
             padding: 4px 8px;
@@ -300,7 +300,7 @@
         .link-item {
             padding: 6px 8px;
             margin-bottom: 4px;
-            background: rgba(255, 255, 255, 0.03);
+            background: var(--highlight-subtle);
             border-radius: 4px;
             font-size: 12px;
             cursor: pointer;
@@ -309,11 +309,11 @@
         }
 
         .link-item:hover {
-            background: rgba(255, 255, 255, 0.08);
+            background: var(--bg-hover);
         }
 
         .link-item.selected {
-            background: rgba(79, 195, 247, 0.2);
+            background: var(--blue-interact-bg);
         }
 
         /* Presence badge */
@@ -326,12 +326,12 @@
         }
 
         .presence-badge.motion {
-            background: rgba(244, 67, 54, 0.25);
+            background: var(--alert-muted);
             color: var(--alert);
         }
 
         .presence-badge.clear {
-            background: rgba(76, 175, 80, 0.2);
+            background: var(--ok-muted);
             color: var(--ok);
         }
 
@@ -345,19 +345,19 @@
         }
 
         #presence-indicator.motion {
-            background: rgba(244, 67, 54, 0.3);
+            background: var(--alert-border);
             color: var(--alert);
         }
 
         #presence-indicator.clear {
-            background: rgba(76, 175, 80, 0.15);
+            background: var(--ok-bg);
             color: var(--ok);
         }
 
         /* View preset buttons */
         .view-btn {
-            background: rgba(255,255,255,0.08);
-            border: 1px solid rgba(255,255,255,0.15);
+            background: var(--bg-hover);
+            border: 1px solid var(--border-strong);
             color: var(--text-secondary);
             font-size: 12px;
             padding: 3px 10px;
@@ -365,12 +365,12 @@
             cursor: pointer;
             transition: background 0.2s, color 0.2s;
         }
-        .view-btn:hover { background: rgba(79,195,247,0.2); color: var(--blue-10); }
-        .view-btn.active { background: rgba(79,195,247,0.25); color: var(--blue-10); border-color: var(--blue-10); }
+        .view-btn:hover { background: var(--blue-interact-bg); color: var(--blue-10); }
+        .view-btn.active { background: var(--blue-interact-active); color: var(--blue-10); border-color: var(--blue-10); }
 
         #floorplan-btn {
             background: rgba(255,255,255,0.06);
-            border: 1px solid rgba(255,255,255,0.12);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -378,7 +378,7 @@
             cursor: pointer;
             transition: background 0.2s;
         }
-        #floorplan-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-secondary); }
+        #floorplan-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
 
         /* Presence panel */
         #presence-panel {
@@ -386,7 +386,7 @@
             top: 60px;
             right: 20px;
             width: 300px;
-            background: rgba(0, 0, 0, 0.8);
+            background: var(--live-panel-bg);
             border-radius: 8px;
             padding: 12px;
             z-index: 100;
@@ -416,17 +416,17 @@
         }
 
         #presence-status.motion {
-            background: rgba(244, 67, 54, 0.3);
+            background: var(--alert-border);
             color: var(--alert);
         }
 
         #presence-status.clear {
-            background: rgba(76, 175, 80, 0.15);
+            background: var(--ok-bg);
             color: var(--ok);
         }
 
         #presence-status.stationary {
-            background: rgba(66, 165, 245, 0.25);
+            background: var(--stationary-bg);
             color: var(--blue-10);
             animation: stationary-badge-pulse 2s ease-in-out infinite;
         }
@@ -447,7 +447,7 @@
             gap: 8px;
             padding: 5px 8px;
             margin-bottom: 3px;
-            background: rgba(255, 255, 255, 0.03);
+            background: var(--highlight-subtle);
             border-radius: 4px;
             font-size: 12px;
             cursor: pointer;
@@ -455,11 +455,11 @@
         }
 
         .presence-row:hover {
-            background: rgba(255, 255, 255, 0.08);
+            background: var(--bg-hover);
         }
 
         .presence-row.selected {
-            background: rgba(79, 195, 247, 0.2);
+            background: var(--blue-interact-bg);
         }
 
         .presence-dot {
@@ -472,38 +472,38 @@
 
         .presence-dot.clear {
             background: var(--ok);
-            box-shadow: 0 0 6px rgba(102, 187, 106, 0.5);
+            box-shadow: 0 0 6px var(--ok-glow);
         }
 
         .presence-dot.motion {
             background: var(--warn);
-            box-shadow: 0 0 6px rgba(255, 167, 38, 0.5);
+            box-shadow: 0 0 6px var(--warn-border);
         }
 
         .presence-dot.high-confidence {
             background: var(--alert);
-            box-shadow: 0 0 6px rgba(239, 83, 80, 0.5);
+            box-shadow: 0 0 6px var(--alert-border);
         }
 
         .presence-dot.stationary {
             background: var(--blue-10);
-            box-shadow: 0 0 8px rgba(66, 165, 245, 0.7);
+            box-shadow: 0 0 8px var(--blue-border);
             animation: stationary-pulse 2s ease-in-out infinite;
         }
 
         .presence-dot.possibly {
             background: var(--blue-9);
-            box-shadow: 0 0 6px rgba(171, 71, 188, 0.5);
+            box-shadow: 0 0 6px var(--alert-border);
         }
 
         @keyframes stationary-pulse {
             0%, 100% {
                 opacity: 1;
-                box-shadow: 0 0 8px rgba(66, 165, 245, 0.7);
+                box-shadow: 0 0 8px var(--blue-border);
             }
             50% {
                 opacity: 0.6;
-                box-shadow: 0 0 16px rgba(66, 165, 245, 0.9);
+                box-shadow: 0 0 16px var(--blue-border);
             }
         }
 
@@ -524,7 +524,7 @@
             color: var(--blue-10);
             font-size: 10px;
             padding: 1px 4px;
-            background: rgba(66, 165, 245, 0.15);
+            background: var(--blue-muted);
             border-radius: 3px;
             margin-left: 4px;
         }
@@ -549,7 +549,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0, 0, 0, 0.85);
+            background: var(--live-status-bg);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -564,7 +564,7 @@
             width: 92%;
             max-height: 90vh;
             overflow-y: auto;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 8px 32px var(--overlay);
         }
 
         #wizard-header {
@@ -621,7 +621,7 @@
         .wizard-step-dot.active {
             background: var(--blue-10);
             color: var(--text-on-accent);
-            box-shadow: 0 0 12px rgba(79, 195, 247, 0.5);
+            box-shadow: 0 0 12px var(--blue-interact-border);
         }
 
         .wizard-step-dot.completed {
@@ -740,7 +740,7 @@
             display: inline-block;
             width: 32px;
             height: 32px;
-            border: 3px solid rgba(79, 195, 247, 0.2);
+            border: 3px solid var(--blue-interact-bg);
             border-top-color: var(--blue-10);
             border-radius: 50%;
             animation: wizard-spin 0.8s linear infinite;
@@ -804,13 +804,13 @@
         }
 
         .wizard-btn-secondary {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             color: var(--text-secondary);
             border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .wizard-btn-secondary:hover:not(:disabled) {
-            background: rgba(255, 255, 255, 0.15);
+            background: var(--border-strong);
         }
 
         #wizard-nav {
@@ -822,7 +822,7 @@
 
         /* ===== Link Health Panel ===== */
         .link-health-panel {
-            background: rgba(0, 0, 0, 0.85);
+            background: var(--live-status-bg);
             border-radius: 8px;
             padding: 12px;
             font-size: 13px;
@@ -838,7 +838,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid var(--bg-hover);
             padding-bottom: 8px;
         }
 
@@ -873,7 +873,7 @@
         .composite-gauge {
             flex: 1;
             height: 8px;
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             border-radius: 4px;
             overflow: hidden;
         }
@@ -910,13 +910,13 @@
 
         .metric-gauge {
             padding: 6px;
-            background: rgba(255, 255, 255, 0.03);
+            background: var(--highlight-subtle);
             border-radius: 4px;
         }
 
         .metric-bar {
             height: 4px;
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             border-radius: 2px;
             overflow: hidden;
             margin-bottom: 4px;
@@ -1049,7 +1049,7 @@
         .diagnosis-confidence {
             font-size: 10px;
             color: var(--text-muted);
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             padding: 1px 5px;
             border-radius: 3px;
         }
@@ -1086,7 +1086,7 @@
         }
 
         .reposition-apply-btn {
-            background: rgba(76, 175, 80, 0.3);
+            background: var(--ok-border);
             border: 1px solid rgba(76, 175, 80, 0.5);
             color: var(--ok);
             font-size: 11px;
@@ -1119,14 +1119,14 @@
             align-items: center;
             gap: 8px;
             padding: 2px 10px;
-            background: rgba(255, 255, 255, 0.05);
+            background: var(--highlight-subtle);
             border-radius: 4px;
             cursor: pointer;
             transition: background 0.2s;
         }
 
         #detection-quality:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
         }
 
         #quality-gauge-container {
@@ -1143,7 +1143,7 @@
 
         #quality-gauge-bg {
             fill: none;
-            stroke: rgba(255, 255, 255, 0.1);
+            stroke: var(--bg-hover);
             stroke-width: 3;
         }
 
@@ -1255,7 +1255,7 @@
             padding: 15px;
             background: rgba(30, 30, 30, 0.5);
             border-radius: 8px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            border: 1px solid var(--bg-hover);
         }
 
         #diurnal-chart-container h4 {
@@ -1370,8 +1370,8 @@
         .form-group input {
             width: 100%;
             padding: 8px 12px;
-            background: rgba(255, 255, 255, 0.08);
-            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: var(--bg-hover);
+            border: 1px solid var(--border-strong);
             border-radius: 4px;
             color: var(--text-primary);
             font-size: 14px;
@@ -1381,7 +1381,7 @@
         .form-group input:focus {
             outline: none;
             border-color: var(--blue-10);
-            box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
+            box-shadow: 0 0 0 2px var(--blue-interact-bg);
         }
 
         .form-group input::placeholder {
@@ -1431,13 +1431,13 @@
         }
 
         #add-node-btn:hover {
-            background: rgba(79, 195, 247, 0.25);
+            background: var(--blue-interact-active);
         }
 
         /* Settings button in status bar */
         #settings-btn {
-            background: rgba(255, 255, 255, 0.06);
-            border: 1px solid rgba(255, 255, 255, 0.12);
+            background: var(--highlight-subtle);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -1447,7 +1447,7 @@
         }
 
         #settings-btn:hover {
-            background: rgba(255, 255, 255, 0.12);
+            background: var(--bg-hover);
             color: var(--text-secondary);
         }
 
@@ -1491,7 +1491,7 @@
         /* Room editor button */
         #room-editor-btn {
             background: rgba(255,255,255,0.06);
-            border: 1px solid rgba(255,255,255,0.12);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -1499,8 +1499,8 @@
             cursor: pointer;
             transition: background 0.2s, color 0.2s;
         }
-        #room-editor-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-secondary); }
-        #room-editor-btn.active { background: rgba(79,195,247,0.2); color: var(--blue-10); border-color: var(--blue-10); }
+        #room-editor-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
+        #room-editor-btn.active { background: var(--blue-interact-bg); color: var(--blue-10); border-color: var(--blue-10); }
 
         /* Add Portal button in status bar */
         #add-portal-btn {
@@ -1521,7 +1521,7 @@
         /* Portal editor button */
         #portal-editor-btn {
             background: rgba(255,255,255,0.06);
-            border: 1px solid rgba(255,255,255,0.12);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -1529,7 +1529,7 @@
             cursor: pointer;
             transition: background 0.2s, color 0.2s;
         }
-        #portal-editor-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-secondary); }
+        #portal-editor-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
         #portal-editor-btn.active { background: rgba(255,167,38,0.2); color: var(--warn); border-color: var(--warn); }
 
         /* Portal editor panel */
@@ -1538,8 +1538,8 @@
             top: 60px;
             left: 580px;
             width: 240px;
-            background: rgba(0, 0, 0, 0.85);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: var(--live-status-bg);
+            border: 1px solid var(--bg-hover);
             border-radius: 8px;
             padding: 16px;
             z-index: 100;
@@ -1569,8 +1569,8 @@
         #portal-editor-panel .room-field input,
         #portal-editor-panel .room-field select {
             width: 100%;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: var(--highlight-subtle);
+            border: 1px solid var(--bg-hover);
             color: var(--text-on-accent);
             padding: 6px 8px;
             border-radius: 4px;
@@ -1581,7 +1581,7 @@
         #portal-editor-panel .room-field input:focus,
         #portal-editor-panel .room-field select:focus {
             outline: none;
-            border-color: rgba(255, 167, 38, 0.5);
+            border-color: var(--warn-border);
         }
 
         #portal-editor-panel .portal-actions {
@@ -1603,7 +1603,7 @@
         }
 
         #portal-editor-panel .portal-actions button:hover {
-            background: rgba(79, 195, 247, 0.25);
+            background: var(--blue-interact-active);
         }
 
         #portal-editor-panel .portal-delete-btn {
@@ -1625,7 +1625,7 @@
         /* Simulator button */
         #simulator-btn {
             background: rgba(255,255,255,0.06);
-            border: 1px solid rgba(255,255,255,0.12);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -1633,7 +1633,7 @@
             cursor: pointer;
             transition: background 0.2s, color 0.2s;
         }
-        #simulator-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-secondary); }
+        #simulator-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
         #simulator-btn.active { background: rgba(156,39,176,0.2); color: var(--blue-9); border-color: var(--blue-9); }
 
         /* Help button */
@@ -1649,12 +1649,12 @@
             transition: background 0.2s, color 0.2s;
             min-width: 32px;
         }
-        #help-btn:hover { background: rgba(79,195,247,0.2); color: var(--blue-10); }
+        #help-btn:hover { background: var(--blue-interact-bg); color: var(--blue-10); }
 
         /* GDOP toggle */
         #gdop-toggle-btn {
             background: rgba(255,255,255,0.06);
-            border: 1px solid rgba(255,255,255,0.12);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -1662,13 +1662,13 @@
             cursor: pointer;
             transition: background 0.2s, color 0.2s;
         }
-        #gdop-toggle-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-secondary); }
+        #gdop-toggle-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
         #gdop-toggle-btn.active { background: rgba(76,175,80,0.25); color: var(--ok); border-color: var(--ok); }
 
         /* Fresnel zone toggle */
         #fresnel-toggle-btn {
             background: rgba(255,255,255,0.06);
-            border: 1px solid rgba(255,255,255,0.12);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -1676,8 +1676,8 @@
             cursor: pointer;
             transition: background 0.2s, color 0.2s;
         }
-        #fresnel-toggle-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-secondary); }
-        #fresnel-toggle-btn.active { background: rgba(79,195,247,0.25); color: var(--blue-10); border-color: var(--blue-10); }
+        #fresnel-toggle-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
+        #fresnel-toggle-btn.active { background: var(--blue-interact-active); color: var(--blue-10); border-color: var(--blue-10); }
 
         /* Virtual node status badge */
         .node-status.virtual {
@@ -1687,7 +1687,7 @@
 
         /* Delete node button */
         #delete-node-btn {
-            background: rgba(244, 67, 54, 0.15);
+            background: var(--alert-bg);
             border: 1px solid rgba(244, 67, 54, 0.4);
             color: var(--alert);
             font-size: 11px;
@@ -1698,7 +1698,7 @@
             display: none;
         }
         #delete-node-btn:hover {
-            background: rgba(244, 67, 54, 0.3);
+            background: var(--alert-border);
         }
 
         /* Node firmware display */
@@ -1750,8 +1750,8 @@
 
         /* OTA panel button in status bar */
         #ota-btn {
-            background: rgba(255, 255, 255, 0.06);
-            border: 1px solid rgba(255, 255, 255, 0.12);
+            background: var(--highlight-subtle);
+            border: 1px solid var(--bg-hover);
             color: var(--text-muted);
             font-size: 12px;
             padding: 3px 10px;
@@ -1760,11 +1760,11 @@
             transition: background 0.2s, color 0.2s;
         }
         #ota-btn:hover {
-            background: rgba(255, 255, 255, 0.12);
+            background: var(--bg-hover);
             color: var(--text-secondary);
         }
         #ota-btn.has-update {
-            background: rgba(76, 175, 80, 0.2);
+            background: var(--ok-muted);
             border-color: rgba(76, 175, 80, 0.4);
             color: var(--ok);
         }
@@ -1780,7 +1780,7 @@
             top: 60px;
             left: 320px;
             width: 240px;
-            background: rgba(0, 0, 0, 0.85);
+            background: var(--live-status-bg);
             border-radius: 8px;
             padding: 16px;
             z-index: 100;
@@ -1809,8 +1809,8 @@
         .room-field input {
             width: 100%;
             padding: 6px 10px;
-            background: rgba(255, 255, 255, 0.08);
-            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: var(--bg-hover);
+            border: 1px solid var(--border-strong);
             border-radius: 4px;
             color: var(--text-primary);
             font-size: 14px;
@@ -1820,7 +1820,7 @@
         .room-field input:focus {
             outline: none;
             border-color: var(--blue-10);
-            box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
+            box-shadow: 0 0 0 2px var(--blue-interact-bg);
         }
 
         .room-field .unit {
@@ -1852,7 +1852,7 @@
             position: fixed;
             bottom: 20px;
             left: 320px;
-            background: rgba(0, 0, 0, 0.85);
+            background: var(--live-status-bg);
             border-radius: 6px;
             padding: 10px 14px;
             z-index: 100;
@@ -1965,13 +1965,13 @@
 
         .anomaly-description {
             font-size: 14px;
-            color: rgba(255, 255, 255, 0.9);
+            color: var(--text-primary);
             margin-bottom: 4px;
         }
 
         .anomaly-meta {
             font-size: 12px;
-            color: rgba(255, 255, 255, 0.7);
+            color: var(--text-secondary);
         }
 
         .anomaly-actions {
@@ -2015,12 +2015,12 @@
 
         .anomaly-btn.dismiss {
             background: transparent;
-            color: rgba(255, 255, 255, 0.7);
+            color: var(--text-secondary);
             border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .anomaly-btn.dismiss:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             color: var(--text-on-accent);
         }
 
@@ -2047,7 +2047,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0, 0, 0, 0.7);
+            background: var(--overlay);
         }
 
         .modal-content {
@@ -2057,7 +2057,7 @@
             padding: 24px;
             max-width: 480px;
             width: 90%;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 8px 32px var(--overlay);
         }
 
         .modal-content h3 {
@@ -2071,7 +2071,7 @@
             color: var(--text-secondary);
             margin-bottom: 20px;
             padding: 12px;
-            background: rgba(255, 255, 255, 0.05);
+            background: var(--highlight-subtle);
             border-radius: 6px;
         }
 
@@ -2087,8 +2087,8 @@
             align-items: center;
             gap: 12px;
             padding: 12px 16px;
-            background: rgba(255, 255, 255, 0.05);
-            border: 2px solid rgba(255, 255, 255, 0.1);
+            background: var(--highlight-subtle);
+            border: 2px solid var(--bg-hover);
             border-radius: 8px;
             cursor: pointer;
             transition: all 0.2s;
@@ -2096,12 +2096,12 @@
         }
 
         .feedback-btn:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             border-color: rgba(255, 255, 255, 0.2);
         }
 
         .feedback-btn.selected {
-            background: rgba(79, 195, 247, 0.2);
+            background: var(--blue-interact-bg);
             border-color: var(--blue-10);
         }
 
@@ -2130,8 +2130,8 @@
             width: 100%;
             height: 60px;
             padding: 10px;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: var(--highlight-subtle);
+            border: 1px solid var(--border-strong);
             border-radius: 6px;
             color: var(--text-primary);
             font-size: 13px;
@@ -2161,12 +2161,12 @@
         }
 
         .modal-btn.cancel {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             color: var(--text-secondary);
         }
 
         .modal-btn.cancel:hover {
-            background: rgba(255, 255, 255, 0.15);
+            background: var(--border-strong);
         }
 
         .modal-btn.submit {
@@ -2278,7 +2278,7 @@
         .ws-lost-modal {
             position: fixed;
             top: 0; left: 0; right: 0; bottom: 0;
-            background: rgba(0, 0, 0, 0.6);
+            background: var(--overlay);
             z-index: 200;
             display: flex;
             align-items: center;
@@ -2317,7 +2317,7 @@
             background: var(--blue-10);
         }
         .ws-lost-dismiss-btn {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             color: var(--text-secondary);
             border: none;
             padding: 10px 24px;
@@ -2326,13 +2326,13 @@
             cursor: pointer;
         }
         .ws-lost-dismiss-btn:hover {
-            background: rgba(255, 255, 255, 0.15);
+            background: var(--border-strong);
         }
 
         /* ===== Mobile Menu Toggle Button ===== */
         #mobile-menu-btn {
             display: none;
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             border: 1px solid rgba(255, 255, 255, 0.2);
             color: var(--text-secondary);
             font-size: 14px;
@@ -2346,7 +2346,7 @@
         }
 
         #mobile-menu-btn:hover {
-            background: rgba(255, 255, 255, 0.15);
+            background: var(--border-strong);
             color: var(--text-on-accent);
         }
 
@@ -2364,7 +2364,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
+            background: var(--overlay);
             z-index: 999;
             opacity: 0;
             transition: opacity 0.2s ease;
@@ -2384,7 +2384,7 @@
             width: 320px;
             max-width: 85vw;
             background: var(--bg-card);
-            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5);
+            box-shadow: 4px 0 16px var(--overlay);
             z-index: 1000;
             transform: translateX(-100%);
             transition: transform 0.2s ease-out;
@@ -2403,7 +2403,7 @@
             align-items: center;
             justify-content: space-between;
             padding: 16px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid var(--bg-hover);
             padding-top: max(16px, env(safe-area-inset-top));
         }
 
@@ -2431,13 +2431,13 @@
         }
 
         #hamburger-close-btn:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             color: var(--text-primary);
         }
 
         .hamburger-section {
             padding: 16px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid var(--bg-hover);
         }
 
         .hamburger-section h3 {
@@ -2466,7 +2466,7 @@
         }
 
         .hamburger-item:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             color: var(--text-primary);
         }
 
@@ -2480,7 +2480,7 @@
         /* ===== Hamburger Menu Tabs ===== */
         .hamburger-tabs {
             display: flex;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid var(--bg-hover);
             overflow-x: auto;
             scrollbar-width: none; /* Firefox */
             padding-bottom: env(safe-area-inset-bottom);
@@ -2522,7 +2522,7 @@
 
         .hamburger-tab:hover {
             color: var(--text-secondary);
-            background: rgba(255, 255, 255, 0.05);
+            background: var(--highlight-subtle);
         }
 
         .hamburger-tab.active {
@@ -2551,7 +2551,7 @@
             align-items: center;
             justify-content: space-between;
             padding: 16px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            border-bottom: 1px solid var(--bg-hover);
         }
 
         .hamburger-tab-header h3 {
@@ -2571,7 +2571,7 @@
         }
 
         .presence-status.clear {
-            background: rgba(76, 175, 80, 0.2);
+            background: var(--ok-muted);
             color: var(--ok);
         }
 
@@ -2592,7 +2592,7 @@
         #hamburger-timeline-content .timeline-event-item {
             padding: 12px;
             margin-bottom: 8px;
-            background: rgba(255, 255, 255, 0.03);
+            background: var(--highlight-subtle);
             border-radius: 6px;
             font-size: 13px;
         }
@@ -2613,7 +2613,7 @@
             align-items: center;
             padding: 12px;
             margin-bottom: 4px;
-            background: rgba(255, 255, 255, 0.03);
+            background: var(--highlight-subtle);
             border-radius: 6px;
             font-size: 13px;
         }
@@ -2923,14 +2923,14 @@
             .view-btn:active,
             #gdop-toggle-btn:active,
             #fresnel-toggle-btn:active {
-                background: rgba(255, 255, 255, 0.15);
+                background: var(--border-strong);
             }
         }
 
         /* ===== Replay Control Bar ===== */
         #pause-live-btn {
-            background: rgba(255, 193, 7, 0.15);
-            border: 1px solid rgba(255, 193, 7, 0.4);
+            background: var(--warn-bg);
+            border: 1px solid var(--warn-border);
             color: var(--warn);
             font-size: 12px;
             padding: 3px 10px;
@@ -2955,8 +2955,8 @@
             align-items: center;
             gap: 16px;
             z-index: 150;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 4px 20px var(--overlay);
+            border: 1px solid var(--bg-hover);
         }
 
         .replay-controls {
@@ -2966,8 +2966,8 @@
         }
 
         .replay-btn {
-            background: rgba(255, 255, 255, 0.08);
-            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: var(--bg-hover);
+            border: 1px solid var(--border-strong);
             color: var(--text-secondary);
             width: 32px;
             height: 32px;
@@ -2979,7 +2979,7 @@
             transition: background 0.2s, color 0.2s;
         }
         .replay-btn:hover {
-            background: rgba(79, 195, 247, 0.2);
+            background: var(--blue-interact-bg);
             border-color: rgba(79, 195, 247, 0.4);
             color: var(--blue-10);
         }
@@ -3004,13 +3004,13 @@
             display: flex;
             align-items: center;
             gap: 8px;
-            border-left: 1px solid rgba(255, 255, 255, 0.1);
+            border-left: 1px solid var(--bg-hover);
             padding-left: 12px;
         }
 
         .replay-speed {
-            background: rgba(255, 255, 255, 0.08);
-            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: var(--bg-hover);
+            border: 1px solid var(--border-strong);
             color: var(--text-secondary);
             font-size: 11px;
             padding: 4px 8px;
@@ -3026,7 +3026,7 @@
             display: flex;
             flex-direction: column;
             gap: 2px;
-            border-left: 1px solid rgba(255, 255, 255, 0.1);
+            border-left: 1px solid var(--bg-hover);
             padding-left: 12px;
         }
 
@@ -3035,7 +3035,7 @@
             height: 4px;
             -webkit-appearance: none;
             appearance: none;
-            background: rgba(255, 255, 255, 0.15);
+            background: var(--border-strong);
             border-radius: 2px;
             outline: none;
         }
@@ -3086,8 +3086,8 @@
             padding: 16px;
             z-index: 100;
             display: none;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 4px 20px var(--overlay);
+            border: 1px solid var(--bg-hover);
         }
         .replay-tuning-panel.visible {
             display: flex;
@@ -3148,7 +3148,7 @@
             height: 4px;
             -webkit-appearance: none;
             appearance: none;
-            background: rgba(255, 255, 255, 0.15);
+            background: var(--border-strong);
             border-radius: 2px;
             outline: none;
         }
@@ -3197,11 +3197,11 @@
             background: var(--blue-10);
         }
         .tuning-btn.reset {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--bg-hover);
             color: var(--text-secondary);
         }
         .tuning-btn.reset:hover {
-            background: rgba(255, 255, 255, 0.15);
+            background: var(--border-strong);
         }
 
         /* Fresnel zone debug tooltip */
@@ -3209,7 +3209,7 @@
             position: fixed;
             display: none;
             background: rgba(0, 0, 0, 0.9);
-            border: 1px solid rgba(79, 195, 247, 0.5);
+            border: 1px solid var(--blue-interact-border);
             border-radius: 6px;
             padding: 10px 12px;
             font-size: 12px;
@@ -3217,7 +3217,7 @@
             pointer-events: none;
             z-index: 1000;
             max-width: 280px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 4px 12px var(--overlay);
         }
         .fresnel-tooltip strong {
             color: var(--blue-10);
diff --git a/dashboard/simple.html b/dashboard/simple.html
index 852e098..43d084f 100644
--- a/dashboard/simple.html
+++ b/dashboard/simple.html
@@ -17,7 +17,7 @@
         .wizard-close:hover{color:var(--text-primary)}
         #wizard-steps{display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6);gap:0}
         .wizard-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:var(--fw-heading);background:var(--bg-active);color:var(--slate-7);transition:all .3s;flex-shrink:0}
-        .wizard-step-dot.active{background:var(--color-primary);color:var(--text-on-accent);box-shadow:0 0 12px rgba(62,150,232,.5)}
+        .wizard-step-dot.active{background:var(--color-primary);color:var(--text-on-accent);box-shadow:0 0 12px var(--blue-border)}
         .wizard-step-dot.completed{background:var(--ok);color:var(--text-on-accent)}
         .wizard-step-line{width:20px;height:2px;background:var(--bg-active);flex-shrink:0}
         .wizard-step-line.completed{background:var(--ok)}
@@ -48,12 +48,12 @@
     </style>
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="theme-color" content="#f5f5f7">
+    <meta name="theme-color" content="#18191b">
 </head>
 <body class="simple-mode has-mobile-nav">
     <div class="app-shell app-shell--full">
     <!-- Header (grid header area) -->
-    <header id="simple-mode-header" class="simple-mode-header">
+    <header id="simple-mode-header" class="simple-mode-header app-header">
         <h1>&#x1F3E0; Spaxel</h1>
         <div class="mode-toggle">
             <button class="mode-toggle-btn active" data-mode="simple">Simple</button>
