:root{--bg-0: #1e1f22;--bg-1: #2b2d31;--bg-2: #313338;--bg-3: #383a40;--bg-hover: #3a3c42;--text: #dbdee1;--text-dim: #949ba4;--text-bright: #f2f3f5;--accent: #5865f2;--accent-hover: #4752c4;--green: #23a55a;--red: #f23f43;--yellow: #f0b232;--radius: 10px;--shadow: 0 4px 14px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif;background:var(--bg-0);color:var(--text);-webkit-font-smoothing:antialiased}.login-wrap{height:100%;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#2b2d31,var(--bg-0))}.login-card{width:380px;background:var(--bg-2);border-radius:16px;padding:36px 32px;box-shadow:var(--shadow);text-align:center}.login-logo{font-size:48px}.login-card h1{margin:8px 0 4px;color:var(--text-bright);font-size:28px}.login-sub{color:var(--text-dim);font-size:13px;margin-bottom:22px}.login-input{width:100%;padding:12px 14px;border-radius:var(--radius);border:none;background:var(--bg-1);color:var(--text-bright);font-size:15px;outline:2px solid transparent;transition:outline-color .15s}.login-input:focus{outline-color:var(--accent)}.login-hint{color:var(--text-dim);font-size:12px;margin-top:14px}.btn-primary{margin-top:14px;width:100%;padding:12px;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s,transform .05s}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.app{display:flex;height:100%}.server-bar{width:72px;background:var(--bg-0);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;overflow-y:auto}.server-icon{width:48px;height:48px;border-radius:50%;border:none;background:var(--bg-3);color:var(--text-bright);font-size:22px;cursor:pointer;transition:border-radius .15s,background .15s}.server-icon:hover,.server-icon.active{border-radius:16px;background:var(--accent)}.server-icon.gear{margin-top:4px;font-size:18px;background:var(--bg-1)}.server-icon.gear:hover{background:var(--bg-hover)}.server-status{margin-top:auto;text-align:center;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:2px}.server-status small{font-size:9px;max-width:64px;line-height:1.1}.dot{width:9px;height:9px;border-radius:50%}.dot.ok{background:var(--green)}.dot.warn{background:var(--yellow)}.channel-bar{width:240px;background:var(--bg-1);display:flex;flex-direction:column;padding:12px 8px;overflow-y:auto}.channel-server-name{font-weight:700;color:var(--text-bright);padding:6px 8px 12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px}.channel-group{margin-bottom:16px}.channel-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);padding:4px 8px}.channel-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer;font-size:14px;text-align:left;transition:background .12s,color .12s}.channel-item:hover{background:var(--bg-hover);color:var(--text)}.channel-item.active{background:var(--bg-hover);color:var(--text-bright)}.channel-item.static{cursor:default}.channel-item.static:hover{background:transparent}.ch-icon{width:18px;text-align:center;opacity:.8}.ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ch-live{color:var(--green);font-size:10px}.main{flex:1;display:flex;min-width:0}.stage{flex:1;display:flex;flex-direction:column;background:var(--bg-2);min-width:0}.stage.empty{align-items:center;justify-content:center;text-align:center;color:var(--text-dim)}.stage-empty-icon{font-size:56px;margin-bottom:8px}.stage.empty h2{color:var(--text-bright);margin:0 0 6px}.stage-header{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--text-bright);font-weight:600}.tiles{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:16px;padding:24px;overflow-y:auto}.tile{width:180px;background:var(--bg-1);border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px;border:2px solid transparent}.tile.connecting{opacity:.6}.tile.muted{border-color:var(--red)}.tile.deafened .avatar{filter:grayscale(1)}.avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#8a5cf6);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:700}.avatar.you{background:linear-gradient(135deg,var(--green),#2dd4bf)}.tile-name{font-size:13px;color:var(--text);text-align:center}.tile-name small{color:var(--yellow)}.controls{display:flex;gap:10px;justify-content:center;padding:14px;background:var(--bg-1);border-top:1px solid rgba(255,255,255,.06)}.ctrl{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;border:none;border-radius:10px;background:var(--bg-3);color:var(--text-bright);font-size:20px;cursor:pointer;transition:background .12s}.ctrl small{font-size:10px;color:var(--text-dim)}.ctrl:hover{background:var(--bg-hover)}.ctrl.off{background:#f23f4326}.ctrl.leave{background:#f23f43cc}.ctrl.leave small{color:#fff}.chat{width:360px;background:var(--bg-2);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}.chat-header{padding:14px 16px;font-weight:600;color:var(--text-bright);border-bottom:1px solid rgba(255,255,255,.06)}.chat-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.chat-empty{color:var(--text-dim);font-size:13px;text-align:center;margin-top:20px}.msg{display:flex;flex-direction:column;gap:2px}.msg.self{align-items:flex-end}.msg-name{font-size:12px;color:var(--accent);font-weight:600}.msg-text{background:var(--bg-1);padding:8px 12px;border-radius:10px;font-size:14px;color:var(--text);max-width:280px;word-break:break-word}.msg.self .msg-text{background:var(--accent);color:#fff}.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.06)}.chat-input input{flex:1;padding:10px 12px;border-radius:8px;border:none;background:var(--bg-1);color:var(--text-bright);outline:2px solid transparent}.chat-input input:focus{outline-color:var(--accent)}.chat-input input:disabled{opacity:.5}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:var(--bg-0);border-radius:4px}.modal-overlay{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:100}.modal{width:440px;max-width:92vw;max-height:88vh;overflow:auto;background:var(--bg-2);border-radius:16px;box-shadow:var(--shadow)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.06)}.modal-header h2{margin:0;color:var(--text-bright);font-size:18px}.modal-close{border:none;background:transparent;color:var(--text-dim);font-size:18px;cursor:pointer;border-radius:8px;padding:4px 8px}.modal-close:hover{background:var(--bg-hover);color:var(--text-bright)}.modal-body{padding:20px;display:flex;flex-direction:column;gap:18px}.field input,.field select{padding:10px 12px;border-radius:8px;border:none;background:var(--bg-1);color:var(--text-bright);font-size:14px;outline:2px solid transparent}.field input:focus,.field select:focus{outline-color:var(--accent)}.field .hint{color:var(--text-dim);font-size:11px}.modal-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.06)}.modal-footer .btn-primary{margin-top:0}@media (max-width: 820px){.chat{display:none}.channel-bar{width:180px}}.meter{height:10px;width:100%;background:var(--bg-0);border-radius:6px;overflow:hidden;border:1px solid var(--bg-3)}.meter-fill{height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,var(--green) 0%,var(--green) 60%,var(--yellow) 80%,var(--red) 100%);transition:width .06s linear}.tile-level{width:64px;margin-top:6px}.field-group{border-top:1px solid var(--bg-3);margin-top:16px;padding-top:14px;display:flex;flex-direction:column;gap:12px}.field-title{font-size:13px;font-weight:700;color:var(--text-bright);letter-spacing:.02em}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:13px;color:var(--text-dim)}.field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background:var(--bg-3);outline:none}.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #fff}.field input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #fff}.field select,.field input[type=text],.login-input{background:var(--bg-0);border:1px solid var(--bg-3);color:var(--text);border-radius:8px;padding:9px 10px;font-size:14px}.field select:focus,.field input:focus{border-color:var(--accent)}.hint{font-size:12px;color:var(--text-dim)}.checkbox-row{flex-direction:row;align-items:flex-start;gap:10px}.checkbox-row input{margin-top:2px}.checkbox-row span{font-size:13px;color:var(--text)}.checkbox-row input:disabled{opacity:.4}.mic-test{display:flex;flex-direction:column;gap:8px;background:var(--bg-1);border:1px solid var(--bg-3);border-radius:8px;padding:12px}.btn-test{align-self:flex-start;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}.btn-test:hover{background:var(--accent-hover)}.btn-test.on{background:var(--red)}