body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: white; margin: 0; padding: 20px; }
.container { max-width: 1200px; margin: auto; }
.status-box { background: #333; padding: 10px; border-radius: 5px; margin: 10px 0; border-left: 5px solid #ff4444; }
.status-box.online { border-left-color: #00c851; }

.grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 15px; 
    margin-top: 20px; 
}

.video-item { position: relative; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid #444; }
video { width: 100%; height: auto; display: block; }
.label { position: absolute; bottom: 5px; left: 5px; background: rgba(0,0,0,0.6); padding: 2px 8px; font-size: 12px; border-radius: 3px; }

button { padding: 10px 20px; cursor: pointer; border: none; border-radius: 4px; font-weight: bold; }
#start-btn { background: #007bff; color: white; }
#connect-btn { background: #00c851; color: white; }
#connect-btn:disabled { background: #666; cursor: not-allowed; }