.camera-device-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:0 0 9px;font-size:10px;color:#756c65}
.camera-device-row[hidden]{display:none}
.camera-device-row select{height:36px;min-width:0;border:1px solid var(--line);border-radius:7px;background:#fffdf9;padding:0 8px;font-size:10px}
/* [OVERLAY-1] The video and decoration canvas deliberately share identical
   geometry and object-fit. Their intrinsic sizes are also kept identical. */
.camera-view #cameraVideo,.camera-view .decor-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);pointer-events:none}
.camera-view #cameraVideo{z-index:0}
.camera-view #cameraVideo:not([hidden]){display:block;visibility:visible;opacity:1;background:#242329}
.camera-view .decor-canvas{display:block;z-index:1}
.camera-view .decor-canvas[hidden]{display:none}
.camera-view .landmark-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;transform:scaleX(-1)}
.camera-view .landmark-canvas[hidden]{display:none}
.camera-view .align-overlay{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;transform:scaleX(-1)}
.camera-view .align-overlay[hidden]{display:none}
.camera-view .face-guide{left:33.8%;top:8.4%;width:52%;height:auto;aspect-ratio:1;z-index:3;opacity:.2}
html[data-mode="overlay"] .camera-view .face-guide,
html[data-mode="overlay"] .camera-view .face-guide.detected{opacity:0;border-color:transparent;box-shadow:none}
html[data-mode="overlay"] .camera-view .align-metrics{display:none}
.camera-view .align-metrics{position:absolute;z-index:4;left:8px;right:8px;top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;pointer-events:none}
.camera-view .align-metrics[hidden]{display:none}
.camera-view .align-metrics span{min-width:0;padding:5px 4px;border-radius:5px;background:rgba(25,23,27,.72);color:#ddd7d1;text-align:center;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camera-view .align-metrics span.ok{background:rgba(38,122,79,.82);color:#fff}
.camera-view .align-metrics span.warn{background:rgba(147,92,28,.82);color:#fff}
.camera-view .camera-status{z-index:4}
.camera-view .camera-debug{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;padding:6px 8px;border-radius:6px;background:rgba(0,0,0,.68);color:#fff;font:10px/1.35 ui-monospace,monospace;white-space:pre-wrap;pointer-events:none}
.camera-view .camera-debug[hidden]{display:none}