body{margin:0}.screen{box-sizing:border-box;color:#fff;background-color:#222;width:100vw;height:100vh;padding:16px}.cursorPtr:hover{cursor:pointer}.modal-container{z-index:99999;background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal{z-index:100000;color:#fff;background-color:#333;flex-direction:column;padding:8px;display:flex;position:fixed}.app-shell{height:100vh;padding:0;display:flex}.sidebar-left{background-color:#1a1a1a;border-right:1px solid #333;flex-direction:column;width:240px;min-width:240px;display:flex;overflow-y:auto}.sidebar-left-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:12px;font-weight:700;display:flex}.community-item{cursor:pointer;border-bottom:1px solid #2a2a2a;padding:10px 12px}.community-item:hover{background-color:#2a2a2a}.community-item.selected{background-color:#333}.main-content{flex-direction:column;flex:1;min-width:0;display:flex}.main-content-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.community-body{flex:1;display:flex;overflow:hidden}.channel-panel{background-color:#1e1e1e;border-right:1px solid #333;flex-direction:column;width:200px;min-width:200px;display:flex;overflow-y:auto}.channel-panel-header{text-transform:uppercase;color:#999;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:10px 12px;font-size:.85em;display:flex}.channel-item{cursor:pointer;align-items:center;gap:6px;padding:6px 12px;font-size:.95em;display:flex}.channel-item:hover{background-color:#2a2a2a}.channel-item.selected{background-color:#333}.channel-item .lock-icon{color:#888;font-size:.8em}.channel-item .join-btn{color:#fff;cursor:pointer;background:#444;border:none;border-radius:3px;margin-left:auto;padding:2px 8px;font-size:.75em}.channel-item .join-btn:hover{background:#555}.channel-view{color:#888;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.sidebar-right{background-color:#1a1a1a;border-left:1px solid #333;width:220px;min-width:220px;overflow-y:auto}.sidebar-right-header{text-transform:uppercase;color:#999;border-bottom:1px solid #333;padding:10px 12px;font-size:.85em}.member-item{align-items:center;gap:8px;padding:6px 12px;font-size:.9em;display:flex}.member-avatar{background-color:#444;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.7em;display:flex;position:relative}.presence-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block}.presence-dot.online{background-color:#43b581}.presence-dot.idle{background-color:#faa61a}.presence-dot.away{background-color:#f04747}.presence-dot.offline{background-color:#636b75}.role-badge{background-color:#444;border-radius:3px;margin-left:auto;padding:1px 5px;font-size:.7em}.btn-small{color:#fff;cursor:pointer;background:#5865f2;border:none;border-radius:3px;padding:4px 12px;font-size:.85em}.btn-small:hover{background:#4752c4}.btn-danger{background:#f04747}.btn-danger:hover{background:#d43b3b}.input-field{color:#fff;box-sizing:border-box;background-color:#2a2a2a;border:1px solid #444;border-radius:3px;width:100%;padding:8px;font-size:.9em}.input-field:focus{border-color:#5865f2;outline:none}.form-group{margin-bottom:12px}.form-group label{color:#999;margin-bottom:4px;font-size:.85em;display:block}.checkbox-group{align-items:center;gap:8px;display:flex}.placeholder-text{color:#666;font-style:italic}