* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #111;
  color: #eee;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
h1 { font-size: 1.2rem; margin: 0; }
#status { font-size: .9rem; color: #9ad; }
#join { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; align-items: center; }
#room { flex: 1; min-width: 140px; padding: 10px; border-radius: 8px; border: 1px solid #444; background: #222; color: #eee; font-size: 1rem; }
button { padding: 10px 16px; border: 0; border-radius: 8px; background: #2d6cdf; color: #fff; font-size: 1rem; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.danger { background: #d33; }
#videos { position: relative; flex: 1; background: #000; }
#remote { width: 100%; height: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; }
#local {
  position: absolute; right: 12px; bottom: 12px;
  width: 28%; max-width: 220px; border-radius: 8px; border: 2px solid #333; background: #222;
}
#controls { display: flex; justify-content: center; gap: 10px; padding: 12px; }
button.recording { background: #a11; }
.banner { background: #a11; color: #fff; text-align: center; padding: 8px 16px; font-size: .95rem; }
#recIndicator {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  background: rgba(0,0,0,.6); color: #f55; font-weight: 600; font-size: .9rem;
  padding: 4px 10px; border-radius: 6px; font-variant-numeric: tabular-nums;
}