*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,Helvetica,Arial,sans-serif;background:#313338;color:#dbdee1}button{cursor:pointer;background:#5865f2;color:#fff;border:none;border-radius:4px;padding:6px 10px;font-size:13px}button:hover{background:#4752c4}input,select{background:#1e1f22;border:1px solid #3f4147;color:#dbdee1;border-radius:4px;padding:8px;width:100%}.auth-screen{height:100%;display:flex;align-items:center;justify-content:center}.auth-card{background:#2b2d31;padding:32px;border-radius:8px;width:340px;display:flex;flex-direction:column;gap:10px}.auth-card h1{margin:0;text-align:center}.auth-sub{text-align:center;color:#949ba4;margin:0 0 8px}.auth-error{background:#402226;color:#f38ba0;padding:8px;border-radius:4px;font-size:13px}.auth-info{background:#1f2937;color:#949ba4;padding:8px;border-radius:4px;font-size:13px}.auth-info a{color:#00a8fc}.auth-switch{text-align:center;font-size:13px;color:#949ba4}.auth-switch a{color:#00a8fc}.app-shell{display:flex;height:100vh}.server-sidebar{width:72px;background:#1e1f22;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;position:relative}.server-icon{width:48px;height:48px;border-radius:24px;background:#313338;color:#dbdee1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;position:relative}.server-icon.active,.server-icon:hover{border-radius:16px;background:#5865f2}.server-icon.add{background:#23a559;font-size:20px}.pending-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#f23f42;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #1e1f22}.server-icon .unread-dot{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#f23f42;border:2px solid #1e1f22}.channel-row.unread span:first-child{font-weight:700;color:#f2f3f5}.channel-row .unread-dot{width:8px;height:8px;border-radius:50%;background:#f23f42;flex-shrink:0;margin-left:6px}.server-divider{width:32px;height:2px;background:#3f4147}.server-add-panel{position:absolute;left:76px;top:60px;background:#2b2d31;padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:8px;width:200px;z-index:20}.channel-list{width:240px;background:#2b2d31;padding:12px 8px;overflow-y:auto}.channel-list-header{padding:8px;border-bottom:1px solid #3f4147;margin-bottom:8px}.invite-code{display:block;font-size:11px;color:#949ba4}.channel-group-label{font-size:11px;text-transform:uppercase;color:#949ba4;margin:10px 4px 4px}.channel-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;color:#949ba4;cursor:pointer}.channel-row span:first-child{flex:1}.channel-row:hover,.channel-row.active{background:#35373c;color:#f2f3f5}.channel-delete{background:none;color:#949ba4;padding:0 4px}.channel-delete:hover{color:#f23f42}.channel-add{margin-top:8px}.channel-add-form{display:flex;flex-direction:column;gap:6px}.friends-nav{margin-bottom:8px;font-weight:600}.friends-panel{flex:1;padding:16px 24px;overflow-y:auto}.friends-tabs{display:flex;gap:8px;border-bottom:1px solid #3f4147;padding-bottom:12px;margin-bottom:16px}.friends-tabs button{background:none;color:#949ba4;padding:6px 4px;border-radius:0}.friends-tabs button:hover{color:#f2f3f5}.friends-tabs button.active{color:#f2f3f5;border-bottom:2px solid #5865f2}.friend-add-form{display:flex;flex-direction:column;gap:10px;max-width:480px}.friend-add-row{display:flex;gap:8px}.friend-feedback{font-size:13px;color:#949ba4}.friend-empty{color:#6d6f78}.friend-list{display:flex;flex-direction:column}.friend-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid #3f4147}.friend-name{cursor:pointer;font-weight:600}.friend-hint{color:#949ba4;font-size:13px;flex:1}.friend-actions{display:flex;gap:8px;margin-left:auto}.friend-status-dot{width:10px;height:10px;border-radius:50%;background:#6d6f78;display:inline-block}.friend-status-dot.online{background:#23a559}.main-content{flex:1;display:flex;flex-direction:column;min-width:0}.main-header{height:48px;border-bottom:1px solid #26272b;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-weight:600}.main-header-right{display:flex;align-items:center;gap:10px}.current-user{color:#949ba4;font-weight:400;font-size:13px}.chat-view{flex:1;display:flex;flex-direction:column;min-height:0}.chat-messages{flex:1;overflow-y:auto;padding:16px}.chat-message{margin-bottom:10px}.chat-author{font-weight:600;margin-right:8px}.chat-author.me{color:#00a8fc}.chat-time{font-size:11px;color:#6d6f78}.chat-content{color:#dbdee1}.chat-input{display:flex;gap:8px;padding:16px}.chat-input input{flex:1}.voice-panel{flex:1;padding:24px}.voice-peer-list{display:flex;flex-direction:column;gap:8px;margin:16px 0}.voice-peer{background:#2b2d31;padding:10px;border-radius:6px}.voice-controls{display:flex;gap:10px}.member-list{width:220px;background:#2b2d31;padding:12px 8px;overflow-y:auto}.member-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:4px}.member-row:hover{background:#35373c}.member-name{cursor:pointer;font-weight:500}.member-roles{font-size:11px;color:#949ba4;flex:1}.member-manage{padding:2px 6px;font-size:11px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:#313338;padding:24px;border-radius:8px;width:420px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.modal h2{margin:0 0 8px}.modal h3{margin:12px 0 4px}.role-checklist{display:flex;flex-direction:column;gap:4px;font-size:13px}.role-checklist label{display:flex;align-items:center;gap:8px}.role-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.role-list li{display:flex;justify-content:space-between;align-items:center}.modal-close{margin-top:12px;background:#3f4147}