html, body { margin: 0; height: 100%; background: #0b0d10; color: #d7dde5; font: 13px/1.4 -apple-system, system-ui, Segoe UI, sans-serif; overflow: hidden; }
#bar { position: fixed; top: 0; left: 0; right: 0; height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #14181d; border-bottom: 1px solid #222a33; z-index: 2; }
#bar .brand { font-weight: 600; letter-spacing: .04em; color: #8ab4f8; }
#bar button { background: #22303f; color: #e6edf3; border: 1px solid #33475c; border-radius: 4px; padding: 3px 10px; cursor: pointer; }
#bar button:hover { background: #2b3d50; }
#bar label { display: flex; align-items: center; gap: 4px; color: #aab4c0; }
#state { margin-left: auto; color: #8fa; font-variant-numeric: tabular-nums; }
#stage { position: absolute; top: 36px; left: 0; right: 0; bottom: 0; background: #000; }
#video { width: 100%; height: 100%; object-fit: contain; display: block; outline: none; cursor: none; }
#video.show-cursor { cursor: default; } /* overridden inline with the synced remote shape */
#stats { position: absolute; left: 8px; top: 8px; margin: 0; padding: 6px 8px; background: rgba(0,0,0,.55); color: #c8f0c8; font: 11px/1.35 ui-monospace, Menlo, monospace; border-radius: 4px; pointer-events: none; white-space: pre; }
#probe-result { position: absolute; right: 8px; top: 8px; padding: 6px 8px; background: rgba(0,0,0,.55); color: #ffd58a; font: 12px ui-monospace, Menlo, monospace; border-radius: 4px; pointer-events: none; }
body.fs #bar { display: none; }
body.fs #stage { top: 0; }
#bar select { background: #22303f; color: #e6edf3; border: 1px solid #33475c; border-radius: 4px; padding: 2px 4px; }
#stats.mini { font-size: 10px; opacity: .75; }
#stats.hidden { display: none; }