body { font-family: Arial, sans-serif; background:#0f1115; color:#e8e8e8; margin:0; }
a { color:#9cc9ff; text-decoration:none; }
.box { max-width:640px; margin:40px auto; padding:20px; background:#171a21; border-radius:12px; }
label { display:block; margin:10px 0 6px; color:#bdbdbd; }
input { width:100%; padding:10px; border-radius:10px; border:1px solid #2b2f3a; background:#0f1115; color:#fff; }
.row { display:flex; gap:10px; margin-top:10px; }
.row input { flex:1; }
button { padding:10px 14px; border-radius:10px; border:1px solid #2b2f3a; background:#242a36; color:#fff; cursor:pointer; }
.list { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.room { padding:12px; border:1px solid #2b2f3a; border-radius:10px; background:#0f1115; }
.muted { color:#9aa0aa; }

.layout { display:flex; height:100vh; }
.main { flex:1; display:flex; flex-direction:column; }
.side { width:260px; border-left:1px solid #2b2f3a; background:#12151c; padding:12px; }
.top { padding:12px; border-bottom:1px solid #2b2f3a; display:flex; gap:12px; align-items:center; }
.messages { flex:1; overflow:auto; padding:12px; }
.msg { margin-bottom:10px; }
.nick { color:#9cc9ff; font-weight:bold; margin-right:6px; }
.text { color:#e8e8e8; }
.composer { display:flex; gap:10px; padding:12px; border-top:1px solid #2b2f3a; }
.composer input { flex:1; }
.sidehead { font-weight:bold; margin-bottom:8px; }
.online { overflow:auto; height:calc(100vh - 60px); }
.u { padding:6px 0; border-bottom:1px dashed #2b2f3a; color:#cfd3db; }