styles.css

html, body { height: 100%; margin: 0; background: #000; }
.video-wrap { position: fixed; inset: 0; width: 100%; height: 100%; }
.video-wrap iframe { width: 100%; height: 100%; border: 0; }

.fallback { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; color: #fff; background: #000; font-family: system-ui, -apple-system, Roboto, "Segoe UI", Arial, sans-serif; }
.fallback p { text-align: center; margin: 0; }
.fallback p.lead { margin: 0 0 1rem 0; }

.open-btn { display: inline-block; padding: 0.6rem 1rem; background: #1a73e8; color: #fff; text-decoration: none; border-radius: 6px; }

#camera-ui { display: none; position: fixed; right: 1rem; top: 1rem; z-index: 9999; color: #fff; font-family: system-ui, -apple-system, Roboto, "Segoe UI", Arial, sans-serif; }
#camera-status { font-size: 0.95rem; color: #fff; }

#camera-preview { display: none; position: fixed; left: 1rem; bottom: 1rem; width: 220px; height: 160px; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.6); z-index: 9998; cursor: pointer; }

.hidden { display: none !important; }