:root{--bg:#1a1d21;--bg-elevated:#222529;--bg-sidebar:#15171a;--border:#2c2f33;--text:#e8e8e8;--text-muted:#9aa0a6;--accent:#5865f2;--accent-hover:#4752c4;--danger:#f04747;--chip:#2c2f33;--chip-mine:#3b3f8a;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}button{cursor:pointer;font-family:inherit}a{color:var(--accent)}input,textarea{font-family:inherit;font-size:1rem}code{background:var(--bg-sidebar);border-radius:4px;padding:1px 5px;font-family:ui-monospace,Consolas,monospace;font-size:.9em}.auth-screen{place-items:center;height:100%;padding:24px;display:grid}.auth-card{background:var(--bg-elevated);border:1px solid var(--border);text-align:center;border-radius:12px;width:100%;max-width:380px;padding:32px}.auth-card h1{margin:0 0 8px;font-size:1.6rem}.auth-card p{color:var(--text-muted);margin:0 0 20px}.auth-card form{flex-direction:column;gap:12px;display:flex}.auth-card input{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:12px 14px}.auth-card button[type=submit],.auth-card button:not(.link-button){background:var(--accent);color:#fff;border:none;border-radius:8px;padding:12px 14px;font-weight:600}.auth-card button:hover:not(:disabled){background:var(--accent-hover)}.auth-card button:disabled{opacity:.6;cursor:default}.auth-error{color:var(--danger);margin-top:12px!important}.link-button{color:var(--accent);background:0 0;border:none;padding:0;font-size:.95rem}.auth-back{text-align:center;margin-top:16px}.app{flex-direction:column;height:100%;display:flex}.app-header{border-bottom:1px solid var(--border);background:var(--bg-sidebar);flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 16px;display:flex}.app-header-left{align-items:center;gap:8px;min-width:0;display:flex}.app-title{font-weight:700}.sidebar-toggle{color:var(--text);background:0 0;border:none;border-radius:6px;padding:6px 8px;font-size:1.2rem;line-height:1;display:none}.sidebar-toggle:hover{background:var(--bg-elevated)}.app-user{color:var(--text-muted);align-items:center;gap:12px;font-size:.85rem;display:flex}.app-identity{color:var(--text);font:inherit;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;border-radius:6px;max-width:220px;padding:4px 8px;overflow:hidden}.app-identity:hover{background:var(--bg-elevated)}.header-login{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:6px 14px;font-size:.85rem;font-weight:600}.header-login:hover{background:var(--accent-hover)}.modal-overlay{z-index:50;background:#00000080;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;width:100%;max-width:400px;padding:24px}.modal-card h2{margin:0 0 8px}.modal-card p{color:var(--text-muted);margin:0 0 16px}.modal-card form{flex-direction:column;gap:8px;display:flex}.modal-card input{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:10px 12px}.field-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.72rem}.field-hint{color:var(--text-muted);font-size:.8rem;margin:4px 0 0!important}.modal-actions{justify-content:flex-end;align-items:center;gap:12px;margin-top:12px;display:flex}.modal-actions button[type=submit]{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-weight:600}.modal-actions button[type=submit]:hover:not(:disabled){background:var(--accent-hover)}.modal-actions button[type=submit]:disabled{opacity:.6;cursor:default}.app-body{flex:1;min-height:0;display:flex}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);flex-shrink:0;width:220px;padding:12px 8px;overflow-y:auto}.sidebar-heading{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:4px;padding:4px 8px;font-size:.7rem}.sidebar ul{margin:0;padding:0;list-style:none}.channel-item{text-align:left;width:100%;color:var(--text-muted);background:0 0;border:none;border-radius:6px;align-items:center;gap:4px;padding:6px 8px;font-size:.95rem;display:flex}.channel-item:hover{background:var(--bg-elevated);color:var(--text)}.channel-item.active{background:var(--accent);color:#fff}.channel-hash{opacity:.6}.sidebar-online{margin-top:16px}.online-item{color:var(--text-muted);align-items:center;gap:6px;padding:4px 8px;font-size:.9rem;display:flex}.online-dot{background:#3ba55d;border-radius:50%;flex-shrink:0;width:8px;height:8px}.app-content{flex:1;min-width:0;display:flex}.channel-view{flex-direction:column;flex:1;min-width:0;display:flex}.channel-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:4px;height:48px;padding:0 16px;font-weight:600;display:flex}.channel-main{flex:1;min-height:0;display:flex}.channel-stream{flex-direction:column;flex:1;min-width:0;display:flex}.channel-scroll{flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.message-list{flex-direction:column;flex:1;gap:4px;padding:16px;display:flex}.message-list.empty{color:var(--text-muted);text-align:center;justify-content:center;align-items:center}.message{border-radius:6px;padding:6px 8px}.message:hover{background:var(--bg-elevated)}.message-head{align-items:baseline;gap:8px;display:flex}.message-author{font-weight:600}.message-time{color:var(--text-muted);font-size:.72rem}.message-body{white-space:pre-wrap;word-break:break-word}.thread-link{color:var(--accent);background:0 0;border:none;margin-top:2px;padding:2px 0;font-size:.8rem}.typing-indicator{min-height:18px;color:var(--text-muted);padding:0 16px 2px;font-size:.8rem;font-style:italic}.message-delete{color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;margin-left:auto;padding:0 2px;font-size:.72rem}.message:hover .message-delete{opacity:1}.message-delete:hover{color:#ef4444;text-decoration:underline}.users-card{max-width:440px}.users-list{max-height:50vh;margin:0 0 4px;padding:0;list-style:none;overflow-y:auto}.users-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:8px 4px;display:flex}.users-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.users-tag{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.7rem}.users-tag-blocked{color:#ef4444}.composer{border-top:1px solid var(--border);flex-wrap:wrap;align-items:flex-end;gap:8px;padding:12px 16px;display:flex}.composer textarea{resize:none;border:1px solid var(--border);background:var(--bg-elevated);min-height:40px;max-height:160px;color:var(--text);border-radius:8px;flex:1;padding:10px 12px}.composer button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-weight:600}.composer button:disabled{opacity:.5;cursor:default}.composer-error{color:var(--danger);width:100%;margin:0;font-size:.82rem}.emoji-add{display:inline-flex;position:relative}.emoji-button{border:1px solid var(--border);background:var(--bg-elevated);border-radius:8px;padding:10px 12px;font-size:1.1rem;line-height:1}.emoji-picker{background:var(--bg-elevated);border:1px solid var(--border);z-index:10;border-radius:8px;grid-template-columns:repeat(8,1fr);gap:2px;padding:4px;display:grid;position:absolute;bottom:48px;right:0}.emoji-picker button{background:0 0;border:none;border-radius:4px;padding:4px;font-size:1.1rem}.emoji-picker button:hover{background:var(--chip)}.login-cta{border-top:1px solid var(--border);color:var(--text-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:14px 16px;font-size:.9rem;display:flex}.login-cta button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:600}.login-cta button:hover{background:var(--accent-hover)}.thread-panel{border-left:1px solid var(--border);background:var(--bg);flex-direction:column;flex-shrink:0;width:360px;min-height:0;display:flex}.thread-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:48px;padding:0 16px;font-weight:600;display:flex}.thread-parent{border-bottom:1px solid var(--border);padding:8px}.thread-replies{flex:1;padding:8px;overflow-y:auto}.reaction-bar{flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;display:flex}.reaction-chip{background:var(--chip);border:1px solid var(--border);color:var(--text);border-radius:12px;align-items:center;gap:4px;padding:1px 8px;font-size:.85rem;line-height:1.6;display:inline-flex}.reaction-chip.mine{background:var(--chip-mine);border-color:var(--accent)}.reaction-chip.add{color:var(--text-muted);padding:1px 8px}.reaction-chip.static{cursor:default}.reaction-count{color:var(--text-muted);font-size:.75rem}.reaction-chip.mine .reaction-count{color:#cdd2ff}.reaction-add{display:inline-flex;position:relative}.reaction-picker{background:var(--bg-elevated);border:1px solid var(--border);z-index:10;border-radius:8px;gap:2px;padding:4px;display:flex;position:absolute;bottom:28px;left:0}.reaction-picker button{background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:1.1rem}.reaction-picker button:hover{background:var(--chip)}.welcome-banner{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;padding:20px 24px}.welcome-banner h2{margin:0 0 8px}.welcome-banner ul{margin:8px 0;padding-left:20px}.welcome-banner li{margin:4px 0}.welcome-source{color:var(--text-muted);margin-top:12px;font-size:.9rem}.app-footer{text-align:center;border-top:1px solid var(--border);color:var(--text-muted);background:var(--bg-sidebar);flex-shrink:0;padding:8px;font-size:.8rem}.app-footer a{text-decoration:none}.app-footer a:hover{text-decoration:underline}.sidebar-backdrop{display:none}@media (width<=640px){.sidebar-toggle{align-items:center;display:inline-flex}.sidebar{z-index:40;border-right:1px solid var(--border);width:78%;max-width:280px;transition:transform .2s;position:fixed;top:52px;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-backdrop{z-index:30;background:#00000080;display:block;position:fixed;inset:52px 0 0}.app-header{padding:0 10px}.app-identity{max-width:130px}.message-list{padding:12px}.channel-header{padding:0 12px}.composer{padding:10px 12px}.welcome-banner{padding:12px 14px}.welcome-banner h2{font-size:1.1rem}.welcome-banner ul{margin:6px 0;padding-left:18px}.thread-panel{z-index:45;background:var(--bg);width:100%;position:fixed;inset:0}}