:root { --bg:#0f1115; --panel:#1a1d24; --accent:#2f6fed; --danger:#e5484d; --text:#e6e8eb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; align-items:center; gap:12px; padding:12px 20px; background:var(--panel); }
header h1 { font-size:18px; margin:0; }
.status { margin-left:auto; font-size:13px; opacity:.8; }
main { padding:20px; max-width:1100px; margin:0 auto; }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 16px; font-size:15px; cursor:pointer; }
button:hover { filter:brightness(1.1); }
button.danger { background:var(--danger); }
button.active { outline:2px solid #fff; }
a.wa { background:#25d366; color:#fff; text-decoration:none; border-radius:8px; padding:10px 16px; font-size:15px; }
.row { display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
input { flex:1; min-width:220px; padding:10px; border-radius:8px; border:1px solid #333; background:#0c0e12; color:var(--text); }
.hidden { display:none; }
#shareBox { margin-top:16px; padding:16px; background:var(--panel); border-radius:12px; }
.videos { position:relative; background:#000; border-radius:12px; overflow:hidden; aspect-ratio:16/9; }
#remoteVideo { width:100%; height:100%; object-fit:contain; background:#000; }
#localVideo { position:absolute; right:14px; bottom:14px; width:22%; max-width:240px; border-radius:8px; border:2px solid #2a2e37; object-fit:cover; background:#111; }
.controls { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }