*{box-sizing:border-box;margin:0;padding:0}:root{--rail:#202225;--sidebar:#2f3136;--main:#36393f;--hover:#34373c;--active:#42464d;--text:#dcddde;--text-muted:#96989d;--interactive:#b9bbbe;--header:#fff;--green:#3ba55d;--blurple:#5865f2;--blurple-hover:#4752c4;--red:#ed4245;--divider:#26282c}html,body,#root{height:100%}body{background:var(--main);color:var(--text);-webkit-font-smoothing:antialiased;font-family:gg sans,Helvetica Neue,Helvetica,Arial,sans-serif;overflow:hidden}input,button{border:none;outline:none;font-family:inherit}button{cursor:pointer}.avatar{color:#fff;border-radius:50%;flex-shrink:0;place-items:center;font-weight:700;display:grid}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#202225;border-radius:4px}::-webkit-scrollbar-track{background:0 0}.app{width:100vw;height:100vh;display:flex}.gate{background:linear-gradient(135deg,#5865f2 0%,#404eed 100%);justify-content:center;align-items:center;height:100vh;display:flex}.gate-card{background:var(--main);text-align:center;border-radius:12px;flex-direction:column;align-items:center;width:420px;max-width:90vw;padding:40px;display:flex;box-shadow:0 8px 30px #0006}.gate-logo{background:var(--blurple);color:#fff;border-radius:50%;place-items:center;width:64px;height:64px;margin-bottom:16px;font-size:22px;font-weight:800;display:grid}.gate-card h1{color:var(--header);margin-bottom:8px;font-size:24px}.gate-card p{color:var(--text-muted);margin-bottom:24px}.gate-card input{width:100%;color:var(--text);background:#202225;border-radius:6px;margin-bottom:16px;padding:12px 14px;font-size:15px}.gate-card button{background:var(--blurple);color:#fff;border-radius:6px;width:100%;padding:12px;font-size:15px;font-weight:600;transition:background .15s}.gate-card button:hover:not(:disabled){background:var(--blurple-hover)}.gate-card button:disabled{opacity:.5;cursor:not-allowed}.gate-error{color:#f2a5a6;text-align:left;background:#ed42451f;border:1px solid #ed424566;border-radius:6px;width:100%;margin-bottom:14px;padding:10px 12px;font-size:13px}.gate-info{color:#7fca9b;text-align:left;background:#3ba55d1f;border:1px solid #3ba55d66;border-radius:6px;width:100%;margin-bottom:14px;padding:10px 12px;font-size:13px}.gate-switch{margin-top:12px;color:var(--text-muted)!important;background:0 0!important;padding:6px!important;font-size:13px!important;font-weight:500!important}.gate-switch:hover{text-decoration:underline;color:var(--header)!important}.server-rail{background:var(--rail);flex-direction:column;flex-shrink:0;align-items:center;gap:8px;width:72px;padding-top:12px;display:flex}.server-icon{background:var(--sidebar);width:48px;height:48px;color:var(--text);border-radius:50%;place-items:center;font-size:16px;font-weight:700;transition:border-radius .15s,background .15s;display:grid}.server-icon:hover,.server-icon.active{background:var(--blurple);color:#fff;border-radius:16px}.server-icon.add{color:var(--green);font-size:24px}.server-icon.add:hover{background:var(--green);color:#fff}.rail-divider{background:var(--divider);border-radius:1px;width:32px;height:2px}.sidebar{background:var(--sidebar);flex-direction:column;flex-shrink:0;width:240px;display:flex}.sidebar-header{height:48px;color:var(--header);align-items:center;padding:0 16px;font-size:15px;font-weight:600;display:flex;box-shadow:0 1px #0003}.channel-list{flex:1;padding:12px 8px;overflow-y:auto}.channel-category{color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;justify-content:space-between;align-items:center;padding:16px 8px 4px;font-size:12px;font-weight:700;display:flex}.cat-add{color:var(--text-muted);background:0 0;font-size:18px;line-height:1}.cat-add:hover{color:var(--header)}.channel-empty{color:var(--text-muted);padding:4px 8px;font-size:13px;font-style:italic}.channel{color:var(--text-muted);cursor:pointer;border-radius:4px;align-items:center;gap:6px;margin-bottom:1px;padding:7px 8px;display:flex}.channel:hover{background:var(--hover);color:var(--interactive)}.channel.active{background:var(--active);color:#fff}.channel-hash{opacity:.7;font-size:15px}.channel-name{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:15px;font-weight:500;overflow:hidden}.voice-count{background:#0000004d;border-radius:8px;padding:1px 6px;font-size:12px}.channel-delete{color:var(--text-muted);opacity:0;background:0 0;padding:2px;font-size:12px}.channel:hover .channel-delete{opacity:1}.channel-delete:hover{color:var(--red)}.voice-channel-group{margin-bottom:1px}.voice-member{color:var(--text-muted);align-items:center;gap:8px;padding:4px 8px 4px 26px;display:flex}.voice-member-name{font-size:14px}.user-bar{background:#292b2f;align-items:center;gap:8px;height:56px;padding:0 8px;display:flex}.user-info{flex:1;min-width:0}.user-name{color:var(--header);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.user-status{color:var(--text-muted);font-size:12px}.icon-btn{width:32px;height:32px;color:var(--interactive);background:0 0;border-radius:4px;place-items:center;font-size:15px;display:grid}.icon-btn:hover{background:#ffffff0f}.icon-btn.danger:hover{background:#ed424526}.main{background:var(--main);flex-direction:column;flex:1;min-width:0;display:flex}.empty-state{color:var(--text-muted);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.empty-state h2{color:var(--header);margin-bottom:8px}.channel-topbar{flex-shrink:0;align-items:center;gap:8px;height:48px;padding:0 16px;display:flex;box-shadow:0 1px #0003}.topbar-hash{color:var(--text-muted);font-size:20px}.topbar-name{color:var(--header);font-size:16px;font-weight:700}.chat{flex-direction:column;flex:1;min-height:0;display:flex}.messages{flex-direction:column;flex:1;padding:16px 16px 8px;display:flex;overflow-y:auto}.messages-welcome{margin-top:auto;padding:16px 0}.welcome-hash{background:var(--active);color:#fff;border-radius:50%;place-items:center;width:68px;height:68px;margin-bottom:8px;font-size:34px;display:grid}.messages-welcome h2{color:var(--header);margin-bottom:4px;font-size:28px}.messages-welcome p{color:var(--text-muted)}.message{gap:14px;padding:6px 0;display:flex}.message:hover{background:#0000000f;border-radius:4px}.msg-head{align-items:baseline;gap:8px;display:flex}.msg-author{color:var(--header);font-size:15px;font-weight:600}.msg-time{color:var(--text-muted);font-size:11px}.msg-content{color:var(--text);word-break:break-word;font-size:15px;line-height:1.4}.composer{gap:8px;padding:0 16px 24px;display:flex}.composer input{color:var(--text);background:#40444b;border-radius:8px;flex:1;padding:12px 16px;font-size:15px}.composer button{background:var(--blurple);color:#fff;border-radius:8px;padding:0 22px;font-weight:600}.composer button:hover:not(:disabled){background:var(--blurple-hover)}.composer button:disabled{opacity:.5;cursor:not-allowed}.voice-view{flex-direction:column;flex:1;min-height:0;display:flex}.voice-stage{background:#202225;border-radius:8px;flex-direction:column;flex:1;justify-content:center;align-items:center;margin:12px;padding:24px;display:flex;overflow-y:auto}.voice-empty{text-align:center;color:var(--text-muted)}.voice-empty-icon{margin-bottom:12px;font-size:48px}.voice-empty h2{color:var(--header);margin-bottom:6px}.voice-grid{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.voice-tile{background:#292b2f;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:180px;height:140px;display:flex}.voice-tile-name{color:var(--text);font-size:15px;font-weight:500}.voice-controls{justify-content:center;gap:12px;padding:12px 12px 24px;display:flex}.vc-btn{color:#fff;background:#4f545c;border-radius:24px;padding:12px 24px;font-size:15px;font-weight:600;transition:background .15s}.vc-btn:hover{background:#5d6269}.vc-btn.join{background:var(--green)}.vc-btn.join:hover{background:#2d8049}.vc-btn.leave,.vc-btn.danger{background:var(--red)}.vc-btn.leave:hover,.vc-btn.danger:hover{background:#c93b3e}.modal-overlay{z-index:100;background:#0009;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--main);border-radius:10px;width:440px;max-width:90vw;padding:24px}.modal h2{color:var(--header);margin-bottom:18px}.modal-label{color:var(--text-muted);text-transform:uppercase;margin:14px 0 8px;font-size:12px;font-weight:700;display:block}.type-options{flex-direction:column;gap:8px;display:flex}.type-option{color:var(--text);text-align:left;background:#2b2d31;border:2px solid #0000;border-radius:8px;align-items:center;gap:14px;padding:12px 14px;display:flex}.type-option:hover{background:#34373c}.type-option.selected{border-color:var(--blurple);background:#34373c}.type-icon{text-align:center;width:28px;font-size:22px}.type-title{color:var(--header);font-weight:600}.type-desc{color:var(--text-muted);font-size:13px}.modal input{width:100%;color:var(--text);background:#1e1f22;border-radius:6px;padding:11px 14px;font-size:15px}.modal-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.btn-ghost{color:var(--text);background:0 0;padding:10px 16px;font-weight:600}.btn-ghost:hover{text-decoration:underline}.btn-primary{background:var(--blurple);color:#fff;border-radius:6px;padding:10px 20px;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--blurple-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}