:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07090f;
  color: #f5f7ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% 0%, #1b2551 0, transparent 34%), #07090f; }
button { font: inherit; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 80px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1 { margin: 5px 0 0; font-size: clamp(28px, 5vw, 54px); letter-spacing: -0.045em; }
h2 { margin: 4px 0; }
.eyebrow, .label { color: #8da2ff; font-size: 12px; letter-spacing: .16em; font-weight: 800; margin: 0; }
.status { display: flex; gap: 9px; align-items: center; padding: 10px 14px; background: #111521; border: 1px solid #252c41; border-radius: 999px; }
#status-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffbd3f; box-shadow: 0 0 16px currentColor; }
#status-dot.online { background: #4cf1a1; }
.player-card, .director-card, .network-card { background: rgba(15, 19, 31, .92); border: 1px solid #252c41; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 70px rgba(0,0,0,.35); }
.stage { position: relative; aspect-ratio: 16 / 8.5; background: #000; overflow: hidden; }
.video-pool, video { position: absolute; inset: 0; width: 100%; height: 100%; }
video { object-fit: contain; display: block; opacity: 0; pointer-events: none; transition: opacity 120ms linear; }
video.active { opacity: 1; pointer-events: auto; z-index: 1; }
.live-chip { position: absolute; z-index: 3; top: 16px; left: 16px; background: #ff315d; border-radius: 7px; padding: 7px 10px; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.controls-panel { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; padding: 20px; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
button { color: #dce2ff; background: #171d2d; border: 1px solid #303950; border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: .15s ease; }
button:hover { transform: translateY(-1px); border-color: #7087ee; }
button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
button.active, button.primary { background: #627cff; color: white; border-color: #7e93ff; }
#angles button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: #ffbd3f; vertical-align: middle; }
#angles button[data-ready="ready"]::after { background: #4cf1a1; box-shadow: 0 0 8px rgba(76, 241, 161, .65); }
.network-card { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 0; padding: 17px 22px; }
.network-card div { display: grid; gap: 4px; border-right: 1px solid #2a3040; padding-left: 18px; }
.network-card div:first-child { padding-left: 0; }
.network-card div:nth-child(4n) { border: 0; }
.network-card span { color: #737f9e; font-size: 10px; letter-spacing: .14em; }
.network-card strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.director-card { margin-top: 16px; padding: 22px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
.event-log { grid-column: 1 / -1; margin: 0; color: #94a0bf; font-family: ui-monospace, monospace; }
.poll { position: absolute; z-index: 4; inset: auto 6% 8%; background: rgba(8, 12, 22, .94); border: 1px solid #647cf1; border-radius: 18px; padding: 20px; backdrop-filter: blur(16px); }
.poll h3 { margin: 0 0 13px; font-size: 22px; }
.poll-choice { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 8px; }
.poll-choice button { text-align: left; }
.poll-choice span { color: #8fa0c9; min-width: 34px; text-align: right; }
.hidden { display: none; }
body.embed { min-height: 0; overflow: hidden; background: #07090f; }
body.embed .shell { width: 100%; margin: 0; padding: 0; }
body.embed header,
body.embed .network-card,
body.embed .director-card { display: none; }
body.embed .player-card { border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 760px) {
  header { align-items: flex-start; flex-direction: column; }
  .controls-panel, .director-card { grid-template-columns: 1fr; }
  .network-card { grid-template-columns: 1fr 1fr; gap: 18px; }
  .network-card div { border: 0; padding: 0; }
}