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

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  background:linear-gradient(180deg,#0b1020bb 0,#0b102000 100%);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #ffffff12;
}
.brand{display:flex; gap:.55rem; align-items:center; margin:0; font-size:1.1rem}
.endpoints{font-size:.9rem; color:#bcd7ff99}

.layout{
  display:grid; gap:1rem;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px; margin: 1rem auto; padding: 0 1rem;
}
.panel{
  background:linear-gradient(180deg, var(--card), #0c1428);
  border:1px solid #ffffff1a;
  border-radius:14px;
  box-shadow: 0 10px 30px #0008, inset 0 0 0 1px #0006;
  padding: .9rem;
  min-height: 420px;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem}
.panel h2{margin:0; font-size:1.05rem}
.actions{display:flex; gap:.5rem; align-items:center}

.btn{
  appearance:none; cursor:pointer;
  border:1px solid #ffffff22; color:var(--ink); background:var(--panel);
  padding:.5rem .8rem; border-radius:.6rem;
  box-shadow: 0 6px 18px #0005 inset, 0 0 0 1px #0006;
  transition: transform .1s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn.primary{ background: linear-gradient(180deg, #0e2741cc, #0d1f36cc); border-color:#5eead41a; box-shadow:0 0 0 1px #6ee7b7aa inset, 0 10px 30px #0008 }

.small{font-size:.9rem}
.muted{color:#bcd7ff99}

.input{
  width:100%; padding:.55rem .7rem; border-radius:.5rem;
  border:1px solid #ffffff26; background:#0a1628; color:var(--ink);
  outline:none;
}

.join-inline{display:flex; gap:.5rem; align-items:center; margin:.6rem 0}
.room-url{margin:.4rem 0 .2rem}

.rooms-list{display:grid; gap:.5rem; margin-top:.5rem}
.room-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:.55rem .7rem; border-radius:.6rem;
  background:#0a1628; border:1px solid #ffffff1a;
}
.room-item .id{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.presence{display:flex; gap:.5rem; align-items:center}
.dot{width:10px; height:10px; border-radius:50%; background:#7f8ea3; box-shadow:0 0 8px #7f8ea3}
.dot.on{background:var(--good); box-shadow:0 0 10px var(--good)}
.dot.off{background:#7f8ea3}
.status{padding:.4rem .6rem; background:#0a1628; border:1px solid #ffffff1a; border-radius:.6rem}

.chat{display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem}
.chat-log{
  background:#0a1628; border:1px solid #ffffff1a; border-radius:.6rem;
  min-height:260px; max-height:420px; overflow:auto; padding:.6rem;
}
.msg{margin:.35rem 0; line-height:1.25}
.msg .meta{font-size:.78rem; color:#9fb4ff}
.msg .bubble{display:inline-block; margin-top:.15rem; padding:.4rem .6rem; border-radius:.6rem; background:#0e1a30; border:1px solid #ffffff1a}
.msg.me .bubble{background:#0e2741}
.chat-form{display:flex; gap:.5rem}

.foot{max-width:1200px; margin:1rem auto; padding:0 1rem 1.2rem; text-align:center}

@media (max-width: 880px){
  .layout{ grid-template-columns:1fr; }
}