: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,.tile.show video{object-fit:contain;background:#000;width:100%;height:100%;position:absolute;inset:0}.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 .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)}.danmaku{z-index:2;pointer-events:none;position:absolute;inset:4px 0 0;overflow:hidden;container-type:size}.dm{white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:.12em #000000d9;text-shadow:0 0 3px #00000080;will-change:transform;font-size:clamp(14px,5.4cqh,34px);font-weight:700;line-height:1.25;position:absolute;left:0}.dm.own{outline-offset:2px;border-radius:3px;outline:1.5px solid #ffffffbf;padding:0 3px}.tile .label,.stream .tools,.stream .stats{z-index:3}.tile .show-gate{z-index:5}.stream .tools button.on{color:#ff4d4f}.stream .tools button.off,.show-bar button.off{opacity:.55}.rec-badge{color:#fff;background:#ed4245;border-radius:4px;flex:none;padding:1px 5px;font-size:10px;font-weight:700;line-height:16px;animation:1.6s ease-in-out infinite rec-pulse}@keyframes rec-pulse{50%{opacity:.55}}#danmaku-bar{background:var(--bg-0);border-radius:26px;align-self:center;align-items:center;gap:6px;margin-left:6px;padding:4px 4px 4px 8px;display:flex}#dm-color{background:var(--dm-color,#fff);border:2px solid #ffffff59;border-radius:50%;flex:none;width:22px;height:22px;padding:0}#dm-input{width:220px;min-width:0;color:var(--text-bright);font:inherit;background:0 0;border:0;outline:0;flex:1;padding:8px 2px;font-size:14px}#dm-input::placeholder{color:var(--text-dim)}#dm-send{background:var(--accent);color:#fff;border:0;border-radius:20px;flex:none;padding:8px 14px;font-weight:600}#dm-send:hover{background:var(--accent-hover)}#danmaku-bar.in-tile{z-index:6;-webkit-backdrop-filter:blur(6px);opacity:0;background:#0009;width:min(480px,100% - 24px);margin:0;transition:opacity .15s;position:absolute;bottom:56px;left:50%;transform:translate(-50%)}.tile:hover #danmaku-bar.in-tile,#danmaku-bar.in-tile:focus-within{opacity:1}.tile.webfull{z-index:60;background:#000;border-radius:0;inset:0;aspect-ratio:auto!important;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;position:fixed!important}.tile.webfull.rotate{transform-origin:0 0;inset:0 auto auto 100vw;transform:rotate(90deg);width:100dvh!important;height:100vw!important}body.has-webfull{overscroll-behavior:none}#toasts{z-index:70}.dlg-actions .spacer{flex:1}.btn.danger-text{color:#fa777c}.btn.danger-text:hover{background:#da373c26;text-decoration:none}#btn-nav,#nav-backdrop,.mobile-only{display:none}@media (max-width:760px),(pointer:coarse) and (max-height:520px){html,body{-webkit-tap-highlight-color:transparent}button,.channel,.tile{touch-action:manipulation}#app{height:100dvh}.desk-only{display:none}.mobile-only{margin-top:14px;display:block}#sidebar{z-index:40;width:min(300px,86vw);padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);transition:transform .22s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:4px 0 24px #00000073}#userbar{padding-bottom:max(8px, env(safe-area-inset-bottom))}#nav-backdrop{z-index:39;opacity:0;pointer-events:none;background:#0000008c;transition:opacity .22s;display:block;position:fixed;inset:0}#app.nav-open #sidebar{transform:none}#app.nav-open #nav-backdrop{opacity:1;pointer-events:auto}.channel{padding:10px 8px}.member{padding:6px 8px}#topbar{height:calc(48px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 max(6px, env(safe-area-inset-left));background:var(--bg-1);gap:6px}#btn-nav{width:40px;height:40px;display:grid}#btn-nav svg{width:22px;height:22px}#room-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}#conn-status{flex:none}#stage{padding:8px max(8px, env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));place-content:flex-start;gap:8px}.stage-empty{margin:auto;padding:0 24px}.tile{width:100%}.tile.user{aspect-ratio:4/3;width:calc(50% - 4px);padding-bottom:20px}.tile .avatar{width:56px;height:56px;font-size:22px}.tile .label{font-size:12px;bottom:6px;left:6px}#stage.focus{flex-flow:wrap;align-content:flex-start}#stage.focus .tile.big{aspect-ratio:16/9;flex:none;width:100%}#stage.focus .strip{display:contents}#stage.focus .strip .tile{width:calc(33.3333% - 5.33333px)}#stage.focus .strip .tile.stream,#stage.focus .strip .tile.show{width:100%}#stage.focus .strip .tile .avatar{width:40px;height:40px;font-size:16px}#stage.focus .strip .tile.user{padding-bottom:18px}#stage.focus .strip .tile .label{padding:2px 6px;font-size:11px}.stream .tools,.show-bar{opacity:1}.stream .tools button{width:36px;height:36px}.stream .tools input[type=range]{display:none}.stream .stats{padding:2px 5px;font-size:9px;top:6px;right:6px}.stream .placeholder{gap:8px;padding:12px}.stream .placeholder .ph-note{max-width:100%;font-size:12px}#controls{padding:8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));border-top:1px solid var(--bg-3);-webkit-backdrop-filter:blur(8px);background:#1e1f22f5;border-radius:0;justify-content:space-evenly;gap:0;bottom:0;left:0;right:0;transform:none}.ctrl-btn{width:50px;height:50px}#controls{flex-wrap:wrap;row-gap:8px}#controls>#danmaku-bar{flex:1 0 100%;order:-1;margin:0}#dm-input{font-size:16px}#main:has(#controls>#danmaku-bar:not([hidden])) #stage{padding-bottom:calc(132px + env(safe-area-inset-bottom))}#main:has(#controls>#danmaku-bar:not([hidden])) #show-hostbar{bottom:calc(128px + env(safe-area-inset-bottom))}#danmaku-bar.in-tile{opacity:1;bottom:52px}.dlg-actions .spacer{display:none}.ctrl-btn:hover{background:var(--bg-3)}.ctrl-btn.off:hover{background:#fff}.ctrl-btn.on:hover,.ctrl-btn.active:hover{background:var(--green)}.ctrl-btn.danger:hover{background:var(--red)}#show-hostbar{left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));white-space:normal;flex-wrap:wrap;justify-content:center;row-gap:6px;transform:none}#show-hostbar .hb-title{text-align:center;flex-basis:100%;max-width:100%}.sub-tune{bottom:56px;left:8px;right:8px}.sub-tune input[type=range]{flex:1;width:auto}#audio-banner{top:calc(56px + env(safe-area-inset-top));text-align:center;left:12px;right:12px;transform:none}#toasts{top:calc(8px + env(safe-area-inset-top));align-items:center;left:12px;right:12px}.toast{width:100%;max-width:100%}#popover{width:min(220px,100vw - 16px)}dialog{overscroll-behavior:contain;border-radius:14px 14px 0 0;width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;overflow-y:auto}dialog form{padding:18px max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}dialog input:not([type=checkbox]):not([type=radio]),dialog select{padding:12px;font-size:16px}.dlg-actions .btn{flex:1;padding:12px}.seg span{padding:9px 14px}}@media (pointer:coarse) and (max-height:520px) and (orientation:landscape){#topbar{height:calc(40px + env(safe-area-inset-top))}#stage{padding-bottom:calc(64px + env(safe-area-inset-bottom))}#stage.focus .tile.big{width:auto;max-width:100%;height:calc(100dvh - 120px);margin:0 auto}#stage.focus .strip .tile{width:calc(20% - 6.4px)}.ctrl-btn{width:42px;height:42px}.ctrl-btn svg{width:20px;height:20px}#controls{padding-top:6px;padding-bottom:max(6px, env(safe-area-inset-bottom))}#show-hostbar{bottom:calc(60px + env(safe-area-inset-bottom))}}