:root {
  --bg: #0f1115;
  --fg: #f3f4f6;
  --muted: #9ca3af;
  --card: #1a1d24;
  --line: #2a2f3a;
  --accent: #3b82f6;
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #d97706;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); overscroll-behavior-y: none; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.45;
}
main { max-width: 640px; margin: 0 auto; padding: 16px; }
header h1 { font-size: 20px; margin: 4px 0 0; }
header .sub { margin: 0 0 12px; color: var(--muted); }
h2 { font-size: 20px; margin: 8px 0 12px; }
.muted { color: var(--muted); }
.status { min-height: 1.5em; }
.screen { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.preview-wrap { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
#preview, #local { transform: scaleX(-1); }
.preview-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.meter { height: 10px; background: #000; border-radius: 5px; margin: 12px 0; overflow: hidden; }
#meter-bar { height: 100%; width: 0%; background: var(--ok); transition: width 80ms linear; }
.opt { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.opt input { width: 22px; height: 22px; }
button { font: inherit; border-radius: 10px; border: 0; padding: 14px 16px; width: 100%; margin-top: 12px; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
.primary { background: var(--accent); color: #fff; font-weight: 600; }
.secondary { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.stage { position: relative; }
.remote { background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; }
.remote video { width: 100%; height: 100%; object-fit: contain; }
.remote .audio-only { color: var(--muted); padding: 24px; text-align: center; }
.local-wrap { position: absolute; right: 10px; bottom: 10px; width: 28%; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); background: #000; }
.controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ctl { background: #2b303b; color: var(--fg); font-weight: 600; padding: 18px 8px; }
.ctl.off { background: #4b5563; }
.ctl.leave { background: var(--danger); color: #fff; }
.banner { background: var(--warn); color: #111; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.banner button { margin-top: 8px; background: #111; color: #fff; }
pre { white-space: pre-wrap; word-break: break-word; background: #000; padding: 10px; border-radius: 8px; font-size: 13px; }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--muted); }
ol { padding-left: 22px; }
.linkbox { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 10px; font-size: 14px; border: 1px solid #888; border-radius: 8px; background: transparent; color: inherit; }