Fix status indicator dots visibility in footer

- Added custom CSS for status dots using Solarized theme colors
- Replaced Tailwind classes with custom .status-dot classes
- Fixed connection status dot (green when connected, red when disconnected)
- Fixed streaming/recording status dots (red when active, gray when idle)
- Used proper Solarized color palette for consistency

Status dots now properly display:
- Connection: Green dot for connected, red for disconnected
- Streaming: Red dot when live, gray when offline
- Recording: Red dot when recording, gray when idle

🤖 Generated with [Claude Code](https://claude.ai/code)

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

app/globals.css

@@ -40,6 +40,30 @@ body {
   line-height: 1.6;
 }
 
+/* Status Indicator Dots */
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.connected {
+  background-color: #859900; /* Solarized green */
+}
+
+.status-dot.disconnected {
+  background-color: #dc322f; /* Solarized red */
+}
+
+.status-dot.streaming {
+  background-color: #dc322f; /* Solarized red */
+}
+
+.status-dot.idle {
+  background-color: #586e75; /* Solarized base01 */
+}
+
 /* Glass Card Component */
 .glass {
   background: rgba(7, 54, 66, 0.4);

components/Footer.tsx

@@ -82,7 +82,7 @@ export default function Footer() {
           {/* Connection Status */}
           <div>
             <div className="flex items-center gap-3 mb-4">
-              <div className={`w-3 h-3 rounded-full ${obsStatus?.connected ? 'bg-green-500' : 'bg-red-500'}`}></div>
+              <div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'}`}></div>
               <div>
                 <h3 className="font-semibold">OBS Studio</h3>
                 <p className="text-sm opacity-60">
@@ -151,12 +151,12 @@ export default function Footer() {
 
                 <div className="flex gap-4 mt-4">
                   <div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`w-2 h-2 rounded-full ${obsStatus.streaming ? 'bg-red-500' : 'bg-gray-500'}`}></div>
+                    <div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
                     <span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
                   </div>
                   
                   <div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`w-2 h-2 rounded-full ${obsStatus.recording ? 'bg-red-500' : 'bg-gray-500'}`}></div>
+                    <div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
                     <span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
                   </div>
                 </div>