.owner-face { width: min(100%, 540px); margin-inline: auto; color: #24496d; }
.owner-face [hidden] { display: none !important; }
.owner-face-layout { display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; }
.owner-face-camera { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: min(310px, 40dvh); overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #edf8fd, #f7f6fc); border: 1px solid #d8e7f3; }
.owner-face-camera video, .owner-face-camera > img { width: 100%; height: 100%; object-fit: contain; }
.owner-face-camera video { transform: scaleX(-1); }
.owner-face-placeholder { display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 24px; color: #64829f; font-size: 14px; text-align: center; }
.owner-face-placeholder svg { width: 88px; fill: none; stroke: #80b3d1; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.owner-face-guide { position: absolute; inset: 12% 28%; border: 2px dashed #ffffffb3; border-radius: 48%; pointer-events: none; }
.owner-face-camera-tip { margin: 10px 0 14px; color: #587490; font-size: 13px; line-height: 1.5; }
.owner-face-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.owner-face button { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 24px; background: #168bd4; color: white; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.owner-face button.owner-face-secondary { background: #fff9; color: #2775a5; border-color: #c9dfee; }
.owner-face button:disabled { opacity: .6; cursor: wait; }
.owner-face button:focus-visible { outline: 2px solid #1676c2; outline-offset: 3px; }
.owner-face-feedback { margin: 16px 0 14px; border-left: 2px solid #a9d2e9; padding: 2px 12px; }
.owner-face-feedback strong { font-size: 14px; }
.owner-face-feedback p { margin: 6px 0 0; color: #617b94; font-size: 13px; line-height: 1.6; }
.owner-face[data-state="check_passed"] .owner-face-feedback { border-color: #25a884; }
.owner-face[data-state="retake_required"] .owner-face-feedback { border-color: #d8578c; }
.owner-face[data-state="check_unavailable"] .owner-face-feedback { border-color: #d9a545; }
.owner-face-scanning { display: none; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, #b7e8ff45, transparent); }
.owner-face-camera[data-state="checking"] .owner-face-scanning { display: block; }
.owner-face-camera[data-state="checking"] .owner-face-scanning::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #69cce9; box-shadow: 0 0 24px 5px #69cce975; animation: owner-face-scan 2.1s ease-in-out infinite alternate; }
@keyframes owner-face-scan { from { top: 5%; } to { top: 95%; } }
@media (max-width: 700px) { .owner-face-camera { max-height: min(210px, 36dvh); } }
@media (prefers-reduced-motion: reduce) { .owner-face-camera[data-state="checking"] .owner-face-scanning::after { animation: none; top: 50%; } }