:root { --bg:#0f1115; --card:#1a1d24; --accent:#2f81f7; --danger:#e5484d; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:#e6e6e6; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center; -webkit-user-select:none; user-select:none; }

#lobby, #room { width:min(480px, 94vw); background:var(--card); border-radius:16px; padding:24px; text-align:center; }
#room { text-align:left; }
h1 { font-size:2rem; margin-bottom:8px; }
.sub { color:#9aa0aa; margin-bottom:24px; }
input { width:100%; padding:12px; border-radius:10px; border:1px solid #333a45; background:#0f1115; color:#fff; font-size:1rem; margin-bottom:16px; -webkit-appearance:none; appearance:none; }
button { border:none; border-radius:10px; padding:12px 10px; font-size:1rem; background:#2a3040; color:#fff; cursor:pointer; }
button.big { width:100%; background:var(--accent); font-weight:600; }
button:active { opacity:.8; }
button:disabled { opacity:.5; cursor:default; }
.error { color:var(--danger); margin-top:12px; font-size:.9rem; text-align:center; }
.hidden { display:none !important; }

#remoteVideo { width:100%; border-radius:12px; background:#000; aspect-ratio:16/9; object-fit:cover; }
#localVideo { width:120px; border-radius:12px; background:#000; position:absolute; right:16px; bottom:150px; border:2px solid var(--accent); z-index:5; transform:scaleX(-1); }
#callUI { position:relative; }
#toolbar { display:flex; gap:12px; justify-content:center; margin-top:14px; }
#toolbar button { font-size:1.2rem; padding:10px 16px; }
button.danger { background:var(--danger); }

#sidbar { margin-top:14px; display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; }
#startCallBtn { background:var(--accent); font-weight:600; padding:12px 20px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#e5a50a; margin-right:8px; }
.dot.ok { background:#30a46c; }
.dot.bad { background:#e5484d; }
.peer-row { display:flex; align-items:center; font-size:.95rem; color:#9aa0aa; }