* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: #0a0a0a; color: #fff; height: 100vh; overflow: hidden; }

.container-inicial { display: flex; height: 100vh; }
.lado-esquerdo { flex: 1; padding: 80px; display: flex; flex-direction: column; justify-content: center; }
.logo-principal { max-width: 250px; margin-bottom: 30px; border-radius: 12px; }
.lado-esquerdo h1 { font-size: 3.5rem; font-weight: 900; line-height: 1.1; }
.lado-esquerdo h1 span { color: #ef4444; }
.lado-esquerdo p { margin-top: 20px; color: #888; font-size: 1.2rem; max-width: 500px; }

.lado-direito { width: 500px; display: flex; align-items: center; justify-content: center; background: #111; border-left: 1px solid #222; }
.card-login { width: 100%; padding: 40px; }
.card-login h2 { color: #ef4444; font-size: 1.5rem; margin-bottom: 20px; }
.card-login label { display: block; font-size: 0.8rem; color: #888; margin-bottom: 8px; text-transform: uppercase; }
.card-login input { width: 100%; padding: 15px; background: #000; border: 1px solid #333; color: #fff; border-radius: 8px; margin-bottom: 15px; }
.btn-verde { width: 100%; padding: 15px; background: #ef4444; color: #fff; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 1rem; }
.btn-verde:hover { background: #dc2626; }
.divisor { text-align: center; margin: 20px 0; color: #555; }
.input-grupo { display: flex; gap: 10px; }
.input-grupo input { margin-bottom: 0; }
.input-grupo button { padding: 0 20px; background: transparent; border: 1px solid #ef4444; color: #ef4444; border-radius: 8px; cursor: pointer; }
.input-grupo button:hover { background: #ef4444; color: #fff; }
.erro { color: #ef4444; margin-top: 10px; font-size: 0.9rem; }

.container-sala { display: flex; flex-direction: column; height: 100vh; }
header { display: flex; justify-content: space-between; padding: 15px 30px; background: #111; border-bottom: 1px solid #222; }
.header-esquerda { display: flex; align-items: center; gap: 15px; }
.logo-sala { height: 35px; border-radius: 6px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #ef4444; }
.bolinha-verde { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; }

.conteudo-sala { display: flex; flex: 1; overflow: hidden; }
.sidebar { width: 300px; background: #111; border-right: 1px solid #222; padding: 20px; overflow-y: auto; }
.sidebar h3 { font-size: 0.8rem; color: #888; margin-bottom: 15px; }
.sidebar ul { list-style: none; }
.sidebar li {
    padding: 12px;
    background: #1a1a1a;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.sidebar li.transmitindo { border-color: #ef4444; }
.sidebar li .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-assistir {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: bold;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-assistir:hover { background: #dc2626; transform: scale(1.05); }
.btn-assistir.ativo { background: #22c55e; }
.badge-voce { font-size: 0.7rem; color: #666; }
.badge-transmitindo { font-size: 0.7rem; color: #ef4444; font-weight: bold; }

.area-video { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; padding: 20px; }
#video-container { width: 100%; height: 100%; border: 1px solid #333; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #555; text-align: center; padding: 20px; }
#video-container video { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

.escondido { display: none !important; }

.btn-link {
    background: transparent; border: 1px solid #ef4444; color: #ef4444;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    font-size: 0.8rem; font-weight: bold; transition: all 0.2s;
}
.btn-link:hover { background: #ef4444; color: #fff; }
.btn-link.copiado { background: #22c55e; border-color: #22c55e; color: #fff; }

.barra-controles {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 12px; background: rgba(17, 17, 17, 0.95);
    border: 1px solid #333; padding: 12px; border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); z-index: 999;
}
.btn-controle {
    padding: 12px 24px; border-radius: 50px; font-weight: bold;
    cursor: pointer; border: none; font-size: 0.9rem;
    transition: all 0.2s; font-family: 'Inter', sans-serif;
}
.btn-transmitir { background: #ef4444; color: #fff; }
.btn-transmitir:hover { background: #dc2626; transform: scale(1.05); }
.btn-parar { background: #333; color: #ef4444; border: 1px solid #ef4444; }
.btn-parar:hover { background: #ef4444; color: #fff; transform: scale(1.05); }