fix: introduce --accent-cyan-rgb to make all opacity variants theme-aware

All files used hardcoded rgba(74, 163/158, 255, X) values in actual CSS
rules that CSS variable overrides couldn't touch. Solution: add
--accent-cyan-rgb triplet to variables.css root/light/enhanced blocks,
then replace every rgba(74,1xx,255,) occurrence across all CSS files
with rgba(var(--accent-cyan-rgb),). Enhanced tier sets the triplet to
200, 150, 40 (amber), so tscm.css panel bg, index.css card borders,
and all other tinted surfaces go amber automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/css/adsb_dashboard.css

@@ -21,7 +21,7 @@
     --accent-red: #e25d5d;
     --accent-yellow: #e1c26b;
     --accent-amber: #d6a85e;
-    --grid-line: rgba(74, 163, 255, 0.1);
+    --grid-line: rgba(var(--accent-cyan-rgb), 0.1);
     --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
     --radar-cyan: #4aa3ff;
     --radar-bg: #101823;
@@ -329,7 +329,7 @@ body {
 }
 
 .acars-collapse-btn:hover {
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
 }
 
 .acars-collapse-label {
@@ -447,7 +447,7 @@ body {
 }
 
 .acars-message-item:hover {
-    background: rgba(74, 158, 255, 0.05);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
 }
 
 @keyframes fadeIn {
@@ -490,7 +490,7 @@ body {
 }
 
 .vdl2-collapse-btn:hover {
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
 }
 
 .vdl2-collapse-label {
@@ -610,7 +610,7 @@ body {
 }
 
 .vdl2-message-item:hover {
-    background: rgba(74, 158, 255, 0.08);
+    background: rgba(var(--accent-cyan-rgb), 0.08);
 }
 
 /* VDL2 Message Modal */
@@ -787,7 +787,7 @@ body {
 /* Panels */
 .panel {
     background: var(--bg-panel);
-    border: 1px solid rgba(74, 158, 255, 0.2);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     overflow: hidden;
     position: relative;
 }
@@ -804,8 +804,8 @@ body {
 
 .panel-header {
     padding: 10px 15px;
-    background: rgba(74, 158, 255, 0.05);
-    border-bottom: 1px solid rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
+    border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
     font-family: 'Orbitron', monospace;
     font-size: 11px;
     font-weight: 500;
@@ -984,7 +984,7 @@ body {
     display: flex;
     flex-direction: column;
     border-left: none;
-    border-top: 1px solid rgba(74, 158, 255, 0.2);
+    border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     overflow: hidden;
     max-height: 40vh;
 }
@@ -993,7 +993,7 @@ body {
     .sidebar {
         grid-column: 2;
         grid-row: 1;
-        border-left: 1px solid rgba(74, 158, 255, 0.2);
+        border-left: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
         border-top: none;
         max-height: none;
     }
@@ -1088,7 +1088,7 @@ body {
 .aircraft-item {
     position: relative;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(74, 158, 255, 0.15);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
     border-radius: 4px;
     padding: 8px 10px;
     margin-bottom: 6px;
@@ -1098,13 +1098,13 @@ body {
 
 .aircraft-item:hover {
     border-color: var(--accent-cyan);
-    background: rgba(74, 158, 255, 0.05);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
 }
 
 .aircraft-item.selected {
     border-color: var(--accent-cyan);
-    box-shadow: 0 0 15px rgba(74, 158, 255, 0.2);
-    background: rgba(74, 158, 255, 0.1);
+    box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
 }
 
 .aircraft-header {
@@ -1125,7 +1125,7 @@ body {
     font-family: var(--font-mono);
     font-size: 9px;
     color: var(--text-secondary);
-    background: rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
     padding: 2px 5px;
     border-radius: 3px;
 }
@@ -1177,8 +1177,8 @@ body {
     align-items: flex-start;
     gap: 4px;
     padding: 6px 10px;
-    background: rgba(74, 158, 255, 0.03);
-    border: 1px solid rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.03);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
     border-radius: 6px;
 }
 
@@ -1207,8 +1207,8 @@ body {
     align-items: flex-start;
     gap: 4px;
     padding: 6px 10px;
-    background: rgba(74, 158, 255, 0.03);
-    border: 1px solid rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.03);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
     border-radius: 6px;
 }
 
@@ -1247,7 +1247,7 @@ body {
 .control-group select {
     padding: 4px 8px;
     background: var(--bg-dark);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     border-radius: 4px;
     color: var(--accent-cyan);
     font-family: var(--font-mono);
@@ -1258,7 +1258,7 @@ body {
 .control-group input[type="number"] {
     padding: 4px 6px;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     border-radius: 4px;
     color: var(--accent-cyan);
     font-family: var(--font-mono);
@@ -1322,7 +1322,7 @@ body {
     width: 40px;
     height: 4px;
     -webkit-appearance: none;
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     border-radius: 2px;
 }
 
@@ -1376,8 +1376,8 @@ body {
 /* GPS button */
 .gps-btn {
     padding: 6px 10px;
-    background: rgba(74, 158, 255, 0.2);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     border-radius: 4px;
     color: var(--accent-cyan);
     font-family: var(--font-mono);
@@ -1677,7 +1677,7 @@ body {
     0% {
         transform: translate(-50%, -50%) scale(0.8);
         opacity: 1;
-        border-color: rgba(74, 158, 255, 1);
+        border-color: rgba(var(--accent-cyan-rgb), 1);
     }
     50% {
         opacity: 0.6;
@@ -1685,7 +1685,7 @@ body {
     100% {
         transform: translate(-50%, -50%) scale(1.8);
         opacity: 0;
-        border-color: rgba(74, 158, 255, 0);
+        border-color: rgba(var(--accent-cyan-rgb), 0);
     }
 }
 
@@ -1868,15 +1868,15 @@ body {
     flex-direction: column;
     align-items: center;
     padding: 4px 10px;
-    background: rgba(74, 158, 255, 0.05);
-    border: 1px solid rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
     border-radius: 4px;
     min-width: 55px;
 }
 
 .strip-stat:hover {
-    background: rgba(74, 158, 255, 0.1);
-    border-color: rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border-color: rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 .strip-value {
@@ -1925,7 +1925,7 @@ body {
 
 .strip-report-btn:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
+    box-shadow: 0 4px 12px rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 /* ============================================
@@ -2111,7 +2111,7 @@ body {
 }
 
 .report-table tr:hover {
-    background: rgba(74, 158, 255, 0.05);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
 }
 
 .report-more {
@@ -2183,7 +2183,7 @@ body {
 .strip-divider {
     width: 1px;
     height: 24px;
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     margin: 0 4px;
 }
 
@@ -2193,8 +2193,8 @@ body {
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    background: rgba(74, 158, 255, 0.1);
-    border: 1px solid rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--text-primary);
     padding: 6px 10px;
     border-radius: 4px;
@@ -2212,8 +2212,8 @@ body {
 }
 
 .strip-btn:hover:not(:disabled) {
-    background: rgba(74, 158, 255, 0.2);
-    border-color: rgba(74, 158, 255, 0.4);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
+    border-color: rgba(var(--accent-cyan-rgb), 0.4);
 }
 
 .strip-btn:disabled {
@@ -2229,7 +2229,7 @@ body {
 
 .strip-btn.primary:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
+    box-shadow: 0 4px 12px rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 /* Status and time in strip */
@@ -2272,7 +2272,7 @@ body {
     color: var(--accent-cyan);
     font-family: var(--font-mono);
     padding-left: 8px;
-    border-left: 1px solid rgba(74, 158, 255, 0.2);
+    border-left: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     white-space: nowrap;
 }
 

static/css/adsb_history.css

@@ -11,14 +11,14 @@
     --bg-panel: #101823;
     --bg-card: #151f2b;
     --border-color: #263246;
-    --border-glow: rgba(74, 163, 255, 0.4);
+    --border-glow: rgba(var(--accent-cyan-rgb), 0.4);
     --text-primary: #d7e0ee;
     --text-secondary: #9fb0c7;
     --text-dim: #6f7f94;
     --accent-cyan: #4aa3ff;
     --accent-green: #38c180;
     --accent-amber: #d6a85e;
-    --grid-line: rgba(74, 163, 255, 0.1);
+    --grid-line: rgba(var(--accent-cyan-rgb), 0.1);
     --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
 }
 
@@ -297,7 +297,7 @@ body {
 
 .primary-btn:hover {
     transform: translateY(-1px);
-    box-shadow: 0 6px 14px rgba(74, 158, 255, 0.3);
+    box-shadow: 0 6px 14px rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 .primary-btn:disabled {
@@ -411,7 +411,7 @@ body {
 }
 
 .aircraft-row:hover {
-    background: rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
 }
 
 .aircraft-row.military {
@@ -440,9 +440,9 @@ body {
 }
 
 .civ-badge {
-    background: rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.15);
     color: var(--text-dim);
-    border: 1px solid rgba(74, 158, 255, 0.25);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.25);
 }
 
 .mono {
@@ -602,8 +602,8 @@ body {
 }
 
 .nav-btn {
-    background: rgba(74, 158, 255, 0.15);
-    border: 1px solid rgba(74, 158, 255, 0.4);
+    background: rgba(var(--accent-cyan-rgb), 0.15);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
     color: var(--accent-cyan);
     padding: 6px 10px;
     border-radius: 6px;

static/css/ais_dashboard.css

@@ -24,7 +24,7 @@
     --accent-red: #e25d5d;
     --accent-yellow: #e1c26b;
     --accent-amber: #d6a85e;
-    --grid-line: rgba(74, 163, 255, 0.1);
+    --grid-line: rgba(var(--accent-cyan-rgb), 0.1);
     --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
     --radar-cyan: #4aa3ff;
     --radar-bg: #101823;
@@ -249,15 +249,15 @@ body {
     flex-direction: column;
     align-items: center;
     padding: 4px 10px;
-    background: rgba(74, 158, 255, 0.05);
-    border: 1px solid rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
     border-radius: 4px;
     min-width: 55px;
 }
 
 .strip-stat:hover {
-    background: rgba(74, 158, 255, 0.1);
-    border-color: rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border-color: rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 .strip-value {
@@ -321,7 +321,7 @@ body {
 .strip-divider {
     width: 1px;
     height: 24px;
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     margin: 0 4px;
 }
 
@@ -367,15 +367,15 @@ body {
     color: var(--accent-cyan);
     font-family: var(--font-mono);
     padding-left: 8px;
-    border-left: 1px solid rgba(74, 158, 255, 0.2);
+    border-left: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     white-space: nowrap;
 }
 
 .strip-btn {
     position: relative;
     z-index: 10;
-    background: rgba(74, 158, 255, 0.1);
-    border: 1px solid rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--text-primary);
     padding: 6px 10px;
     border-radius: 4px;
@@ -387,8 +387,8 @@ body {
 }
 
 .strip-btn:hover:not(:disabled) {
-    background: rgba(74, 158, 255, 0.2);
-    border-color: rgba(74, 158, 255, 0.4);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
+    border-color: rgba(var(--accent-cyan-rgb), 0.4);
 }
 
 .strip-btn.primary {
@@ -467,7 +467,7 @@ body {
     background: var(--bg-panel);
     color: var(--text-primary);
     border-radius: 4px;
-    border: 1px solid rgba(74, 158, 255, 0.2);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
 }
 
 .leaflet-popup-tip {
@@ -479,7 +479,7 @@ body {
     display: flex;
     flex-direction: column;
     border-left: none;
-    border-top: 1px solid rgba(74, 158, 255, 0.2);
+    border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     overflow: hidden;
     max-height: 40vh;
     background: var(--bg-panel);
@@ -489,7 +489,7 @@ body {
     .sidebar {
         grid-column: 2;
         grid-row: 1;
-        border-left: 1px solid rgba(74, 158, 255, 0.2);
+        border-left: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
         border-top: none;
         max-height: none;
     }
@@ -498,7 +498,7 @@ body {
 /* Panels */
 .panel {
     background: var(--bg-panel);
-    border: 1px solid rgba(74, 158, 255, 0.2);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     overflow: hidden;
     position: relative;
 }
@@ -515,8 +515,8 @@ body {
 
 .panel-header {
     padding: 10px 15px;
-    background: rgba(74, 158, 255, 0.05);
-    border-bottom: 1px solid rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
+    border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
     font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
     font-size: 11px;
     font-weight: 500;
@@ -557,7 +557,7 @@ body {
     flex-shrink: 0;
     max-height: 480px;
     overflow-y: auto;
-    border-bottom: 1px solid rgba(74, 158, 255, 0.2);
+    border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
 }
 
 .selected-info {
@@ -600,7 +600,7 @@ body {
     font-family: var(--font-mono);
     font-size: 10px;
     color: var(--text-secondary);
-    background: rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
     padding: 2px 5px;
     border-radius: 3px;
 }
@@ -649,7 +649,7 @@ body {
 .vessel-item {
     position: relative;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(74, 158, 255, 0.15);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
     border-radius: 4px;
     padding: 8px 10px;
     margin-bottom: 6px;
@@ -662,13 +662,13 @@ body {
 
 .vessel-item:hover {
     border-color: var(--accent-cyan);
-    background: rgba(74, 158, 255, 0.05);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
 }
 
 .vessel-item.selected {
     border-color: var(--accent-cyan);
-    box-shadow: 0 0 15px rgba(74, 158, 255, 0.2);
-    background: rgba(74, 158, 255, 0.1);
+    box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
 }
 
 .vessel-item-icon {
@@ -712,7 +712,7 @@ body {
     gap: 8px;
     padding: 8px 15px;
     background: var(--bg-panel);
-    border-top: 1px solid rgba(74, 158, 255, 0.3);
+    border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     font-size: 11px;
     overflow: hidden;
 }
@@ -725,8 +725,8 @@ body {
     align-items: flex-start;
     gap: 4px;
     padding: 6px 10px;
-    background: rgba(74, 158, 255, 0.03);
-    border: 1px solid rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.03);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
     border-radius: 6px;
 }
 
@@ -740,8 +740,8 @@ body {
     align-items: flex-start;
     gap: 4px;
     padding: 6px 10px;
-    background: rgba(74, 158, 255, 0.03);
-    border: 1px solid rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.03);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
     border-radius: 6px;
 }
 
@@ -780,7 +780,7 @@ body {
 .control-group select {
     padding: 4px 8px;
     background: var(--bg-dark);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     border-radius: 4px;
     color: var(--accent-cyan);
     font-family: var(--font-mono);
@@ -791,7 +791,7 @@ body {
 .control-group input[type="number"] {
     padding: 4px 6px;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     border-radius: 4px;
     color: var(--accent-cyan);
     font-family: var(--font-mono);
@@ -889,7 +889,7 @@ body {
     0% {
         transform: translate(-50%, -50%) scale(0.8);
         opacity: 1;
-        border-color: rgba(74, 158, 255, 1);
+        border-color: rgba(var(--accent-cyan-rgb), 1);
     }
     50% {
         opacity: 0.6;
@@ -897,7 +897,7 @@ body {
     100% {
         transform: translate(-50%, -50%) scale(1.8);
         opacity: 0;
-        border-color: rgba(74, 158, 255, 0);
+        border-color: rgba(var(--accent-cyan-rgb), 0);
     }
 }
 

static/css/components/function-strip.css

@@ -36,15 +36,15 @@
     flex-direction: column;
     align-items: center;
     padding: 6px 10px;
-    background: rgba(74, 158, 255, 0.05);
-    border: 1px solid rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
     border-radius: 4px;
     min-width: 55px;
 }
 
 .function-strip .strip-stat:hover {
-    background: rgba(74, 158, 255, 0.1);
-    border-color: rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border-color: rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 .function-strip .strip-value {
@@ -165,8 +165,8 @@
 
 /* Buttons */
 .function-strip .strip-btn {
-    background: rgba(74, 158, 255, 0.1);
-    border: 1px solid rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--text-primary);
     padding: 6px 12px;
     border-radius: 4px;
@@ -178,8 +178,8 @@
 }
 
 .function-strip .strip-btn:hover:not(:disabled) {
-    background: rgba(74, 158, 255, 0.2);
-    border-color: rgba(74, 158, 255, 0.4);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
+    border-color: rgba(var(--accent-cyan-rgb), 0.4);
 }
 
 .function-strip .strip-btn.primary {
@@ -365,12 +365,12 @@
 }
 
 .function-strip.listening-strip .strip-stat {
-    background: rgba(74, 158, 255, 0.05);
-    border-color: rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
+    border-color: rgba(var(--accent-cyan-rgb), 0.15);
 }
 .function-strip.listening-strip .strip-stat:hover {
-    background: rgba(74, 158, 255, 0.1);
-    border-color: rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border-color: rgba(var(--accent-cyan-rgb), 0.3);
 }
 .function-strip.listening-strip .strip-value {
     color: var(--accent-cyan);

static/css/components/signal-cards.css

@@ -153,7 +153,7 @@
 }
 
 .signal-filter-btn.active .signal-filter-count {
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--accent-cyan);
 }
 
@@ -268,7 +268,7 @@
 .signal-proto-badge.pocsag {
     background: var(--accent-cyan-dim);
     color: var(--accent-cyan);
-    border-color: rgba(74, 158, 255, 0.25);
+    border-color: rgba(var(--accent-cyan-rgb), 0.25);
 }
 
 .signal-proto-badge.flex {
@@ -557,12 +557,12 @@
 
 .signal-action-btn.primary {
     background: var(--accent-cyan-dim);
-    border-color: rgba(74, 158, 255, 0.25);
+    border-color: rgba(var(--accent-cyan-rgb), 0.25);
     color: var(--accent-cyan);
 }
 
 .signal-action-btn.primary:hover {
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
 }
 
 .signal-action-btn.danger {
@@ -691,8 +691,8 @@
     position: absolute;
     inset: 0;
     background-image:
-        linear-gradient(rgba(74, 158, 255, 0.08) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(74, 158, 255, 0.08) 1px, transparent 1px);
+        linear-gradient(rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px);
     background-size: 14px 14px;
 }
 

static/css/components/toast.css

@@ -501,8 +501,8 @@
 }
 
 .update-result-info {
-    background: rgba(74, 158, 255, 0.1);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 .update-result-info .update-result-icon {

static/css/components/ux-platform.css

@@ -7,7 +7,7 @@
     gap: 10px;
     padding: 8px 14px;
     margin: 6px 12px 0;
-    border: 1px solid rgba(74, 163, 255, 0.32);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.32);
     border-radius: 8px;
     background: linear-gradient(180deg, rgba(19, 30, 44, 0.96), rgba(11, 18, 28, 0.97));
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -42,7 +42,7 @@
     gap: 6px;
     padding: 3px 7px;
     border-radius: 999px;
-    border: 1px solid rgba(74, 163, 255, 0.25);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.25);
     background: linear-gradient(180deg, rgba(17, 26, 38, 0.82), rgba(12, 18, 28, 0.84));
     font-size: 10px;
     color: var(--text-secondary, #b1c2d4);
@@ -63,9 +63,9 @@
 }
 
 .run-state-chip.active {
-    border-color: rgba(74, 163, 255, 0.65);
+    border-color: rgba(var(--accent-cyan-rgb), 0.65);
     color: var(--text-primary, #e6edf5);
-    box-shadow: inset 0 0 0 1px rgba(74, 163, 255, 0.18);
+    box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), 0.18);
 }
 
 .run-state-right {
@@ -82,7 +82,7 @@
 .run-state-btn {
     background: linear-gradient(180deg, rgba(17, 27, 41, 0.9), rgba(10, 16, 25, 0.92));
     color: var(--accent-cyan, #4aa3ff);
-    border: 1px solid rgba(74, 163, 255, 0.45);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.45);
     border-radius: 6px;
     font-size: 10px;
     padding: 4px 8px;
@@ -91,8 +91,8 @@
 }
 
 .run-state-btn:hover {
-    background: rgba(74, 163, 255, 0.14);
-    border-color: rgba(74, 163, 255, 0.7);
+    background: rgba(var(--accent-cyan-rgb), 0.14);
+    border-color: rgba(var(--accent-cyan-rgb), 0.7);
     transform: translateY(-1px);
 }
 
@@ -114,7 +114,7 @@
 
 .command-palette {
     width: min(760px, 100%);
-    border: 1px solid rgba(74, 163, 255, 0.32);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.32);
     border-radius: 12px;
     background: linear-gradient(180deg, rgba(16, 26, 39, 0.98), rgba(10, 17, 27, 0.98));
     box-shadow: 0 26px 60px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -198,7 +198,7 @@
 .command-palette-item.active,
 .command-palette-item:hover,
 .command-palette-item:focus-visible {
-    background: rgba(74, 163, 255, 0.12);
+    background: rgba(var(--accent-cyan-rgb), 0.12);
     outline: none;
 }
 
@@ -402,7 +402,7 @@
 }
 
 .app-toast-actions button:hover {
-    border-color: rgba(74, 163, 255, 0.5);
+    border-color: rgba(var(--accent-cyan-rgb), 0.5);
     color: var(--text-primary, #e6edf5);
 }
 

static/css/core/components.css

@@ -136,7 +136,7 @@
    ============================================ */
 .card {
     background: var(--surface-panel-gradient);
-    border: 1px solid rgba(74, 163, 255, 0.24);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -147,7 +147,7 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid rgba(74, 163, 255, 0.18);
+    border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
     background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%);
     position: relative;
 }
@@ -173,7 +173,7 @@
 /* Panel variant (used in dashboards) */
 .panel {
     background: var(--surface-panel-gradient);
-    border: 1px solid rgba(74, 163, 255, 0.24);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -202,7 +202,7 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--space-2) var(--space-3);
-    border-bottom: 1px solid rgba(74, 163, 255, 0.18);
+    border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
     background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%);
     font-size: var(--text-xs);
     font-weight: var(--font-semibold);

static/css/core/layout.css

@@ -750,7 +750,7 @@
     background: var(--accent-cyan-glow);
     color: var(--text-primary);
     border-left: 2px solid var(--accent-cyan);
-    box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2);
+    box-shadow: -2px 0 8px rgba(var(--accent-cyan-rgb), 0.2);
     padding-left: 12px; /* compensate for 2px border */
 }
 
@@ -858,7 +858,7 @@
     background: var(--accent-cyan-glow);
     color: var(--text-primary);
     border-left: 2px solid var(--accent-cyan);
-    box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2);
+    box-shadow: -2px 0 8px rgba(var(--accent-cyan-rgb), 0.2);
     padding-left: 12px;
 }
 
@@ -906,7 +906,7 @@
     background: var(--accent-cyan-glow);
     color: var(--text-primary);
     border-left: 2px solid var(--accent-cyan);
-    box-shadow: -2px 0 6px rgba(74, 163, 255, 0.15);
+    box-shadow: -2px 0 6px rgba(var(--accent-cyan-rgb), 0.15);
     padding-left: 10px;
 }
 

static/css/core/map-utils.css

@@ -14,7 +14,7 @@
     background: rgba(7, 9, 14, 0.72);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
-    border: 1px solid rgba(74, 163, 255, 0.18);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
     border-radius: 4px;
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 11px;
@@ -98,7 +98,7 @@
 .map-range-label span {
     display: inline-block;
     background: rgba(7, 9, 14, 0.7);
-    color: rgba(74, 163, 255, 0.7);
+    color: rgba(var(--accent-cyan-rgb), 0.7);
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 9px;
     padding: 1px 4px;
@@ -111,7 +111,7 @@
 
 .map-glass-popup .leaflet-popup-content-wrapper {
     background: var(--bg-elevated, #161d28) !important;
-    border: 1px solid var(--border-color, rgba(74,163,255,0.15)) !important;
+    border: 1px solid var(--border-color, rgba(var(--accent-cyan-rgb),0.15)) !important;
     border-radius: 6px !important;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);

static/css/core/variables.css

@@ -18,7 +18,7 @@
     --bg-overlay: rgba(8, 13, 20, 0.75);
     --surface-glass: rgba(16, 25, 37, 0.82);
     --surface-panel-gradient: linear-gradient(160deg, rgba(20, 32, 47, 0.94) 0%, rgba(11, 18, 27, 0.96) 100%);
-    --ambient-top-left: rgba(74, 163, 255, 0.14);
+    --ambient-top-left: rgba(var(--accent-cyan-rgb), 0.14);
     --ambient-top-right: rgba(56, 193, 128, 0.09);
     --ambient-bottom: rgba(214, 168, 94, 0.06);
 
@@ -28,9 +28,10 @@
 
     /* Accent colors */
     --accent-cyan: #4aa3ff;
-    --accent-cyan-dim: rgba(74, 163, 255, 0.16);
+    --accent-cyan-rgb: 74, 163, 255;
+    --accent-cyan-dim: rgba(var(--accent-cyan-rgb), 0.16);
     --accent-cyan-hover: #6bb3ff;
-    --accent-cyan-glow: rgba(74, 163, 255, 0.12);
+    --accent-cyan-glow: rgba(var(--accent-cyan-rgb), 0.12);
     --accent-green: #38c180;
     --accent-green-hover: #16a34a;
     --accent-green-dim: rgba(56, 193, 128, 0.18);
@@ -54,7 +55,7 @@
     /* Borders */
     --border-color: #263246;
     --border-light: #354458;
-    --border-glow: rgba(74, 163, 255, 0.25);
+    --border-glow: rgba(var(--accent-cyan-rgb), 0.25);
     --border-focus: var(--accent-cyan);
 
     /* Status colors */
@@ -77,7 +78,7 @@
     --neon-red: #ff3366;
 
     /* Subtle grid/pattern */
-    --grid-line: rgba(74, 163, 255, 0.1);
+    --grid-line: rgba(var(--accent-cyan-rgb), 0.1);
     --grid-dot: rgba(255, 255, 255, 0.03);
     --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
 
@@ -146,7 +147,7 @@
     --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35);
     --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
     --shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.45);
-    --shadow-glow: 0 0 18px rgba(74, 163, 255, 0.16);
+    --shadow-glow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.16);
 
     /* ============================================
        TRANSITIONS
@@ -198,6 +199,7 @@
     --bg-panel: var(--bg-secondary);
 
     --accent-cyan: #1f5fa8;
+    --accent-cyan-rgb: 31, 95, 168;
     --accent-cyan-dim: rgba(31, 95, 168, 0.12);
     --accent-cyan-hover: #2c73bf;
     --accent-green: #1f8a57;
@@ -315,6 +317,7 @@ html[data-ui-tier="enhanced"] {
     --surface-panel-gradient: linear-gradient(160deg, rgba(20, 16, 8, 0.94) 0%, rgba(12, 10, 4, 0.96) 100%);
 
     --accent-cyan: #c89628;
+    --accent-cyan-rgb: 200, 150, 40;
     --accent-cyan-dim: rgba(200, 150, 40, 0.14);
     --accent-cyan-hover: #e0aa30;
     --accent-cyan-glow: rgba(200, 150, 40, 0.10);

static/css/index.css

@@ -16,7 +16,7 @@
 
     /* Accent colors - slate/cyan */
     --accent-cyan: #4aa3ff;
-    --accent-cyan-dim: rgba(74, 163, 255, 0.16);
+    --accent-cyan-dim: rgba(var(--accent-cyan-rgb), 0.16);
     --accent-green: #38c180;
     --accent-green-dim: rgba(56, 193, 128, 0.18);
     --accent-red: #e25d5d;
@@ -34,7 +34,7 @@
     /* Borders */
     --border-color: #263246;
     --border-light: #354458;
-    --border-glow: rgba(74, 163, 255, 0.25);
+    --border-glow: rgba(var(--accent-cyan-rgb), 0.25);
 
     /* Status colors */
     --status-online: #38c180;
@@ -43,7 +43,7 @@
     --status-offline: #6f7f94;
 
     /* Subtle grid/pattern */
-    --grid-line: rgba(74, 163, 255, 0.1);
+    --grid-line: rgba(var(--accent-cyan-rgb), 0.1);
     --grid-dot: rgba(255, 255, 255, 0.03);
     --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
 }
@@ -125,8 +125,8 @@ body {
     right: 0;
     bottom: 0;
     background:
-        radial-gradient(circle at 50% 50%, rgba(74, 163, 255, 0.04) 0%, transparent 50%),
-        linear-gradient(180deg, transparent 0%, rgba(74, 163, 255, 0.03) 100%);
+        radial-gradient(circle at 50% 50%, rgba(var(--accent-cyan-rgb), 0.04) 0%, transparent 50%),
+        linear-gradient(180deg, transparent 0%, rgba(var(--accent-cyan-rgb), 0.03) 100%);
     pointer-events: none;
 }
 
@@ -3676,7 +3676,7 @@ header h1 .tagline {
 .network-row:hover { background: var(--bg-tertiary); }
 
 .network-row.selected {
-    background: rgba(74, 163, 255, 0.07);
+    background: rgba(var(--accent-cyan-rgb), 0.07);
     border-left-color: var(--accent-cyan) !important;
 }
 
@@ -4800,7 +4800,7 @@ header h1 .tagline {
 
 /* Selected device highlight */
 .bt-device-row.selected {
-    background: rgba(74, 163, 255, 0.07);
+    background: rgba(var(--accent-cyan-rgb), 0.07);
     border-left-color: var(--accent-cyan) !important;
 }
 
@@ -5027,7 +5027,7 @@ header h1 .tagline {
 }
 
 .bt-sort-btn:hover { color: var(--text-primary); }
-.bt-sort-btn.active { color: var(--accent-cyan); background: rgba(74,163,255,0.08); }
+.bt-sort-btn.active { color: var(--accent-cyan); background: rgba(var(--accent-cyan-rgb),0.08); }
 
 .bt-filter-btn {
     padding: 3px 8px;
@@ -5048,8 +5048,8 @@ header h1 .tagline {
 
 .bt-filter-btn.active {
     color: var(--accent-cyan);
-    border-color: rgba(74,163,255,0.4);
-    background: rgba(74,163,255,0.08);
+    border-color: rgba(var(--accent-cyan-rgb),0.4);
+    background: rgba(var(--accent-cyan-rgb),0.08);
 }
 
 .bt-tracker-item {
@@ -6452,7 +6452,7 @@ body::before {
     text-shadow:
         0 0 10px var(--accent-cyan),
         0 0 25px var(--accent-cyan),
-        0 0 50px rgba(74, 158, 255, 0.4);
+        0 0 50px rgba(var(--accent-cyan-rgb), 0.4);
     letter-spacing: 2px;
     line-height: 1;
 }
@@ -7306,11 +7306,11 @@ body::before {
 :root {
     --visual-surface-soft: linear-gradient(180deg, rgba(18, 28, 40, 0.9) 0%, rgba(10, 16, 24, 0.95) 100%);
     --visual-surface-panel: linear-gradient(160deg, rgba(20, 33, 48, 0.95) 0%, rgba(11, 18, 27, 0.96) 100%);
-    --visual-edge-cyan: rgba(74, 163, 255, 0.34);
+    --visual-edge-cyan: rgba(var(--accent-cyan-rgb), 0.34);
     --visual-edge-green: rgba(56, 193, 128, 0.28);
     --visual-glow-soft: 0 14px 30px rgba(0, 0, 0, 0.32);
-    --visual-glow-cyan: 0 0 24px rgba(74, 163, 255, 0.16);
-    --mode-ambient-left: rgba(74, 163, 255, 0.12);
+    --visual-glow-cyan: 0 0 24px rgba(var(--accent-cyan-rgb), 0.16);
+    --mode-ambient-left: rgba(var(--accent-cyan-rgb), 0.12);
     --mode-ambient-right: rgba(56, 193, 128, 0.08);
     --mode-ambient-bottom: rgba(214, 168, 94, 0.05);
     --top-rail-gutter: 12px;
@@ -7333,14 +7333,14 @@ body[data-mode="wifi"],
 body[data-mode="bluetooth"],
 body[data-mode="bt_locate"] {
     --mode-ambient-left: rgba(56, 193, 128, 0.14);
-    --mode-ambient-right: rgba(74, 163, 255, 0.08);
+    --mode-ambient-right: rgba(var(--accent-cyan-rgb), 0.08);
 }
 
 body[data-mode="satellite"],
 body[data-mode="weathersat"],
 body[data-mode="sstv"],
 body[data-mode="sstv_general"] {
-    --mode-ambient-left: rgba(74, 163, 255, 0.14);
+    --mode-ambient-left: rgba(var(--accent-cyan-rgb), 0.14);
     --mode-ambient-right: rgba(143, 123, 214, 0.09);
     --mode-ambient-bottom: rgba(56, 193, 128, 0.05);
 }
@@ -7349,7 +7349,7 @@ body[data-mode="analytics"],
 body[data-mode="spystations"],
 body[data-mode="tscm"] {
     --mode-ambient-left: rgba(214, 168, 94, 0.12);
-    --mode-ambient-right: rgba(74, 163, 255, 0.08);
+    --mode-ambient-right: rgba(var(--accent-cyan-rgb), 0.08);
 }
 
 [data-theme="light"] body {
@@ -7369,7 +7369,7 @@ body[data-mode="tscm"] {
 
 .mode-nav {
     background: linear-gradient(180deg, rgba(22, 33, 48, 0.96) 0%, rgba(14, 22, 33, 0.98) 100%);
-    border-bottom-color: rgba(74, 163, 255, 0.24);
+    border-bottom-color: rgba(var(--accent-cyan-rgb), 0.24);
 }
 
 #mainNav.mode-nav {
@@ -7377,20 +7377,20 @@ body[data-mode="tscm"] {
     padding: 0 12px;
     min-height: var(--top-rail-height);
     height: var(--top-rail-height);
-    border: 1px solid rgba(74, 163, 255, 0.22);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
     border-radius: 10px;
     box-shadow: var(--visual-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .mode-nav-dropdown-menu {
     background: linear-gradient(180deg, #162130 0%, #0e1621 100%);
-    border-color: rgba(74, 163, 255, 0.22);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(74, 163, 255, 0.1);
+    border-color: rgba(var(--accent-cyan-rgb), 0.22);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-cyan-rgb), 0.1);
 }
 
 .run-state-strip {
     margin: 8px var(--top-rail-gutter) 0;
-    border-color: rgba(74, 163, 255, 0.3);
+    border-color: rgba(var(--accent-cyan-rgb), 0.3);
     background: linear-gradient(180deg, rgba(20, 31, 44, 0.96) 0%, rgba(12, 19, 29, 0.97) 100%);
     box-shadow: var(--visual-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
     min-height: var(--top-rail-height);
@@ -7414,7 +7414,7 @@ body[data-mode="tscm"] {
 
 .main-content {
     margin: 0 12px;
-    border: 1px solid rgba(74, 163, 255, 0.22);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
     border-radius: 10px;
     box-shadow: var(--visual-glow-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
     backdrop-filter: blur(6px);
@@ -7422,12 +7422,12 @@ body[data-mode="tscm"] {
 
 .sidebar {
     background: var(--visual-surface-soft);
-    border-right-color: rgba(74, 163, 255, 0.22);
+    border-right-color: rgba(var(--accent-cyan-rgb), 0.22);
 }
 
 .section {
     background: var(--visual-surface-panel);
-    border-color: rgba(74, 163, 255, 0.22);
+    border-color: rgba(var(--accent-cyan-rgb), 0.22);
     border-radius: 8px;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
     transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
@@ -7440,7 +7440,7 @@ body[data-mode="tscm"] {
 
 .section h3 {
     background: linear-gradient(180deg, #1c2c3f 0%, #141f2c 100%);
-    border-bottom-color: rgba(74, 163, 255, 0.2);
+    border-bottom-color: rgba(var(--accent-cyan-rgb), 0.2);
 }
 
 .section h3::before {
@@ -7449,13 +7449,13 @@ body[data-mode="tscm"] {
 
 .section h3::after {
     background: rgba(12, 18, 28, 0.9);
-    border: 1px solid rgba(74, 163, 255, 0.24);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
 }
 
 .form-group input,
 .form-group select {
     background: rgba(8, 13, 20, 0.72);
-    border-color: rgba(74, 163, 255, 0.2);
+    border-color: rgba(var(--accent-cyan-rgb), 0.2);
     border-radius: 6px;
 }
 
@@ -7470,7 +7470,7 @@ body[data-mode="tscm"] {
 .preset-btn,
 .control-btn,
 .clear-btn {
-    border-color: rgba(74, 163, 255, 0.24);
+    border-color: rgba(var(--accent-cyan-rgb), 0.24);
     background: linear-gradient(180deg, rgba(16, 24, 35, 0.88) 0%, rgba(10, 15, 24, 0.9) 100%);
 }
 
@@ -7480,7 +7480,7 @@ body[data-mode="tscm"] {
 
 .output-header {
     background: linear-gradient(180deg, rgba(18, 28, 42, 0.95) 0%, rgba(13, 21, 31, 0.98) 100%);
-    border-bottom-color: rgba(74, 163, 255, 0.22);
+    border-bottom-color: rgba(var(--accent-cyan-rgb), 0.22);
 }
 
 .output-content {
@@ -7488,12 +7488,12 @@ body[data-mode="tscm"] {
 }
 
 .stats > div {
-    border-color: rgba(74, 163, 255, 0.2);
+    border-color: rgba(var(--accent-cyan-rgb), 0.2);
     background: linear-gradient(180deg, rgba(19, 28, 40, 0.8) 0%, rgba(12, 18, 27, 0.82) 100%);
 }
 
 .message {
-    border-color: rgba(74, 163, 255, 0.26);
+    border-color: rgba(var(--accent-cyan-rgb), 0.26);
     border-left-width: 4px;
     border-radius: 8px;
     background: linear-gradient(180deg, rgba(21, 31, 44, 0.8) 0%, rgba(15, 23, 33, 0.82) 100%);
@@ -7504,14 +7504,14 @@ body[data-mode="tscm"] {
     position: sticky;
     bottom: 0;
     z-index: 9;
-    border-top-color: rgba(74, 163, 255, 0.24);
+    border-top-color: rgba(var(--accent-cyan-rgb), 0.24);
     background: linear-gradient(180deg, rgba(17, 26, 39, 0.96) 0%, rgba(10, 16, 24, 0.97) 100%);
     backdrop-filter: blur(7px);
 }
 
 .status-indicator,
 .control-group {
-    border-color: rgba(74, 163, 255, 0.2);
+    border-color: rgba(var(--accent-cyan-rgb), 0.2);
     background: linear-gradient(180deg, rgba(15, 23, 34, 0.78) 0%, rgba(9, 14, 23, 0.8) 100%);
     border-radius: 6px;
 }

static/css/modes/acars.css

@@ -28,7 +28,7 @@
     transition: background 0.2s;
 }
 .main-acars-collapse-btn:hover {
-    background: rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.15);
 }
 .main-acars-collapse-label {
     writing-mode: vertical-rl;
@@ -67,7 +67,7 @@
     animation: fadeInMsg 0.3s ease;
 }
 .main-acars-msg:hover {
-    background: rgba(74, 158, 255, 0.05);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
 }
 @keyframes fadeInMsg {
     from { opacity: 0; transform: translateY(-3px); }
@@ -86,8 +86,8 @@
     background: var(--accent-red) !important;
 }
 @keyframes acars-pulse {
-    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); }
-    50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(74, 158, 255, 0.3); }
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7); }
+    50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(var(--accent-cyan-rgb), 0.3); }
 }
 
 /* ACARS Standalone Message Feed */
@@ -106,10 +106,10 @@
     transition: background 0.15s;
 }
 .acars-feed-card:hover {
-    background: rgba(74, 158, 255, 0.05);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
 }
 
 /* Clickable ACARS sidebar messages (linked to tracked aircraft) */
 .acars-message-item[style*="cursor: pointer"]:hover {
-    background: rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
 }

static/css/modes/aprs.css

@@ -18,14 +18,14 @@
     flex-direction: column;
     align-items: center;
     padding: 4px 10px;
-    background: rgba(74, 158, 255, 0.05);
-    border: 1px solid rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
     border-radius: 4px;
     min-width: 55px;
 }
 .aprs-strip .strip-stat:hover {
-    background: rgba(74, 158, 255, 0.1);
-    border-color: rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border-color: rgba(var(--accent-cyan-rgb), 0.3);
 }
 .aprs-strip .strip-value {
     font-family: var(--font-mono);
@@ -114,8 +114,8 @@
 
 /* Buttons */
 .aprs-strip .strip-btn {
-    background: rgba(74, 158, 255, 0.1);
-    border: 1px solid rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--text-primary);
     padding: 6px 12px;
     border-radius: 4px;
@@ -126,8 +126,8 @@
     white-space: nowrap;
 }
 .aprs-strip .strip-btn:hover:not(:disabled) {
-    background: rgba(74, 158, 255, 0.2);
-    border-color: rgba(74, 158, 255, 0.4);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
+    border-color: rgba(var(--accent-cyan-rgb), 0.4);
 }
 .aprs-strip .strip-btn.primary {
     background: linear-gradient(135deg, var(--accent-green) 0%, #10b981 100%);
@@ -223,8 +223,8 @@
 .aprs-status-dot.tracking { background: var(--accent-green); }
 .aprs-status-dot.error { background: var(--accent-red); }
 @keyframes aprs-pulse {
-    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); }
-    50% { opacity: 0.6; box-shadow: 0 0 8px 4px rgba(74, 158, 255, 0.3); }
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7); }
+    50% { opacity: 0.6; box-shadow: 0 0 8px 4px rgba(var(--accent-cyan-rgb), 0.3); }
 }
 .aprs-status-text {
     font-size: 10px;
@@ -339,7 +339,7 @@
     gap: 5px;
     padding: 2px 7px 2px 5px;
     border-radius: 999px;
-    border: 1px solid rgba(74, 158, 255, 0.35);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.35);
     background: rgba(10, 18, 28, 0.88);
     color: var(--text-primary);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);

static/css/modes/meshtastic.css

@@ -650,9 +650,9 @@
 }
 
 .mesh-badge-primary {
-    background: rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.15);
     color: var(--accent-cyan);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 .mesh-badge-secondary {
@@ -1349,7 +1349,7 @@
 }
 
 .mesh-traceroute-snr.snr-ok {
-    background: rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.15);
     color: var(--accent-cyan);
 }
 
@@ -1572,7 +1572,7 @@
 }
 
 .mesh-network-neighbor-snr.snr-ok {
-    background: rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.15);
     color: var(--accent-cyan);
 }
 

static/css/modes/spy-stations.css

@@ -128,9 +128,9 @@
 }
 
 .spy-badge-number {
-    background: rgba(74, 158, 255, 0.15);
+    background: rgba(var(--accent-cyan-rgb), 0.15);
     color: var(--accent-cyan);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
 }
 
 .spy-badge-diplomatic {

static/css/modes/tscm.css

@@ -102,7 +102,7 @@
     transition: background 0.2s;
 }
 .tscm-device-item:hover {
-    background: rgba(74,158,255,0.1);
+    background: rgba(var(--accent-cyan-rgb),0.1);
 }
 .tscm-device-item.new {
     border-left-color: var(--severity-high);
@@ -212,9 +212,9 @@
     font-size: 9px;
     padding: 1px 4px;
     border-radius: 3px;
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--accent-cyan);
-    border: 1px solid rgba(74, 158, 255, 0.4);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
     text-transform: uppercase;
     letter-spacing: 0.4px;
 }
@@ -544,8 +544,8 @@
     padding: 12px 16px;
     font-size: 10px;
     color: var(--text-secondary);
-    background: rgba(74, 158, 255, 0.1);
-    border-top: 1px solid rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
+    border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
 }
 .tscm-threat-action {
     margin-top: 6px;
@@ -605,7 +605,7 @@
 .protocol-badge {
     font-size: 9px;
     padding: 2px 6px;
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--accent-cyan);
     border-radius: 3px;
     text-transform: uppercase;
@@ -709,7 +709,7 @@
 }
 .scanner-track {
     fill: none;
-    stroke: rgba(74,158,255,0.1);
+    stroke: rgba(var(--accent-cyan-rgb),0.1);
     stroke-width: 4;
 }
 .scanner-progress {
@@ -1081,7 +1081,7 @@
     transition: background 0.2s;
 }
 .case-item:hover {
-    background: rgba(74, 158, 255, 0.1);
+    background: rgba(var(--accent-cyan-rgb), 0.1);
 }
 .case-item.priority-high { border-left-color: var(--accent-red); }
 .case-item.priority-normal { border-left-color: var(--accent-cyan); }
@@ -1359,7 +1359,7 @@
 .known-device-type {
     font-size: 9px;
     padding: 2px 6px;
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     color: var(--accent-cyan);
     border-radius: 3px;
     margin-left: 8px;
@@ -1557,8 +1557,8 @@
     gap: 8px;
     padding: 8px 10px;
     margin-bottom: 10px;
-    background: rgba(74, 158, 255, 0.12);
-    border: 1px solid rgba(74, 158, 255, 0.3);
+    background: rgba(var(--accent-cyan-rgb), 0.12);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     border-radius: 6px;
     font-size: 11px;
 }
@@ -1569,9 +1569,9 @@
     margin-left: auto;
     font-size: 9px;
     padding: 2px 6px;
-    background: rgba(74, 158, 255, 0.2);
+    background: rgba(var(--accent-cyan-rgb), 0.2);
     color: #9ed0ff;
-    border: 1px solid rgba(74, 158, 255, 0.4);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
     border-radius: 3px;
     cursor: pointer;
 }

static/css/modes/vdl2.css

@@ -12,8 +12,8 @@
     background: var(--accent-red) !important;
 }
 @keyframes vdl2-pulse {
-    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); }
-    50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(74, 158, 255, 0.3); }
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7); }
+    50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(var(--accent-cyan-rgb), 0.3); }
 }
 
 /* VDL2 message animation */
@@ -23,7 +23,7 @@
     animation: vdl2FadeIn 0.3s ease;
 }
 .vdl2-msg:hover {
-    background: rgba(74, 158, 255, 0.05);
+    background: rgba(var(--accent-cyan-rgb), 0.05);
 }
 @keyframes vdl2FadeIn {
     from { opacity: 0; transform: translateY(-3px); }

static/css/modes/waterfall.css

@@ -39,8 +39,8 @@
 .wf-headline-tag {
     border-radius: 999px;
     padding: 1px 8px;
-    border: 1px solid rgba(74, 163, 255, 0.45);
-    background: rgba(74, 163, 255, 0.13);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.45);
+    background: rgba(var(--accent-cyan-rgb), 0.13);
     color: #8ec5ff;
     font-size: 10px;
     font-family: var(--font-mono, monospace);
@@ -404,12 +404,12 @@
 }
 
 .wf-step-btn:hover {
-    background: rgba(74, 163, 255, 0.17);
-    border-color: rgba(74, 163, 255, 0.45);
+    background: rgba(var(--accent-cyan-rgb), 0.17);
+    border-color: rgba(var(--accent-cyan-rgb), 0.45);
 }
 
 .wf-step-btn:active {
-    background: rgba(74, 163, 255, 0.28);
+    background: rgba(var(--accent-cyan-rgb), 0.28);
 }
 
 .wf-zoom-btn {
@@ -422,7 +422,7 @@
     align-items: center;
     gap: 5px;
     background: rgba(0, 0, 0, 0.55);
-    border: 1px solid rgba(74, 163, 255, 0.28);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
     border-radius: 5px;
     padding: 3px 8px;
     flex-shrink: 0;
@@ -652,7 +652,7 @@
 
 .wf-resize-handle:hover,
 .wf-resize-handle.dragging {
-    background: rgba(74, 163, 255, 0.14);
+    background: rgba(var(--accent-cyan-rgb), 0.14);
 }
 
 .wf-resize-grip {
@@ -665,7 +665,7 @@
 
 .wf-resize-handle:hover .wf-resize-grip,
 .wf-resize-handle.dragging .wf-resize-grip {
-    background: rgba(74, 163, 255, 0.6);
+    background: rgba(var(--accent-cyan-rgb), 0.6);
 }
 
 /* Waterfall canvas */
@@ -705,7 +705,7 @@
 .wf-tune-line {
     left: calc(50% - 0.5px);
     background: rgba(130, 220, 255, 0.75);
-    box-shadow: 0 0 8px rgba(74, 163, 255, 0.4);
+    box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.4);
     opacity: 0;
     transition: opacity 140ms ease;
 }
@@ -760,7 +760,7 @@
     display: none;
     z-index: 10;
     white-space: nowrap;
-    border: 1px solid rgba(74, 163, 255, 0.22);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
 }
 
 @media (max-width: 1023px) {
@@ -904,13 +904,13 @@
 .wf-side-box {
     margin-top: 8px;
     padding: 8px;
-    border: 1px solid rgba(74, 163, 255, 0.2);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.25);
 }
 
 .wf-side-box-muted {
-    border-color: rgba(74, 163, 255, 0.14);
+    border-color: rgba(var(--accent-cyan-rgb), 0.14);
     background: rgba(0, 0, 0, 0.2);
 }
 
@@ -984,7 +984,7 @@
     align-items: center;
     gap: 6px;
     background: rgba(0, 0, 0, 0.24);
-    border: 1px solid rgba(74, 163, 255, 0.16);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
     border-radius: 5px;
     padding: 5px 7px;
     min-width: 0;
@@ -1067,7 +1067,7 @@
 
 .wf-scan-metric-card {
     background: rgba(0, 0, 0, 0.24);
-    border: 1px solid rgba(74, 163, 255, 0.18);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
     border-radius: 6px;
     padding: 7px 6px;
     text-align: center;
@@ -1092,7 +1092,7 @@
     margin-top: 8px;
     max-height: 145px;
     overflow: auto;
-    border: 1px solid rgba(74, 163, 255, 0.16);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
     border-radius: 6px;
 }
 
@@ -1146,7 +1146,7 @@
     margin-top: 8px;
     max-height: 130px;
     overflow-y: auto;
-    border: 1px solid rgba(74, 163, 255, 0.16);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.2);
     padding: 6px;

static/css/satellite_dashboard.css

@@ -21,7 +21,7 @@
     --accent-red: #e25d5d;
     --accent-purple: #8f7bd6;
     --accent-amber: #d6a85e;
-    --grid-line: rgba(74, 163, 255, 0.1);
+    --grid-line: rgba(var(--accent-cyan-rgb), 0.1);
     --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
 }
 
@@ -380,7 +380,7 @@ body {
 
 .drawer-action-btn {
     padding: 8px 10px;
-    border: 1px solid rgba(74, 163, 255, 0.28);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
     border-radius: 6px;
     background: rgba(8, 20, 31, 0.88);
     color: var(--text-secondary);
@@ -392,12 +392,12 @@ body {
 }
 
 .drawer-action-btn:hover {
-    border-color: rgba(74, 163, 255, 0.65);
+    border-color: rgba(var(--accent-cyan-rgb), 0.65);
     color: var(--accent-cyan);
 }
 
 .drawer-action-btn-primary {
-    background: linear-gradient(135deg, rgba(74, 163, 255, 0.18), rgba(56, 193, 128, 0.14));
+    background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.18), rgba(56, 193, 128, 0.14));
     color: var(--text-primary);
 }
 
@@ -410,7 +410,7 @@ body {
     min-height: 46px;
     padding: 9px 10px;
     border-radius: 6px;
-    border: 1px solid rgba(74, 163, 255, 0.16);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
     background: rgba(255, 255, 255, 0.025);
     color: var(--text-secondary);
     font-size: 11px;
@@ -455,7 +455,7 @@ body {
 
 .drawer-empty-state {
     padding: 12px;
-    border: 1px dashed rgba(74, 163, 255, 0.18);
+    border: 1px dashed rgba(var(--accent-cyan-rgb), 0.18);
     border-radius: 6px;
     color: var(--text-secondary);
     font-size: 11px;
@@ -469,7 +469,7 @@ body {
     gap: 8px;
     padding: 7px 8px;
     margin-bottom: 6px;
-    border: 1px solid rgba(74, 163, 255, 0.12);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.12);
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.22);
 }
@@ -479,7 +479,7 @@ body {
 }
 
 .drawer-sat-item.builtin {
-    background: linear-gradient(135deg, rgba(74, 163, 255, 0.08), rgba(8, 20, 31, 0.9));
+    background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.08), rgba(8, 20, 31, 0.9));
 }
 
 .drawer-sat-label {
@@ -536,7 +536,7 @@ body {
 .drawer-select,
 .drawer-field-value {
     padding: 8px 10px;
-    border: 1px solid rgba(74, 163, 255, 0.18);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.22);
     color: var(--text-primary);
@@ -558,7 +558,7 @@ body {
 
 .drawer-info-card {
     padding: 9px 10px;
-    border: 1px solid rgba(74, 163, 255, 0.14);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.14);
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.025);
 }
@@ -599,7 +599,7 @@ body {
     width: min(720px, calc(100vw - 32px));
     max-height: min(82vh, 860px);
     overflow: auto;
-    border: 1px solid rgba(74, 163, 255, 0.24);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
     border-radius: 12px;
     background: linear-gradient(135deg, rgba(8, 19, 30, 0.98), rgba(10, 27, 43, 0.96));
     box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
@@ -612,7 +612,7 @@ body {
     right: 12px;
     width: 34px;
     height: 34px;
-    border: 1px solid rgba(74, 163, 255, 0.24);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
     border-radius: 50%;
     background: rgba(8, 20, 31, 0.88);
     color: var(--text-secondary);
@@ -622,7 +622,7 @@ body {
 }
 
 .sat-management-close:hover {
-    border-color: rgba(74, 163, 255, 0.65);
+    border-color: rgba(var(--accent-cyan-rgb), 0.65);
     color: var(--accent-cyan);
 }
 
@@ -650,7 +650,7 @@ body {
 .sat-management-tab {
     flex: 1;
     padding: 10px 12px;
-    border: 1px solid rgba(74, 163, 255, 0.22);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
     border-radius: 8px;
     background: rgba(8, 20, 31, 0.82);
     color: var(--text-secondary);
@@ -662,8 +662,8 @@ body {
 }
 
 .sat-management-tab.active {
-    background: linear-gradient(135deg, rgba(74, 163, 255, 0.18), rgba(56, 193, 128, 0.14));
-    border-color: rgba(74, 163, 255, 0.5);
+    background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.18), rgba(56, 193, 128, 0.14));
+    border-color: rgba(var(--accent-cyan-rgb), 0.5);
     color: var(--text-primary);
 }
 
@@ -686,7 +686,7 @@ body {
     width: 100%;
     min-height: 180px;
     padding: 12px;
-    border: 1px solid rgba(74, 163, 255, 0.18);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.28);
     color: var(--text-primary);
@@ -697,8 +697,8 @@ body {
 
 .sat-management-textarea:focus {
     outline: none;
-    border-color: rgba(74, 163, 255, 0.55);
-    box-shadow: 0 0 18px rgba(74, 163, 255, 0.12);
+    border-color: rgba(var(--accent-cyan-rgb), 0.55);
+    box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.12);
 }
 
 .sat-management-submit {
@@ -711,7 +711,7 @@ body {
     margin-bottom: 12px;
     padding: 9px 10px;
     border-radius: 6px;
-    border: 1px solid rgba(74, 163, 255, 0.16);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
     background: rgba(255, 255, 255, 0.025);
     color: var(--text-secondary);
     font-size: 11px;
@@ -754,7 +754,7 @@ body {
 .pass-data-strip {
     width: 100%;
     max-width: 320px;
-    border-top: 1px solid rgba(74, 163, 255, 0.12);
+    border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.12);
     padding-top: 10px;
     flex-shrink: 0;
 }
@@ -844,7 +844,7 @@ body {
 .map-mode-btn,
 .map-action-btn {
     padding: 4px 8px;
-    border: 1px solid rgba(74, 163, 255, 0.28);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
     border-radius: 4px;
     background: rgba(5, 18, 30, 0.85);
     color: var(--text-secondary);
@@ -857,16 +857,16 @@ body {
 
 .map-mode-btn:hover,
 .map-action-btn:hover {
-    border-color: rgba(74, 163, 255, 0.65);
+    border-color: rgba(var(--accent-cyan-rgb), 0.65);
     color: var(--accent-cyan);
 }
 
 .map-mode-btn.active,
 .map-action-btn.active {
     color: var(--bg-dark);
-    background: linear-gradient(135deg, rgba(74, 163, 255, 0.95), rgba(79, 236, 182, 0.95));
+    background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.95), rgba(79, 236, 182, 0.95));
     border-color: transparent;
-    box-shadow: 0 0 18px rgba(74, 163, 255, 0.22);
+    box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.22);
 }
 
 .map-overlay-card {
@@ -876,7 +876,7 @@ body {
     z-index: 500;
     width: min(360px, calc(100% - 28px));
     padding: 10px 12px;
-    border: 1px solid rgba(74, 163, 255, 0.22);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
     border-radius: 8px;
     background:
         linear-gradient(135deg, rgba(5, 18, 30, 0.95), rgba(10, 27, 43, 0.9));
@@ -893,7 +893,7 @@ body {
     max-height: min(250px, calc(100% - 28px));
     display: flex;
     flex-direction: column;
-    border: 1px solid rgba(74, 163, 255, 0.24);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
     border-radius: 8px;
     background:
         linear-gradient(135deg, rgba(4, 14, 23, 0.94), rgba(10, 25, 39, 0.9));
@@ -916,7 +916,7 @@ body {
     justify-content: space-between;
     gap: 8px;
     padding: 9px 10px;
-    border-bottom: 1px solid rgba(74, 163, 255, 0.12);
+    border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.12);
     color: var(--accent-cyan);
     font-family: 'Orbitron', monospace;
     font-size: 10px;
@@ -931,7 +931,7 @@ body {
 
 .packet-console-btn {
     padding: 4px 8px;
-    border: 1px solid rgba(74, 163, 255, 0.28);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
     border-radius: 4px;
     background: rgba(8, 20, 31, 0.88);
     color: var(--text-secondary);
@@ -943,7 +943,7 @@ body {
 }
 
 .packet-console-btn:hover {
-    border-color: rgba(74, 163, 255, 0.65);
+    border-color: rgba(var(--accent-cyan-rgb), 0.65);
     color: var(--accent-cyan);
 }
 
@@ -1034,7 +1034,7 @@ body {
     max-height: min(80vh, 860px);
     display: flex;
     flex-direction: column;
-    border: 1px solid rgba(74, 163, 255, 0.24);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
     border-radius: 10px;
     background: linear-gradient(135deg, rgba(8, 19, 30, 0.98), rgba(10, 27, 43, 0.96));
     box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
@@ -1047,7 +1047,7 @@ body {
     justify-content: space-between;
     gap: 12px;
     padding: 16px 18px;
-    border-bottom: 1px solid rgba(74, 163, 255, 0.14);
+    border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.14);
 }
 
 .packet-modal-kicker {
@@ -1507,7 +1507,7 @@ body {
 
 .leaflet-tooltip.map-track-tooltip {
     padding: 4px 7px;
-    border: 1px solid rgba(74, 163, 255, 0.3);
+    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
     border-radius: 999px;
     background: rgba(4, 14, 23, 0.92);
     color: var(--text-primary);