up

web/src/App.svelte

@@ -117,11 +117,8 @@
       
       <div class="row">
         <AntennaGenius status={status?.antenna_genius} />
-        <RotatorGenius status={status?.rotator_genius} />
-      </div>
-      
-      <div class="row">
         <Ultrabeam status={status?.ultrabeam} />
+        <RotatorGenius status={status?.rotator_genius} />
       </div>
     </div>
   </main>
@@ -181,13 +178,41 @@
   }
 
   .solar-item {
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
   }
 
   .solar-item .value {
-    color: var(--accent-teal);
-    font-weight: 500;
+    font-weight: 700;
     margin-left: 4px;
+    font-size: 14px;
+  }
+
+  .solar-item:nth-child(1) .value { /* SFI */
+    color: #ffa726;
+    text-shadow: 0 0 8px rgba(255, 167, 38, 0.5);
+  }
+
+  .solar-item:nth-child(2) .value { /* Spots */
+    color: #66bb6a;
+    text-shadow: 0 0 8px rgba(102, 187, 106, 0.5);
+  }
+
+  .solar-item:nth-child(3) .value { /* A */
+    color: #42a5f5;
+    text-shadow: 0 0 8px rgba(66, 165, 245, 0.5);
+  }
+
+  .solar-item:nth-child(4) .value { /* K */
+    color: #ef5350;
+    text-shadow: 0 0 8px rgba(239, 83, 80, 0.5);
+  }
+
+  .solar-item:nth-child(5) .value { /* G */
+    color: #ab47bc;
+    text-shadow: 0 0 8px rgba(171, 71, 188, 0.5);
   }
 
   .header-right {