.camera-progress-overlay { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 23px 16px 13px; color: #fff; background: linear-gradient(transparent, #0b211bd9 30%, #0b211bf2); pointer-events: none; }
.camera-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.camera-progress-heading strong { font-size: 23px; font-weight: 650; letter-spacing: -.5px; }
.camera-progress-heading span { font-size: 12px; color: #d6eee2; }
#camera-receive-status { display: block; font-size: 11px; line-height: 1.5; margin: 2px 0 9px; color: #d6eee2; }
.camera-progress-overlay progress { display: block; width: 100%; height: 6px; border: 0; background: #ffffff30; border-radius: 6px; overflow: hidden; }
.camera-progress-overlay progress::-webkit-progress-bar { background: #ffffff30; }
.camera-progress-overlay progress::-webkit-progress-value { background: #80e3b0; transition: width .12s linear; }
.camera-progress-overlay progress::-moz-progress-bar { background: #80e3b0; }
.camera-progress-overlay.complete { color: #a4f8c8; }
.camera-diagnostics { margin-top: 12px; padding: 10px 12px; background: #edf3e8; border: 1px solid #dde7d5; border-radius: 9px; color: #466039; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.camera-diagnostics > span { display: block; }
.camera-diagnostics p { margin-top: 5px; font-size: 12px; color: #344d2c; }
.qr-stage.pulse-format .qr-card { padding: 0; border: 0; border-radius: 0; }
.qr-stage.pulse-format canvas { image-rendering: pixelated; }
.qr-stage.pulse-format.expanded { padding: 10px; }
.qr-stage.pulse-format.expanded .qr-card, .qr-stage.pulse-format.expanded .frame-counter, .qr-stage.pulse-format.expanded .playback-controls, .qr-stage.pulse-format.expanded .frame-seek-label, .qr-stage.pulse-format.expanded input[type=range] { width: min(calc(100vw - 24px), calc((100svh - 170px) * 1.039)); }
.qr-stage.pulse-sprint.expanded .qr-card, .qr-stage.pulse-sprint.expanded .frame-counter, .qr-stage.pulse-sprint.expanded .playback-controls, .qr-stage.pulse-sprint.expanded .frame-seek-label, .qr-stage.pulse-sprint.expanded input[type=range] { width: min(calc(100vw - 24px), calc((100svh - 170px) * 1.336)); }
@media (max-width: 680px) { .camera-placeholder { padding-bottom: 82px; } }