@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-0: #1a1b1e;--bg-1: #212226;--bg-2: #2b2d31;--bg-3: #313338;--bg-4: #383a40;--bg-5: #404249;--accent: #5865f2;--accent-hover: #4752c4;--green: #23a55a;--red: #f23f42;--yellow: #fee75c;--text: #dbdee1;--text-muted: #80848e;--text-faint: #4e5058;--border: #1e1f22;--font: "DM Sans", sans-serif;--radius: 8px}body{font-family:var(--font);background:var(--bg-0);color:var(--text);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}#root{height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:3px}.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:20px}.splash-logo{font-size:56px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.splash-spinner{width:32px;height:32px;border:3px solid var(--bg-4);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-wrap{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-0);background-image:radial-gradient(ellipse at 60% 40%,#5865f218 0%,transparent 60%)}.auth-card{background:var(--bg-2);border-radius:16px;padding:40px 44px;width:100%;max-width:440px;box-shadow:0 24px 64px #00000060;display:flex;flex-direction:column;gap:16px;animation:slideUp .25s ease}.auth-logo{font-size:42px;text-align:center}.auth-title{font-size:24px;font-weight:700;text-align:center;color:#fff}.auth-sub{font-size:14px;color:var(--text-muted);text-align:center;margin-top:-8px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted)}.field input,.field select{background:var(--bg-1);border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 14px;color:var(--text);font-family:var(--font);font-size:15px;outline:none;transition:border .15s;width:100%}.field input:focus,.field select:focus{border-color:var(--accent)}.auth-error{background:#f23f4218;border:1px solid #f23f4240;color:#f77;border-radius:var(--radius);padding:10px 14px;font-size:13px}.settings-success{background:#23a55a18;border:1px solid #23a55a40;color:#57f287;border-radius:var(--radius);padding:10px 14px;font-size:13px}.btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:11px 18px;font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--bg-4);color:var(--text);border:none;border-radius:var(--radius);padding:9px 16px;font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}.btn-secondary:hover{background:var(--bg-5)}.btn-danger{background:var(--red);color:#fff;border:none;border-radius:var(--radius);padding:9px 16px;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}.btn-danger:hover{background:#c0392b}.danger-sm{background:#f23f4218;color:var(--red);font-size:12px;padding:5px 10px;border-radius:6px;border:none;cursor:pointer}.danger-sm:hover{background:var(--red);color:#fff}.btn-sm{background:var(--bg-4);border:none;color:var(--text);cursor:pointer;padding:5px 10px;border-radius:6px;font-family:var(--font);font-size:12px;font-weight:600;transition:background .15s;white-space:nowrap}.btn-sm:hover{background:var(--accent);color:#fff}.btn-sm.accept{background:#23a55a20;color:var(--green)}.btn-sm.accept:hover{background:var(--green);color:#fff}.btn-sm.decline{background:#f23f4220;color:var(--red)}.btn-sm.decline:hover{background:var(--red);color:#fff}.icon-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;padding:2px 5px;border-radius:4px;transition:color .15s,background .15s;line-height:1}.icon-btn:hover{color:var(--text);background:var(--bg-4)}.auth-switch{font-size:13px;color:var(--text-muted);text-align:center}.auth-switch span{color:var(--accent);cursor:pointer;font-weight:600}.server-rail{width:72px;flex-shrink:0;background:var(--bg-0);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;overflow-y:auto;overflow-x:hidden}.server-rail::-webkit-scrollbar{display:none}.server-icon{width:48px;height:48px;border-radius:24px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;cursor:pointer;transition:border-radius .2s,background .15s,transform .1s;position:relative;color:var(--text);-webkit-user-select:none;user-select:none;flex-shrink:0;overflow:hidden}.server-icon:hover,.server-icon.active{border-radius:16px;background:var(--accent);color:#fff}.server-icon img{width:100%;height:100%;object-fit:cover}.server-indicator{position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:4px;height:60%;background:#fff;border-radius:0 3px 3px 0}.server-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg-0)}.add-icon{color:var(--green);font-size:24px}.add-icon:hover{background:var(--green)!important;color:#fff!important}.join-icon{font-size:18px}.friends-icon{font-size:22px}.server-divider{width:32px;height:2px;background:var(--bg-4);border-radius:1px;flex-shrink:0}.channel-list{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.channel-list::-webkit-scrollbar{width:4px}.channel-list-header{padding:12px 14px;font-size:14px;font-weight:700;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;background:var(--bg-2);z-index:1;gap:6px}.invite-banner{margin:6px 8px 0;padding:6px 10px;background:var(--bg-3);border-radius:var(--radius);font-size:11px;color:var(--text-muted);cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:4px}.invite-banner:hover{background:var(--bg-4)}.invite-tip{margin:3px 8px 0;padding:6px 10px;background:#5865f215;border:1px solid #5865f230;border-radius:var(--radius);font-size:11px;color:var(--text-muted)}.channel-section-label,.member-group-label{padding:12px 14px 4px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);flex-shrink:0}.channel-item{display:flex;align-items:center;gap:8px;margin:1px 6px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--text-muted);transition:background .1s,color .1s;position:relative}.channel-item:hover{background:var(--bg-4);color:var(--text)}.channel-item:hover .channel-actions{opacity:1}.channel-item.active{background:var(--bg-4);color:#fff}.channel-hash{font-size:17px;opacity:.5;flex-shrink:0}.channel-rename-input{flex:1;background:var(--bg-1);border:1.5px solid var(--accent);border-radius:4px;padding:2px 6px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;min-width:0}.channel-actions{display:flex;gap:2px;margin-left:auto;opacity:0;transition:opacity .15s}.channel-action-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:12px;padding:2px 4px;border-radius:4px;transition:color .15s,background .15s;line-height:1}.channel-action-btn:hover{background:var(--bg-5);color:var(--text)}.channel-action-btn.danger:hover{background:#f23f4220;color:var(--red)}.channel-add-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:5px 8px;border-radius:6px;text-align:left;font-family:var(--font);font-weight:600;transition:background .15s,color .15s}.channel-add-btn:hover{background:var(--bg-4);color:var(--text)}.channel-create{display:flex;gap:6px;padding:6px 8px}.channel-create input{flex:1;background:var(--bg-1);border:1.5px solid var(--accent);border-radius:6px;padding:6px 10px;color:var(--text);font-family:var(--font);font-size:13px;outline:none}.channel-create button{background:var(--green);color:#fff;border:none;border-radius:6px;padding:6px 12px;cursor:pointer;font-size:15px;font-weight:700}.category-header{display:flex;align-items:center;gap:6px;padding:10px 8px 2px 10px;cursor:pointer}.category-header:hover .channel-actions{opacity:1}.category-arrow{font-size:9px;color:var(--text-muted)}.category-name{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);flex:1}.user-bar{display:flex;align-items:center;gap:8px;background:var(--bg-1);padding:8px 10px;border-top:1px solid var(--border);flex-shrink:0;position:relative}.user-bar-info{flex:1;min-width:0;cursor:pointer}.user-bar-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-bar-tag{font-size:11px}.user-bar-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;padding:5px;border-radius:6px;transition:color .15s,background .15s;line-height:1}.user-bar-btn:hover{background:var(--bg-4);color:var(--text)}.status-menu{position:absolute;bottom:56px;left:0;right:0;background:var(--bg-1);border:1px solid var(--border);border-radius:10px;padding:6px;z-index:50;box-shadow:0 -8px 24px #00000060;animation:slideUp .15s ease}.status-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:background .1s}.status-menu-item:hover{background:var(--bg-4)}.status-option{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;cursor:pointer;transition:background .1s;font-size:14px;font-weight:500}.status-option:hover,.status-option.active{background:var(--bg-4)}.chat-area{display:flex;flex-direction:column;height:100%;position:relative;background:var(--bg-3)}.chat-header{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--bg-3);border-bottom:1px solid var(--border);flex-shrink:0;box-shadow:0 1px 4px #00000030;z-index:1}.chat-header-actions{margin-left:auto;display:flex;gap:6px;align-items:center;flex-shrink:0}.chat-header-icon{font-size:20px;opacity:.7}.chat-header-name{font-size:16px;font-weight:700}.chat-header-server{font-size:13px;color:var(--text-muted)}.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:12px;background:var(--bg-3)}.chat-empty-icon{font-size:56px}.chat-empty h2{font-size:20px;color:var(--text)}.chat-empty p{font-size:14px}.voice-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--text-muted);text-align:center;padding:40px}.voice-placeholder h2{font-size:24px;color:var(--text)}.voice-placeholder p{font-size:14px;line-height:1.6}.messages-wrap{flex:1;overflow-y:auto;padding:12px 0 8px;display:flex;flex-direction:column}.messages-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--text-muted);gap:8px;text-align:center;padding:40px}.message-date-divider{display:flex;align-items:center;gap:10px;padding:12px 20px;flex-shrink:0}.message-date-line{flex:1;height:1px;background:var(--border)}.message-date-label{font-size:11px;color:var(--text-muted);font-weight:600;white-space:nowrap}.message{display:flex;gap:14px;padding:2px 20px;flex-shrink:0;transition:background .1s}.message:not(.continuation){margin-top:12px}.message:hover{background:#ffffff06}.message-spacer{width:40px;flex-shrink:0}.message-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;padding-top:1px}.message-meta{display:flex;align-items:baseline;gap:8px}.message-author{font-size:15px;font-weight:600;cursor:pointer}.message-author:hover{text-decoration:underline}.message-time{font-size:11px;color:var(--text-faint)}.message-text{font-size:15px;color:var(--text);line-height:1.5;word-break:break-word}.typing-indicator{display:flex;align-items:center;gap:8px;padding:4px 20px 8px;flex-shrink:0;min-height:28px}.typing-dots{display:flex;gap:3px;align-items:center}.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:typingBounce 1.2s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}@keyframes typingBounce{0%,80%,to{transform:translateY(0);opacity:.6}40%{transform:translateY(-5px);opacity:1}}@keyframes symusic-eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.typing-text{font-size:12px;color:var(--text-muted);font-style:italic}.chat-input-wrap{display:flex;align-items:center;gap:10px;padding:0 16px 16px;background:var(--bg-3);flex-shrink:0;position:relative}.chat-input{flex:1;background:var(--bg-4);border:none;border-radius:10px;padding:12px 18px;color:var(--text);font-family:var(--font);font-size:15px;outline:none;transition:background .15s}.chat-input::placeholder{color:var(--text-faint)}.chat-input:focus{background:var(--bg-1)}.send-btn{width:40px;height:40px;border-radius:10px;background:var(--accent);border:none;color:#fff;font-size:18px;cursor:pointer;transition:background .15s,transform .1s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.send-btn:hover{background:var(--accent-hover);transform:scale(1.05)}.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.mention-popup{position:absolute;bottom:72px;left:16px;right:16px;background:var(--bg-1);border:1px solid var(--border);border-radius:10px;overflow:hidden;z-index:50;box-shadow:0 -8px 24px #00000050;max-height:280px;overflow-y:auto}.mention-popup-label{padding:8px 12px 4px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted)}.mention-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .1s}.mention-item:hover,.mention-item.active{background:var(--bg-4)}.mention-item-name{font-size:14px;font-weight:600}.mention-item-sub{font-size:11px;color:var(--text-muted)}.mention-highlight{display:inline;padding:0 3px;border-radius:3px;font-weight:600;cursor:pointer}.mention-user{background:#5865f230;color:#8ea1e1}.mention-user:hover{background:#5865f250}.mention-me{background:#fee75c30;color:#fee75c}.mention-me:hover{background:#fee75c50}.mention-everyone{background:#f23f4220;color:#f77;font-weight:700}.member-sidebar{background:var(--bg-2);border-left:1px solid var(--border);overflow-y:auto;padding-bottom:16px;display:flex;flex-direction:column;flex-shrink:0;transition:width .25s ease,transform .25s ease}.member-sidebar-header{padding:14px 14px 8px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;position:sticky;top:0;background:var(--bg-2);z-index:1;border-bottom:1px solid var(--border)}.member-group{margin-bottom:8px}.member-item{display:flex;align-items:center;gap:10px;padding:5px 10px;cursor:pointer;border-radius:6px;margin:1px 6px;transition:background .1s}.member-item:hover,.member-item.active{background:var(--bg-4)}.member-item-info{display:flex;flex-direction:column;gap:1px;min-width:0}.member-item-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-toggle-btn{position:fixed;bottom:70px;right:8px;z-index:10;background:var(--bg-4);border:none;border-radius:20px;padding:6px 10px;color:var(--text-muted);cursor:pointer;font-size:13px;transition:background .15s;box-shadow:0 2px 8px #00000040}.member-toggle-btn:hover{background:var(--accent);color:#fff}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0008;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease}.modal{background:var(--bg-2);border-radius:16px;padding:28px 32px;width:100%;max-width:400px;box-shadow:0 24px 64px #00000080;display:flex;flex-direction:column;gap:16px;animation:slideUp .2s ease}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:18px;font-weight:700}.modal-header button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;padding:4px}.modal-header button:hover{color:var(--text)}.profile-popup{background:var(--bg-1);border-radius:12px;overflow:hidden;box-shadow:0 16px 48px #000000a0;border:1px solid var(--border);animation:slideUp .15s ease}.profile-popup-banner{height:80px;width:100%}.profile-popup-avatar-wrap{display:inline-block;margin:-36px 0 0 16px}.profile-popup-avatar-wrap>div{border:5px solid var(--bg-1)}.profile-popup-body{padding:10px 16px 16px}.profile-popup-name{font-size:18px;font-weight:700;margin-bottom:4px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}.profile-popup-tag{font-size:13px;color:var(--text-muted);font-weight:400}.profile-popup-bio{font-size:13px;color:var(--text-muted);margin-bottom:8px;line-height:1.5;white-space:pre-wrap}.profile-popup-divider{height:1px;background:var(--border);margin:10px 0}.profile-popup-section-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}.profile-popup-joined{font-size:13px;color:var(--text)}.settings-modal{display:flex;width:90vw;max-width:780px;height:82vh;max-height:620px;background:var(--bg-2);border-radius:16px;overflow:hidden;box-shadow:0 24px 80px #00000090;animation:slideUp .2s ease}.settings-modal.wide{max-width:880px}.settings-sidebar{width:210px;background:var(--bg-1);padding:16px 8px;display:flex;flex-direction:column;gap:2px;flex-shrink:0;overflow-y:auto}.settings-sidebar-section{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);padding:8px 10px 4px}.settings-tab{padding:8px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--text-muted);transition:background .15s,color .15s;font-weight:500}.settings-tab:hover{background:var(--bg-4);color:var(--text)}.settings-tab.active{background:var(--bg-4);color:#fff}.settings-tab.danger{color:var(--red)}.settings-tab.danger:hover{background:#f23f4218}.settings-sidebar-divider{height:1px;background:var(--border);margin:8px 0}.settings-content{flex:1;padding:28px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}.settings-title{font-size:20px;font-weight:700}.profile-preview{background:var(--bg-3);border-radius:12px;overflow:hidden;border:1px solid var(--border)}.profile-preview-banner{height:64px;width:100%}.profile-preview-avatar{margin:-28px 0 0 14px;display:inline-block}.profile-preview-avatar>div{border:4px solid var(--bg-3);border-radius:50%}.profile-preview-info{padding:6px 16px 14px;display:flex;flex-direction:column;gap:2px}.roles-layout{display:grid;grid-template-columns:200px 1fr;height:100%;min-height:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}.roles-list-col{background:var(--bg-3);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.roles-list-header{padding:12px 12px 6px;flex-shrink:0}.role-list-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .1s}.role-list-item:hover,.role-list-item.active{background:var(--bg-4)}.role-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.role-create-form{padding:10px;border-top:1px solid var(--border);margin-top:auto;flex-shrink:0}.roles-editor-col{padding:20px 24px;overflow-y:auto}.perm-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:16px}.perm-row:last-of-type{border-bottom:none}.perm-info{flex:1}.perm-label{font-size:14px;font-weight:600}.perm-desc{font-size:12px;color:var(--text-muted);margin-top:2px}.perm-toggle{width:44px;height:24px;border-radius:12px;position:relative;flex-shrink:0;transition:background .2s}.perm-toggle.on{background:var(--green)}.perm-toggle.off{background:var(--bg-5)}.perm-toggle-thumb{position:absolute;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px #00000040}.perm-toggle.on .perm-toggle-thumb{left:23px}.perm-toggle.off .perm-toggle-thumb{left:3px}.role-member-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}.role-member-row:last-child{border-bottom:none}.member-manage-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;margin-bottom:4px;background:var(--bg-3)}.role-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;display:inline-flex;align-items:center;gap:2px;letter-spacing:.3px}.role-assign-select{background:var(--bg-4);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font);font-size:11px;padding:2px 6px;cursor:pointer;outline:none}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.theme-card{border:2px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .1s}.theme-card:hover{border-color:var(--accent);transform:translateY(-2px)}.theme-card.active{border-color:var(--accent)}.theme-preview{height:64px;display:flex;overflow:hidden}.friend-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;transition:background .1s}.friend-item:hover{background:var(--bg-4)}.friend-info{flex:1;min-width:0}.friend-name{font-size:14px;font-weight:600}.friend-email{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-msg{font-size:13px;padding:8px 12px;background:var(--bg-3);border-radius:8px}.admin-panel{background:var(--bg-2);border-radius:16px;width:90vw;max-width:860px;height:85vh;max-height:640px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px #000000a0;animation:slideUp .2s ease}.admin-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}.admin-layout{display:grid;grid-template-columns:280px 1fr;flex:1;overflow:hidden}.admin-user-list{border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:10px}.admin-search{background:var(--bg-1);border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;width:100%}.admin-search:focus{border-color:var(--accent)}.admin-count{font-size:11px;color:var(--text-muted);padding:0 4px 6px}.admin-user-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .1s}.admin-user-item:hover,.admin-user-item.active{background:var(--bg-4)}.admin-user-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}.admin-user-avatar.large{width:56px;height:56px;font-size:22px}.admin-user-detail{overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}.admin-user-detail-header{display:flex;align-items:center;gap:16px}.admin-section{background:var(--bg-3);border-radius:10px;padding:14px 16px}.admin-section-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}.admin-section.danger-zone{border:1px solid #f23f4240}@media (max-width: 768px){body{overflow:hidden}.server-rail{width:56px}.server-icon{width:42px;height:42px;font-size:16px}.member-sidebar{position:fixed!important;top:0;right:0;bottom:0;z-index:50;width:260px!important;transform:translate(100%);box-shadow:-4px 0 20px #00000060}.member-sidebar.mobile-open{transform:translate(0)}.member-toggle-btn{display:flex!important;z-index:51;bottom:80px;right:12px}.settings-modal,.settings-modal.wide{width:100vw;height:100vh;max-width:100%;max-height:100%;border-radius:0}.settings-sidebar{width:56px;padding:8px 4px}.settings-tab{padding:10px 6px;font-size:12px;text-align:center}.settings-content{padding:16px}.chat-input{padding:14px 16px;font-size:16px}.send-btn{width:44px;height:44px}.mention-popup{left:8px;right:8px}.admin-panel{width:100vw;height:100vh;max-width:100%;max-height:100%;border-radius:0}.admin-layout{grid-template-columns:1fr}.profile-popup{width:calc(100vw - 32px);left:16px!important}.roles-layout{grid-template-columns:1fr}.roles-list-col{border-right:none;border-bottom:1px solid var(--border);max-height:200px}.channel-list-header{font-size:13px;padding:10px 12px}}@media (max-width: 480px){.auth-card{padding:28px 20px}.message{padding:2px 12px}.chat-input-wrap{padding:0 10px 14px}}.drag-handle{font-size:14px;color:var(--text-faint);cursor:grab;padding:0 2px;flex-shrink:0;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none}.channel-item:hover .drag-handle{opacity:1}.channel-item.dragging{opacity:.4;background:var(--bg-5)}.channel-item.drag-over{border-top:2px solid var(--accent);margin-top:-1px}.drop-zone-top{height:6px;border-radius:3px;transition:background .15s;margin:2px 8px}.drop-zone-top:hover,.drop-zone-top[data-over=true]{background:var(--accent);opacity:.5}.left-panel{transition:width .2s ease}.left-panel-closed{overflow:hidden!important}@media (max-width: 768px){.left-panel-open{position:fixed!important;left:56px;top:0;bottom:0;z-index:90;width:260px!important;box-shadow:4px 0 20px #00000060}.left-panel-closed{width:0!important;position:fixed!important;left:56px;top:0;bottom:0;z-index:90}.server-rail{width:56px}.server-icon{width:40px;height:40px;font-size:16px}.user-bar-info{display:none}}.mobile-sidebar-overlay{display:none}@media (max-width: 768px){.mobile-sidebar-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000060;z-index:89;animation:fadeIn .15s ease}}.message.hovered{background:#ffffff08}.message-actions{position:absolute;top:-16px;right:12px;display:flex;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:3px 4px;box-shadow:0 2px 8px #00000040;z-index:10;animation:fadeIn .1s ease}.msg-action-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;padding:4px 7px;border-radius:5px;transition:background .1s,color .1s;line-height:1}.msg-action-btn:hover{background:var(--bg-4);color:var(--text)}.msg-action-btn.danger:hover{background:#f23f4220;color:var(--red)}.delete-confirm{display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 10px;background:#f23f4215;border:1px solid #f23f4240;border-radius:8px;font-size:13px;color:var(--text-muted);animation:slideUp .15s ease}.reply-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-4);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:13px;flex-shrink:0;animation:slideUp .15s ease}.reply-bar-label{color:var(--text-muted);flex-shrink:0}.reply-bar-name{color:var(--accent);font-weight:600;flex-shrink:0}.reply-bar-preview{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.reply-bar-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;flex-shrink:0;transition:color .1s,background .1s}.reply-bar-close:hover{background:var(--bg-5);color:var(--text)}.reply-preview-inline{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:4px 8px;background:var(--bg-4);border-radius:6px;font-size:12px;cursor:default;border-left:3px solid var(--accent);max-width:100%;overflow:hidden}.reply-preview-line{display:none}.reply-preview-author{color:var(--accent);font-weight:600;flex-shrink:0;white-space:nowrap}.reply-preview-text{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.friend-row{gap:10px;padding:6px 10px;align-items:center}.message-image-wrap{margin-top:6px;max-width:360px}.message-image{max-width:100%;max-height:300px;border-radius:8px;cursor:zoom-in;object-fit:contain;display:block;border:1px solid var(--border);transition:opacity .15s}.message-image:hover{opacity:.9}.image-preview-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--bg-4);border-top:1px solid var(--border);flex-shrink:0;animation:slideUp .15s ease}.image-preview-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--border);flex-shrink:0}.attach-btn{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:0 6px;border-radius:6px;transition:color .15s,background .15s;flex-shrink:0;line-height:1}.attach-btn:hover{background:var(--bg-4);color:var(--text)}.server-icon-leave{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--red);color:#fff;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;cursor:pointer;font-weight:700;z-index:5}.server-icon:hover .server-icon-leave{opacity:1}@media (display-mode: standalone){body{padding-top:env(safe-area-inset-top)}}.server-icon{background:transparent!important}.server-icon.add-icon{background:var(--bg-2)!important}.server-icon.add-icon:hover{background:var(--green)!important}.server-rail{background:var(--bg-0)}.server-unread-dot{position:absolute;bottom:-3px;right:-3px;min-width:18px;height:18px;background:var(--red);color:#fff;border-radius:9px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg-0);box-sizing:border-box;pointer-events:none}.edit-input-wrap{display:flex;flex-direction:column;gap:4px;margin-top:4px}.edit-input{background:var(--bg-1);border:1.5px solid var(--accent);border-radius:8px;padding:8px 12px;color:var(--text);font-family:var(--font);font-size:15px;outline:none;width:100%}.edit-actions{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}html{touch-action:manipulation;-webkit-text-size-adjust:100%}input,textarea,select,.chat-input,.field input{font-size:16px!important}.icon-btn[title="Leave Server"]{color:var(--red);opacity:.7}.icon-btn[title="Leave Server"]:hover{opacity:1;background:#f23f4220;color:var(--red)}.server-icon.friends-icon{background:transparent!important;overflow:visible!important}.server-icon.friends-icon:hover,.server-icon.friends-icon.active{background:var(--accent)!important;overflow:hidden!important}.server-icon{background:var(--bg-2)!important}.server-icon:hover,.server-icon.active{background:var(--accent)!important}.server-icon.add-icon{background:var(--bg-2)!important;color:var(--green)!important}.server-icon.add-icon:hover{background:var(--green)!important;color:#fff!important}.server-icon.join-icon{background:var(--bg-2)!important}.server-icon.join-icon:hover{background:var(--accent)!important}.profile-popup-avatar-wrap>div{border:none!important}.profile-popup-avatar-wrap>div>div:first-child{box-shadow:0 0 0 5px var(--bg-1)}.server-badge,.server-unread-dot{z-index:20!important;pointer-events:none}.server-icon{z-index:1}.server-leave-btn{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--bg-5);color:var(--text-muted);border:none;font-size:13px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s;z-index:5;padding:0}.server-icon:hover~.server-leave-btn,.server-leave-btn:hover{opacity:1;background:var(--red);color:#fff}div:hover>.server-leave-btn{opacity:1}.server-leave-confirm{position:absolute;left:76px;top:50%;transform:translateY(-50%);background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:6px 8px;z-index:20;box-shadow:0 4px 16px #00000060;white-space:nowrap;animation:slideUp .15s ease}.leave-confirm-btn{border:none;border-radius:5px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font)}.leave-confirm-btn.yes{background:var(--red);color:#fff}.leave-confirm-btn.yes:hover{background:#c0392b}.leave-confirm-btn.no{background:var(--bg-4);color:var(--text)}.leave-confirm-btn.no:hover{background:var(--bg-5)}.image-previews-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-4);border-top:1px solid var(--border);overflow-x:auto;flex-shrink:0;flex-wrap:nowrap}.chat-input-wrap{box-sizing:border-box;width:100%;padding:0 10px 14px;flex-shrink:0}.chat-input{min-width:0;flex:1 1 0}.send-btn,.attach-btn{flex-shrink:0}@media (max-width: 480px){.chat-input-wrap{padding:0 8px 12px}.attach-btn{display:none}}.attach-btn{display:flex!important}.send-btn{transition:opacity .15s,transform .15s}.send-btn:disabled{opacity:0!important;pointer-events:none;transform:scale(.7)}.send-btn:not(:disabled){opacity:1;transform:scale(1)}@media (max-width: 480px){.chat-input-wrap{padding:0 8px 12px;gap:6px}}.update-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 20px;font-size:14px;font-weight:600;box-shadow:0 2px 12px #00000040}.server-icon>img{border-radius:50%;overflow:hidden}.server-leave-btn{position:absolute;bottom:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;border:2px solid var(--bg-0);font-size:14px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:10;padding:0;-webkit-user-select:none;user-select:none}.server-icon:hover .server-leave-btn{opacity:1}.server-leave-btn:hover{opacity:1!important;background:#c0392b}.server-leave-confirm{position:absolute;left:58px;top:50%;transform:translateY(-50%);background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;z-index:100;box-shadow:0 4px 16px #00000060;white-space:nowrap;animation:slideUp .15s ease;pointer-events:all}@keyframes toastIn{0%{opacity:0;transform:translate(110%)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(110%)}}.toast-container{position:fixed;bottom:24px;right:20px;z-index:9000;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:320px;width:calc(100vw - 40px)}.toast{background:var(--bg-1);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 24px #00000070;pointer-events:all;cursor:pointer;animation:toastIn .25s ease forwards;transition:opacity .2s,transform .2s}.toast.hiding{animation:toastOut .2s ease forwards}.toast-avatar{flex-shrink:0}.toast-body{flex:1;min-width:0}.toast-title{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toast-msg{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.toast-close{flex-shrink:0;background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;padding:0 2px;line-height:1}.toast-close:hover{color:var(--text)}.chat-input-wrap{display:flex;align-items:center;gap:8px;padding:0 12px 16px;flex-shrink:0;box-sizing:border-box;width:100%}.send-btn{transition:opacity .2s,transform .2s,width .2s,margin .2s,padding .2s;flex-shrink:0}.send-btn:disabled{opacity:0;pointer-events:none;width:0!important;padding:0!important;margin:0!important;overflow:hidden}.send-btn:not(:disabled){opacity:1;width:40px}.chat-input{flex:1;min-width:0;transition:flex .2s}@media (max-width: 640px){.toast-container{bottom:auto!important;top:12px;right:10px;left:10px;width:auto;max-width:none}@keyframes toastIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}}.server-badge,.server-unread-dot{z-index:30!important;position:absolute!important}.server-badge{top:-4px!important;right:-4px!important;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-0);box-sizing:border-box;pointer-events:none}.server-icon{overflow:visible!important}.server-icon img{border-radius:50%}.friends-icon{overflow:visible!important}.message-image-wrap{position:relative;display:inline-block}.message-image{display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}.img-overlay-btn{background:#000b;color:#fff;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;text-decoration:none;opacity:0;transition:opacity .15s;pointer-events:all}.message-image-wrap:hover .img-overlay-btn{opacity:1}@media (hover: none){.img-overlay-btn{opacity:1}}.role-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}.member-sidebar{transition:width .25s ease,min-width .25s ease!important;overflow:hidden}@media (max-width: 768px){.member-resize-handle{display:none!important}.member-sidebar{width:260px!important;min-width:0!important;transition:transform .25s ease!important;transform:translate(100%)}.member-sidebar.mobile-open{transform:translate(0)!important}}.member-sidebar-backdrop{display:none}@media (max-width: 768px){.member-sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:49;background:#00000060;animation:fadeIn .2s ease}}.mobile-bottom-nav{display:none}@media (max-width: 640px){.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--bg-1);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:80;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 12px;border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:10px;font-family:var(--font);position:relative;flex:1;border-radius:8px;transition:color .15s}.mobile-nav-btn.active{color:var(--accent)}.mobile-nav-btn .nav-icon{font-size:20px;line-height:1}.mobile-nav-badge{position:absolute;top:2px;right:16px;min-width:16px;height:16px;background:var(--red);color:#fff;border-radius:8px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg-1)}.server-rail{display:none!important}.left-panel-open{left:0!important;width:100vw!important;top:0!important;bottom:56px!important}.left-panel-closed{left:0!important;width:0!important}.chat-area{padding-bottom:0}.chat-input-wrap{position:sticky;bottom:0;left:0;right:0;background:var(--bg-1);border-top:1px solid var(--border);padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom));z-index:10;box-sizing:border-box}.new-layout .chat-input-wrap{bottom:56px;padding-bottom:8px}.messages-wrap{padding-bottom:80px!important}.new-layout .messages-wrap{padding-bottom:130px!important}.message{min-height:36px}.msg-action-btn{width:36px;height:36px;font-size:16px}.toast-container{top:8px!important;bottom:auto!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important}.member-toggle-btn{bottom:68px!important;right:12px!important}.voice-pill-mobile{bottom:68px!important}.profile-popup{width:calc(100vw - 24px)!important;left:12px!important;right:12px!important;top:auto!important;bottom:68px!important;max-height:70vh;overflow-y:auto}.image-previews-bar{flex-wrap:nowrap;overflow-x:auto}.mobile-server-btn{position:relative}}.message-text.emoji-only{font-size:48px;line-height:1.2}.message-text.custom-emoji-solo img{width:48px!important;height:48px!important;margin:0!important}.message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.reaction-pill{display:inline-flex;align-items:center;gap:4px;background:var(--bg-4);border:1px solid var(--border);border-radius:12px;padding:2px 8px;font-size:14px;cursor:pointer;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.reaction-pill:hover{background:var(--bg-1);border-color:var(--accent)}.reaction-pill.mine{background:var(--accent)22;border-color:var(--accent)66}.reaction-pill .reaction-count{font-size:11px;font-weight:700;color:var(--text-muted)}.reaction-pill.mine .reaction-count{color:var(--accent)}.reaction-add-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;background:var(--bg-4);border:1px dashed var(--border);border-radius:12px;cursor:pointer;font-size:14px;color:var(--text-muted);transition:border-color .12s,color .12s}.reaction-add-btn:hover{border-color:var(--accent);color:var(--accent)}.emoji-autocomplete{position:absolute;bottom:100%;left:16px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:220px;max-height:200px;overflow-y:auto;z-index:60;box-shadow:0 4px 20px #00000060;margin-bottom:4px}.emoji-autocomplete-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;cursor:pointer;font-size:13px}.emoji-autocomplete-item:hover,.emoji-autocomplete-item.active{background:var(--bg-4)}.emoji-autocomplete-item img{width:22px;height:22px;object-fit:contain}.emoji-autocomplete-item .emoji-ac-name{color:var(--text-muted);font-size:12px}.search-panel{position:absolute;top:52px;right:0;width:340px;background:var(--bg-2);border:1px solid var(--border);border-radius:0 0 0 12px;box-shadow:-4px 4px 24px #00000050;z-index:100;display:flex;flex-direction:column;max-height:calc(100vh - 120px)}.search-panel-header{display:flex;align-items:center;gap:8px;padding:12px 14px 10px;border-bottom:1px solid var(--border)}.search-panel-input{flex:1;background:var(--bg-4);border:none;border-radius:8px;padding:8px 12px;color:var(--text);font-family:var(--font);font-size:14px;outline:none}.search-results{flex:1;overflow-y:auto;padding:8px}.search-result-item{padding:8px 10px;border-radius:8px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}.search-result-item:hover{background:var(--bg-4)}.search-result-item:last-child{border-bottom:none}.search-result-author{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:2px}.search-result-text{font-size:13px;color:var(--text)}.search-result-time{font-size:11px;color:var(--text-muted);margin-top:2px}mark.search-hl{background:var(--accent)44;color:var(--accent);border-radius:2px}.pins-panel{position:absolute;top:52px;right:0;width:320px;background:var(--bg-2);border:1px solid var(--border);border-radius:0 0 0 12px;box-shadow:-4px 4px 24px #00000050;z-index:100;display:flex;flex-direction:column;max-height:calc(100vh - 120px)}.pins-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px}.pin-item{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}.pin-item:hover{background:var(--bg-4)}.pin-item:last-child{border-bottom:none}.pin-author{font-size:12px;font-weight:700;color:var(--accent)}.pin-text{font-size:13px;margin-top:2px;color:var(--text)}.pin-time{font-size:11px;color:var(--text-muted);margin-top:2px}.pin-unpin-btn{float:right;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:2px 6px;border-radius:4px;transition:color .12s}.pin-unpin-btn:hover{color:var(--red)}.thread-panel{width:320px;flex-shrink:0;background:var(--bg-2);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.thread-panel-header{display:flex;align-items:center;gap:8px;padding:14px 14px 12px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px}.thread-parent-msg{padding:10px 14px;background:var(--bg-4);border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted)}.panel-toggle-btn{background:var(--bg-4);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);padding:5px 10px;cursor:pointer;font-size:16px;line-height:1;transition:color .12s}.panel-toggle-btn:hover{color:var(--text)}.app-root{display:flex;flex-direction:column;height:100vh;overflow:hidden}.top-bar{display:flex;align-items:center;height:48px;flex-shrink:0;background:var(--bg-1);border-bottom:1px solid var(--border);z-index:50;-webkit-user-select:none;user-select:none;position:relative}.top-bar-logo{width:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.top-bar-divider-v{width:1px;height:28px;background:var(--border);flex-shrink:0}.top-bar-nav{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px}.top-bar-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;border:none;background:none;color:var(--text-muted);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:600;border-radius:8px;position:relative;transition:background .12s,color .12s;white-space:nowrap}.top-bar-btn:hover{background:var(--bg-4);color:var(--text)}.top-bar-btn.active{background:var(--bg-4);color:var(--accent)}.top-bar-btn.small{padding:5px 8px;font-size:12px}.top-bar-btn.icon-only{padding:7px 10px;gap:0}.top-bar-btn.icon-only .top-bar-label{display:none}.top-bar-navbtn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:10px;position:relative;transition:background .12s,color .12s;flex-shrink:0}.top-bar-right-actions{margin-left:auto;display:flex;align-items:center;gap:4px;padding-right:10px;flex-shrink:0}[dir=rtl] .top-bar-right-actions{margin-left:0;margin-right:auto;padding-right:0;padding-left:10px}.top-bar-navbtn.active{background:var(--bg-4);color:var(--accent)}.topbar-strip::-webkit-scrollbar{display:none}.top-bar-label{font-size:13px;font-weight:600}.top-bar-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;background:var(--red);color:#fff;border-radius:8px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg-1)}.main-content{display:flex;flex:1;min-height:0;overflow:hidden}.new-layout .server-rail{display:none!important}.h-scroll-strip{display:flex;align-items:center;gap:10px;padding:8px 12px;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--border);flex-shrink:0;scrollbar-width:none}.h-scroll-strip::-webkit-scrollbar{display:none}.friend-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:10px;cursor:pointer;flex-shrink:0;transition:background .12s;position:relative;min-width:60px}.friend-card:hover{background:var(--bg-4)}.friend-card.active{background:var(--accent)20}.friend-card-name{font-size:11px;color:var(--text-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px;text-align:center}.friend-card.active .friend-card-name{color:var(--accent)}.server-strip-card{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;cursor:pointer;flex-shrink:0;transition:background .12s;position:relative}.server-strip-card:hover{background:var(--bg-4)}.server-strip-card.active{background:var(--accent)20;outline:1.5px solid var(--accent)60}.server-strip-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}.server-strip-card.active .server-strip-name{color:var(--accent)}.discover-modal{max-height:80vh;display:flex;flex-direction:column}@media (max-width: 640px){.top-bar-label{display:none}.top-bar-btn{padding:5px 8px}.top-bar-logo{width:44px}}.friend-popup-card{position:absolute;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px #00000080;width:260px;z-index:300;overflow:hidden;animation:slideUp .15s ease}.friend-popup-banner{height:52px;background:var(--accent)40}.friend-popup-avatar-row{display:flex;align-items:flex-end;justify-content:center;padding:0 12px;margin-top:-26px;margin-bottom:6px;position:relative}.friend-popup-name{font-weight:800;font-size:16px;padding:0 12px 4px;text-align:center}.friend-popup-tag{color:var(--text-muted);font-size:13px;font-weight:400}.friend-popup-status{font-size:12px;padding:0 12px 10px;text-align:center}.friend-popup-actions{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--border)}.friend-strip-wrap{flex-shrink:0;border-bottom:1px solid var(--border);background:var(--bg-1)}.friend-strip{display:flex;align-items:center;gap:6px;padding:6px 10px;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.friend-strip::-webkit-scrollbar{display:none}.server-tags-panel{width:220px;flex-shrink:0;background:var(--bg-1);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.server-tags-header{padding:12px 14px 8px;font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.8px;text-transform:uppercase;border-bottom:1px solid var(--border);flex-shrink:0}.server-tag-row{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-radius:8px;margin:2px 6px;transition:background .12s;position:relative}.server-tag-row:hover{background:var(--bg-4)}.server-tag-row.active{background:var(--accent)18}.server-tag-icon{width:36px;height:36px;border-radius:10px;flex-shrink:0;overflow:hidden;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff}.server-tag-info{flex:1;min-width:0}.server-tag-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-tag-meta{font-size:11px;color:var(--text-muted);margin-top:1px}.server-tag-unread{min-width:18px;height:18px;background:var(--red);color:#fff;border-radius:9px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}@media (max-width: 900px){.server-tags-panel{display:none}}.new-layout .server-rail,.new-layout .mobile-bottom-nav,.new-layout .user-bar{display:none!important}.new-layout .top-bar{height:56px!important}.old-layout .top-bar{display:none!important}.old-layout .app-root{display:block!important;height:100vh}@media (max-width: 640px){.new-layout .main-content{padding-bottom:56px}.new-layout .mobile-bottom-nav{display:none!important}.new-layout .top-bar{display:none}}@keyframes msgEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message{animation:msgEnter .18s ease both}.typing-bubble{display:inline-flex;align-items:center;gap:4px;background:var(--bg-4);border:1px solid var(--border);border-radius:18px 18px 18px 4px;padding:8px 14px;margin:2px 0}.typing-bubble span{width:7px;height:7px;border-radius:50%;background:var(--text-muted);animation:typingBounce 1.2s ease-in-out infinite;display:inline-block}.typing-bubble span:nth-child(2){animation-delay:.15s}.typing-bubble span:nth-child(3){animation-delay:.3s}.message-text code{background:var(--bg-1);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.9em}.message-text strong{font-weight:700}.message-text em{font-style:italic}.message-text.italic{font-style:italic;color:var(--text-muted)}@keyframes msgHighlight{0%{background:var(--accent)30}to{background:transparent}}.message.highlighted{animation:msgHighlight 2s ease forwards;border-radius:6px}.activity-badge{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px;margin-top:2px}.profile-badges{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 8px;justify-content:center}.profile-badge{background:var(--bg-4);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px}.sound-pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}.sound-pack-btn{background:var(--bg-4);border:2px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;text-align:center;transition:border-color .12s;font-family:var(--font);color:var(--text)}.sound-pack-btn:hover{border-color:var(--accent)}.sound-pack-btn.active{border-color:var(--accent);background:var(--accent)18}.sound-pack-btn .sp-icon{font-size:22px;margin-bottom:4px}.sound-pack-btn .sp-name{font-size:12px;font-weight:700}.message-text.italic{opacity:.85}.unread-divider{display:flex;align-items:center;gap:8px;padding:8px 16px 4px;pointer-events:none}.unread-line{flex:1;height:1px;background:var(--red);opacity:.5}.unread-label{font-size:11px;font-weight:700;color:var(--red);white-space:nowrap;letter-spacing:.5px}.msg-hover-time{position:absolute;left:-52px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-muted);opacity:0;transition:opacity .15s;white-space:nowrap;pointer-events:none}.message:hover .msg-hover-time{opacity:1}.message{position:relative}.notif-center{position:fixed;top:60px;right:12px;width:340px;max-height:70vh;background:var(--bg-2);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 40px #00000070;z-index:500;display:flex;flex-direction:column;overflow:hidden}.notif-center-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px}.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}.notif-item:hover{background:var(--bg-4)}.notif-item.unread{background:var(--accent)08}.notif-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;overflow:hidden}.notif-content{flex:1;min-width:0}.notif-author{font-size:12px;font-weight:700}.notif-text{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notif-time{font-size:10px;color:var(--text-muted);margin-top:2px}.streak-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#ff6a00,#ee0979);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700;color:#fff}[dir=rtl] .chat-input-wrap,[dir=rtl] .messages-wrap{direction:rtl}[dir=rtl] .left-panel{order:2;border-left:1px solid var(--border);border-right:none}[dir=rtl] .reply-preview-inline{border-left:none;border-right:3px solid var(--accent);padding-left:0;padding-right:10px}.mobile-server-sheet{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--bg-2);border-top:1px solid var(--border);border-radius:20px 20px 0 0;max-height:70vh;overflow-y:auto;padding:12px 0 calc(env(safe-area-inset-bottom) + 60px);transform:translateY(0);animation:slideUp .25s ease}.mobile-server-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 14px}[dir=rtl] .channel-list{order:2;border-right:none;border-left:1px solid var(--border)}[dir=rtl] .chat-area{order:1}[dir=rtl] .member-sidebar{border-left:none;border-right:1px solid var(--border);order:3}[dir=rtl] .server-rail{border-right:none;border-left:1px solid var(--border);order:4}[dir=rtl] .settings-sidebar{border-right:none;border-left:1px solid var(--border)}[dir=rtl] .settings-content,[dir=rtl] .settings-title,[dir=rtl] .settings-sidebar-section,[dir=rtl] .settings-tab{text-align:right}[dir=rtl] .channel-item{flex-direction:row-reverse;text-align:right}[dir=rtl] .channel-add-btn{text-align:right}[dir=rtl] .channel-actions{margin-left:0;margin-right:auto}[dir=rtl] .message-row{flex-direction:row-reverse}[dir=rtl] .message-content{align-items:flex-end}[dir=rtl] .message-text{text-align:right;direction:rtl;unicode-bidi:embed}[dir=rtl] .top-bar{flex-direction:row-reverse}[dir=rtl] .top-bar-navbtn{flex-direction:column}[dir=rtl] .field{align-items:flex-end}[dir=rtl] .field label{text-align:right;align-self:flex-start}[dir=rtl] input,[dir=rtl] textarea{text-align:right;direction:rtl}[dir=rtl] .profile-preview-avatar{margin-left:0;margin-right:14px}[dir=rtl] .profile-preview-info{text-align:right}[dir=rtl] .friend-item,[dir=rtl] .member-item{flex-direction:row-reverse}[dir=rtl] .member-item-info{align-items:flex-end}[dir=rtl] .perm-toggle.on .perm-toggle-thumb{left:auto;right:23px}[dir=rtl] .perm-toggle.off .perm-toggle-thumb{left:auto;right:3px}[dir=rtl] .perm-row{flex-direction:row-reverse}[dir=rtl] .perm-info{text-align:right}[dir=rtl] .top-bar-badge{right:auto;left:2px}[dir=rtl] .profile-popup{text-align:right}[dir=rtl] .main-content,[dir=rtl] .old-layout .main-content{flex-direction:row-reverse}[dir=rtl] .top-bar-right-actions{margin-left:0;margin-right:0;padding-right:0;padding-left:10px;order:-1}[dir=rtl] .chat-header{flex-direction:row-reverse}[dir=rtl] .chat-header-actions{margin-right:auto;margin-left:0}[dir=rtl] .panel-toggle-btn{order:999}[dir=rtl] .member-toggle-btn{right:auto;left:8px}@media (max-width: 640px){[dir=rtl] .member-toggle-btn{right:auto;left:12px}}[dir=rtl] .member-sidebar{border-left:none;border-right:1px solid var(--border);order:-1}[dir=rtl] .settings-modal{flex-direction:row-reverse}[dir=rtl] .settings-sidebar{border-right:none;border-left:1px solid var(--border);text-align:right}[dir=rtl] .settings-content,[dir=rtl] .settings-title{text-align:right}[dir=rtl] .settings-tab{flex-direction:row-reverse;justify-content:flex-end}[dir=rtl] .channel-list-header{flex-direction:row-reverse}[dir=rtl] .channel-item{flex-direction:row-reverse;text-align:right;padding-right:12px;padding-left:6px}[dir=rtl] .message{flex-direction:row-reverse}[dir=rtl] .message-content{align-items:flex-end;text-align:right}[dir=rtl] .message-meta{flex-direction:row-reverse}[dir=rtl] .message-actions{right:auto;left:12px}[dir=rtl] .msg-hover-time{right:auto;left:0}[dir=rtl] .reply-preview-inline{text-align:right;border-left:none;border-right:3px solid var(--accent);padding-left:0;padding-right:8px}[dir=rtl] .typing-indicator,[dir=rtl] .chat-input-row{flex-direction:row-reverse}[dir=rtl] .chat-input{text-align:right}[dir=rtl] .friend-item{flex-direction:row-reverse}[dir=rtl] .notif-center{right:auto;left:60px}[dir=rtl] .notif-item{flex-direction:row-reverse;text-align:right}[dir=rtl] .search-panel{right:auto;left:0;border-radius:0 0 12px;box-shadow:4px 4px 24px #00000050}[dir=rtl] .search-panel-header,[dir=rtl] .search-panel-filters{flex-direction:row-reverse}[dir=rtl] .search-panel-input{text-align:right}[dir=rtl] .pins-panel{right:auto;left:0;border-radius:0 0 12px;box-shadow:4px 4px 24px #00000050}[dir=rtl] .pins-panel-header{flex-direction:row-reverse}[dir=rtl] .server-indicator{left:auto;right:-10px;border-radius:3px 0 0 3px}[dir=rtl] .server-badge{right:auto;left:-4px}[dir=rtl] .jump-bottom-btn{right:auto;left:20px}[dir=rtl] .notif-center-header{flex-direction:row-reverse}[dir=rtl] input:not([type=color]):not([type=range]):not([type=checkbox]),[dir=rtl] textarea{text-align:right}[dir=rtl] .field label{text-align:right;display:block}.message.arabic-msg{flex-direction:row-reverse}.message.arabic-msg .message-content{align-items:flex-end;text-align:right}.message.arabic-msg .message-meta{flex-direction:row-reverse}.message.arabic-msg .message-text{text-align:right;direction:rtl;unicode-bidi:embed}.message.arabic-msg .message-actions{right:auto;left:12px}.message.arabic-msg .msg-hover-time{right:auto;left:0}.message.arabic-msg .reply-preview-inline{border-left:none;border-right:3px solid var(--accent);padding-left:0;padding-right:8px;text-align:right}.message.arabic-msg .message-reactions{justify-content:flex-end}@keyframes bounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}