*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #36393f;--bg-secondary: #2f3136;--bg-tertiary: #202225;--text-primary: #dcddde;--text-secondary: #8e9297;--text-muted: #72767d;--accent: #5865f2;--accent-hover: #4752c4;--success: #43b581;--warning: #faa61a;--danger: #f04747;--border: #40444b}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh}button{cursor:pointer;border:none;background:var(--accent);color:#fff;padding:8px 16px;border-radius:4px;font-size:14px;transition:background-color .2s}button:hover{background:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}input{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);padding:10px 12px;border-radius:4px;font-size:14px;width:100%}input:focus{outline:none;border-color:var(--accent)}.auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:var(--bg-primary);gap:16px}.auth-loading-spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:auth-spin .8s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-page{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.auth-form{background:var(--bg-secondary);padding:32px;border-radius:8px;width:100%;max-width:400px}.auth-form h2{margin-bottom:24px;text-align:center}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;color:var(--text-secondary);font-size:12px;font-weight:600;text-transform:uppercase}.auth-form button[type=submit]{width:100%;margin-top:8px}.auth-form p{margin-top:16px;text-align:center;color:var(--text-secondary);font-size:14px}.auth-form a{color:var(--accent);text-decoration:none}.auth-form a:hover{text-decoration:underline}.error{background:#f047471a;border:1px solid var(--danger);color:var(--danger);padding:12px;border-radius:4px;margin-bottom:16px;font-size:14px}.app-layout{display:grid;grid-template-columns:72px 240px 1fr 240px;grid-template-rows:1fr auto;height:100vh}.main-content{background:var(--bg-primary);display:flex;flex-direction:column;overflow:hidden}.server-sidebar{background:var(--bg-tertiary);padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:8px;overflow-y:auto}.server-list{display:flex;flex-direction:column;gap:8px}.server-icon{width:48px;height:48px;border-radius:50%;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;transition:border-radius .2s,background-color .2s;padding:0}.server-icon:hover,.server-icon.active{border-radius:16px;background:var(--accent)}.server-icon img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.server-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px}.add-server,.join-server{width:48px;height:48px;border-radius:50%;background:var(--bg-primary);font-size:24px;padding:0}.add-server:hover,.join-server:hover{background:var(--success)}.channel-list{background:var(--bg-secondary);display:flex;flex-direction:column}.channel-list-empty{background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.channel-list-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bg-tertiary);box-shadow:0 1px #0003}.channel-list-header h3{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.add-channel{width:24px;height:24px;padding:0;font-size:18px;background:transparent;color:var(--text-secondary)}.add-channel:hover{color:var(--text-primary);background:transparent}.channels{flex:1;overflow-y:auto;padding:8px}.channel-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:4px;background:transparent;color:var(--text-secondary);text-align:left}.channel-item:hover{background:#4f545c66;color:var(--text-primary)}.channel-item.active{background:#4f545c99;color:var(--text-primary)}.channel-icon{color:var(--text-muted)}.channel-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invite-section{padding:12px 16px;border-top:1px solid var(--bg-tertiary);font-size:12px;color:var(--text-muted)}.invite-section code{display:block;margin-top:4px;padding:8px;background:var(--bg-tertiary);border-radius:4px;color:var(--text-primary);font-family:monospace}.message-view{flex:1;display:flex;flex-direction:column;overflow:hidden}.message-view-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.channel-header{padding:12px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bg-tertiary);box-shadow:0 1px #0003}.channel-header .channel-name{font-weight:600}.channel-header .channel-topic{color:var(--text-muted);font-size:14px;margin-left:8px;padding-left:8px;border-left:1px solid var(--border)}.messages{flex:1;overflow-y:auto;padding:16px}.loading{text-align:center;color:var(--text-muted);padding:16px}.date-separator{text-align:center;color:var(--text-muted);font-size:12px;margin:16px 0;position:relative}.date-separator:before,.date-separator:after{content:"";position:absolute;top:50%;width:calc(50% - 50px);height:1px;background:var(--border)}.date-separator:before{left:0}.date-separator:after{right:0}.message{display:flex;gap:16px;padding:4px 0;margin:4px 0}.message:hover{background:#0000001a}.message-avatar{width:40px;height:40px;flex-shrink:0}.message-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff}.message-content{flex:1;min-width:0}.message-header{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}.message-author{font-weight:600}.message-time{font-size:12px;color:var(--text-muted)}.message-edited{font-size:10px;color:var(--text-muted)}.message-text{line-height:1.4;word-wrap:break-word}.message-input-container{padding:0 16px 24px}.typing-indicator{font-size:12px;color:var(--text-muted);padding:4px 0}.message-input{display:flex;gap:8px;background:var(--bg-tertiary);padding:12px;border-radius:8px}.message-input input{flex:1;background:transparent;border:none}.message-input button{padding:8px 16px}.user-list{background:var(--bg-secondary);padding:16px;overflow-y:auto}.user-list h4{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}.users{display:flex;flex-direction:column;gap:4px}.user-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:4px}.user-item:hover{background:#4f545c66}.user-avatar{width:32px;height:32px;position:relative}.user-avatar img,.user-avatar .avatar-placeholder{width:100%;height:100%;font-size:12px}.status-indicator{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-secondary)}.user-name{font-size:14px;color:var(--text-secondary)}.user-panel{grid-column:2;grid-row:2;background:var(--bg-tertiary);padding:12px;display:flex;align-items:center;justify-content:space-between}.user-panel span{font-weight:600}.user-panel button{background:transparent;color:var(--text-secondary);padding:4px 8px;font-size:12px}.user-panel button:hover{color:var(--text-primary)}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-primary);padding:24px;border-radius:8px;width:100%;max-width:400px}.modal h3,.modal input{margin-bottom:16px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-actions button:first-child{background:transparent;color:var(--text-secondary)}.home-page,.server-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-secondary)}.home-page h2,.server-welcome h2{color:var(--text-primary);margin-bottom:8px}.channel-page{display:flex;flex-direction:column;height:100%}.home-button{width:48px;height:48px;border-radius:50%;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;padding:0;color:var(--text-primary);position:relative;transition:border-radius .2s,background-color .2s}.home-button:hover,.home-button.active{border-radius:16px;background:var(--accent)}.home-badge{position:absolute;bottom:-2px;right:-2px;background:var(--danger);color:#fff;font-size:11px;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-tertiary)}.sidebar-separator{width:32px;height:2px;background:var(--border);border-radius:1px}.friends-view{display:flex;flex-direction:column;height:100%}.friends-header{padding:12px 16px;border-bottom:1px solid var(--bg-tertiary);box-shadow:0 1px #0003;display:flex;align-items:center;gap:16px}.friends-header h2{font-size:16px;font-weight:600;white-space:nowrap}.friends-tabs{display:flex;gap:4px}.friends-tab{background:transparent;color:var(--text-secondary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;position:relative}.friends-tab:hover{background:#4f545c66;color:var(--text-primary)}.friends-tab.active{background:#4f545c99;color:var(--text-primary)}.friends-tab.add-friend-tab{color:var(--success)}.friends-tab.add-friend-tab.active{background:#43b58126;color:var(--success)}.tab-badge{background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-left:4px;vertical-align:middle}.friends-content{flex:1;overflow-y:auto;padding:16px}.friends-empty{color:var(--text-muted);text-align:center;padding:40px 16px}.friends-list-header{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}.friend-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:4px;border-top:1px solid var(--border)}.friend-item:hover{background:#4f545c66}.friend-avatar{width:32px;height:32px;position:relative;flex-shrink:0}.friend-avatar img,.friend-avatar .avatar-placeholder{width:100%;height:100%;font-size:12px}.friend-info{flex:1;min-width:0}.friend-name{font-weight:600;font-size:14px;display:block}.friend-status{font-size:12px;color:var(--text-muted)}.friend-actions{display:flex;gap:8px;flex-shrink:0}.friend-action-btn{padding:4px 12px;font-size:12px;border-radius:4px;font-weight:500}.friend-action-btn.success{background:var(--success)}.friend-action-btn.success:hover{background:#3ca374}.friend-action-btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.friend-action-btn.danger:hover{background:var(--danger);color:#fff}.requests-section{margin-bottom:24px}.add-friend{max-width:500px}.add-friend h3{margin-bottom:8px}.add-friend-description{color:var(--text-secondary);font-size:14px;margin-bottom:16px}.add-friend-form{display:flex;gap:8px}.add-friend-form input{flex:1}.add-friend-form button{white-space:nowrap}.add-friend-success{margin-top:12px;color:var(--success);font-size:14px}.add-friend-error{margin-top:12px;color:var(--danger);font-size:14px}