:root{color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#313338;color:#dbdee1;font-size:14px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#1e1f22;border-radius:4px}::-webkit-scrollbar-track{background:transparent}.app{display:flex;flex-direction:column;height:100vh}.topbar{height:48px;flex:0 0 48px;background:#1e1f22;display:flex;align-items:center;gap:8px;padding:0 12px}.topbar .navbtn{background:transparent;border:0;color:#949ba4;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px}.topbar .navbtn:hover{background:#2b2d31;color:#dbdee1}.topbar input{background:#2b2d31;border:0;border-radius:6px;color:#dbdee1;padding:7px 10px;width:320px;max-width:40vw}.body{flex:1;display:flex;min-height:0}.rail{width:72px;flex:0 0 72px;background:#1e1f22;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:8px;overflow-y:auto}.railbtn{width:48px;height:48px;border-radius:50%;background:#313338;color:#dbdee1;border:0;font-weight:700;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-radius .15s,background .15s}.railbtn:hover,.railbtn.active{border-radius:16px;background:#5865f2;color:#fff}.railsep{width:32px;height:2px;background:#35373c;border-radius:1px}.railspacer{flex:1}.sidebar{width:240px;flex:0 0 240px;background:#2b2d31;padding:12px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.serverhead{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;color:#fff;padding:4px 8px 12px}.invitebtn{background:#5865f2;color:#fff;border:0;border-radius:8px;padding:9px;font-weight:600;cursor:pointer;margin:0 4px 8px}.invitebtn:hover{background:#4752c4}.sidegroup{font-size:11px;font-weight:700;text-transform:uppercase;color:#949ba4;padding:12px 8px 4px}.chan{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:transparent;border:0;border-radius:6px;color:#949ba4;padding:7px 8px;font-size:14px;cursor:pointer}.chan:hover{background:#35373c;color:#dbdee1}.chan.active{background:#404249;color:#fff}.main{flex:1;min-width:0;background:#313338;display:flex;flex-direction:column;padding:0}.chanhead{min-height:48px;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid #26272b;font-weight:700;color:#fff;font-size:15px}.chatbody{flex:1;overflow-y:auto;padding:8px 16px}.chatinput{flex:0 0 auto;padding:0 16px 16px}.msg{padding:6px 0;border-radius:4px}.msg:hover{background:#2e3035}.msg .mauthor{font-weight:600;color:#fff}.msg .mtime{font-size:11px;color:#949ba4;margin-left:6px}.members{width:240px;flex:0 0 240px;background:#2b2d31;padding:12px 8px;overflow-y:auto}.member{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px}.member:hover{background:#35373c}.member.off{opacity:.55}.avatar{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;position:relative}.dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:3px solid #2b2d31}.card{background:#2b2d31;border-radius:12px;padding:16px}input,select{background:#1e1f22;border:0;border-radius:8px;color:#dbdee1;padding:8px 10px;font-size:14px}button{background:#5865f2;border:0;color:#fff;border-radius:8px;padding:8px 12px;font-size:14px;cursor:pointer}button:hover{background:#4752c4}button.ghost{background:#4e5058}button.ghost:hover{background:#5d5f67}.row{display:flex;gap:8px;align-items:center}.muted{color:#949ba4;font-size:12px}.peer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.peer{background:#2b2d31;border:2px solid transparent;border-radius:12px;padding:10px}.peer.speaking{border-color:#23a55a}.voice{display:grid;gap:12px}.voicestatus{display:flex;align-items:center;gap:8px;color:#949ba4;font-size:13px}.vdot{width:10px;height:10px;border-radius:50%;background:#80848e}.vdot.on{background:#23a55a;box-shadow:0 0 8px #23a55a}.vdot.conn{background:#f0b232;animation:blink 1s infinite}.vdot.off{background:#ed4245}@keyframes blink{50%{opacity:.4}}.vgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.vtile{background:#2b2d31;border:2px solid transparent;border-radius:12px;padding:16px 10px;text-align:center;cursor:default}.vtile:hover{background:#35373c}.vtile.speaking{border-color:#23a55a;box-shadow:0 0 12px #23a55a59}.vavatar{width:72px;height:72px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;position:relative}.vtile.speaking .vavatar{outline:3px solid #23a55a;outline-offset:3px}.vmic{position:absolute;right:-2px;bottom:-2px;background:#1e1f22;border-radius:50%;width:24px;height:24px;font-size:13px;display:flex;align-items:center;justify-content:center}.vname{font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vcontrols{display:flex;gap:8px;justify-content:center;background:#1e1f22;border-radius:12px;padding:10px;position:sticky;bottom:0}.vbtn{width:48px;height:48px;border-radius:12px;font-size:20px;background:#4e5058;display:flex;align-items:center;justify-content:center}.vbtn:hover{background:#5d5f67}.vbtn.danger{background:#ed4245}.vbtn.danger:hover{background:#c03537}.vbtn.active{background:#23a55a}@media (max-width: 1100px){.members{display:none}}@media (max-width: 760px){.sidebar{width:200px;flex-basis:200px}.rail{width:56px;flex-basis:56px}.railbtn{width:40px;height:40px}}