fix: sky grid invisible due to theme init ordering

SkyGridRenderer read palette.skyGrid at construction time, before
themeStore.load() applied CSS vars to :root. The empty string parsed
as fully transparent, making the grid invisible.

Store the line material and add refreshColors() to re-read from
palette. Called after theme load and on every theme change.

Author: sandrwich

src/app.ts

@@ -728,9 +728,11 @@ export class App {
 
     // --- Load persisted settings from localStorage ---
     themeStore.load();
+    this.skyGridRenderer.refreshColors();
     themeStore.onThemeChange = () => {
       if (!uiStore.showSkybox) this.scene3d.background = new THREE.Color(palette.bg);
       this.scene2d.background = new THREE.Color(palette.bg);
+      this.skyGridRenderer.refreshColors();
     };
     settingsStore.load();
     uiStore.loadToggles();

src/scene/sky-grid-renderer.ts

@@ -19,6 +19,7 @@ const AZ_LABEL_ANGLES = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
  */
 export class SkyGridRenderer {
   private group = new THREE.Group();
+  private lineMat: THREE.LineBasicMaterial;
 
   // Elevation rings
   private ringAttrs: THREE.BufferAttribute[] = [];
@@ -42,7 +43,7 @@ export class SkyGridRenderer {
 
   constructor(scene: THREE.Scene, private overlay: HTMLElement) {
     const gridColor = parseRgba(palette.skyGrid);
-    const lineMat = new THREE.LineBasicMaterial({
+    this.lineMat = new THREE.LineBasicMaterial({
       color: new THREE.Color(gridColor.r, gridColor.g, gridColor.b),
       transparent: true,
       opacity: gridColor.a,
@@ -56,7 +57,7 @@ export class SkyGridRenderer {
       attr.setUsage(THREE.DynamicDrawUsage);
       const geo = new THREE.BufferGeometry();
       geo.setAttribute('position', attr);
-      const ring = new THREE.LineLoop(geo, lineMat);
+      const ring = new THREE.LineLoop(geo, this.lineMat);
       ring.frustumCulled = false;
       ring.renderOrder = 900;
       this.group.add(ring);
@@ -70,7 +71,7 @@ export class SkyGridRenderer {
     this.azPosAttr.setUsage(THREE.DynamicDrawUsage);
     const azGeo = new THREE.BufferGeometry();
     azGeo.setAttribute('position', this.azPosAttr);
-    const azLines = new THREE.LineSegments(azGeo, lineMat);
+    const azLines = new THREE.LineSegments(azGeo, this.lineMat);
     azLines.frustumCulled = false;
     azLines.renderOrder = 900;
     this.group.add(azLines);
@@ -263,6 +264,14 @@ export class SkyGridRenderer {
     }
   }
 
+  /** Re-read grid line color from palette (call after theme load/change). */
+  refreshColors() {
+    const c = parseRgba(palette.skyGrid);
+    this.lineMat.color.setRGB(c.r, c.g, c.b);
+    this.lineMat.opacity = c.a;
+    this.lineMat.needsUpdate = true;
+  }
+
   setVisible(v: boolean) {
     this.group.visible = v;
     if (!v) {