Update UI to match consistent layout patterns between pages

- Refactor Add Stream page to match Teams page layout with glass panels
- Rename "Add Stream" to "Streams" in navigation and page title
- Add existing streams display with loading states and empty state
- Implement unified design system with modern glass morphism styling
- Add Header and Footer components with OBS status monitoring
- Update global CSS with comprehensive component styling
- Consolidate client components into main page files
- Add real-time OBS connection status with 30-second polling

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

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

components/Header.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function Header() {
+  const pathname = usePathname();
+  
+  const isActive = (path: string) => pathname === path;
+  
+  return (
+    <header className="glass p-6 mb-8">
+      <div className="container">
+        <div className="flex justify-between items-center">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+              <svg className="icon-md text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-xl font-bold">OBS Stream Manager</h1>
+              <p className="text-sm opacity-80">Professional Control</p>
+            </div>
+          </div>
+          
+          {/* Navigation */}
+          <nav className="flex">
+            <Link 
+              href="/" 
+              className={`btn ${isActive('/') ? 'active' : ''}`}
+              style={{ marginRight: '12px' }}
+            >
+              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+              </svg>
+              Home
+            </Link>
+            
+            <Link 
+              href="/add" 
+              className={`btn ${isActive('/add') ? 'active' : ''}`}
+              style={{ marginRight: '12px' }}
+            >
+              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
+              </svg>
+              Streams
+            </Link>
+            
+            <Link 
+              href="/teams" 
+              className={`btn ${isActive('/teams') ? 'active' : ''}`}
+            >
+              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
+              </svg>
+              Teams
+            </Link>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}