:root {
  --rtc-dark: #07111f;
  --rtc-panel: #102033;
  --rtc-accent: #38bdf8;
}

.rtc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.rtc-stage { background: var(--rtc-dark); border-radius: 18px; padding: 16px; color: #e2e8f0; }
.rtc-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rtc-video-wrap { position: relative; min-height: 220px; border-radius: 14px; overflow: hidden; background: #020617; }
.rtc-video-wrap video { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.rtc-video-label { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(2, 6, 23, .72); font-size: 12px; }
.rtc-status { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--rtc-panel); }
.rtc-status[data-tone="success"] { color: #86efac; }
.rtc-status[data-tone="warning"] { color: #fde68a; }
.rtc-status[data-tone="danger"] { color: #fca5a5; }
.rtc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rtc-side .card { margin-bottom: 16px; }
.rtc-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rtc-note { font-size: 13px; color: var(--muted); }
.rtc-diagnostics { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; white-space: pre-line; line-height: 1.65; }

@media (max-width: 820px) {
  .rtc-layout { grid-template-columns: 1fr; }
  .rtc-videos { grid-template-columns: 1fr; }
  .rtc-video-wrap, .rtc-video-wrap video { min-height: 190px; }
}