:root { --p: #ff4b2b; --bg: #0a0a0a; --s: #1a1a1a; --acc: #00ff88; }
body { background: var(--bg); color: white; font-family: 'Segoe UI', sans-serif; margin: 0; height: 100dvh; overflow: hidden; }

/* Overlay Animado */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 1000; display: flex; align-items: center; justify-content: center; transition: 0.5s; }
.fade-out { opacity: 0; pointer-events: none; }
.modal { background: #111; padding: 40px; border-radius: 20px; border: 1px solid var(--p); text-align: center; }
.icon-lock { font-size: 50px; margin-bottom: 15px; }

/* Layout */
.app-container { display: flex; flex-direction: column; height: 100%; }
.top-bar { padding: 15px; background: var(--s); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }
.logo { font-weight: 900; letter-spacing: 1px; } .logo span { color: var(--p); }

.video-grid { flex: 1; position: relative; background: #000; }
#remoteVideo { width: 100%; height: 100%; object-fit: contain; }
.video-wrapper.local { position: absolute; bottom: 20px; right: 20px; width: 110px; height: 160px; border: 2px solid var(--p); border-radius: 12px; overflow: hidden; background: #000; z-index: 10; }
#localVideo { width: 100%; height: 100%; object-fit: cover; }

/* Controles */
.control-panel { background: var(--s); padding: 20px; display: grid; gap: 15px; border-radius: 20px 20px 0 0; }
.config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sel-box, .id-box { background: #222; padding: 10px; border-radius: 10px; border: 1px solid #333; }
label { font-size: 10px; color: #777; display: block; margin-bottom: 5px; }
.custom-select { width: 100%; background: none; border: none; color: white; }
.id-box b { color: var(--acc); font-size: 18px; cursor: pointer; }

.connect-group { display: flex; gap: 10px; }
input { flex: 1; background: #252525; border: 1px solid #444; color: white; padding: 12px; border-radius: 8px; }
.btn-connect { background: #007bff; border: none; color: white; padding: 0 20px; border-radius: 8px; font-weight: bold; }

.action-grid { display: flex; gap: 10px; }
.btn-action { flex: 1; padding: 15px; border-radius: 10px; border: none; font-weight: bold; color: white; cursor: pointer; }
.stream { background: var(--p); } .chat { background: #333; }

/* Status */
.status-tag { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: bold; }
.led-red { width: 8px; height: 8px; background: red; border-radius: 50%; }
.led-green { width: 8px; height: 8px; background: var(--acc); border-radius: 50%; box-shadow: 0 0 10px var(--acc); }

/* Chat */
#chat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; }
.chat-hidden { display: none !important; }
.chat-card { background: var(--bg); height: 70%; margin-top: 30dvh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; }
#msg-box { flex: 1; padding: 20px; overflow-y: auto; }
.msg { margin-bottom: 8px; padding: 10px; background: #1a1a1a; border-radius: 8px; }
.chat-footer { padding: 15px; display: flex; gap: 10px; border-top: 1px solid #333; }