fix: Make earthquake and lightning icons visible with z-index 10000

- Added zIndexOffset: 10000 to marker options
- Increased CSS z-index from 1000 to 10000 !important
- Added position: relative to icon containers
- This ensures icons appear on top of all other map layers
- Markers are created and logged correctly but were behind other layers

src/plugins/layers/useEarthquakes.js

@@ -113,7 +113,11 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       });
       
       console.log('Creating earthquake marker:', quakeId, 'at', lat, lon, 'size:', size, 'color:', color);
-      const circle = L.marker([lat, lon], { icon, opacity });
+      const circle = L.marker([lat, lon], { 
+        icon, 
+        opacity,
+        zIndexOffset: 10000 // Ensure markers appear on top
+      });
 
       // Add to map first
       circle.addTo(map);

src/plugins/layers/useLightning.js

@@ -167,7 +167,11 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         iconAnchor: [size/2, size/2]
       });
       
-      const marker = L.marker([lat, lon], { icon, opacity });
+      const marker = L.marker([lat, lon], { 
+        icon, 
+        opacity,
+        zIndexOffset: 10000 // Ensure markers appear on top
+      });
       
       // Add to map first
       marker.addTo(map);

src/styles/main.css

@@ -874,8 +874,9 @@ body::before {
 
 /* Earthquake icon markers */
 .earthquake-icon {
-  z-index: 1000 !important;
+  z-index: 10000 !important;
   pointer-events: auto;
+  position: relative !important;
 }
 
 .earthquake-icon div {
@@ -884,12 +885,15 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
+  position: relative;
+  z-index: 10000 !important;
 }
 
 /* Lightning icon markers */
 .lightning-icon {
-  z-index: 1000 !important;
+  z-index: 10000 !important;
   pointer-events: auto;
+  position: relative !important;
 }
 
 .lightning-icon div {
@@ -898,4 +902,6 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
+  position: relative;
+  z-index: 10000 !important;
 }