*{box-sizing:border-box}
:root{
  --bg:#0b1020; --panel:#111933cc; --ink:#e5e7eb; --muted:#9ca3af;
  --accent:#7dd3fc; --bad:#f87171; --good:#34d399;
}
html,body{height:100%}
body{margin:0;font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans;
  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%);
}

/* HUD */
.hud{position:sticky; top:0; display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; backdrop-filter: blur(6px); background:linear-gradient(180deg, #0b1020bb 0, #0b102000 100%); z-index:10}
.hud .title{font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:.6rem}
.hud .right{margin-left:auto}
.btn{appearance:none; border:1px solid #ffffff22; color:var(--ink); background:var(--panel); padding:.5rem .8rem; border-radius:.7rem; cursor:pointer}
.btn.primary{background: linear-gradient(180deg, #0e2741cc, #0d1f36cc); border-color:#5eead41a; box-shadow:0 0 0 1px #6ee7b7aa inset}
.layout{display:grid; grid-template-columns: 320px 1fr; gap:1rem; padding:1rem; max-width:1200px; margin:0 auto}
.sidebar{background:var(--panel); border:1px solid #ffffff22; border-radius:.8rem; padding:.8rem; display:flex; flex-direction:column; gap:.6rem; min-height:65vh}
.sidebar .row{display:flex; gap:.5rem}
.rooms{flex:1; overflow:auto; border:1px dashed #ffffff22; border-radius:.6rem; padding:.5rem; display:flex; flex-direction:column; gap:.4rem}
.room{display:flex; justify-content:space-between; align-items:center; padding:.45rem .6rem; border-radius:.5rem; background:#0f1a30; border:1px solid #ffffff1a}
.room .code{font-weight:700; letter-spacing:.08em}
.room .pill{font-size:.75rem; padding:.1rem .4rem; border-radius:.4rem; border:1px solid #ffffff22; color:#b3e1ff; background:#0b345533}

.chat{background:var(--panel); border:1px solid #ffffff22; border-radius:.8rem; padding:.8rem; min-height:65vh; display:flex; flex-direction:column}
.status{display:flex; justify-content:space-between; margin-bottom:.5rem; opacity:.9}
.messages{flex:1; overflow:auto; border:1px dashed #ffffff22; border-radius:.6rem; padding:.6rem; display:flex; flex-direction:column; gap:.45rem; background:#0d162a}
.msg{max-width:70%; padding:.45rem .6rem; border-radius:.7rem; background:#0f223d; border:1px solid #ffffff1a}
.msg.me{margin-left:auto; background:#123152; box-shadow:0 0 0 1px #6ee7b744 inset}
.msg .meta{font-size:.75rem; color:#94a3b8; margin-bottom:.2rem}
.composer{display:flex; gap:.5rem; margin-top:.6rem}
.composer input{flex:1; border:1px solid #ffffff22; border-radius:.6rem; background:#0a1426; padding:.55rem .7rem; color:var(--ink)}
.foot{opacity:.7; text-align:center; padding:1rem}
@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:.8rem}
  .sidebar{order:2}
}