diff --git a/public/customize.js b/public/customize.js
index 4f2f8cd0..ed68e527 100644
--- a/public/customize.js
+++ b/public/customize.js
@@ -17,7 +17,7 @@
     theme: {
       accent: '#4a9eff', navBg: '#0f0f23', background: '#f4f5f7', text: '#1a1a2e',
       statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
-      accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#5b6370', border: '#e2e5ea',
+      accentHover: '#6db3ff', navBg2: '#1a1a2e', navText: '#ffffff', textMuted: '#5b6370', border: '#e2e5ea',
       surface1: '#ffffff', surface2: '#ffffff', cardBg: '#ffffff', contentBg: '#f4f5f7',
       inputBg: '#ffffff', rowStripe: '#f9fafb', rowHover: '#eef2ff', selectedBg: '#dbeafe',
       font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
@@ -26,7 +26,7 @@
     themeDark: {
       accent: '#4a9eff', navBg: '#0f0f23', background: '#0f0f23', text: '#e2e8f0',
       statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
-      accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#a8b8cc', border: '#334155',
+      accentHover: '#6db3ff', navBg2: '#1a1a2e', navText: '#ffffff', textMuted: '#a8b8cc', border: '#334155',
       surface1: '#1a1a2e', surface2: '#232340', cardBg: '#1a1a2e', contentBg: '#0f0f23',
       inputBg: '#1e1e34', rowStripe: '#1e1e34', rowHover: '#2d2d50', selectedBg: '#1e3a5f',
       font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
@@ -79,6 +79,7 @@
     // Advanced (derived from basic by default)
     accentHover: '--accent-hover',
     navBg2: '--nav-bg2',
+    navText: '--nav-text',
     textMuted: '--text-muted',
     border: '--border',
     surface1: '--surface-1',
@@ -94,7 +95,7 @@
   };
 
   const BASIC_KEYS = ['accent', 'navBg', 'background', 'text', 'statusGreen', 'statusYellow', 'statusRed'];
-  const ADVANCED_KEYS = ['accentHover', 'navBg2', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg', 'font', 'mono'];
+  const ADVANCED_KEYS = ['accentHover', 'navBg2', 'navText', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg', 'font', 'mono'];
 
   const THEME_LABELS = {
     accent: 'Brand Color',
@@ -106,6 +107,7 @@
     statusRed: 'Error',
     accentHover: 'Accent Hover',
     navBg2: 'Nav Gradient End',
+    navText: 'Nav Text',
     textMuted: 'Muted Text',
     border: 'Borders',
     surface1: 'Cards',
@@ -130,6 +132,7 @@
     statusRed: 'Error/offline indicators',
     accentHover: 'Hover state for accent elements',
     navBg2: 'Darker end of nav gradient',
+    navText: 'Navigation bar text, links, brand name',
     textMuted: 'Labels, timestamps, secondary text',
     border: 'Dividers, table borders, card borders',
     surface1: 'Card and panel backgrounds',
diff --git a/public/index.html b/public/index.html
index f307c979..93cb0fd7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="MeshCore Analyzer">
   <meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
-  <link rel="stylesheet" href="style.css?v=1774232985">
+  <link rel="stylesheet" href="style.css?v=1774234762">
   <link rel="stylesheet" href="home.css">
   <link rel="stylesheet" href="live.css?v=1774058575">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -101,6 +101,6 @@
   <script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="customize.js?v=1774234619" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="customize.js?v=1774234762" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>
diff --git a/public/style.css b/public/style.css
index dc5a441f..7d78b709 100644
--- a/public/style.css
+++ b/public/style.css
@@ -87,12 +87,12 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
 /* === Nav === */
 .top-nav {
   display: flex; align-items: center; justify-content: space-between;
-  background: linear-gradient(135deg, var(--nav-bg) 0%, var(--nav-bg2) 100%); color: #fff; padding: 0 20px; height: 52px;
+  background: linear-gradient(135deg, var(--nav-bg) 0%, var(--nav-bg2) 100%); color: var(--nav-text, #fff); padding: 0 20px; height: 52px;
   position: sticky; top: 0; z-index: 1100;
   box-shadow: 0 2px 8px rgba(0,0,0,.3);
 }
 .nav-left { display: flex; align-items: center; gap: 24px; }
-.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-weight: 700; font-size: 16px; }
+.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nav-text, #fff); font-weight: 700; font-size: 16px; }
 .brand-icon { font-size: 20px; }
 .live-dot {
   width: 8px; height: 8px; border-radius: 50%; background: #555;