*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-0: #111214;--bg-1: #1e1f22;--bg-2: #2b2d31;--bg-3: #313338;--bg-4: #383a40;--bg-5: #404249;--text-0: #f2f3f5;--text-1: #dbdee1;--text-2: #949ba4;--text-3: #5c5f66;--accent: #e8a030;--accent-hover: #d4901a;--accent-dim: rgba(232,160,48,.15);--danger: #f23f43;--success: #23a559;--radius: 6px;--radius-lg: 12px;--transition: .15s ease}html,body,#root{height:100%;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px;background:var(--bg-3);color:var(--text-1);-webkit-font-smoothing:antialiased}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}textarea{resize:none}.app-layout{display:grid;grid-template-columns:72px 240px 1fr 240px;grid-template-rows:1fr;height:100vh;overflow:hidden}.connection-banner{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--danger);color:#fff;text-align:center;padding:6px;font-size:13px;font-weight:600}.incoming-call-banner{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:1200;background:var(--bg-0);border:1px solid var(--accent);border-radius:var(--radius-lg);box-shadow:0 8px 24px #0006;padding:10px 12px;display:flex;align-items:center;gap:14px}.incoming-call-text{font-size:14px;color:var(--text-1)}.incoming-call-actions{display:flex;gap:6px}.server-sidebar{background:var(--bg-1);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;overflow-y:auto;overflow-x:hidden}.server-divider{width:32px;height:2px;background:var(--bg-4);border-radius:1px;flex-shrink:0}.server-icon{position:relative;width:48px;height:48px;border-radius:50%;background:var(--bg-3);color:var(--text-2);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-radius var(--transition),background var(--transition),color var(--transition);flex-shrink:0}.server-icon:hover,.server-icon.active{border-radius:var(--radius);background:var(--accent);color:#fff}.server-icon-dm{font-size:20px}.server-icon-add{background:var(--bg-4);color:var(--success);font-size:24px}.server-icon-add:hover{background:var(--success);color:#fff}.badge{position:absolute;bottom:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid var(--bg-1)}.server-add-wrapper{position:relative}.server-add-menu{position:absolute;left:56px;top:0;background:var(--bg-0);border:1px solid var(--bg-4);border-radius:var(--radius-lg);padding:6px;min-width:160px;z-index:100;box-shadow:0 8px 24px #0006}.server-add-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:var(--radius);color:var(--text-1);font-size:14px}.server-add-menu button:hover{background:var(--bg-5);color:var(--text-0)}.channel-sidebar{background:var(--bg-2);display:flex;flex-direction:column;overflow:hidden}.channel-sidebar-header{padding:16px 12px;font-size:15px;font-weight:700;color:var(--text-0);border-bottom:1px solid var(--bg-0);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.channel-header-actions{display:inline-flex;align-items:center;gap:8px}.invite-copy{font-size:16px;opacity:.6;transition:opacity var(--transition)}.invite-copy:hover{opacity:1}.channel-list{flex:1;overflow-y:auto;padding:8px}.new-channel-cta{width:100%;background:var(--bg-4);color:var(--text-0);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-weight:700;text-align:left;margin:2px 0 10px;transition:background var(--transition),color var(--transition)}.new-channel-cta:hover{background:var(--accent-dim);color:var(--accent)}.channel-category{display:flex;align-items:center;justify-content:flex-start;padding:16px 8px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}.new-channel-input{padding:4px 8px}.channel-type-toggle{display:flex;gap:6px;margin-bottom:6px}.channel-type-toggle button{flex:1;background:var(--bg-0);color:var(--text-2);border-radius:var(--radius);padding:6px 8px;font-size:12px}.channel-type-toggle button.active{background:var(--accent-dim);color:var(--accent)}.new-channel-input input{width:100%;background:var(--bg-4);border-radius:var(--radius);padding:6px 8px;font-size:14px;color:var(--text-0)}.channel-item{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border-radius:var(--radius);color:var(--text-2);font-size:15px;text-align:left;transition:background var(--transition),color var(--transition)}.channel-item:hover{background:var(--bg-5);color:var(--text-1)}.channel-item.active{background:var(--bg-5);color:var(--text-0)}.channel-item:disabled{opacity:.4;cursor:default}.voice-channel-block{margin-bottom:2px}.voice-join-icon{margin-left:auto;width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:1px solid transparent;transition:transform var(--transition),filter var(--transition),background var(--transition),border-color var(--transition),color var(--transition)}.voice-join-icon.join{background:#23a5592e;border-color:#23a5598c;color:#57d98f}.voice-join-icon.leave{background:#f23f432e;border-color:#f23f438c;color:#ff7e82}.voice-join-icon:hover{transform:translateY(-1px);filter:brightness(1.08)}.voice-members-list{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px 32px}.voice-member-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}.voice-member-dot{width:6px;height:6px;border-radius:50%;background:var(--success)}.channel-hash{color:var(--text-3);font-size:18px;line-height:1;flex-shrink:0}.channel-item.active .channel-hash{color:var(--text-2)}.channel-empty{color:var(--text-3);font-size:13px;padding:16px 8px;line-height:1.6}.dm-item{gap:10px}.dm-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-5);color:var(--text-1);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.dm-name{font-size:14px;font-weight:500}.dm-item .presence-dot{margin-left:auto;flex-shrink:0}.dm-unread-count{margin-left:8px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}.user-footer{position:relative;display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg-0);border-top:1px solid var(--bg-1);flex-shrink:0}.user-footer-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.user-status-control{flex:1;min-width:0;position:relative}.user-footer-info{width:100%;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding-right:16px}.user-footer-name{display:block;font-size:13px;font-weight:700;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-footer-key{display:block;font-size:11px;color:var(--text-3);font-family:monospace}.user-presence-dot{position:absolute;right:0;top:50%;transform:translateY(-50%)}.status-menu{position:absolute;left:0;bottom:calc(100% + 8px);width:170px;background:var(--bg-0);border:1px solid var(--bg-5);border-radius:var(--radius);box-shadow:0 8px 24px #00000052;padding:4px;z-index:50}.status-menu-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:4px;color:var(--text-1);font-size:13px;text-align:left}.status-menu-item:hover,.status-menu-item.active{background:var(--bg-5)}.user-footer-logout{font-size:18px;color:var(--text-3);padding:4px;border-radius:var(--radius);transition:color var(--transition)}.user-footer-logout:hover{color:var(--danger)}.presence-dot{width:10px;height:10px;border-radius:999px;border:none;background:var(--text-3);box-shadow:0 0 0 1px #00000040,0 0 8px #ffffff2e}.presence-online{background:#2bc770;box-shadow:0 0 0 1px #0003,0 0 8px #2bc770a6}.presence-idle{background:#f0b132;box-shadow:0 0 0 1px #0003,0 0 8px #f0b132a6}.presence-dnd{background:#f04747;box-shadow:0 0 0 1px #0003,0 0 8px #f04747a6}.presence-offline{background:#777d86;box-shadow:0 0 0 1px #0003,0 0 6px #777d8673}.member-list{background:var(--bg-2);overflow-y:auto;padding:16px 8px;border-left:1px solid var(--bg-0)}.member-group{margin-bottom:20px}.member-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:0 8px 6px}.member-item{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:var(--radius);text-align:left;color:var(--text-2);font-size:14px;transition:background var(--transition),color var(--transition)}.member-item:hover:not(.self){background:var(--bg-5);color:var(--text-0)}.member-item.self{cursor:default}.member-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-4);color:var(--text-1);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.member-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-area{display:flex;flex-direction:column;background:var(--bg-3);overflow:hidden;min-width:0}.chat-empty{align-items:center;justify-content:center}.chat-empty-inner{text-align:center;color:var(--text-2)}.chat-empty-icon{font-size:48px;margin-bottom:16px;opacity:.4}.chat-empty-inner h2{color:var(--text-0);margin-bottom:8px}.chat-header{padding:12px 16px;border-bottom:1px solid var(--bg-0);background:var(--bg-3);display:flex;align-items:center;gap:8px;flex-shrink:0;box-shadow:0 1px #0003}.chat-header-title{font-size:16px;font-weight:700;color:var(--text-0)}.chat-messages{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:2px}.chat-start{padding:16px 0 24px;color:var(--text-2);font-size:14px}.load-more-btn{align-self:center;padding:6px 16px;border-radius:100px;background:var(--bg-4);color:var(--text-2);font-size:13px;margin-bottom:16px;transition:background var(--transition),color var(--transition)}.load-more-btn:hover{background:var(--bg-5);color:var(--text-0)}.msg-group{display:flex;align-items:flex-start;gap:12px;padding:2px 0;border-radius:var(--radius);transition:background var(--transition)}.msg-group:hover{background:var(--bg-4)}.msg-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-5);color:var(--text-0);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.msg-group.mine .msg-avatar{background:var(--accent-dim);color:var(--accent)}.msg-group-body{flex:1;min-width:0}.msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}.msg-author{font-size:15px;font-weight:700;color:var(--text-0)}.msg-group.mine .msg-author{color:var(--accent)}.msg-ts{font-size:11px;color:var(--text-3)}.msg-bubble{font-size:15px;line-height:1.5;color:var(--text-1);word-break:break-word;white-space:pre-wrap;padding:2px 0}.message-input-wrapper{display:flex;align-items:flex-end;gap:8px;margin:0 16px 16px;background:var(--bg-4);border-radius:var(--radius-lg);padding:10px 14px}.message-input{flex:1;background:none;font-size:15px;color:var(--text-0);line-height:1.5;max-height:200px;overflow-y:auto}.message-input::placeholder{color:var(--text-3)}.message-send-btn{color:var(--text-3);font-size:20px;padding:0 4px;border-radius:var(--radius);transition:color var(--transition);flex-shrink:0}.message-send-btn:not(:disabled):hover{color:var(--accent)}.message-send-btn:disabled{opacity:.3;cursor:default}.voice-panel{margin:8px 16px 16px;border:1px solid var(--bg-5);border-radius:var(--radius-lg);background:var(--bg-4);padding:12px}.voice-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.voice-title{font-size:14px;color:var(--text-0);font-weight:700}.voice-sub{font-size:12px;color:var(--text-2)}.voice-actions{display:flex;align-items:center;gap:6px}.voice-users{display:flex;flex-direction:column;gap:8px}.voice-user{display:flex;align-items:center;gap:10px}.voice-user-name{font-size:14px;color:var(--text-1)}.voice-audio-host{width:0;height:0;overflow:hidden}.voice-background-session{width:0;height:0;overflow:hidden;pointer-events:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200}.modal{background:var(--bg-2);border-radius:var(--radius-lg);padding:24px;width:440px;max-width:calc(100vw - 32px)}.modal h2{font-size:20px;color:var(--text-0);margin-bottom:8px}.modal-sub{color:var(--text-2);font-size:14px;line-height:1.5;margin-bottom:20px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-1)}.auth-card{background:var(--bg-2);border-radius:var(--radius-lg);padding:32px;width:460px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:16px}.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}.auth-logo-icon{font-size:32px;color:var(--accent)}.auth-logo h1{font-size:28px;font-weight:800;color:var(--text-0);letter-spacing:-.5px}.auth-card h2{font-size:20px;color:var(--text-0)}.auth-sub{color:var(--text-2);font-size:14px;line-height:1.6}.step-bar{display:flex;gap:6px}.step-dot{width:24px;height:4px;border-radius:2px;background:var(--bg-5);transition:background var(--transition)}.step-dot.active{background:var(--accent)}.step-dot.done{background:var(--accent-hover)}.field{display:flex;flex-direction:column;gap:4px}.field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}.field input,.field textarea{background:var(--bg-4);border:1.5px solid transparent;border-radius:var(--radius);padding:10px 12px;font-size:15px;color:var(--text-0);width:100%;transition:border-color var(--transition)}.field input:focus,.field textarea:focus{border-color:var(--accent)}.field input.input-error,.field textarea.input-error{border-color:var(--danger)}.field input.input-ok{border-color:var(--success)}.field input.input-mono{font-family:monospace;letter-spacing:.1em;font-size:18px;text-align:center}.field-hint{font-size:12px;color:var(--text-3)}.field-hint.error{color:var(--danger)}.field-error{font-size:13px;color:var(--danger)}.btn-primary{background:var(--accent);color:#000;font-weight:700;font-size:15px;border-radius:var(--radius);padding:10px 20px;transition:background var(--transition),opacity var(--transition);text-align:center}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{opacity:.4;cursor:default}.btn-ghost{background:var(--bg-4);color:var(--text-1);font-weight:600;font-size:15px;border-radius:var(--radius);padding:10px 20px;transition:background var(--transition);text-align:center}.btn-ghost:hover{background:var(--bg-5)}.btn-link{color:var(--accent);font-size:13px;text-decoration:underline;text-underline-offset:3px}.btn-link:hover{color:var(--accent-hover)}.btn-copy{align-self:flex-start;font-size:14px}.auth-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.mnemonic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bg-0);border:1.5px solid var(--bg-5);border-radius:var(--radius-lg);padding:16px}.mnemonic-word{display:flex;align-items:center;gap:6px;background:var(--bg-4);border-radius:var(--radius);padding:6px 10px;font-size:14px}.mnemonic-num{font-size:11px;color:var(--text-3);min-width:16px;text-align:right}.checkbox-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;color:var(--text-1);line-height:1.5}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;margin-top:2px}.friends-modal{width:480px;padding:0;overflow:hidden}.friends-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}.friends-modal-header h2{margin:0}.modal-close{background:none;border:none;color:var(--text-2);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:var(--radius)}.modal-close:hover{color:var(--text-0);background:var(--bg-4)}.modal-tabs{display:flex;gap:4px;padding:12px 24px 0;border-bottom:1px solid var(--bg-4)}.modal-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-2);font-size:14px;font-weight:600;padding:8px 12px;cursor:pointer;margin-bottom:-1px;display:flex;align-items:center;gap:6px}.modal-tab.active{color:var(--text-0);border-bottom-color:var(--accent)}.modal-tab:hover:not(.active){color:var(--text-1)}.modal-body{padding:16px 24px 20px}.modal-hint{font-size:13px;color:var(--text-2);margin:0 0 12px}.modal-empty{font-size:14px;color:var(--text-3);text-align:center;padding:20px 0;margin:0}.modal-input{width:100%;background:var(--bg-4);border:1px solid var(--bg-5);border-radius:var(--radius);color:var(--text-0);font-size:14px;padding:10px 12px;outline:none;box-sizing:border-box;margin-bottom:12px}.modal-input:focus{border-color:var(--accent)}.friend-section{margin-top:8px}.friend-section-label{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--text-3);padding:6px 0 8px}.friend-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--bg-3)}.friend-row:last-child{border-bottom:none}.friend-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.friend-info{flex:1;display:flex;flex-direction:column;gap:2px}.friend-name{font-size:14px;font-weight:600;color:var(--text-0)}.friend-tag{font-size:12px;color:var(--text-3)}.friend-actions{display:flex;gap:6px}.friend-badge{font-size:12px;font-weight:600;padding:3px 8px;border-radius:100px}.friend-badge-accepted{background:#3ba55d33;color:#3ba55d}.friend-badge-pending{background:var(--bg-4);color:var(--text-2)}.btn-small{background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer}.btn-small:hover{opacity:.85}.btn-accept{background:#3ba55d}.btn-reject{background:#ed4245}.badge-count{background:var(--danger);color:#fff;font-size:11px;font-weight:700;padding:1px 5px;border-radius:100px;line-height:1.4}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}