* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; color: #fff; font-family: sans-serif; height: 100vh; overflow: hidden; }
#video { width: 100%; height: 100vh; }
#video .vjs-tech { object-fit: cover; }
.status {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  z-index: 10;
  transition: background 0.3s;
}
.status.live { background: #e53935; }
.status.offline { background: #555; }
.fullscreen {
  position: fixed;
  right: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.85);
  color: #111;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  z-index: 10;
}
#qr {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
#qr canvas, #qr img {
  max-width: min(320px, 80vw);
  max-height: min(320px, 80vh);
  border-radius: 8px;
  display: block;
}
@media (max-width: 768px) {
  #qr canvas, #qr img {
    max-width: 80vmin;
    max-height: 80vmin;
  }
}