diff --git a/templates/index.html b/templates/index.html
index 491a9ae..e161b0e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -904,28 +904,28 @@
                                     </defs>
 
                                     <!-- Background rings (static) -->
-                                    <circle cx="105" cy="105" r="100" fill="none" stroke="#00b4d8" stroke-width="0.5" opacity="0.12"/>
-                                    <circle cx="105" cy="105" r="70"  fill="none" stroke="#00b4d8" stroke-width="0.5" opacity="0.18"/>
-                                    <circle cx="105" cy="105" r="40"  fill="none" stroke="#00b4d8" stroke-width="0.5" opacity="0.25"/>
-                                    <circle cx="105" cy="105" r="15"  fill="none" stroke="#00b4d8" stroke-width="0.5" opacity="0.35"/>
+                                    <circle cx="105" cy="105" r="100" fill="none" style="stroke:var(--accent-cyan)" stroke-width="0.5" opacity="0.12"/>
+                                    <circle cx="105" cy="105" r="70"  fill="none" style="stroke:var(--accent-cyan)" stroke-width="0.5" opacity="0.18"/>
+                                    <circle cx="105" cy="105" r="40"  fill="none" style="stroke:var(--accent-cyan)" stroke-width="0.5" opacity="0.25"/>
+                                    <circle cx="105" cy="105" r="15"  fill="none" style="stroke:var(--accent-cyan)" stroke-width="0.5" opacity="0.35"/>
 
                                     <!-- Crosshairs -->
-                                    <line x1="5" y1="105" x2="205" y2="105" stroke="#00b4d8" stroke-width="0.3" opacity="0.1"/>
-                                    <line x1="105" y1="5" x2="105" y2="205" stroke="#00b4d8" stroke-width="0.3" opacity="0.1"/>
+                                    <line x1="5" y1="105" x2="205" y2="105" style="stroke:var(--accent-cyan)" stroke-width="0.3" opacity="0.1"/>
+                                    <line x1="105" y1="5" x2="105" y2="205" style="stroke:var(--accent-cyan)" stroke-width="0.3" opacity="0.1"/>
 
                                     <!-- Rotating sweep group -->
                                     <g class="wifi-radar-sweep" clip-path="url(#wifi-radar-clip)">
                                         <!-- Primary trailing arc: 60° -->
-                                        <path d="M105,105 L105,5 A100,100 0 0,1 191.6,155 Z" fill="#00b4d8" opacity="0.08"/>
+                                        <path d="M105,105 L105,5 A100,100 0 0,1 191.6,155 Z" style="fill:var(--accent-cyan)" opacity="0.08"/>
                                         <!-- Secondary trailing arc: 90° -->
-                                        <path d="M105,105 L105,5 A100,100 0 0,1 205,105 Z" fill="#00b4d8" opacity="0.04"/>
+                                        <path d="M105,105 L105,5 A100,100 0 0,1 205,105 Z" style="fill:var(--accent-cyan)" opacity="0.04"/>
                                         <!-- Sweep line -->
-                                        <line x1="105" y1="105" x2="105" y2="5" stroke="#00b4d8" stroke-width="1.5" opacity="0.7"
+                                        <line x1="105" y1="105" x2="105" y2="5" style="stroke:var(--accent-cyan)" stroke-width="1.5" opacity="0.7"
                                               filter="url(#wifi-glow-sm)"/>
                                     </g>
 
                                     <!-- Centre dot -->
-                                    <circle cx="105" cy="105" r="3" fill="#00b4d8" opacity="0.8"/>
+                                    <circle cx="105" cy="105" r="3" style="fill:var(--accent-cyan)" opacity="0.8"/>
 
                                     <!-- Network dots (managed by renderRadar()) -->
                                     <g id="wifiRadarDots"></g>