:root{--bg-servers:#1e1f22;--bg-channels:#2b2d31;--bg-chat:#313338;--bg-members:#2b2d31;--bg-userbar:#232428;--bg-input:#383a40;--bg-hover:#ffffff0f;--bg-active:#ffffff1a;--bg-card:#1e1f22;--bg-modal:#313338;--bg-modal-footer:#2b2d31;--accent-blurple:#5865f2;--accent-blurple-hover:#4752c4;--accent-green:#23a55a;--accent-red:#f23f43;--accent-yellow:#f0b232;--text-header:#f2f3f5;--text-normal:#dbdee1;--text-muted:#949ba4;--text-link:#00a8fc;--border-subtle:#ffffff14;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-round:50%;--font-family:"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--transition-fast:.15s ease;--transition-normal:.2s cubic-bezier(.2, 0, 0, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-servers);color:var(--text-normal);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;line-height:1.4;overflow:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#0000004d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00000080}.app-container{background-color:var(--bg-chat);width:100vw;height:100vh;display:flex;overflow:hidden}.server-rail{background-color:var(--bg-servers);z-index:20;flex-direction:column;flex-shrink:0;align-items:center;gap:8px;width:72px;padding:12px 0;display:flex;overflow:hidden auto}.server-item-wrapper{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.server-pill{width:4px;height:0;transition:height var(--transition-fast);background-color:#fff;border-radius:0 4px 4px 0;position:absolute;left:0}.server-item-wrapper:hover .server-pill{height:20px}.server-item-wrapper.active .server-pill{height:40px}.server-btn{background-color:var(--bg-channels);width:48px;height:48px;color:var(--text-normal);cursor:pointer;transition:all var(--transition-normal);border:none;border-radius:24px;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex;position:relative;overflow:hidden}.server-btn:hover,.server-item-wrapper.active .server-btn{background-color:var(--accent-blurple);color:#fff;border-radius:16px}.server-divider{background-color:#ffffff14;border-radius:1px;width:32px;height:2px;margin:4px 0}.server-btn-add{color:var(--accent-green);background-color:var(--bg-channels)}.server-btn-add:hover{background-color:var(--accent-green);color:#fff}.channels-sidebar{background-color:var(--bg-channels);border-top-left-radius:var(--radius-md);flex-direction:column;flex-shrink:0;width:240px;display:flex;position:relative;overflow:hidden}.server-header{cursor:pointer;height:48px;transition:background-color var(--transition-fast);color:var(--text-header);border-bottom:1px solid #0003;justify-content:space-between;align-items:center;padding:0 16px;font-size:15px;font-weight:700;display:flex;box-shadow:0 1px 2px #0003}.server-header:hover{background-color:var(--bg-hover)}.channels-scrollable{flex-direction:column;flex:1;gap:16px;padding:12px 8px;display:flex;overflow-y:auto}.channel-category{flex-direction:column;gap:2px;display:flex}.category-header{color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;justify-content:space-between;align-items:center;padding:4px 8px;font-size:12px;font-weight:700;display:flex}.category-add-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:2px;display:flex}.category-add-btn:hover{color:var(--text-header)}.channel-item{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast);justify-content:space-between;align-items:center;padding:6px 8px;font-size:14px;font-weight:500;display:flex}.channel-item:hover{background-color:var(--bg-hover);color:var(--text-normal)}.channel-item.active{background-color:var(--bg-active);color:var(--text-header)}.channel-item-left{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;display:flex;overflow:hidden}.channel-item-left span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.channel-actions{opacity:0;transition:opacity var(--transition-fast);align-items:center;gap:4px;display:flex}.channel-item:hover .channel-actions{opacity:1}.channel-action-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:2px;display:flex}.channel-action-btn:hover{color:var(--accent-red)}.voice-participants-sublist{flex-direction:column;gap:2px;margin-top:2px;padding-left:28px;display:flex}.voice-participant-row{border-radius:var(--radius-sm);color:var(--text-muted);justify-content:space-between;align-items:center;padding:3px 6px;font-size:13px;display:flex}.voice-participant-row:hover{background-color:var(--bg-hover);color:var(--text-normal)}.voice-participant-name-wrapper{align-items:center;gap:6px;display:flex}.avatar-mini{border-radius:var(--radius-round);color:#fff;width:20px;height:20px;transition:box-shadow var(--transition-fast);justify-content:center;align-items:center;font-size:10px;font-weight:700;display:flex}.avatar-mini.speaking{box-shadow:0 0 0 2px var(--accent-green)}.voice-status-icons{align-items:center;gap:4px;display:flex}.screen-badge{background-color:var(--accent-red);color:#fff;text-transform:uppercase;border-radius:3px;padding:1px 4px;font-size:9px;font-weight:700}.voice-connected-bar{background-color:#23a55a1a;border-top:1px solid #23a55a33;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.voice-connected-info{flex-direction:column;gap:1px;display:flex}.voice-connected-status{color:var(--accent-green);align-items:center;gap:6px;font-size:12px;font-weight:700;display:flex}.voice-connected-channel{color:var(--text-muted);cursor:pointer;font-size:11px}.voice-connected-channel:hover{color:var(--text-normal);text-decoration:underline}.voice-disconnect-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex}.voice-disconnect-btn:hover{color:var(--accent-red);background-color:#f23f4333}.user-bar{background-color:var(--bg-userbar);flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 8px;display:flex}.user-profile-btn{border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background-color var(--transition-fast);background:0 0;border:none;flex:1;align-items:center;gap:8px;padding:4px 6px;display:flex;overflow:hidden}.user-profile-btn:hover{background-color:var(--bg-hover)}.avatar-wrapper{flex-shrink:0;position:relative}.user-avatar{border-radius:var(--radius-round);color:#fff;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:700;display:flex}.user-avatar.speaking{box-shadow:0 0 0 2px var(--accent-green)}.status-dot{border-radius:var(--radius-round);border:2px solid var(--bg-userbar);background-color:var(--accent-green);width:10px;height:10px;position:absolute;bottom:-2px;right:-2px}.user-meta{flex-direction:column;display:flex;overflow:hidden}.user-name{color:var(--text-header);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.user-tag{color:var(--text-muted);font-size:11px}.user-controls{align-items:center;gap:2px;display:flex}.control-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.control-btn:hover{background-color:var(--bg-hover);color:var(--text-header)}.control-btn.active-danger{color:var(--accent-red)}.control-btn.active-green{color:var(--accent-green)}.main-center-area{background-color:var(--bg-chat);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.chat-header{z-index:10;border-bottom:1px solid #0003;flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex;box-shadow:0 1px 2px #0003}.chat-header-left{color:var(--text-header);align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.chat-header-topic{color:var(--text-muted);border-left:1px solid #ffffff1a;margin-left:4px;padding-left:12px;font-size:13px;font-weight:400}.chat-header-actions{align-items:center;gap:12px;display:flex}.header-action-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex}.header-action-btn:hover{color:var(--text-header);background-color:var(--bg-hover)}.header-action-btn.active{color:var(--accent-blurple);background-color:var(--bg-hover)}.messages-container{flex-direction:column;flex:1;gap:16px;padding:16px 16px 0;display:flex;overflow-y:auto}.welcome-channel-card{flex-direction:column;gap:8px;padding:24px 0 16px;display:flex}.welcome-icon-box{border-radius:var(--radius-round);background-color:var(--bg-input);width:68px;height:68px;color:var(--text-header);justify-content:center;align-items:center;display:flex}.welcome-title{color:var(--text-header);font-size:28px;font-weight:700}.welcome-subtitle{color:var(--text-muted);font-size:14px}.message-item{border-radius:var(--radius-sm);transition:background-color var(--transition-fast);-webkit-user-select:text;user-select:text;gap:14px;padding:2px 8px;display:flex}.message-item:hover{background-color:var(--bg-hover)}.message-avatar{border-radius:var(--radius-round);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:700;display:flex}.message-content-wrapper{flex-direction:column;flex:1;gap:4px;display:flex}.message-header{align-items:baseline;gap:8px;display:flex}.message-author{color:var(--text-header);font-size:14px;font-weight:600}.message-time{color:var(--text-muted);font-size:11px}.message-text{color:var(--text-normal);word-break:break-word;font-size:14px;line-height:1.5}.message-text pre{background-color:var(--bg-servers);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);margin:6px 0;padding:10px;font-family:monospace;font-size:13px;overflow-x:auto}.message-text code{background-color:var(--bg-servers);border-radius:3px;padding:2px 4px;font-family:monospace;font-size:13px}.chat-input-wrapper{flex-shrink:0;padding:0 16px 20px}.chat-input-box{background-color:var(--bg-input);border-radius:var(--radius-md);align-items:center;gap:8px;padding:0 12px;display:flex}.chat-input{color:var(--text-normal);background:0 0;border:none;outline:none;flex:1;padding:12px 0;font-family:inherit;font-size:14px}.chat-input::placeholder{color:var(--text-muted)}.chat-input-action-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex}.chat-input-action-btn:hover{color:var(--text-header)}.chat-input-action-btn.send{color:var(--accent-blurple)}.voice-stage-container{background-color:#111214;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.voice-stage-grid{flex:1;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-content:center;align-items:center;gap:16px;padding:20px;display:grid;overflow-y:auto}.voice-stage-grid.has-featured{flex-direction:column;gap:16px;display:flex}.featured-stream-box{border-radius:var(--radius-lg);background-color:#000;border:1px solid #ffffff1a;flex:1;justify-content:center;align-items:center;width:100%;max-height:calc(100vh - 220px);display:flex;position:relative;overflow:hidden}.featured-video{object-fit:contain;will-change:transform;width:100%;height:100%;image-rendering:-webkit-optimize-contrast;transform:translateZ(0)}.thumbnails-strip{gap:12px;height:120px;padding-bottom:4px;display:flex;overflow-x:auto}.voice-card{background-color:var(--bg-channels);border-radius:var(--radius-md);height:200px;transition:all var(--transition-fast);border:2px solid #0000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.voice-card.is-speaking{border-color:var(--accent-green);box-shadow:0 0 12px #23a55a66}.voice-card.has-video{background-color:#000;height:100%;min-height:240px}.voice-card-video{object-fit:contain;will-change:transform;width:100%;height:100%;position:absolute;top:0;left:0;transform:translateZ(0)}.voice-card-avatar{border-radius:var(--radius-round);color:#fff;width:72px;height:72px;transition:transform var(--transition-fast);justify-content:center;align-items:center;font-size:28px;font-weight:700;display:flex}.voice-card.is-speaking .voice-card-avatar{box-shadow:0 0 0 4px var(--accent-green);transform:scale(1.06)}.voice-card-footer{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:var(--radius-sm);color:#fff;z-index:5;background-color:#0009;justify-content:space-between;align-items:center;padding:4px 8px;font-size:12px;font-weight:600;display:flex;position:absolute;bottom:8px;left:8px;right:8px}.voice-card-controls{align-items:center;gap:4px;display:flex}.voice-stage-controls{background-color:var(--bg-servers);border-top:1px solid #ffffff0d;flex-shrink:0;justify-content:center;align-items:center;gap:16px;height:72px;padding:0 24px;display:flex}.stage-btn{border-radius:var(--radius-round);background-color:var(--bg-input);width:48px;height:48px;color:var(--text-header);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;display:flex}.stage-btn:hover{background-color:var(--bg-hover);transform:scale(1.05)}.stage-btn.active{color:#000;background-color:#fff}.stage-btn.danger{background-color:var(--accent-red);color:#fff}.stage-btn.danger:hover{background-color:#d83a3e}.stage-btn.success{background-color:var(--accent-green);color:#fff}.members-sidebar{background-color:var(--bg-members);border-left:1px solid #0003;flex-direction:column;flex-shrink:0;gap:16px;width:240px;padding:16px 12px;display:flex;overflow-y:auto}.members-group{flex-direction:column;gap:4px;display:flex}.members-group-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;padding:0 6px;font-size:12px;font-weight:700}.member-card{border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast);align-items:center;gap:10px;padding:6px;display:flex}.member-card:hover{background-color:var(--bg-hover)}.member-info{flex-direction:column;display:flex}.member-name{color:var(--text-normal);font-size:14px;font-weight:600}.member-card:hover .member-name{color:var(--text-header)}.member-status{color:var(--text-muted);font-size:11px}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.15s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.modal-box{background-color:var(--bg-modal);border-radius:var(--radius-md);flex-direction:column;width:440px;max-width:90vw;display:flex;overflow:hidden;box-shadow:0 8px 24px #0006}.modal-header{text-align:center;padding:20px 24px 12px;position:relative}.modal-title{color:var(--text-header);font-size:22px;font-weight:700}.modal-subtitle{color:var(--text-muted);margin-top:4px;font-size:13px}.modal-close-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);background:0 0;border:none;padding:4px;position:absolute;top:16px;right:16px}.modal-close-btn:hover{color:var(--text-header)}.modal-body{flex-direction:column;gap:16px;padding:12px 24px 20px;display:flex}.modal-form-group{flex-direction:column;gap:6px;display:flex}.modal-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;font-size:12px;font-weight:700}.modal-input{background-color:var(--bg-servers);border-radius:var(--radius-sm);color:var(--text-normal);border:1px solid #0000004d;outline:none;padding:10px 12px;font-family:inherit;font-size:14px}.modal-input:focus{border-color:var(--accent-blurple)}.color-picker-row{gap:8px;display:flex}.color-option{border-radius:var(--radius-round);cursor:pointer;width:28px;height:28px;transition:transform var(--transition-fast);border:2px solid #0000}.color-option.selected{border-color:#fff;transform:scale(1.15)}.modal-footer{background-color:var(--bg-modal-footer);justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.btn-secondary{color:var(--text-header);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:8px 16px;font-size:14px;font-weight:500}.btn-secondary:hover{text-decoration:underline}.btn-primary{background-color:var(--accent-blurple);color:#fff;border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast);border:none;padding:8px 20px;font-size:14px;font-weight:600}.btn-primary:hover{background-color:var(--accent-blurple-hover)}.channel-type-selector{flex-direction:column;gap:8px;display:flex}.channel-type-option{background-color:var(--bg-servers);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:1px solid #0000;align-items:center;gap:12px;padding:10px 12px;display:flex}.channel-type-option:hover{background-color:var(--bg-input)}.channel-type-option.selected{border-color:var(--accent-blurple);background-color:#5865f21a}.channel-type-text{flex-direction:column;display:flex}.channel-type-title{color:var(--text-header);font-size:14px;font-weight:600}.channel-type-desc{color:var(--text-muted);font-size:12px}.login-page-container{background:radial-gradient(circle,#2b2d31 0%,#1e1f22 100%);justify-content:center;align-items:center;width:100vw;height:100vh;padding:16px;display:flex}.login-card{background-color:var(--bg-modal);border-radius:var(--radius-md);border:1px solid var(--border-subtle);flex-direction:column;gap:20px;width:480px;max-width:95vw;padding:32px;animation:.2s ease-out fadeIn;display:flex;box-shadow:0 12px 32px #00000080}.login-card-header{text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.login-logo-badge{border-radius:var(--radius-round);background-color:var(--bg-servers);justify-content:center;align-items:center;width:52px;height:52px;display:flex;box-shadow:0 4px 12px #5865f233}.login-title{color:var(--text-header);font-size:24px;font-weight:700}.login-subtitle{color:var(--text-muted);font-size:14px}.login-error-banner{border:1px solid var(--accent-red);color:#ff8b8d;border-radius:var(--radius-sm);background-color:#f23f4326;align-items:center;gap:10px;padding:10px 14px;font-size:13px;display:flex}.login-form{flex-direction:column;gap:16px;display:flex}.login-input-wrapper{align-items:center;display:flex;position:relative}.login-input-icon{color:var(--text-muted);pointer-events:none;position:absolute;left:12px}.login-input{width:100%;padding-left:38px!important}.login-submit-btn{width:100%;margin-top:8px;padding:12px!important;font-size:15px!important}.login-demo-box{background-color:var(--bg-servers);border-radius:var(--radius-sm);border:1px dashed #ffffff1a;flex-direction:column;gap:8px;padding:12px;display:flex}.login-demo-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:11px;font-weight:700}.login-demo-buttons{flex-wrap:wrap;gap:6px;display:flex}.demo-user-chip{background-color:var(--bg-channels);color:var(--text-normal);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:1px solid #ffffff14;padding:4px 8px;font-size:11px}.demo-user-chip:hover{background-color:var(--accent-blurple);color:#fff;border-color:var(--accent-blurple)}.stream-audio-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-full);z-index:10;transition:opacity var(--transition-fast);background-color:#111214d9;border:1px solid #ffffff1f;align-items:center;gap:8px;padding:6px 12px;display:flex;position:absolute;bottom:48px;right:16px;box-shadow:0 4px 12px #0006}.stream-audio-btn{color:var(--text-normal);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:2px;display:flex}.stream-audio-btn:hover{background-color:#ffffff1a}.stream-volume-range{-webkit-appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:90px;height:4px}.stream-volume-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-blurple);cursor:pointer;width:12px;height:12px;transition:transform var(--transition-fast);border-radius:50%}.stream-volume-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.stream-volume-text{color:var(--text-muted);text-align:right;min-width:32px;font-size:11px;font-weight:600}.user-volume-badge-container{z-index:15;position:absolute;top:8px;right:8px}.user-volume-btn{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background-color:#0009;border:1px solid #ffffff1a;border-radius:4px;align-items:center;gap:4px;padding:3px 6px;font-size:10px;font-weight:600;display:flex}.user-volume-btn:hover,.user-volume-btn.active{background-color:var(--accent-blurple);color:#fff;border-color:var(--accent-blurple)}.user-volume-popover{border-radius:var(--radius-sm);z-index:30;background-color:#111214;border:1px solid #ffffff26;flex-direction:column;gap:8px;width:160px;padding:10px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 24px #0009}.user-volume-popover-header{color:var(--text-header);justify-content:space-between;align-items:center;font-size:11px;font-weight:700;display:flex}.user-vol-pct{color:var(--accent-blurple)}.user-volume-range{-webkit-appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:100%;height:4px}.user-volume-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-blurple);cursor:pointer;border-radius:50%;width:12px;height:12px}.user-volume-popover-footer{justify-content:flex-end;display:flex}.user-volume-reset-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:2px;padding:2px 4px;font-size:10px}.user-volume-reset-btn:hover{color:var(--text-header);text-decoration:underline}