.ombox-qr-device-page .login-card { max-width: 560px; width: 100%; }
.ombox-qr-device-page .login-container { width: min(100%, 600px); }
.ombox-qr-device-page video { width: 100%; max-height: 320px; border-radius: .5rem; object-fit: cover; }
.ombox-qr-device-page .ombox-qr-details { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; text-align: left; }
.ombox-qr-device-page .ombox-qr-details dd { margin: 0; overflow-wrap: anywhere; }
.ombox-qr-device-page [data-device-list] { display: grid; gap: .75rem; }
.ombox-qr-device-page .qr-device-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; }
.ombox-qr-device-page .qr-device-row p { margin: 0; overflow-wrap: anywhere; }
.ombox-qr-device-page .qr-device-row button { flex-shrink: 0; }
.ombox-qr-device-page [hidden] { display: none !important; }
.ombox-qr-camera-preview { width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: .5rem; overflow: hidden; background: #111; }
.ombox-qr-camera-preview video { width: 100%; height: 100%; max-height: none; object-fit: cover; }
@media (max-width: 480px) {
    .ombox-qr-device-page .login-card { padding: 1.25rem; }
    .ombox-qr-device-page .ombox-qr-details { grid-template-columns: 1fr; gap: .25rem; }
    .ombox-qr-device-page .ombox-qr-details dd { margin-bottom: .5rem; }
}

/* The camera is a viewport page; controls remain in flow below the preview. */
.ombox-qr-camera-page { height: 100dvh; min-height: 0; padding: .75rem; }
.ombox-qr-camera-page .login-container { height: 100%; min-height: 0; }
.ombox-qr-camera-page .login-card { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 1rem; }
.ombox-qr-camera-page .login-header { margin-bottom: .75rem; flex-shrink: 0; }
.ombox-qr-camera-page .login-title { font-size: 1.25rem; margin: 0; }
.ombox-qr-camera-page .ombox-qr-camera-preview { position: relative; flex: 1; min-height: 80px; aspect-ratio: auto; }
.ombox-qr-camera-controls { flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ombox-qr-camera-controls p { margin: .5rem 0; font-size: .875rem; line-height: 1.4; }
.ombox-qr-camera-actions, .ombox-qr-confirm-actions { display: flex; gap: .75rem; }
.ombox-qr-camera-actions > *, .ombox-qr-confirm-actions > * { flex: 1; min-height: 44px; }
.ombox-qr-scan-frame { position: absolute; width: min(76%, 280px); aspect-ratio: 1; border: 2px solid #fff; border-radius: .75rem; overflow: hidden; pointer-events: none; }
.ombox-qr-scan-line { position: absolute; left: 4%; width: 92%; height: 2px; background: #42efae; box-shadow: 0 0 10px #42efae; animation: ombox-qr-scan 2.4s ease-in-out infinite alternate; }
@keyframes ombox-qr-scan { from { top: 4%; } to { top: 95%; } }
.ombox-qr-device-page[data-mode] [data-device-management],
.ombox-qr-device-page[data-mode] [data-bind-section] { display: none; }
.ombox-qr-device-page[data-mode] .login-header { margin-bottom: 1rem; }
.ombox-qr-device-page[data-mode] .login-system-name { display: none; }
.ombox-qr-device-page [data-qr-code] { font-size: 2rem; letter-spacing: .2rem; }
.ombox-qr-browser-details { margin-bottom: .75rem; text-align: left; overflow-wrap: anywhere; }
.ombox-qr-confirm-actions { position: sticky; bottom: 0; background: var(--color-surface, #fff); padding: .75rem 0 max(.75rem, env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .ombox-qr-scan-line { animation: none; top: 50%; } }