:root{--bg-0:#1e1f22;--bg-1:#2b2d31;--bg-2:#313338;--bg-3:#383a40;--bg-hover:#35373c;--bg-active:#404249;--text:#dbdee1;--text-dim:#949ba4;--text-bright:#f2f3f5;--accent:#5865f2;--accent-hover:#4752c4;--green:#23a55a;--red:#da373c;--red-hover:#a12828;--live:#ed4245;--radius:8px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:gg sans,Noto Sans SC,Microsoft YaHei UI,system-ui,sans-serif;font-size:14px}*{box-sizing:border-box}html,body{background:var(--bg-2);height:100%;color:var(--text);margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}svg{display:block}[hidden]{display:none!important}#app{height:100%;display:flex}#sidebar{background:var(--bg-1);flex-direction:column;flex:none;width:240px;display:flex}#server-name{height:48px;color:var(--text-bright);border-bottom:1px solid var(--bg-0);white-space:nowrap;text-overflow:ellipsis;align-items:center;padding:0 16px;font-weight:600;display:flex;overflow:hidden}#channels{flex:1;padding:12px 8px;overflow-y:auto}.channel{color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;align-items:center;gap:6px;padding:6px 8px;display:flex}.channel:hover{background:var(--bg-hover);color:var(--text)}.channel.current{background:var(--bg-active);color:var(--text-bright)}.channel svg{flex:none;width:20px;height:20px}.channel .ch-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.ch-members{padding:2px 0 6px 28px}.member{color:var(--text-dim);border-radius:4px;align-items:center;gap:8px;padding:3px 8px;font-size:13px;display:flex}.member.clickable{cursor:pointer}.member.clickable:hover{background:var(--bg-hover);color:var(--text)}.member .avatar{width:24px;height:24px;font-size:11px}.member .m-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.member .m-icons{color:var(--text-dim);align-items:center;gap:4px;display:flex}.member .m-icons svg{width:14px;height:14px}.live-badge{background:var(--live);color:#fff;letter-spacing:.3px;border:0;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700;line-height:16px}button.live-badge:hover{filter:brightness(1.15)}#voice-status{border-top:1px solid var(--bg-0);background:#232428;align-items:center;gap:8px;padding:8px 10px;display:flex}.vs-text{flex:1;min-width:0}.vs-state{color:var(--green);font-size:13px;font-weight:600}.vs-state.warn{color:#f0b232}.vs-room{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}#userbar{background:#232428;align-items:center;gap:2px;padding:8px;display:flex}.me{cursor:pointer;border-radius:4px;flex:1;align-items:center;gap:8px;min-width:0;padding:2px 4px;display:flex}.me:hover{background:var(--bg-hover)}.me .avatar{width:32px;height:32px;font-size:13px}.me-text{min-width:0}.me-name{color:var(--text-bright);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.me-sub{color:var(--text-dim);font-size:11px}.icon-btn{width:32px;height:32px;color:var(--text-dim);background:0 0;border:0;border-radius:4px;flex:none;place-items:center;display:grid}.icon-btn:hover{background:var(--bg-hover);color:var(--text)}.icon-btn.off,.icon-btn.danger:hover{color:var(--red)}.icon-btn svg{width:20px;height:20px}.avatar{color:#fff;border-radius:50%;flex:none;place-items:center;font-weight:600;transition:box-shadow .1s;display:grid}.speaking .avatar,.avatar.speaking{box-shadow:0 0 0 2px var(--bg-1), 0 0 0 4px var(--green)}#main{background:#000;flex-direction:column;flex:1;min-width:0;display:flex;position:relative}#topbar{background:var(--bg-2);border-bottom:1px solid var(--bg-0);height:48px;color:var(--text-bright);flex:none;align-items:center;gap:8px;padding:0 16px;font-weight:600;display:flex}.topbar-icon svg{width:22px;height:22px;color:var(--text-dim)}#conn-status{color:var(--text-dim);margin-left:auto;font-size:12px;font-weight:400}#stage{background:var(--bg-0);flex-wrap:wrap;flex:1;place-content:center;gap:12px;min-height:0;padding:16px;display:flex;overflow-y:auto}.stage-empty{color:var(--text-dim);text-align:center;align-self:center}.stage-empty h3{color:var(--text-bright);margin:0 0 6px}.tile{background:var(--bg-1);border-radius:var(--radius);aspect-ratio:16/9;place-items:center;width:min(420px,100%);display:grid;position:relative;overflow:hidden}.tile.speaking{box-shadow:inset 0 0 0 3px var(--green)}.tile .avatar{width:80px;height:80px;font-size:30px}.tile .label{color:#fff;background:#0009;border-radius:4px;align-items:center;gap:6px;max-width:calc(100% - 16px);padding:3px 8px;font-size:13px;display:flex;position:absolute;bottom:8px;left:8px}.tile .label span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tile .label svg{width:16px;height:16px;color:var(--red);flex:none}.stream video{object-fit:contain;background:#000;width:100%;height:100%}.stream{cursor:pointer}.stream .placeholder{cursor:default;background:linear-gradient(160deg,#2b2d31,#1e1f22);place-content:center;justify-items:center;gap:10px;display:grid;position:absolute;inset:0}.stream .placeholder .ph-title{color:var(--text-bright);font-weight:600}.stream .stats{color:#cfd3d8;pointer-events:none;white-space:pre;background:#0009;border-radius:4px;padding:3px 6px;font:11px/1.4 ui-monospace,Consolas,monospace;position:absolute;top:8px;right:8px}.stream .tools{opacity:0;align-items:center;gap:6px;transition:opacity .15s;display:flex;position:absolute;bottom:8px;right:8px}.stream:hover .tools,.stream.big .tools{opacity:1}.stream .tools button{color:#fff;background:#000000a6;border:0;border-radius:6px;place-items:center;width:32px;height:32px;display:grid}.stream .tools button:hover{background:#000000e6}.stream .tools svg{width:18px;height:18px}.stream .tools input[type=range]{width:90px;accent-color:var(--accent)}.stream:fullscreen{border-radius:0}.tile.show{cursor:pointer}.tile.show video{object-fit:contain;background:#000;width:100%;height:100%}.tile.show .live-badge.watch{background:var(--green)}.tile .show-gate{text-align:center;color:var(--text-bright);background:#000000c7;place-content:center;justify-items:center;gap:12px;padding:20px;display:grid;position:absolute;inset:0}.tile .show-gate p{max-width:32ch;color:var(--text-dim);margin:0}.show-bar{opacity:0;z-index:4;background:#000000b3;border-radius:8px;align-items:center;gap:8px;padding:5px 8px;transition:opacity .15s;display:flex;position:absolute;bottom:8px;left:8px;right:8px}:is(.tile.show:hover .show-bar,.tile.show.big .show-bar,.tile.show:fullscreen .show-bar){opacity:1}.show-bar button{color:#fff;background:0 0;border:0;border-radius:6px;flex:none;place-items:center;width:30px;height:30px;display:grid}.show-bar button:hover{background:#ffffff29}.show-bar svg{width:17px;height:17px}.show-bar .seek{min-width:40px;accent-color:var(--accent);flex:1}.show-bar .vol{width:72px;accent-color:var(--accent);flex:none}.show-bar .tspan{color:#cfd3d8;white-space:nowrap;flex:none;font:11px/1 ui-monospace,Consolas,monospace}.tile.show:not(.host) .show-bar [data-act=play],.tile.show:not(.host) .show-bar .seek,.tile.show:not(.host) .show-bar [data-act=stop]{display:none}.sub-tune{z-index:3;border:1px solid var(--bg-3);background:#111214f2;border-radius:8px;flex-direction:column;gap:8px;padding:10px 12px;font-size:12px;display:flex;position:absolute;bottom:50px;right:8px}.sub-tune label{color:var(--text-dim);align-items:center;gap:8px;display:flex}.sub-tune input[type=range]{width:110px;accent-color:var(--accent)}.sub-tune .off{color:var(--text-bright);text-align:center;min-width:38px;font:12px/1 ui-monospace,Consolas,monospace}.sub-tune .tune-actions{justify-content:flex-end}.btn.tiny{background:var(--bg-3);border-radius:4px;padding:4px 8px;font-size:12px}.btn.tiny:hover{background:#4e5058;text-decoration:none}.btn.tiny.danger{background:var(--red);color:#fff}.subs{z-index:2;pointer-events:none;--sub-size:4.6cqh;--sub-bottom:6cqh;position:absolute;inset:0;overflow:hidden;container-type:size}.no-subs .subs{display:none}.sub-zone{flex-direction:column;align-items:center;gap:.25em;display:flex;position:absolute;left:4%;right:4%}.sub-zone.z2{bottom:var(--sub-bottom)}.sub-zone.z5{top:50%;transform:translateY(-50%)}.sub-zone.z8{top:var(--sub-bottom)}.sub-line{font-size:var(--sub-size);text-align:center;color:#fff;paint-order:stroke fill;-webkit-text-stroke:.14em #000;text-shadow:0 .04em .12em #000000d9;white-space:pre-wrap;text-wrap:balance;font-weight:600;line-height:1.25}#show-hostbar{z-index:5;white-space:nowrap;border:1px solid var(--bg-3);background:#111214eb;border-radius:10px;align-items:center;gap:8px;padding:6px 10px;font-size:13px;display:flex;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}#show-hostbar .hb-title{color:var(--text-dim);text-overflow:ellipsis;max-width:22ch;overflow:hidden}#show-hostbar .hb-time{color:var(--text-bright);min-width:44px;font:12px/1 ui-monospace,Consolas,monospace}#show-hostbar .icon-btn svg{width:18px;height:18px}.ctrl-btn.active{background:var(--green)}.sub-pick{align-items:center;gap:10px;display:flex}#stage.focus{flex-flow:column;place-content:stretch flex-start}#stage.focus .tile.big{aspect-ratio:auto;flex:1;order:-1;width:100%;min-height:0}#stage.focus .strip{flex:none;justify-content:center;gap:8px;display:flex;overflow-x:auto}#stage.focus .strip .tile{width:200px}#stage.focus .strip .tile .avatar{width:48px;height:48px;font-size:18px}.strip{display:contents}#controls{background:#111214d9;border-radius:14px;gap:10px;padding:8px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.ctrl-btn{background:var(--bg-3);width:52px;height:52px;color:var(--text-bright);border:0;border-radius:50%;place-items:center;display:grid}.ctrl-btn:hover{background:#4e5058}.ctrl-btn.off{color:var(--red);background:#fff}.ctrl-btn.on{background:var(--green)}.ctrl-btn.danger{background:var(--red)}.ctrl-btn.danger:hover{background:var(--red-hover)}.ctrl-btn svg{width:24px;height:24px}#audio-banner{color:#1e1f22;background:#f0b232;border-radius:8px;padding:8px 14px;font-weight:600;position:absolute;top:60px;left:50%;transform:translate(-50%)}#audio-banner button{color:#fff;background:#1e1f22;border:0;border-radius:4px;margin-left:6px;padding:3px 10px}dialog{background:var(--bg-2);color:var(--text);border:0;border-radius:10px;width:min(440px,100vw - 32px);padding:0;box-shadow:0 8px 32px #00000080}dialog::backdrop{background:#000000b3}dialog form{flex-direction:column;gap:14px;padding:20px;display:flex}dialog h2{color:var(--text-bright);margin:0;font-size:20px}dialog label{color:var(--text-dim);flex-direction:column;gap:6px;font-size:12px;font-weight:700;display:flex}dialog input:not([type=checkbox]):not([type=radio]),dialog select{background:var(--bg-0);color:var(--text);font:inherit;border:0;border-radius:4px;padding:10px;font-size:14px}dialog label.check{color:var(--text);flex-direction:row;align-items:center;font-size:14px;font-weight:400}dialog label.check small{color:var(--text-dim)}.err{color:#fa777c;min-height:1em;margin:0;font-size:13px}.hint{color:var(--text-dim);margin:0;font-size:13px}.dlg-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.btn{color:var(--text);background:0 0;border:0;border-radius:4px;padding:9px 18px}.btn:hover{text-decoration:underline}.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-hover);text-decoration:none}.field{flex-direction:column;gap:6px;display:flex}.field-label{color:var(--text-dim);font-size:12px;font-weight:700}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg label{color:var(--text);cursor:pointer;flex-direction:row;font-size:14px;font-weight:500}.seg input{opacity:0;pointer-events:none;position:absolute}.seg span{background:var(--bg-0);border:1px solid #0000;border-radius:6px;padding:7px 14px}.seg input:checked+span{border-color:var(--accent);color:var(--text-bright);background:#5865f240}.seg input:focus-visible+span{outline:2px solid var(--accent)}.seg input:disabled+span{opacity:.4;cursor:not-allowed}#helper-fields{flex-direction:column;gap:14px;display:flex}.stream .placeholder .ph-note{color:var(--text-dim);text-align:center;max-width:80%;font-size:13px}.stream .placeholder .ph-note.bad{color:#f0b232}.br-row{align-items:center;gap:10px;display:flex}.br-row span{color:var(--text-dim)}dialog .br-row input[type=number]{width:90px;padding:7px 10px}dialog .br-row input[type=number]:disabled{opacity:.55}.codec-tag{background:var(--bg-3);color:var(--text-dim);border-radius:3px;margin-left:6px;padding:0 5px;font-size:11px;font-style:normal}.codec-tag:empty{display:none}.codec-tag.hw{color:#57d28f;background:#23a55a33}.codec-tag.sw{color:#f0b232;background:#f0b23226}#popover{z-index:20;background:#111214;border-radius:8px;flex-direction:column;gap:8px;width:220px;padding:12px 14px;display:flex;position:fixed;box-shadow:0 8px 24px #00000080}#popover .pop-title{color:var(--text-bright);font-weight:600}#popover label{color:var(--text-dim);flex-direction:column;gap:4px;font-size:12px;display:flex}#popover input[type=range]{accent-color:var(--accent)}#toasts{z-index:30;flex-direction:column;gap:8px;display:flex;position:fixed;top:12px;right:12px}.toast{color:var(--text);border-left:4px solid var(--accent);background:#111214;border-radius:6px;max-width:360px;padding:10px 14px;font-size:13px;box-shadow:0 4px 16px #00000080}.toast.error{border-left-color:var(--red)}@media (max-width:700px){#sidebar{width:200px}.tile{width:100%}#stage{padding:8px}}