*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#21262d;--bg-hover:#30363d;--bg-active:#1f6feb22;--border:#30363d;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#484f58;--accent:#58a6ff;--accent-hover:#79c0ff;--danger:#f85149;--success:#3fb950;--code-bg:#1c2128;--radius:8px}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.5}.login-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-form{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:16px;width:360px;padding:40px;display:flex}.login-form h1{text-align:center;color:var(--text-primary);font-size:24px;font-weight:600}.login-form input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;outline:none;padding:10px 12px;font-size:14px;transition:border-color .2s}.login-form input:focus{border-color:var(--accent)}.login-form button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:10px;font-size:14px;font-weight:600;transition:background .2s}.login-form button:hover{background:var(--accent-hover)}.login-form button:disabled{opacity:.6;cursor:not-allowed}.error{border:1px solid var(--danger);color:var(--danger);background:#f8514922;border-radius:6px;padding:8px 12px;font-size:13px}.main-page{height:100vh;display:flex}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border);flex-direction:column;width:320px;min-width:320px;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px;display:flex}.sidebar-header h2{font-size:16px;font-weight:600}.btn-logout{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:4px 12px;font-size:12px;transition:all .2s}.btn-logout:hover{border-color:var(--danger);color:var(--danger)}.content,.channel-list{flex-direction:column;flex:1;display:flex;overflow:hidden}.channel-form{border-bottom:1px solid var(--border);gap:8px;padding:12px 16px;display:flex}.channel-form input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;outline:none;flex:1;padding:6px 10px;font-size:13px}.channel-form input:focus{border-color:var(--accent)}.channel-form button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;width:32px;font-size:18px;transition:background .2s}.channel-form button:hover{background:var(--accent-hover)}.channels{flex:1;overflow-y:auto}.channel-item{cursor:pointer;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 16px;transition:background .15s;display:flex}.channel-item:hover{background:var(--bg-hover)}.channel-item.active{background:var(--bg-active);border-left:3px solid var(--accent)}.channel-info{flex-direction:column;gap:2px;min-width:0;display:flex}.channel-name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.channel-key{color:var(--text-muted);cursor:pointer;font-family:monospace;font-size:11px;transition:color .2s}.channel-key:hover{color:var(--accent)}.btn-delete{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 4px;font-size:18px;transition:color .2s}.btn-delete:hover{color:var(--danger)}.message-list{flex-direction:column;flex:1;font-size:13px;display:flex;overflow-y:auto}.message-header{border-bottom:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;z-index:1;padding:12px 20px;font-size:12px;font-weight:600;display:flex;position:sticky;top:0}.message-row{border-bottom:1px solid var(--border);align-items:flex-start;padding:10px 20px;transition:background .15s;animation:.3s fadeIn;display:flex}.message-row:hover{background:var(--bg-tertiary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.col-source{width:140px;color:var(--accent);flex-shrink:0;font-family:monospace;font-weight:500}.col-message{white-space:pre-wrap;word-break:break-word;min-width:0;color:var(--text-secondary);flex:1}.col-time{text-align:right;width:160px;color:var(--text-muted);flex-shrink:0;font-size:12px}.empty-state{color:var(--text-muted);flex:1;justify-content:center;align-items:center;font-size:15px;display:flex}.loading{color:var(--text-secondary);flex:1;justify-content:center;align-items:center;display:flex}.load-more-sentinel{justify-content:center;align-items:center;min-height:48px;padding:16px;display:flex}.loading-more{color:var(--text-muted);font-size:13px}