:root{--fundo: #0f1014;--fundo-2: #17181c;--fundo-3: #212227;--fundo-4: #2c2e34;--linha: #26272d;--texto: #f4f5f7;--texto-2: #9aa1ac;--texto-3: #6e7480;--acento: #5865f2;--acento-2: #4752c4;--verde: #23a55a;--vermelho: #da373c;--vermelho-2: #b32b30;--raio: 12px;--sombra: 0 10px 30px rgba(0, 0, 0, .45)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(1100px 620px at 50% -12%,#1b1d24 0%,transparent 62%),var(--fundo);color:var(--texto);font-family:Inter,gg sans,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}button,input,select{font-family:inherit}button:focus-visible,input:focus-visible,select:focus-visible,.cartao:focus-visible{outline:2px solid var(--acento);outline-offset:2px}#app{display:grid;grid-template-columns:1fr auto;grid-template-rows:46px 1fr auto auto;grid-template-areas:"topo       painel" "palco      painel" "controles  painel" "faixa      painel";height:100%}.topo{grid-area:topo;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px}.marca{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.2px}.marca strong{font-weight:600}.ponto{width:8px;height:8px;border-radius:50%;background:var(--texto-3);transition:background .25s,box-shadow .25s}.ponto.online{background:var(--verde);box-shadow:0 0 0 3px #23a55a2e}.ponto.erro{background:var(--vermelho);box-shadow:0 0 0 3px #da373c2e}.selo{display:inline-flex;align-items:center;gap:5px;background:#da373c24;color:#ff7a7f;border:1px solid rgba(218,55,60,.3);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.5px}.selo[hidden]{display:none}.selo-ponto{width:7px;height:7px;border-radius:50%;background:var(--verde);animation:pulsa 2s ease-in-out infinite}.selo .selo-ponto{background:var(--vermelho)}@keyframes pulsa{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}.status{color:var(--texto-2);font-size:12px}.status.erro{color:#ff9195}.palco{grid-area:palco;position:relative;min-height:0;padding:4px 18px 0;display:grid;place-items:center}.quadro{position:relative;width:100%;height:100%;background:#000;border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra),0 0 0 1px #23a55a8c,0 0 26px -6px #23a55a4d}.quadro[hidden]{display:none}.quadro video{width:100%;height:100%;object-fit:contain;display:block;background:#000}.quadro-topo{position:absolute;inset:0 0 auto 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);pointer-events:none}.quadro-rotulo{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;font-weight:500;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quadro-stats{padding:5px 10px;border-radius:999px;background:#0000008c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:11px;color:var(--texto-2);font-variant-numeric:tabular-nums;white-space:nowrap}.quadro-som{position:absolute;left:50%;bottom:20px;transform:translate(-50%);display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:#0a0a0cd1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:var(--sombra);transition:background .15s,transform .12s}.quadro-som:hover{background:var(--acento);transform:translate(-50%) translateY(-1px)}.quadro-som[hidden]{display:none}.quadro-som svg{width:16px;height:16px}.estado{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--texto-2);padding:28px;animation:sobe .3s ease-out}.estado[hidden]{display:none}.estado-arte{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(150deg,var(--fundo-3),var(--fundo-2));box-shadow:inset 0 1px #ffffff0d,var(--sombra);color:var(--texto-3);margin-bottom:2px}.estado-arte svg{width:42px;height:42px}.estado h2{margin:0;font-size:19px;font-weight:600;color:var(--texto);letter-spacing:-.2px}.estado p{margin:0;max-width:460px;font-size:13.5px}.estado input{width:100%;max-width:440px;text-align:center;font-size:12px;cursor:pointer}@keyframes sobe{0%{opacity:0;transform:translateY(10px)}}.controles{grid-area:controles;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 0 12px}.pilula{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;cursor:pointer;padding:12px 22px;font-size:14px;font-weight:600;color:#fff;background:var(--fundo-3);box-shadow:0 4px 14px #00000059;transition:background .15s,transform .12s,box-shadow .15s}.pilula:hover{background:var(--fundo-4);transform:translateY(-1px)}.pilula:active{transform:translateY(0)}.pilula.primario{background:var(--acento);box-shadow:0 6px 18px -4px #5865f299}.pilula.primario:hover{background:var(--acento-2)}.pilula.ativo{background:var(--vermelho);box-shadow:0 6px 18px -4px #da373c99}.pilula.ativo:hover{background:var(--vermelho-2)}.pilula .ic{width:18px;height:18px}.redondo{width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;background:var(--fundo-3);color:var(--texto);display:grid;place-items:center;transition:background .15s,transform .12s,color .15s}.redondo:hover{background:var(--fundo-4);transform:translateY(-1px)}.redondo[hidden]{display:none}.redondo.ligado{background:var(--acento)}.redondo.mudo{color:var(--texto-3)}.redondo .ic{width:19px;height:19px}.faixa{grid-area:faixa;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 18px 18px}.faixa:empty{padding:0}.cartao{position:relative;flex:none;width:196px;height:110px;background:var(--fundo-2);border-radius:10px;display:grid;place-items:center;overflow:hidden;border:2px solid transparent;box-shadow:0 2px 10px #0000004d;transition:border-color .15s,transform .12s,box-shadow .15s;animation:sobe .25s ease-out}.cartao.clicavel{cursor:pointer}.cartao.clicavel:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000073}.cartao.assistindo{border-color:var(--verde)}.cartao video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;background:#000}.cartao-veu{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#00000073;opacity:0;transition:opacity .15s}.cartao.clicavel:hover .cartao-veu{opacity:1}.cartao-veu span{background:#0a0a0cd9;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600;color:#fff}.cartao-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--fundo-3);display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--texto-2);box-shadow:0 0 0 3px var(--fundo-2)}.cartao-carregando{width:100%;height:100%;background:linear-gradient(100deg,var(--fundo-2) 30%,var(--fundo-3) 50%,var(--fundo-2) 70%);background-size:220% 100%;animation:brilha 1.4s linear infinite}@keyframes brilha{0%{background-position:140% 0}to{background-position:-40% 0}}.cartao-nome{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:16px 10px 8px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);font-size:12px;font-weight:500;color:#fff;overflow:hidden;white-space:nowrap;pointer-events:none}.cartao-nome .rotulo{overflow:hidden;text-overflow:ellipsis}.cartao-nome .selo-ponto{flex:none}.painel{grid-area:painel;width:272px;background:var(--fundo-2);border-left:1px solid var(--linha);padding:16px;overflow:auto;display:flex;flex-direction:column;gap:22px}.painel[hidden]{display:none}.painel section{display:flex;flex-direction:column;gap:9px}.painel h3{margin:0;font-size:11px;text-transform:uppercase;color:var(--texto-3);letter-spacing:.7px;font-weight:700;display:flex;align-items:center;gap:7px}.painel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}.painel li{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:7px;font-size:13px;transition:background .12s}.painel li:hover{background:var(--fundo-3)}.painel li img,.painel li .avatar-vazio{width:28px;height:28px;border-radius:50%;background:var(--fundo-3);display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--texto-2);flex:none;object-fit:cover}.painel li .nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.painel li .aovivo{font-size:9px;color:#fff;background:var(--vermelho);padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:.3px}.pill{background:var(--fundo-3);border-radius:999px;padding:1px 8px;font-size:11px;color:var(--texto-2);font-weight:600;letter-spacing:0}.campo{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--texto-2)}select,input{background:var(--fundo-3);color:var(--texto);border:1px solid var(--linha);border-radius:8px;padding:8px 10px;font-size:13px;max-width:100%;transition:border-color .15s}select:hover,input:hover{border-color:var(--fundo-4)}.botao{border:0;border-radius:8px;padding:10px 16px;cursor:pointer;font-size:14px;font-weight:600;color:#fff;background:var(--fundo-3);transition:background .15s,transform .12s}.botao:hover{background:var(--fundo-4);transform:translateY(-1px)}.botao.primario{background:var(--acento);box-shadow:0 6px 18px -6px #5865f2b3}.botao.primario:hover{background:var(--acento-2)}.botao.secundario{font-size:13px;padding:9px 13px}.dica{color:var(--texto-3);font-size:11px;margin:0}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#000000b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:20}.modal[hidden]{display:none}.modal-caixa{background:var(--fundo-2);border:1px solid var(--linha);border-radius:16px;padding:26px;width:min(380px,90vw);display:flex;flex-direction:column;gap:16px;box-shadow:var(--sombra);animation:sobe .22s ease-out}.modal-caixa h2{margin:0;font-size:19px;font-weight:600}.toasts{position:fixed;top:54px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:30;pointer-events:none;max-width:min(560px,92vw)}.toast{background:#212227f5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--linha);border-left:3px solid var(--acento);padding:11px 16px;border-radius:10px;font-size:13px;box-shadow:var(--sombra);animation:sobe .2s ease-out}.toast.erro{border-left-color:var(--vermelho)}.toast.ok{border-left-color:var(--verde)}@media(max-width:760px){#app{grid-template-columns:1fr;grid-template-areas:"topo" "palco" "controles" "faixa"}.painel{position:fixed;right:0;top:46px;bottom:0;z-index:10;box-shadow:var(--sombra)}.faixa{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}.cartao{width:152px;height:88px}}