:root{--font-family:"Outfit", sans-serif;--bg-primary:#0d0d0d;--bg-secondary:#1a1a1a;--bg-surface:#25292d;--bg-glass:#25292db3;--accent:#e61a1a;--accent-hover:#f48c25;--accent-glow:#e61a1a4d;--text-primary:#f2f2f2;--text-secondary:#abb3ba;--text-muted:#6e7a87;--border:#32383e;--border-glow:#e61a1a33;--danger:#dc2828;--success:#21c45d;--header-h:56px;--bottom-nav-h:60px;--sidebar-w:280px;--channel-w:220px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-tap-highlight-color:transparent;overflow:hidden}#app{width:100%;height:100%;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex}.scrollable{-webkit-overflow-scrolling:touch;flex:1;padding:16px;overflow-y:auto}.scrollable::-webkit-scrollbar{width:4px}.scrollable::-webkit-scrollbar-track{background:0 0}.scrollable::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border)}.layout{flex:1;display:flex;position:relative;overflow:hidden}.sidebar,.channel-list,.main-chat{background:var(--bg-secondary);will-change:transform;flex-direction:column;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0}.sidebar{z-index:30;transform:translate(0)}.channel-list{z-index:20;transform:translate(100%)}.main-chat{z-index:10;transform:translate(100%)}.panel-rooms .sidebar{transform:translate(0)}.panel-rooms .channel-list,.panel-rooms .main-chat{transform:translate(100%)}.panel-channels .sidebar{transform:translate(-100%)}.panel-channels .channel-list{transform:translate(0)}.panel-channels .main-chat{transform:translate(100%)}.panel-chat .sidebar,.panel-chat .channel-list{transform:translate(-100%)}.panel-chat .main-chat{transform:translate(0)}.bottom-nav{height:var(--bottom-nav-h);background:var(--bg-secondary);border-top:1px solid var(--border);flex-shrink:0;justify-content:space-around;align-items:center;display:flex}.bottom-nav button{height:100%;color:var(--text-muted);cursor:pointer;font-size:1.2rem;font-family:var(--font-family);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;transition:color .2s;display:flex}.bottom-nav button span{letter-spacing:.05em;text-transform:uppercase;font-size:.6rem}.bottom-nav button.active{color:var(--accent)}.header{height:var(--header-h);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:0 14px;display:flex}.header-actions{align-items:center;gap:6px;display:flex}.header-actions button,.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:40px;min-height:40px;padding:8px;font-size:1.1rem;transition:color .2s,background .2s;display:flex}.header-actions button:hover,.icon-btn:hover{color:var(--text-primary);background:var(--bg-surface)}.title{color:var(--accent-hover);white-space:nowrap;text-overflow:ellipsis;font-size:1.15rem;font-weight:800;overflow:hidden}.item{cursor:pointer;color:var(--text-secondary);border-radius:10px;align-items:center;min-height:48px;margin-bottom:4px;padding:12px 14px;transition:background .15s,color .15s;display:flex}.item:hover{background:var(--bg-surface);color:var(--text-primary)}.item.active{background:var(--accent);color:#fff;box-shadow:0 4px 14px var(--accent-glow)}.item i{text-align:center;flex-shrink:0;width:18px;margin-right:12px}.message{margin-bottom:18px;animation:.25s ease-out fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.avatar{background:var(--bg-surface);border:1px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;margin-right:10px;font-size:.95rem;font-weight:700;display:flex}.message-content{flex:1;min-width:0}.message-header{flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:3px;display:flex}.username{font-size:.95rem;font-weight:700}.timestamp{color:var(--text-muted);font-size:.75rem}.text{color:#e0e0e0;word-break:break-word;line-height:1.5}.input-area{border-top:1px solid var(--border);padding:10px 12px;padding-bottom:max(10px, env(safe-area-inset-bottom));flex-shrink:0}.input-wrapper{background:var(--bg-surface);border:1px solid var(--border);border-radius:24px;align-items:center;padding:8px 14px;transition:border-color .2s;display:flex}.input-wrapper:focus-within{border-color:var(--accent)}input[type=text],input[type=number],input[type=password],input[type=color]{color:#fff;background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:1rem}input::placeholder{color:var(--text-muted)}.send-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;margin-left:8px;transition:background .2s,transform .15s;display:flex}.send-btn:hover{background:var(--accent-hover)}.send-btn:active{transform:scale(.93)}.section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:8px 0 6px;font-size:.7rem;font-weight:700}.login-container{justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex}.login-card{text-align:center;border-radius:18px;width:100%;max-width:400px;padding:36px 28px}.login-card h2{margin-bottom:8px;font-size:1.9rem;font-weight:800}.login-card p{color:var(--text-secondary);margin-bottom:28px}.form-group{text-align:left;margin-bottom:18px}.form-group label{color:var(--text-secondary);margin-bottom:7px;font-size:.875rem;font-weight:600;display:block}.form-group input[type=text],.form-group input[type=number],.form-group input[type=password]{background:var(--bg-surface);border:1px solid var(--border);color:#fff;border-radius:10px;outline:none;width:100%;padding:12px 14px;font-family:inherit;font-size:1rem;transition:border-color .2s}.form-group input:focus{border-color:var(--accent)}.login-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:6px;padding:14px;font-family:inherit;font-size:1rem;font-weight:700;transition:background .2s}.login-btn:hover{background:var(--accent-hover)}.login-btn:active{filter:brightness(.9)}.small-btn{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:6px 12px;font-family:inherit;font-size:.8rem;font-weight:600;transition:background .2s}.small-btn:hover{background:var(--accent-hover)}.link{color:var(--accent);font-weight:700;text-decoration:none;transition:color .2s}.link:hover{color:var(--accent-hover);text-decoration:underline}.modal{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000e0;justify-content:center;align-items:flex-end;display:none;position:fixed;inset:0}.modal.open{display:flex}.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-bottom:none;border-radius:20px 20px 0 0;flex-direction:column;width:100%;max-width:480px;max-height:90vh;animation:.28s cubic-bezier(.4,0,.2,1) slideUp;display:flex;overflow:hidden}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:18px 20px 14px;display:flex}.modal-header h2{font-size:1.1rem;font-weight:700}.modal-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:1.4rem}.modal-body{-webkit-overflow-scrolling:touch;flex:1;padding:20px;overflow-y:auto}@media (width>=768px){.layout{flex-direction:row;position:static;overflow:visible}.sidebar,.channel-list,.main-chat{flex-shrink:0;transition:none;position:static;transform:none!important}.sidebar{width:var(--sidebar-w);border-right:1px solid var(--border)}.channel-list{width:var(--channel-w);border-right:1px solid var(--border)}.main-chat{flex:1}.bottom-nav{display:none}.modal{align-items:center}.modal-content{border-bottom:1px solid var(--border);border-radius:16px;max-height:80vh}@keyframes slideUp{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}}