:root{--bg:#0f1724;--panel:#0b1220;--accent:#3b82f6;--muted:#94a3b8;--text:#e6eef8}*{box-sizing:border-box}body,html,#root{height:100%;margin:0;background:linear-gradient(180deg,#071022,#07172a);color:var(--text);font-family:Inter,Roboto,Arial,sans-serif}.app-root{height:100vh;display:flex;align-items:center;justify-content:center}.login-screen{display:flex;height:100vh;align-items:center;justify-content:center}.login-box{background:var(--panel);padding:24px;border-radius:8px;width:320px;box-shadow:0 6px 18px #02061799}.login-box h2{margin:0 0 12px}.login-box input{width:100%;padding:10px;margin-bottom:8px;border-radius:6px;border:1px solid rgba(255,255,255,.06);background:#071124;color:var(--text)}.login-box button{width:100%;padding:10px;border-radius:6px;border:none;background:var(--accent);color:#fff}.muted{font-size:12px;color:var(--muted);margin-top:8px}.chat-root{display:flex;height:100vh;width:100vw}.sidebar{width:220px;background:var(--panel);padding:12px;display:flex;flex-direction:column}.main{flex:1;display:flex}.global-chat{flex:1;display:flex;flex-direction:column;background:#ffffff05;padding:12px}.private-area{width:360px;background:#ffffff03;padding:12px}.messages{flex:1;overflow:auto;padding:6px}.message{padding:8px;border-radius:6px;margin-bottom:8px;background:#ffffff05}.message.me{background:linear-gradient(90deg,#0b3b73,#0b5aa1)}.meta{font-size:12px;color:var(--muted);margin-bottom:4px}.text{font-size:14px}.composer{display:flex;padding:8px;border-top:1px solid rgba(255,255,255,.02)}.composer input{flex:1;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,.04);margin-right:8px}.composer button{padding:10px;border-radius:6px;background:var(--accent);border:none;color:#fff}.online-users{flex:1}.online-users ul{list-style:none;padding:0;margin:8px 0}.online-users li{padding:8px;border-radius:6px;margin-bottom:6px;background:#ffffff05;cursor:pointer}.online-users li.me{font-weight:700}.online-users li{display:flex;align-items:center;justify-content:space-between}.online-users .user-name{flex:1}.badge{background:#ef4444;color:#fff;padding:2px 6px;border-radius:999px;font-size:12px;margin-left:8px}.private-chat{display:flex;flex-direction:column;height:100%}.private-chat .messages{flex:1;overflow:auto}.send-row{display:flex;margin-top:8px}.send-row input{flex:1;padding:8px;border-radius:6px;margin-right:8px}.typing{font-size:12px;color:var(--muted);padding:6px}.status{font-size:12px;padding:4px 6px;border-radius:6px}.status.connected{background:#063c14;color:#6ee7b7}.status.disconnected{background:#2b0a0a;color:#fca5a5}.hint{padding:16px;color:var(--muted)}.controls{margin-top:auto}.error{color:#ffb4b4;margin-bottom:8px}