html, body { margin: 0; height: 100%; background: #0b0d10; color: #e8eaed; overflow: hidden;
  font-family: "Samsung One", Roboto, Arial, sans-serif; }
#grid { position: absolute; inset: 0 0 7vh 0; display: grid; gap: 0.5vw; padding: 0.5vw; box-sizing: border-box; }
.tile { position: relative; background: #1c2027; border-radius: 0.5vw; overflow: hidden; min-height: 0; }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.tile.local video { transform: scaleX(-1); }
.tile.nocam::after { content: "camera off"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 2vw; color: #8a919c; }
.tile .name { position: absolute; left: 0.6vw; bottom: 0.6vw; z-index: 2; background: rgba(0,0,0,.65);
  padding: 0.3vw 0.7vw; border-radius: 0.3vw; font-size: 1.3vw; }
.tile.local { outline: 0.2vw solid #3d7bfd; outline-offset: -0.2vw; }
#stats { position: absolute; top: 0.6vw; right: 0.6vw; z-index: 5; margin: 0; max-width: 46vw;
  background: rgba(0,0,0,.72); padding: 0.6vw; font: 0.9vw/1.3 monospace; white-space: pre-wrap; }
#log { position: absolute; right: 0.6vw; bottom: 8vh; z-index: 5; margin: 0; width: 46vw; max-height: 30vh;
  overflow: hidden; background: rgba(0,0,0,.6); padding: 0.5vw; font: 0.8vw/1.3 monospace; color: #b8c1cc;
  white-space: pre-wrap; }
#banner { display: none; position: absolute; top: 0.6vw; left: 0.6vw; z-index: 6; max-width: 50vw;
  padding: 0.6vw 1vw; border-radius: 0.4vw; font-size: 1.2vw; }
#banner.show { display: block; background: #2a3b5c; }
#banner.show.error { background: #7a1f1f; }
#controls { position: absolute; left: 0; right: 0; bottom: 0; height: 7vh; display: flex; gap: 1vw;
  align-items: center; justify-content: center; background: #12151a; }
#controls button { font-size: 1.3vw; padding: 0.5vw 1.4vw; border-radius: 0.4vw; border: 0.2vw solid #39404b;
  background: #232831; color: #e8eaed; outline: none; }
#controls button.focused { border-color: #ffd23f; background: #3a4150; }