:root{--bg:#0f1419;--surface:#171e26;--surface-2:#1f2832;--border:#2a3541;--text:#e8edf2;--muted:#8b98a7;--accent:#2f8fde;--accent-strong:#1f78c1;--live:#ff4d5e;--ok:#3ecf8e;--warn:#f5b84b;--radius:14px;--tabbar-h:60px;--talkbar-h:76px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);overscroll-behavior:none;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}button:disabled{opacity:.5;cursor:default}code,.mono{word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}.screen{flex-direction:column;max-width:720px;height:100%;margin:0 auto;display:flex;position:relative}.appbar{padding:calc(10px + var(--safe-t)) 12px 10px;border-bottom:1px solid var(--border);background:var(--bg);z-index:5;align-items:center;gap:8px;display:flex;position:sticky;top:0}.appbar h1{white-space:nowrap;text-overflow:ellipsis;flex:1;margin:0;font-size:1.2rem;overflow:hidden}.appbar-title{flex:1;min-width:0}.appbar-title small{color:var(--muted);font-size:.8rem}.scroll{-webkit-overflow-scrolling:touch;padding:12px 12px calc(96px + var(--safe-b));flex:1;overflow-y:auto}.scroll.with-bars{padding-bottom:calc(var(--tabbar-h) + var(--talkbar-h) + var(--safe-b) + 16px)}.spacer{flex:1}.row{flex-wrap:wrap;gap:8px;display:flex}.center-state{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex}.center-state small,.hint{color:var(--muted);font-size:.85rem}.hint.center{text-align:center;margin-top:40px}.error-text{color:#ff8a8a;max-width:340px}.empty{text-align:center;color:var(--muted);flex-direction:column;align-items:center;gap:4px;padding:48px 20px;display:flex}.empty h2{color:var(--text);margin:12px 0 4px;font-size:1.1rem}.empty p{max-width:360px;margin:4px 0}.icon-btn{border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:inline-grid}.icon-btn:active{background:var(--surface-2)}.btn{background:var(--surface-2);border-radius:12px;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:0 18px;font-weight:600;display:inline-flex}.btn.primary{background:var(--accent);color:#fff}.btn.primary:active{background:var(--accent-strong)}.btn.ghost{border:1px solid var(--border);background:0 0}.btn.danger{color:#ff7b7b}.btn.small{min-height:34px;padding:0 14px;font-size:.85rem}.chip{color:#fff;background:#0000008c;border-radius:999px;padding:8px 14px;font-size:.85rem}.fab{right:max(20px,50% - 340px);bottom:calc(24px + var(--safe-b));background:var(--accent);color:#fff;border-radius:20px;place-items:center;width:60px;height:60px;display:grid;position:fixed;box-shadow:0 8px 24px #0006}.badge{background:var(--accent);color:#fff;text-align:center;border-radius:999px;min-width:18px;padding:1px 6px;font-size:.7rem;font-style:normal;font-weight:700}.badge.live{background:var(--live)}.tag{color:var(--ok);white-space:nowrap;border:1px solid;border-radius:999px;padding:1px 8px;font-size:.7rem}.dot{background:var(--muted);border-radius:50%;width:8px;height:8px;display:inline-block}.dot.online{background:var(--ok)}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.server-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.server-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;padding-right:6px;display:flex}.server-main{text-align:left;flex:1;align-items:center;gap:12px;min-width:0;padding:14px;display:flex}.server-avatar{background:linear-gradient(135deg,#2f8fde,#6b5cff);border-radius:12px;flex:none;place-items:center;width:44px;height:44px;font-size:1.2rem;font-weight:700;display:grid}.server-text{flex-direction:column;min-width:0;display:flex}.server-text strong,.server-text small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.server-text small{color:var(--muted)}.sheet-backdrop{z-index:50;background:#0000008c;justify-content:center;align-items:flex-end;animation:.15s ease-out fade;display:flex;position:fixed;inset:0}.sheet{background:var(--surface);width:100%;max-width:560px;max-height:92vh;padding:8px 18px calc(18px + var(--safe-b));border-radius:20px 20px 0 0;flex-direction:column;gap:14px;animation:.2s ease-out slide-up;display:flex;overflow-y:auto}@media (width>=600px){.sheet-backdrop{align-items:center}.sheet{border-radius:20px}}.sheet-handle{background:var(--border);border-radius:2px;width:40px;height:4px;margin:4px auto 0}.sheet h2{margin:0;font-size:1.15rem}.sheet label,.sheet .field{color:var(--muted);flex-direction:column;gap:6px;font-size:.85rem;display:flex}.sheet small{color:var(--muted);font-size:.78rem}.sheet input,.sheet textarea{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;outline:none;padding:12px;font-size:16px}.sheet input:focus,.sheet textarea:focus{border-color:var(--accent)}.sheet-actions{align-items:center;gap:8px;margin-top:4px;display:flex}@keyframes slide-up{0%{opacity:0;transform:translateY(40px)}}@keyframes fade{0%{opacity:0}}.channel-tree,.client-list{margin:0;padding:0;list-style:none}.channel-tree>li{padding-left:calc(var(--depth,0) * 16px)}.channel-row{text-align:left;border-radius:10px;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 10px;display:flex}.channel-row:active{background:var(--surface-2)}.channel-row.mine{background:var(--surface)}.channel-icon{border:2px solid var(--muted);border-radius:3px;flex:none;width:12px;height:12px}.channel-icon.occupied{border-color:var(--accent);background:var(--accent)}.channel-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:500;overflow:hidden}.join-hint{color:var(--muted);opacity:0;font-size:.75rem}.channel-row:active .join-hint{opacity:1}.spacer-row{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;font-size:.8rem}.spacer-row.center{text-align:center}.spacer-row.right{text-align:right}.spacer-row hr{border:0;border-top:1px solid var(--border)}.client-list{padding-left:22px}.client-row{color:#cfd8e2;border-radius:10px;align-items:center;gap:10px;min-height:38px;padding:4px 10px;display:flex}.client-status{width:18px;color:var(--muted);flex:none;place-items:center;display:grid}.voice-dot{background:var(--surface-2);border:2px solid var(--muted);border-radius:50%;width:10px;height:10px;transition:all .1s}.client-row.speaking .voice-dot{background:var(--ok);border-color:var(--ok);box-shadow:0 0 0 4px #3ecf8e40}.client-row.speaking .client-name{color:#fff}.client-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.client-name small{color:var(--muted)}.live-pill{background:var(--live);color:#fff;letter-spacing:.04em;border-radius:6px;align-items:center;gap:4px;padding:5px 8px;font-size:.68rem;font-weight:800;animation:2s ease-in-out infinite pulse;display:inline-flex}@keyframes pulse{50%{box-shadow:0 0 0 5px #ff4d5e33}}.live-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.live-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:left;flex-direction:column;width:100%;display:flex;overflow:hidden}.live-card>.btn{margin:0 12px 12px}.live-thumb{aspect-ratio:16/9;color:var(--muted);background:radial-gradient(circle at 30% 20%,#26384b,#10161d);place-items:center;display:grid;position:relative}.live-thumb .badge{border-radius:6px;padding:3px 8px;font-size:.68rem;position:absolute;top:10px;left:10px}.live-info{flex-direction:column;gap:2px;padding:10px 12px;display:flex}.live-info small{color:var(--muted)}.chat{flex-direction:column;min-height:100%;display:flex}.chat-log{flex-direction:column;flex:1;gap:8px;display:flex}.chat-msg{background:var(--surface);border-radius:14px 14px 14px 4px;align-self:flex-start;max-width:85%;padding:8px 12px}.chat-msg.own{background:var(--accent-strong);border-radius:14px 14px 4px;align-self:flex-end}.chat-msg p{white-space:pre-wrap;word-break:break-word;margin:2px 0 0}.chat-meta{color:var(--muted);gap:8px;font-size:.75rem;display:flex}.chat-msg.own .chat-meta{color:#ffffffbf}.chat-meta strong{color:var(--text)}.chat-input{width:100%;max-width:720px;left:50%;bottom:calc(var(--tabbar-h) + var(--talkbar-h) + var(--safe-b));background:var(--bg);border-top:1px solid var(--border);gap:6px;padding:8px 12px;display:flex;position:fixed;transform:translate(-50%)}.chat-input input{background:var(--surface);border:1px solid var(--border);border-radius:22px;outline:none;flex:1;padding:10px 16px;font-size:16px}.talkbar{width:100%;max-width:720px;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b));height:var(--talkbar-h);background:linear-gradient(to top, var(--bg) 70%, transparent);z-index:10;align-items:center;gap:12px;padding:10px 14px;display:flex;position:fixed;transform:translate(-50%)}.round-btn{background:var(--surface-2);border-radius:50%;flex:none;place-items:center;width:52px;height:52px;display:grid}.round-btn.off{color:#ff8a8a;background:#4a1f25}.round-btn.on{background:var(--ok);color:#04130c}.ptt{background:var(--surface-2);border:2px solid var(--border);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;border-radius:28px;flex:1;justify-content:center;align-items:center;gap:10px;height:56px;font-weight:700;transition:all .1s;display:flex}.ptt.talking{background:var(--ok);border-color:var(--ok);color:#04130c;transform:scale(.98)}.ptt.open:not(.talking){opacity:1;border-color:var(--ok);color:var(--ok)}.tabbar{width:100%;max-width:720px;height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);background:var(--surface);border-top:1px solid var(--border);z-index:10;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.tabbar button{color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:.72rem;display:flex;position:relative}.tabbar button.active{color:var(--accent)}.tabbar .badge{position:absolute;top:6px;left:calc(50% + 6px)}.player{z-index:40;background:#000;flex-direction:column;animation:.15s ease-out fade;display:flex;position:fixed;inset:0}.player-stage{touch-action:none;flex:1;place-items:center;display:grid;position:relative;overflow:hidden}.player-stage video{object-fit:contain;transform-origin:50%;will-change:transform;pointer-events:none;width:100%;height:100%}.player-status{text-align:center;color:#dbe3ec;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0}.player-top,.player-bottom{color:#fff;align-items:center;gap:8px;padding:8px 10px;transition:opacity .25s;display:flex;position:absolute;left:0;right:0}.player-top{padding-top:calc(8px + var(--safe-t));background:linear-gradient(#000000bf,#0000);top:0}.player-bottom{padding-bottom:calc(10px + var(--safe-b));background:linear-gradient(#0000,#000000bf);bottom:0}.player-top.hidden,.player-bottom.hidden{opacity:0;pointer-events:none}.player .icon-btn{background:#00000059}.player-title{text-align:center;flex-direction:column;flex:1;min-width:0;display:flex}.player-title strong,.player-title span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.player-title span{opacity:.75;font-size:.75rem}.mini-player{right:12px;bottom:calc(var(--tabbar-h) + var(--talkbar-h) + var(--safe-b) + 12px);aspect-ratio:16/9;z-index:30;cursor:pointer;background:#000;border-radius:12px;width:min(52vw,280px);position:fixed;overflow:hidden;box-shadow:0 10px 30px #0009}.mini-player video{object-fit:contain;width:100%;height:100%}.mini-status{text-align:center;place-items:center;padding:8px;font-size:.75rem;display:grid;position:absolute;inset:0}.mini-close{color:#fff;background:#0009;border-radius:50%;place-items:center;width:30px;height:30px;display:grid;position:absolute;top:4px;right:4px}.toast{left:50%;top:calc(16px + var(--safe-t));color:#0f1419;z-index:100;background:#e8edf2;border-radius:12px;max-width:calc(100% - 32px);padding:12px 18px;font-weight:500;animation:.2s ease-out fade;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #00000080}body:has(.chat-input) .mini-player{bottom:calc(var(--tabbar-h) + var(--talkbar-h) + var(--safe-b) + 76px)}
