*{box-sizing:border-box}
:root{
  --bg:#0b1020; --panel:#111933cc; --ink:#e5e7eb;
  --accent:#7dd3fc; --muted:#9ca3af; --good:#34d399; --bad:#f87171;
}
html,body{height:100%}
body{margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto; color:var(--ink);
  background: radial-gradient(1200px 800px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%),
              radial-gradient(800px 600px at 80% 80%, #0c1228 0%, #0b1020 60%, #070a16 100%);
}
.app{display:grid; grid-template-columns:320px 1fr; height:100%}
.sidebar{background:var(--panel); border-right:1px solid #ffffff1a; display:flex; flex-direction:column}
.sidebar-header{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid #ffffff1a}
.sidebar-header h1{margin:0; font-size:1.1rem}
.sidebar-header .actions button{margin-left:.5rem; background:#0e1a30; color:#a5d9ff; border:1px solid #ffffff22; border-radius:.4rem; padding:.35rem .6rem; cursor:pointer}
.rooms{flex:1; overflow:auto; padding:.5rem}
.room{display:flex; justify-content:space-between; align-items:center; background:#0c172c; border:1px solid #ffffff12; border-radius:.6rem; padding:.6rem .8rem; margin:.5rem 0}
.room .meta{display:flex; gap:.6rem; align-items:center}
.room .id{color:#bfe1ff}
.room .cnt{color:#9fb4ff}
.room .join{background:#0e1f36; color:#bfe1ff; border:1px solid #ffffff22; border-radius:.4rem; padding:.3rem .6rem; cursor:pointer}
.main{display:grid; grid-template-rows:auto 1fr auto; height:100%}
.statusbar{display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-bottom:1px solid #ffffff1a; background:linear-gradient(180deg,#0b1020cc,#0b102000)}
.dot{width:10px; height:10px; border-radius:50%}
.dot.red{background:#f87171} .dot.green{background:#34d399}
.sep{opacity:.6}
.chat{display:grid; grid-template-rows:1fr auto; height:100%}
.messages{padding:1rem; overflow:auto; display:flex; flex-direction:column; gap:.5rem}
.msg{max-width:80%; padding:.5rem .7rem; border-radius:.8rem; background:#0e1a30; border:1px solid #ffffff1a}
.msg.mine{margin-left:auto; background:#14253f; border-color:#6ee7b7aa}
.msg .meta{font-size:.75rem; color:#9fb4ff; margin-bottom:.2rem}
.composer{display:flex; gap:.5rem; padding:.6rem 1rem; border-top:1px solid #ffffff1a; background:#0b1328bb}
.composer input{flex:1; background:#0a1628; border:1px solid #ffffff22; border-radius:.5rem; color:var(--ink); padding:.5rem .7rem}
.composer button{background:#0e1a30; color:#bfe1ff; border:1px solid #ffffff22; border-radius:.5rem; padding:.45rem .7rem; cursor:pointer}
.footer{display:flex; gap:.6rem; align-items:center; padding:.6rem 1rem; border-top:1px solid #ffffff1a; background:#0b1328bb}
.footer button, .footer a{background:#0e1a30; color:#bfe1ff; border:1px solid #ffffff22; border-radius:.5rem; padding:.45rem .7rem; text-decoration:none}
.gate{position:absolute; inset:0; display:grid; place-items:center; background:#0008}
.gate .card{background:#0d1a30; border:1px solid #ffffff22; border-radius:1rem; padding:1rem 1.2rem; min-width:min(92vw, 520px); text-align:center; box-shadow:0 30px 80px #000a}
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .sidebar{order:2; height:38vh}
  .main{order:1; height:62vh}
}