:root { --bg:#0c1118; --panel:#141c27; --line:#243345; --fg:#e7eef7; --accent:#3aa0ff; --muted:#8a9bb0; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* beat class display rules (e.g. .stage) */
html, body { height:100%; overflow:hidden; overscroll-behavior:none; }  /* keep the keyboard from scrolling the view away */
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }

.panel { max-width: 380px; margin: 12vh auto; padding: 28px 26px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.panel h1 { margin:0 0 4px; font-size:26px; letter-spacing:.5px; }
.sub { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.5; }
.panel input { width:100%; padding:12px 14px; margin-bottom:12px; background:var(--bg);
  border:1px solid var(--line); border-radius:10px; color:var(--fg); font-size:15px; outline:none; }
.panel input:focus { border-color:var(--accent); }
.panel button { width:100%; padding:12px; border:0; border-radius:10px; background:var(--accent);
  color:#02101f; font-size:15px; font-weight:600; cursor:pointer; }
.panel button:hover { filter:brightness(1.08); }
.status { margin-top:14px; font-size:13px; min-height:18px; color:var(--muted); }
.status.err { color:#ff6b6b; }

.stage { position:fixed; inset:0; display:flex; flex-direction:column; background:#000; }
.bar { display:flex; align-items:center; gap:10px; padding:5px 10px; background:var(--panel);
  border-bottom:1px solid var(--line); font-size:12px; position:relative; z-index:2; flex:0 0 auto; }
.bar #stage-label { color:var(--muted); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctrl-toggle { display:flex; align-items:center; gap:6px; color:var(--muted); cursor:pointer; }
.bar button { padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--fg); cursor:pointer; }
.bar button:hover { border-color:#ff6b6b; color:#ff6b6b; }
/* The wrapper holds the video and clips the pinch-zoom transform. */
.screen-wrap { flex:1; min-height:0; overflow:hidden; display:flex; background:#000; }
#screen { flex:1; width:100%; height:100%; object-fit:contain; background:#000; cursor:crosshair;
  touch-action:none; -webkit-user-select:none; user-select:none; }
.bar #kbd-btn { font-size:16px; line-height:1; padding:6px 10px; }
.bar #kbd-btn:hover { border-color:var(--accent); color:var(--accent); }
.bar #kbd-btn.on { background:var(--accent); color:#02101f; border-color:var(--accent); }

/* Capture input is on-screen (so the soft keyboard opens) but invisible. */
#kbd-capture { position:fixed; bottom:0; left:0; width:1px; height:1px;
  opacity:0; border:0; padding:0; background:transparent; color:transparent;
  caret-color:transparent; }