:root{font-family:system-ui,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:#0b0f16;color:#e7eefc}button,input{font:inherit}.page{min-height:100vh;padding:24px}.center{display:flex;align-items:center;justify-content:center}.card{width:380px;background:#111827;border:1px solid #243044;border-radius:14px;padding:18px}.title{font-size:20px;font-weight:700;margin-bottom:6px}.muted{opacity:.75}.small{font-size:12px;margin-top:10px}.authTabs{display:flex;gap:8px;margin:8px 0 4px}.tabBtn{flex:1;padding:8px 10px;border-radius:10px;border:1px solid #2b3a55;background:#0b1220;color:#e7eefc;cursor:pointer}.tabBtn.active{border-color:#2563eb;background:#0f1729}.error{color:#f87171;font-size:13px;margin-top:10px}.success{color:#86efac;font-size:13px;margin-top:10px}.input{width:100%;background:#0b1220;color:#e7eefc;border:1px solid #26334a;border-radius:10px;padding:10px 12px;margin-top:10px}.btn{background:#2563eb;color:#fff;border:0;border-radius:10px;padding:10px 12px;cursor:pointer}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.danger{background:#dc2626}.btn.small{padding:6px 10px;font-size:13px;margin:0}.grow{flex:1;margin:0}.layout{display:flex;height:100vh}.col{display:flex;flex-direction:column;border-right:1px solid #243044}.servers{width:90px;background:#0a0f19}.channels{width:240px;background:#0c1321}.chat{flex:1;background:#0b0f16;border-right:0}.colHeader{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid #243044}.colTitle{font-weight:700}.iconBtn{width:30px;height:30px;border-radius:10px;border:1px solid #2b3a55;background:#0b1220;color:#e7eefc;cursor:pointer}.list{padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto}.item{width:60px;height:60px;border-radius:18px;border:1px solid #2b3a55;background:#0b1220;color:#e7eefc;cursor:pointer}.item.active{outline:2px solid #2563eb}.channelRow{display:flex;align-items:center;gap:4px}.row{flex:1;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:#e7eefc;cursor:pointer}.row:hover{background:#0b1220;border-color:#26334a}.row.active{background:#0b1220;border-color:#2563eb}.channelActions{display:flex;gap:2px}.channelActionBtn{width:24px;height:24px;border-radius:6px;border:1px solid #2b3a55;background:#0b1220;color:#e7eefc;cursor:pointer;font-size:14px;padding:0;display:flex;align-items:center;justify-content:center}.channelActionBtn:hover{background:#0f1729;border-color:#2563eb}.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #243044}.channelName{font-weight:800}.me{opacity:.85;font-size:13px;display:flex;align-items:center;gap:8px}.ghostBtn{padding:6px 10px;border-radius:10px;border:1px solid #2b3a55;background:#0b1220;color:#e7eefc;cursor:pointer}.chatBody{display:flex;flex:1;overflow:hidden}.messagesContainer{display:flex;flex-direction:column;flex:1;overflow:hidden}.messages{flex:1;overflow:auto;padding:14px}.msg{padding:10px 12px;border-radius:12px;border:1px solid #1c2638;background:#0c1321;margin-bottom:10px}.msgHead{display:flex;gap:10px;align-items:baseline}.user{font-weight:800}.time{font-size:12px;opacity:.7}.content{margin-top:6px;white-space:pre-wrap;word-break:break-word}.sidebar{width:280px;border-left:1px solid #243044;padding:12px;overflow:auto;background:#0a0f19}.sideTitle{font-weight:800;margin-top:8px;margin-bottom:6px}.sideList{display:flex;flex-wrap:wrap;gap:6px}.pill{padding:6px 8px;border-radius:999px;background:#0b1220;border:1px solid #26334a;font-size:12px}.composer{display:flex;gap:10px;padding:12px;border-top:1px solid #243044}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-overlay+.modal-overlay{z-index:1010}.modal-overlay+.modal-overlay+.modal-overlay{z-index:1020}.modal-content{background:#111827;border:1px solid #243044;border-radius:14px;width:90%;max-width:480px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid #243044}.modal-title{font-size:18px;font-weight:700}.modal-close{background:none;border:none;color:#e7eefc;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.modal-body{padding:18px}.form-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #243044}.form-section:last-of-type{border-bottom:none}.form-label{font-weight:700;margin-bottom:8px;display:block}.form-label.danger{color:#f87171}.form-note{font-size:12px;opacity:.7;margin-top:6px}.serverList{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}.serverItem{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;background:#0c1321;border:1px solid #243044}.serverInfo{flex:1}.serverName{font-weight:700;margin-bottom:4px}.serverMeta{font-size:12px;opacity:.7}.serverItemContainer{position:relative;display:flex;align-items:center;gap:8px;padding:0}.serverItemContainer .item{position:relative;flex:1;width:60px;height:60px;margin:0}.settingsBtn{position:absolute;top:2px;right:2px;width:20px;height:20px;background:#0b1220e6;border:none;color:#e7eefc;cursor:pointer;font-size:12px;padding:2px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:10}.settingsBtn:hover{background:#0b1220;border:1px solid #2b3a55}.serverSettingsPopup{position:absolute;top:65px;right:-10px;background:#111827;border:1px solid #243044;border-radius:8px;box-shadow:0 4px 12px #00000080;z-index:100;min-width:140px}.serverSettingsPopup button{width:100%;text-align:left;padding:10px 12px;border:none;background:none;color:#e7eefc;cursor:pointer;font-size:14px}.serverSettingsPopup button:hover{background:#0b1220}.serverSettingsPopup button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.serverSettingsPopup button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.serverSettingsPopup button.danger{color:#f87171}.serverBadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;background:#f87171;color:#fff;font-size:12px;font-weight:700;margin-left:auto}.channelBadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;background:#f87171;color:#fff;font-size:11px;font-weight:700;margin-left:4px;flex-shrink:0}.colorPicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.colorOption{width:52px;height:52px;border:3px solid transparent;cursor:pointer;transition:all .2s}.colorOption:hover{transform:scale(1.1)}.colorOption.selected{border-color:#e7eefc;box-shadow:0 0 10px #e7eefc80}.memberList{display:flex;flex-direction:column;gap:6px;margin-top:6px}.memberRow{display:flex;align-items:center;justify-content:space-between;background:#0b1220;border:1px solid #243044;border-radius:8px;padding:8px 10px}.memberRowContainer{display:flex;flex-direction:column;gap:0;background:#0b1220;border:1px solid #243044;border-radius:8px;overflow:hidden}.memberRowBtn{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:transparent;border:none;color:#e7eefc;cursor:pointer;font-size:14px;text-align:left;flex:1}.memberRowBtn:hover{background:#0f1729}.memberDropdownArrow{display:inline-flex;align-items:center;justify-content:center;font-size:12px;opacity:.7;margin-left:8px}.memberDropdown{background:#0c1321;border-top:1px solid #243044;padding:8px 10px;font-size:12px;color:#b0bcc4}.memberInfo{padding:4px 0}.memberName{font-weight:600}.kickBtn{background:#dc2626;border:none;color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px}.kickBtn:hover{filter:brightness(.95)}.serverNameHeader{font-weight:800;font-size:14px;padding:6px 0;color:#e7eefc}.channelDivider{height:1px;background:#243044;margin-bottom:8px}.channelHeaderRow{display:flex;align-items:center;justify-content:space-between}.channelHeader{display:flex;flex-direction:column;gap:6px}.serverSettingsName{font-weight:700;padding:6px 0}.customColorInput{width:100%;height:48px;border:1px solid #26334a;border-radius:10px;background:#0b1220;cursor:pointer;margin-top:10px}