*{box-sizing:border-box}
:root{
  --bg:#07111f;
  --panel:#0f1b2d;
  --line:rgba(255,255,255,.12);
  --text:#e5edf8;
  --muted:#94a3b8;
  --blue:#2563eb;
  --red:#ef4444;
  --green:#22c55e;
}
html,body{height:100%;overflow:hidden;margin:0}
body.guest-body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(145deg,#020617,#07111f 55%,#0f172a);
}
button,input{font:inherit}
button{
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  padding:10px 12px;
  cursor:pointer;
}
button.primary{background:var(--blue);border-color:var(--blue)}
button.danger{background:var(--red);border-color:var(--red)}
button:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(1)}
input{
  min-width:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(0,0,0,.24);
  color:#fff;
  padding:10px 11px;
  outline:none;
}
.guest-shell{
  height:100vh;
  padding:14px;
  display:grid;
  grid-template-rows:46px minmax(0,1fr) 30px;
  gap:10px;
}
.guest-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 4px;
}
.guest-top strong{font-size:18px}
.state-pill{
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  background:rgba(148,163,184,.20);
  color:#dbeafe;
}
.state-pill.live{background:rgba(34,197,94,.20);color:#bbf7d0}
.guest-board{
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.panel{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:38px minmax(0,1fr) auto;
  border:1px solid var(--line);
  background:rgba(15,27,45,.88);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 22px 70px rgba(0,0,0,.30);
}
.return-panel{grid-template-rows:38px minmax(0,1fr)}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border-bottom:1px solid var(--line);
}
.panel-head strong{font-size:14px}
.panel-head span{font-size:11px;color:var(--muted);font-weight:800}
.video-box{
  position:relative;
  min-height:0;
  background:#020617;
  overflow:hidden;
}
.video-box video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#020617;
}
.fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.55);
  font-weight:900;
  letter-spacing:.16em;
  pointer-events:none;
}
.control-grid{
  padding:10px;
  display:grid;
  grid-template-columns:1.15fr 1.15fr repeat(5,auto);
  gap:8px;
}
.mini-status{
  min-height:0;
  overflow:hidden;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#020617;
  color:#bfdbfe;
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
@media(max-width:980px){
  html,body{overflow:auto;height:auto}
  .guest-shell{height:auto;min-height:100vh;grid-template-rows:auto auto auto}
  .guest-board{grid-template-columns:1fr}
  .panel{height:auto;min-height:420px}
  .video-box{aspect-ratio:16/9}
  .control-grid{grid-template-columns:1fr 1fr}
}