:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0c0e12;color:#e9eaee}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #303139;border-radius:10px;background:#1c1e25;color:#e9eaee;padding:12px 17px;cursor:pointer;transition:.2s}button:hover{background:#2a2c36}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #bbacff;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}a{color:inherit}main{max-width:1500px;margin:auto;padding:0 44px}header{height:90px;display:flex;align-items:center;border-bottom:1px solid #24262d;gap:28px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font-family:system-ui,sans-serif;font-size:25px}.brand b{font-weight:600}.brand span{color:#a89ae9;margin-left:5px}.brand-icon{background:#b6a7f6;color:#171224;display:grid;place-items:center;width:39px;height:39px;border-radius:11px}.room-tag{font-size:10px;letter-spacing:2px;color:#858590;padding-left:25px;border-left:1px solid #333}.header-actions{margin-left:auto;display:flex;gap:12px}.titlebar{display:flex;align-items:center;justify-content:space-between;padding:38px 0 26px}.eyebrow{font-size:10px;letter-spacing:2.1px;color:#9c8dcc}h2{font:500 27px system-ui,sans-serif;margin:9px 0}.connection{font-size:12px;color:#a8a8b6}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.theater{border:1px solid #292b33;border-radius:15px;overflow:hidden;background:#111318}.sectionbar{font-size:10px;letter-spacing:1.5px;color:#9696a6;display:flex;justify-content:space-between;align-items:center;padding:18px 20px}.sectionbar span{letter-spacing:.5px;font-size:10px}.screen{background:radial-gradient(ellipse at 50% 55%,#191421 0,#08090c 65%);aspect-ratio:16/9;position:relative;display:grid;place-items:center;overflow:hidden}.screen video{width:100%;height:100%;object-fit:contain}.empty{text-align:center;padding:28px 14px}.play{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 24px;border:1px solid #3c354e;border-radius:50%;color:#b5a5f3;background:#1c1729}.empty>span{font-size:9px;letter-spacing:3px;color:#a299b5}.empty h1{font:500 clamp(28px,3vw,44px)/1.13 system-ui,sans-serif;margin:13px 0}.empty p{font-size:13px;line-height:1.8;color:#8d8d9b;margin:17px 0 24px}.primary{background:#b6a6f2;color:#201830;border-color:#b6a6f2;font-weight:600}.primary:hover{background:#c5b7ff}.empty small{display:block;font-size:10px;color:#9592a0;margin-top:17px}.caption{padding:20px;color:#999aa8;font-size:11px}aside>.sectionbar{padding:0 0 16px}.person{position:relative;border-radius:12px;overflow:hidden;background:#1a1c23;color:#a193cd;height:166px;margin-bottom:15px;display:grid;place-items:center;border:1px solid #30303b}.person video{width:100%;height:100%;object-fit:cover}.person label{position:absolute;bottom:10px;left:12px;border-radius:6px;background:#101117bb;padding:5px 8px;font-size:10px;color:#eee}.waiting{height:150px;border:1px dashed #34343e;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a29daa;font-size:12px}.waiting p{margin:10px 0 5px}.waiting small{font-size:10px;color:#8d8d9b}.join{margin-top:22px}.join label{font-size:11px;color:#a7a5b3}.join input{width:100%;background:#17191f;border:1px solid #33343d;border-radius:8px;padding:12px;margin:10px 0;color:white}.join button{width:100%;font-size:12px}.tip{font-size:11px;line-height:1.8;color:#9996a5;margin-top:22px}footer{display:flex;gap:12px;align-items:center;justify-content:center;padding:24px 0}footer button{font-size:12px}footer>span{font-size:10px;color:#9996a3;margin-left:10px}.bottom{border-top:1px solid #24262d;display:flex;justify-content:space-between;padding:23px 0;font-size:10px;color:#9697a3}.notice{display:flex;align-items:center;justify-content:space-between;background:#252030;color:#d9ccef;padding:14px 18px;border-radius:9px;font-size:12px;margin:12px 0}.notice button{padding:0;border:0;background:transparent}.modal-backdrop{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:20px;z-index:10;backdrop-filter:blur(8px)}.modal{max-width:520px;background:#17181e;border:1px solid #46404f;border-radius:18px;padding:34px;position:relative}.modal>svg{color:#b6a6f2}.modal h2{margin-top:18px}.modal p,.modal li{font-size:13px;line-height:1.9;color:#b4b1be}.modal ol{padding-left:19px}.modal li{margin-bottom:13px}.modal a{color:#c7b7ff}.modal code{font-size:11px;background:#29252f;padding:2px 4px}.close{position:absolute;right:17px;top:17px;padding:6px;border:0;background:transparent}@media(max-width:900px){main{padding:0 22px}.workspace{grid-template-columns:1fr 210px;gap:15px}.empty h1{font-size:29px}.empty p{margin:12px 0}.empty small{max-width:240px;margin:12px auto 0}.play{width:44px;height:44px;margin-bottom:13px}footer>span{display:none}.room-tag{display:none}}@media(max-width:650px){main{padding:0 15px}header{height:74px}.brand{font-size:22px}.header-actions button{padding:9px}.titlebar{padding:27px 0 20px}.titlebar h2{font-size:22px}.eyebrow{font-size:8px}.connection{font-size:10px}.workspace{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}aside>.sectionbar,aside>.join,aside>.tip{grid-column:1/-1}.person,.waiting{height:140px;margin:0}.screen{aspect-ratio:auto;min-height:340px}.screen video{max-height:60vh}.empty h1{font-size:34px}footer{flex-wrap:wrap}footer button{padding:12px;font-size:11px}.bottom span:last-child{display:none}}
[hidden]{display:none!important}.camera-placeholder{font-size:36px;color:#b6a6f2}.person video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.screen:fullscreen{background:#000;width:100vw;height:100vh}.notice{line-height:1.7}#cameras{display:flex;flex-direction:column;gap:12px}#cameras .person{margin-bottom:0}.waiting{margin-top:15px}#audio{display:none}@media(max-width:650px){aside{display:block}#cameras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.person{height:115px}.person label{font-size:9px;left:5px;bottom:5px;max-width:calc(100% - 10px);overflow:hidden;text-overflow:ellipsis}.waiting{height:65px}.waiting p{margin:4px}footer{gap:7px}footer button{min-height:44px}}
/* Modo cinema: transmissao inteira e webcams em miniatura. */
body.cinema-open{overflow:hidden}
.workspace.cinema-mode{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;display:block;background:#000;padding:0;margin:0;gap:0}
.cinema-mode .theater{width:100%;height:100%;border:0;border-radius:0;position:relative;background:#000}
.cinema-mode .theater>.sectionbar{display:none}
.cinema-mode .screen{height:100%;width:100%;min-height:0;aspect-ratio:auto;background:#000}
.cinema-mode .screen>video{width:100%;height:100%;max-height:none;object-fit:contain}
.cinema-mode .caption{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px;background:linear-gradient(#0009,transparent);z-index:4;pointer-events:none}
.cinema-mode #caption{display:none}
.cinema-mode #fullscreen{pointer-events:auto!important;float:right!important;min-height:44px;padding:10px 15px!important;background:#191921dc!important;border:1px solid #ffffff40!important;border-radius:9px!important;color:#fff;font-size:12px}
.cinema-mode aside{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));right:calc(12px + env(safe-area-inset-right));max-width:calc(100% - 24px);z-index:3;display:block;padding:0}
.cinema-mode aside>.sectionbar,.cinema-mode #waiting,.cinema-mode #join,.cinema-mode .tip{display:none!important}
.cinema-mode #cameras{display:flex;flex-direction:row;gap:7px;justify-content:flex-end}
.cinema-mode #cameras .person{width:112px;height:70px;margin:0;border:1px solid #ffffff40;border-radius:8px;box-shadow:0 3px 12px #0008;flex-shrink:1}
.cinema-mode .person label{left:4px;bottom:4px;font-size:9px;padding:2px 4px;max-width:calc(100% - 8px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cinema-mode .camera-placeholder{font-size:24px}
@media(max-width:650px){.cinema-mode #cameras .person{width:76px;height:50px}.cinema-mode .person label{font-size:8px}.cinema-mode #cameras{gap:5px}}

.view-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:9px;pointer-events:auto}
.view-controls label{font-size:11px;color:#c6c3d1}
#viewQuality{font:inherit;font-size:12px;color:#fff;background:#24202e;border:1px solid #595164;border-radius:8px;padding:9px 12px;min-height:44px;cursor:pointer;max-width:180px}
#viewQuality:focus-visible{outline:2px solid #b6a6f2;outline-offset:2px}
#viewQuality:disabled{opacity:.55;cursor:default}
.cinema-mode .view-controls{margin:0;flex-wrap:nowrap}
.cinema-mode .view-controls label{display:none}
.cinema-mode #viewQuality{background:#191921e8}
@media(max-width:650px){.view-controls{gap:7px}.view-controls label{font-size:10px}.cinema-mode #viewQuality{max-width:145px;font-size:11px;padding:8px}}