:root{
  --bg:#0b0c10; --surface:#111217; --muted:#191b22; --text:#e6e7ea; --sub:#a7aab3; --accent:#6ea8fe;
  --radius:16px;
}
*{ box-sizing:border-box; }
body{
  margin:0; font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg); color:var(--text);
}
.bar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px; background:var(--surface); border-bottom:1px solid #1b1d24;
}
.left,.right{ display:flex; gap:8px; align-items:center; }
button{
  border-radius:10px; border:1px solid #293042; background:#161b25; color:var(--text);
  padding:8px 10px; font:inherit; cursor:pointer;
}
button:disabled{ opacity:.5; cursor:not-allowed; }
.pill{ padding:6px 10px; border-radius:999px; border:1px solid #293042; background:#151b25; color:#cfd3dc; }
.dot{ width:10px; height:10px; border-radius:50%; background:#f44; display:inline-block; }
.dot.yellow{ background:#ffb020; } .dot.green{ background:#3ddc97; }

.grid{
  display:grid; gap:12px; padding:12px;
  grid-template-columns: 1fr 1fr;
}
.card{
  background:var(--surface); border:1px solid #1b1d24; border-radius:var(--radius); padding:10px;
}
.card.full{
  grid-column: 1 / -1;
}
.cardbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
video{
  width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; object-fit:cover;
}
.blurred{ filter: blur(16px); }

.chatlog{
  min-height:120px; max-height:220px; overflow:auto; background:#0e1218; border:1px solid #1b1d24; border-radius:10px; padding:8px;
}
.chatbar{ display:flex; gap:8px; margin-top:8px; }
.chatbar input{ flex:1; border-radius:10px; border:1px solid #263048; background:#141a26; color:var(--text); padding:8px 10px; }

#mobileOverlay{
  position:fixed; inset:0; display:none; align-items:flex-end; justify-content:center;
  pointer-events:none; z-index:5;
}
#mobileOverlay .hint{
  margin-bottom:28px; padding:12px 16px; border-radius:20px; background:rgba(0,0,0,.5); border:1px solid #1b1d24;
}
@media (max-width: 880px){
  .grid{ grid-template-columns: 1fr; }
  #mobileOverlay{ display:flex; }
}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:16px;
}
.modal{
  width:min(720px, 100%); background:var(--surface);
  border:1px solid #1b1d24; border-radius:16px; padding:16px; display:grid; gap:12px;
}
.row{ display:flex; gap:10px; align-items:center; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.actions{ display:flex; justify-content:flex-end; gap:8px; }
.primary{ padding:10px 14px; border-radius:10px; border:1px solid #293042; background:#1a2742; color:#e6e7ea; cursor:pointer; }

[aria-hidden="true"].modal-backdrop{ display:none; }