*{margin:0;padding:0;box-sizing:border-box}:root{--bg-rail: #1e1f22;--bg-side: #2b2d31;--bg-chat: #313338;--bg-input: #383a40;--hover: #404249;--active: #404249;--text: #dbdee1;--text-dim: #949ba4;--accent: #5865f2;--accent-hover: #4752c4;--green: #23a55a;--red: #da373c}html,body,#root{height:100%}body{background:var(--bg-chat);color:var(--text);font-family:Segoe UI,Inter,system-ui,-apple-system,sans-serif;overflow:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font-family:inherit;background:var(--bg-input);border:none;border-radius:6px;color:var(--text);padding:10px 12px;outline:none;width:100%}input::placeholder{color:var(--text-dim)}a{color:#00a8fc}.boot{height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:var(--accent)}.login-wrap{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,#3a3d99,#1e1f22 60%)}.login-card{background:var(--bg-side);width:380px;border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:14px;text-align:center;box-shadow:0 8px 40px #00000080}.logo-big{width:64px;height:64px;margin:0 auto;border-radius:18px;background:var(--accent);color:#fff;font-size:36px;font-weight:800;display:flex;align-items:center;justify-content:center}.logo-big.lg{width:88px;height:88px;font-size:52px;border-radius:26px}.login-card h1{font-size:28px}.tagline{color:var(--text-dim);margin-top:-8px}.tabs{display:flex;gap:6px;background:var(--bg-chat);border-radius:8px;padding:4px}.tab{flex:1;padding:8px;border-radius:6px;color:var(--text-dim)}.tab.active{background:var(--bg-input);color:var(--text)}.login-card form{display:flex;flex-direction:column;gap:10px;margin-top:4px}.error{color:var(--red);font-size:13px}.primary{background:var(--accent);color:#fff;padding:10px;border-radius:6px;font-weight:600}.primary:hover:not(:disabled){background:var(--accent-hover)}.primary:disabled{opacity:.5;cursor:default}.ghost{padding:10px;border-radius:6px;border:1px solid var(--hover);color:var(--text)}.ghost:hover{background:var(--hover)}.main{height:100%;display:flex}.rail{width:72px;background:var(--bg-rail);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;flex-shrink:0;overflow-y:auto}.rail-item{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:24px;transition:border-radius .15s,background .15s}.rail-item:hover,.rail-item.active{border-radius:14px}.rail-icon{width:48px;height:48px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;background:var(--bg-side);color:#fff;transition:border-radius .15s}.rail-item:hover .rail-icon,.rail-item.active .rail-icon{border-radius:14px}.home-icon{background:var(--accent);font-size:18px}.rail-icon.add{background:var(--bg-side);color:var(--green);font-size:24px;font-weight:400}.rail-sep{width:32px;height:2px;background:var(--hover);border-radius:1px}.sidebar{width:240px;background:var(--bg-side);display:flex;flex-direction:column;flex-shrink:0}.sidebar-head{padding:14px 16px;font-weight:700;border-bottom:1px solid rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-scroll{flex:1;overflow-y:auto;padding:8px}.section{margin-bottom:14px}.section-title{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;padding:6px 10px 4px}.chan-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:6px;color:var(--text-dim);font-size:14px;text-align:left}.chan-item:hover{background:var(--hover);color:var(--text)}.chan-item.active{background:var(--active);color:var(--text)}.chan-item.subtle{font-size:13px}.hash{opacity:.6;font-weight:700;width:14px;text-align:center}.hash.plus{color:var(--green)}.mic{width:14px;text-align:center}.chan-item.live{border:1px solid var(--green)}.live{margin-left:auto;font-size:10px;color:var(--green);font-weight:700}.chan-item.dm{gap:10px}.dm-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-row,.member-row,.req-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px}.friend-row:hover,.member-row:hover{background:var(--hover)}.empty{color:var(--text-dim);font-size:13px;padding:4px 10px}.user-panel{display:flex;align-items:center;gap:8px;background:#232428;padding:8px;flex-shrink:0}.up-name{flex:1;min-width:0}.up-display{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.up-username{font-size:11px;color:var(--text-dim)}.icon-btn{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px}.icon-btn:hover{background:var(--hover)}.avatar-wrap{position:relative;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;overflow:hidden;-webkit-user-select:none;user-select:none}.avatar img{width:100%;height:100%;object-fit:cover}.dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:3px solid var(--bg-side);background:var(--text-dim)}.dot.on{background:var(--green)}.dot.off{background:var(--text-dim)}.chat{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-chat)}.chat-head{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.25);display:flex;align-items:baseline;gap:10px;flex-shrink:0}.chat-title{font-weight:700;font-size:16px}.chat-sub{color:var(--text-dim);font-size:13px}.messages{flex:1;overflow-y:auto;padding:16px 16px 0;display:flex;flex-direction:column;gap:2px}.msg{display:flex;gap:12px;padding:4px 8px;border-radius:6px;position:relative}.msg:hover{background:#2e3035}.msg-head{display:flex;align-items:baseline;gap:8px}.msg-author{font-weight:600;color:#fff;font-size:14px}.msg-time{color:var(--text-dim);font-size:11px}.msg-edited{color:var(--text-dim);font-size:11px;font-style:italic}.msg-content{font-size:14.5px;line-height:1.45;margin-top:2px;word-wrap:break-word;overflow-wrap:anywhere}.msg-content .codeblock{background:#1e1f22;border-radius:8px;padding:10px 12px;margin:6px 0;font-family:Cascadia Code,Consolas,monospace;font-size:13px;white-space:pre-wrap}.inline-code{background:#1e1f22;border-radius:4px;padding:2px 5px;font-family:Consolas,monospace;font-size:13px}.msg-actions{position:absolute;right:10px;top:-10px;background:var(--bg-input);border-radius:6px;display:flex;box-shadow:0 2px 8px #0006}.msg-actions button{padding:5px 8px;font-size:13px}.msg-actions button:hover{background:var(--hover);border-radius:6px}.edit-form{display:flex;gap:8px;margin-top:4px}.edit-form input{flex:1}.edit-form button{background:var(--hover);padding:8px 12px;border-radius:6px;font-size:13px}.edit-form button:hover{background:var(--active)}.typing-row{height:18px;padding:0 20px;font-size:12px;color:var(--text-dim);flex-shrink:0}.typing{color:var(--text-dim);font-style:italic}.input-wrap{display:flex;align-items:center;gap:8px;padding:0 16px 22px;position:relative;flex-shrink:0}.input-wrap input{background:var(--bg-input);padding:12px 14px;border-radius:10px;flex:1}.emoji-btn{font-size:20px;padding:6px;border-radius:6px}.emoji-btn:hover{background:var(--hover)}.send-btn{background:var(--accent);color:#fff;width:38px;height:38px;border-radius:50%;font-size:15px;flex-shrink:0}.send-btn:disabled{opacity:.4;cursor:default}.emoji-picker{position:absolute;bottom:58px;left:16px;background:var(--bg-side);border-radius:10px;padding:10px;display:grid;grid-template-columns:repeat(8,32px);gap:2px;box-shadow:0 6px 24px #00000080;max-height:220px;overflow-y:auto;z-index:20}.emoji-picker button{font-size:20px;width:32px;height:32px;border-radius:6px}.emoji-picker button:hover{background:var(--hover)}.home-pane{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}.home-pane h1{font-size:32px}.home-pane p{color:var(--text-dim)}.home-actions{display:flex;gap:10px;margin-top:8px}.members{width:220px;background:var(--bg-side);padding:12px 8px;overflow-y:auto;flex-shrink:0}.members-title{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;padding:0 10px 8px}.voice-bar{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#232428;border-radius:12px;padding:12px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 8px 32px #0009;z-index:30;border:1px solid #3a3d42}.vb-title{font-weight:600;font-size:13px;color:var(--green)}.vb-peers{display:flex;gap:10px;max-width:400px;overflow-x:auto}.vb-peer{display:flex;align-items:center;gap:6px;font-size:13px;background:var(--bg-input);padding:4px 10px 4px 4px;border-radius:20px}.vb-peer.dead{opacity:.5}.vb-wait{color:var(--text-dim);font-size:13px}.vb-controls{display:flex;gap:8px}.vb-btn{width:36px;height:36px;border-radius:50%;background:var(--hover);display:flex;align-items:center;justify-content:center;font-size:16px}.vb-btn:hover{background:var(--active)}.vb-btn.on{background:var(--red)}.vb-btn.leave{background:var(--red);width:auto;padding:0 14px;border-radius:20px;color:#fff;font-size:13px}.voice-error{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#3a2d2d;border:1px solid var(--red);color:var(--text);border-radius:12px;padding:12px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 8px 32px #0009;z-index:30;max-width:560px;font-size:14px}.voice-error button{color:var(--text-dim);font-size:15px;padding:4px 8px;border-radius:6px;flex-shrink:0}.voice-error button:hover{color:#fff;background:var(--hover)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--bg-side);border-radius:12px;padding:24px;width:400px;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 48px #0009}.modal h2{font-size:20px}.modal-hint{color:var(--text-dim);font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.modal-actions button:not(.primary){padding:10px 14px;border-radius:6px;color:var(--text-dim)}.modal-actions button:not(.primary):hover{color:var(--text)}.check{display:flex;align-items:center;gap:8px;font-size:14px}.check input{width:auto}.sm{padding:6px 12px!important;border-radius:6px!important;font-size:13px;font-weight:600}.req-row{padding:8px 10px;background:var(--bg-chat);border-radius:8px;margin-bottom:6px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#1a1b1e;border-radius:4px}::-webkit-scrollbar-track{background:transparent}