:root { --primary: #2ecc71; --danger: #e74c3c; --bg: #121212; --panel: #252525; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); font-family: 'Segoe UI', sans-serif; }

#login-screen { position: fixed; inset: 0; background: #1a1a1a; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2000; color: white; }
#login-screen input { padding: 15px; border-radius: 8px; border: none; margin-bottom: 10px; width: 260px; font-size: 16px; color: #000;}
#login-screen button { padding: 12px 50px; background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }

#video-grid { position: fixed; top: 20px; right: 90px; width: 240px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
video { width: 100%; border-radius: 12px; background: #000; border: 3px solid #444; transform: scaleX(-1); }

#ui-sidebar { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 15px; z-index: 1000; }
.ui-btn { width: 55px; height: 55px; border-radius: 50%; background: var(--danger); color: white; border: 2px solid #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: 0.3s; }
.ui-btn.on { background: var(--primary); }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2999; display: none; }
#settings-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--panel); padding: 25px; border-radius: 15px; color: white; z-index: 3000; display: none; border: 1px solid #444; width: 320px; }
select { width: 100%; padding: 10px; background: #111; color: white; border: 1px solid #555; border-radius: 5px; margin: 10px 0 20px 0; }
#close-settings { width: 100%; padding: 12px; background: var(--primary); border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; }