.app-shell { max-width: 1200px; }
.camera-stage { position: relative; overflow: hidden; min-height: 240px; background: #111827; border-radius: .75rem; }
.camera-stage video { display: block; width: 100%; height: auto; min-height: 240px; max-height: 70vh; object-fit: contain; }
.camera-stage video.mirrored { transform: scaleX(-1); }
.camera-placeholder { min-height: 320px; color: #fff; }
.live-badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.meter-track { height: 1rem; overflow: hidden; background: #dce3ea; border-radius: 999px; }
.meter-fill { width: 0; height: 100%; background: #0d6efd; border-radius: inherit; transition: width 80ms linear; }
.recording-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; background: #dc3545; border-radius: 50%; }
.privacy-note { background: #eaf6ef; border: 1px solid #b9dfc8; border-radius: .5rem; }
.playback-video, .snapshot-image { display: block; width: 100%; max-height: 32rem; background: #111827; object-fit: contain; border-radius: .5rem; }
.supporting-content { max-width: none; }
.supporting-section { position: relative; z-index: 0; max-width: 960px; padding: 4.5rem 0; margin: 0 auto; }
.supporting-section::before { position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; background: var(--ojt-page); content: ""; transform: translateX(-50%); }
.supporting-section:nth-child(odd)::before { background: #fff; border-top: 1px solid var(--ojt-border); border-bottom: 1px solid var(--ojt-border); }
:fullscreen.camera-stage { display: flex; align-items: center; justify-content: center; border-radius: 0; }
:fullscreen.camera-stage video { max-height: 100vh; }
@media (max-width: 767.98px) { .camera-placeholder { min-height: 240px; } .supporting-section { padding: 3.5rem 0; } }