:root{--bg-primary: #313338;--bg-secondary: #2b2d31;--bg-tertiary: #1e1f22;--bg-secondary-alt: #232428;--bg-floating: #111214;--interactive-normal: #b5bac1;--interactive-hover: #dbdee1;--interactive-active: #ffffff;--interactive-muted: #4e5058;--background-modifier-hover: rgba(78, 80, 88, .3);--background-modifier-active: rgba(78, 80, 88, .48);--background-modifier-selected: rgba(78, 80, 88, .6);--text-normal: #dbdee1;--text-muted: #b5bac1;--text-link: #00a8fc;--brand-color: #5865F2;--brand-color-hover: #4752C4;--danger: #da373c;--scrollbar-thin-thumb: #1a1b1e;--scrollbar-thin-track: transparent;--scrollbar-auto-thumb: #1a1b1e;--scrollbar-auto-track: #2b2d31;--scrollbar-auto-scrollbar-color-thumb: #1a1b1e;--scrollbar-auto-scrollbar-color-track: #2b2d31;--elevation-low: 0 1px 0 rgba(4,4,5,.2),0 1.5px 0 rgba(6,6,7,.05),0 2px 0 rgba(4,4,5,.05);--elevation-high: 0 8px 16px rgba(0,0,0,.24);--channel-icon: #80848e}*{box-sizing:border-box;margin:0;padding:0}body{font-family:gg sans,Noto Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-normal);height:100vh;overflow:hidden}#root,.view{height:100%;width:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-auto-track);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--scrollbar-auto-thumb);border-radius:4px}#login-view{display:flex;justify-content:center;align-items:center;background-color:var(--brand-color);background-image:url("data:image/svg+xml,%3Csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='%235865F2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E")}.login-box{background-color:var(--bg-primary);padding:32px;border-radius:5px;width:480px;box-shadow:var(--elevation-high);text-align:center}.login-box h2{color:#fff;margin-bottom:8px;font-size:24px;font-weight:600}.login-subtitle{color:var(--text-muted);margin-bottom:20px;font-size:16px}.input-group{margin-bottom:20px;text-align:left}.input-group label{display:block;margin-bottom:8px;color:var(--text-muted);font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.2px}.input-group input{width:100%;padding:10px;border-radius:3px;border:none;background-color:var(--bg-tertiary);color:var(--text-normal);font-size:16px;transition:border-color .2s ease-in-out}.input-group input:focus{outline:none}#login-btn{width:100%;padding:12px;background-color:var(--brand-color);color:#fff;border:none;border-radius:3px;font-size:16px;cursor:pointer;font-weight:600;transition:background-color .17s ease,color .17s ease}#login-btn:hover{background-color:var(--brand-color-hover)}.error{color:var(--danger);margin-top:10px;font-size:14px}#chat-view{display:flex;height:100vh}.server-sidebar{width:72px;background-color:var(--bg-tertiary);display:flex;flex-direction:column;align-items:center;padding-top:12px;flex-shrink:0;z-index:10}.server-icon{width:48px;height:48px;background-color:var(--bg-primary);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--text-normal);cursor:pointer;margin-bottom:8px;transition:border-radius .2s ease,background-color .2s ease,color .2s ease;position:relative}.server-icon:hover,.server-icon.active{border-radius:16px;background-color:var(--brand-color);color:#fff}.server-separator{width:32px;height:2px;background-color:var(--bg-secondary-alt);border-radius:1px;margin-bottom:8px}.channel-sidebar{width:240px;background-color:var(--bg-secondary);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{height:48px;padding:0 16px;display:flex;align-items:center;box-shadow:var(--elevation-low);font-weight:600;color:#fff;cursor:pointer;transition:background-color .2s ease}.sidebar-header:hover{background-color:var(--background-modifier-hover)}.sidebar-content{flex:1;overflow-y:auto;padding-top:8px}.sidebar-content::-webkit-scrollbar{width:4px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thin-thumb)}.sidebar-section{padding:16px 8px 8px}.sidebar-section h4{font-size:12px;text-transform:uppercase;color:var(--interactive-normal);margin-bottom:4px;padding-left:8px;font-weight:600;letter-spacing:.02em}.channel-list,.user-list{list-style:none}.channel-item{display:flex;align-items:center;padding:6px 8px;margin:2px 0;border-radius:4px;cursor:pointer;color:var(--interactive-normal);font-weight:500}.channel-item svg{margin-right:6px;color:var(--channel-icon);width:20px;height:20px}.channel-item:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.channel-item.active{background-color:var(--background-modifier-selected);color:var(--interactive-active)}.channel-item.active svg{color:var(--interactive-active)}.user-controls{height:52px;background-color:var(--bg-secondary-alt);display:flex;align-items:center;padding:0 8px;flex-shrink:0}.user-profile{display:flex;align-items:center;padding:4px;border-radius:4px;cursor:pointer;flex:1;min-width:0}.user-profile:hover{background-color:var(--background-modifier-hover)}.avatar{width:32px;height:32px;border-radius:50%;background-color:var(--brand-color);display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;flex-shrink:0;margin-right:8px}.avatar.small{width:32px;height:32px;font-size:14px}.avatar.medium{width:40px;height:40px;font-size:16px}.user-info{flex:1;overflow:hidden}.user-info .username{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.2}.user-info .status{font-size:12px;color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.action-buttons{display:flex}.icon-btn{width:32px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:4px;cursor:pointer;color:var(--interactive-normal);background:transparent;border:none}.icon-btn:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.icon-btn.danger:hover{color:var(--danger)}.main-chat{flex:1;display:flex;flex-direction:column;background-color:var(--bg-primary);min-width:0}.chat-header{height:48px;padding:0 16px;display:flex;align-items:center;box-shadow:var(--elevation-low);color:#fff;z-index:2;flex-shrink:0}.chat-header h3{display:flex;align-items:center;font-size:16px;font-weight:600}.chat-header svg{margin-right:8px;color:var(--channel-icon)}.chat-content-wrapper{display:flex;flex:1;overflow:hidden}.chat-messages-area{flex:1;display:flex;flex-direction:column;min-width:0}.message-list{flex:1;padding:16px 0 24px;overflow-y:auto;display:flex;flex-direction:column}.message{display:flex;padding:2px 16px 2px 72px;margin-top:17px;position:relative}.message:hover{background-color:#04040512}.message .avatar{position:absolute;left:16px;top:0}.message-content{flex:1;min-width:0}.message-header{display:flex;align-items:baseline;margin-bottom:2px;line-height:1.375rem}.message-sender{font-weight:500;font-size:1rem;color:#fff;margin-right:.25rem;cursor:pointer}.message-sender:hover{text-decoration:underline}.message-timestamp{font-size:.75rem;color:var(--text-muted);margin-left:.25rem}.message-text{color:var(--text-normal);line-height:1.375rem;font-size:1rem;white-space:pre-wrap;word-wrap:break-word}.chat-input-area{padding:0 16px 24px;flex-shrink:0}#chat-form{display:flex;align-items:center;background-color:#383a40;border-radius:8px;padding:0 16px;min-height:44px}.input-add-btn{background:transparent;border:none;color:var(--interactive-normal);cursor:pointer;margin-right:16px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:var(--text-muted);color:var(--bg-primary)}.input-add-btn:hover{color:var(--bg-primary)}#message-input{flex:1;background:transparent;border:none;color:var(--text-normal);font-size:1rem;line-height:1.375rem;padding:11px 0}#message-input:focus{outline:none}#message-input::placeholder{color:var(--text-muted)}.input-emoji-btn:hover{color:var(--interactive-hover)!important}.input-send-btn{background:transparent;border:none;color:var(--interactive-normal);cursor:pointer;margin-left:8px;display:flex;align-items:center;justify-content:center}.input-send-btn:hover{color:var(--interactive-hover)}.member-sidebar{width:240px;background-color:var(--bg-secondary);flex-shrink:0;display:flex;flex-direction:column}.member-list-header{padding:24px 16px 0;text-transform:uppercase;font-size:12px;font-weight:600;color:var(--interactive-normal);letter-spacing:.02em}.member-list-content{flex:1;overflow-y:auto;padding:8px}.member-item{display:flex;align-items:center;padding:6px 8px;border-radius:4px;cursor:pointer;margin-bottom:2px}.member-item:hover{background-color:var(--background-modifier-hover)}.member-item .avatar{width:32px;height:32px;margin-right:12px}.member-item .member-name{color:var(--interactive-normal);font-weight:500;font-size:16px}.member-item:hover .member-name{color:var(--interactive-hover)}