.camera-settings { margin-top: 8px; padding: 0; overflow: hidden; }
.camera-settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.camera-settings-toggle strong,.camera-settings-toggle small { display: block; }
.camera-settings-toggle strong { color: var(--green); font-size: 1.12em; }
.camera-settings-toggle small { margin-top: 2px; color: var(--muted); font-size: .78em; }
.camera-settings-toggle i { color: var(--green); font-size: 1.5em; font-style: normal; font-weight: 900; transition: transform .2s ease; }
.camera-settings.collapsed .camera-settings-toggle i { transform: rotate(-90deg); }
.camera-settings-body { padding: 0 10px 10px; }
.camera-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.camera-tile { min-width: 0; overflow: hidden; border: 1px solid #c4d0c3; border-radius: 12px; background: #f8faf5; }
.camera-preview { position: relative; min-height: 176px; overflow: hidden; background: #26342b; }
.camera-preview img,.camera-preview-fallback { width: 100%; height: 176px; object-fit: cover; }
.camera-preview-fallback { display: grid; place-items: center; background: linear-gradient(145deg,#50685a,#27372e); color: #e7efe6; font-size: .82em; font-weight: 800; }
.camera-preview img[hidden],.camera-preview-fallback[hidden] { display: none; }
.camera-preview-label,.camera-live-dot { position: absolute; z-index: 1; top: 8px; padding: 4px 7px; border-radius: 6px; background: rgba(22,35,27,.78); color: white; font-size: .74em; font-weight: 850; }
.camera-preview-label { left: 8px; }.camera-live-dot { right: 8px; }.camera-live-dot.live { color: #c9f7c0; }.camera-live-dot.error { color: #ffd0c7; }
.camera-tile-copy { padding: 9px 10px; }.camera-tile-copy strong,.camera-tile-copy small { display: block; }.camera-tile-copy strong { color: var(--green); }.camera-tile-copy small { margin-top: 2px; color: var(--muted); font-size: .76em; }
.camera-controls { border-top: 1px solid #d7dfd4; }.camera-controls summary { padding: 10px; color: var(--green); cursor: pointer; font-size: .84em; font-weight: 900; }.camera-controls-body { display: grid; gap: 9px; padding: 0 10px 10px; }
.camera-control { display: grid; gap: 3px; }.camera-control > span { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); font-size: .76em; }.camera-control output { color: var(--green); font-weight: 900; }.camera-control input { width: 100%; accent-color: var(--green); }
.camera-select-control { display: grid; grid-template-columns: minmax(0,1fr) 128px; align-items: center; gap: 8px; font-size: .78em; font-weight: 800; }.camera-select-control select { min-height: 36px; border: 1px solid #b8c6b6; border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.camera-reset { width: 100%; }.camera-privacy-note { margin: 9px 2px 0; color: var(--muted); font-size: .74em; }
.face-recognition-settings { margin-top: 8px; padding: 0; overflow: hidden; }
.face-recognition-settings > summary { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 12px; cursor: pointer; list-style: none; }
.face-recognition-settings > summary::-webkit-details-marker { display: none; }
.face-recognition-settings > summary strong,.face-recognition-settings > summary small { display: block; }
.face-recognition-settings > summary strong { color: var(--green); font-size: 1.08em; }
.face-recognition-settings > summary small { margin-top: 2px; color: var(--muted); font-size: .76em; }
.face-settings-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #e0eee2; color: var(--green); font-size: 1.2em; font-weight: 900; }
.face-settings-chevron { color: var(--green); font-size: 1.45em; font-weight: 900; transition: transform .2s ease; }.face-recognition-settings:not([open]) .face-settings-chevron { transform: rotate(-90deg); }
.face-settings-body { display: grid; gap: 10px; padding: 0 10px 10px; }
.face-status-panel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 10px; background: #edf5eb; }
.face-status-panel > div { display: flex; align-items: center; gap: 8px; }.face-status-panel strong,.face-status-panel small { display: block; }.face-status-panel small { margin-top: 2px; color: var(--muted); font-size: .72em; }
.face-status-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #5aa45b; box-shadow: 0 0 0 4px #d7ead5; }
.face-status-tag { padding: 5px 8px; border-radius: 999px; font-size: .7em; font-weight: 850; white-space: nowrap; }.face-status-tag.waiting { background: #f8e6ba; color: #725317; }
.face-status-tag.ready { background: #d9edd7; color: #285d2b; }
.face-model-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.face-model-grid article { padding: 9px; border: 1px solid #d5ddd2; border-radius: 9px; background: #fbfcf9; }.face-model-grid span,.face-model-grid strong,.face-model-grid small { display: block; }.face-model-grid span { color: var(--muted); font-size: .68em; }.face-model-grid strong { margin-top: 2px; color: var(--ink); font-size: .8em; }.face-model-grid small { margin-top: 4px; color: #8a641d; font-size: .68em; font-weight: 800; }
.face-master-toggle,.face-history-setting { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #d5ddd2; border-radius: 9px; }.face-master-toggle input,.face-history-setting input { width: 20px; height: 20px; accent-color: var(--green); }.face-master-toggle strong,.face-master-toggle small,.face-history-setting strong,.face-history-setting small { display: block; }.face-master-toggle small,.face-history-setting small { margin-top: 2px; color: var(--muted); font-size: .7em; }
.face-live-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 10px; background: #26382e; color: white; }.face-live-result > div:first-child span,.face-live-result > div:first-child strong { display: block; }.face-live-result > div:first-child span { color: #bed1c2; font-size: .7em; }.face-recognition-kinds { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }.face-recognition-kinds span { padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .61em; }
.face-enrolment,.face-safety-settings { padding: 10px; border: 1px solid #d5ddd2; border-radius: 10px; }.face-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.face-section-heading strong,.face-section-heading small { display: block; }.face-section-heading small { margin-top: 2px; color: var(--muted); font-size: .69em; }.face-section-heading > span:last-child { color: var(--green); font-size: .7em; font-weight: 850; }
.face-enrolment-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; margin-top: 8px; }.face-enrolment-form label { display: grid; gap: 3px; font-size: .72em; font-weight: 800; }.face-enrolment-form input,.face-setting-grid select,.face-setting-grid input[type="number"] { width: 100%; min-height: 36px; box-sizing: border-box; border: 1px solid #b8c6b6; border-radius: 8px; background: white; color: var(--ink); font: inherit; }.face-empty-persons { margin: 8px 0 0; color: var(--muted); font-size: .72em; }
.face-person-list { display: grid; gap: 6px; margin-top: 8px; }.face-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 8px; background: #edf5eb; }.face-person strong,.face-person small { display: block; }.face-person small { margin-top: 2px; color: var(--muted); font-size: .68em; }.face-person button { min-height: 34px; border: 1px solid #cfaaa2; border-radius: 8px; background: #fff7f4; color: #8a3427; font: inherit; font-size: .7em; font-weight: 850; }
.face-scan-stage[hidden] { display: none; }.face-scan-stage { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr); gap: 10px; margin-top: 10px; padding: 10px; border-radius: 12px; background: #18271f; color: white; }.face-scan-camera { position: relative; min-height: 245px; overflow: hidden; border-radius: 11px; background: #101913; }.face-scan-camera > img { display: block; width: 100%; height: 245px; object-fit: cover; }.face-scan-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 29% 40% at 50% 47%,transparent 0 92%,rgba(5,13,8,.64) 94%); pointer-events: none; }.face-scan-ring { --face-progress: 0; position: absolute; width: 154px; height: 198px; inset: 50% auto auto 50%; border-radius: 48% 48% 44% 44%; transform: translate(-50%,-50%); pointer-events: none; }.face-scan-ring::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(#75d57a calc(var(--face-progress) * 1turn),rgba(255,255,255,.28) 0); -webkit-mask: radial-gradient(ellipse 44% 46% at 50% 50%,transparent 0 91%,#000 92%); mask: radial-gradient(ellipse 44% 46% at 50% 50%,transparent 0 91%,#000 92%); }.face-head-guide { position: absolute; z-index: 1; inset: 8px; border: 2px dashed rgba(255,255,255,.62); border-radius: 48% 48% 44% 44%; }.face-scan-step { position: absolute; top: 9px; left: 9px; padding: 4px 7px; border-radius: 999px; background: rgba(13,29,19,.78); font-size: .7em; font-weight: 900; }.face-scan-guidance { display: flex; flex-direction: column; justify-content: center; gap: 8px; }.face-scan-guidance > strong { font-size: 1.02em; line-height: 1.2; }.face-scan-guidance > small { min-height: 2.7em; color: #c8d8cb; line-height: 1.35; }.face-scan-progress { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; }.face-scan-progress i { height: 7px; border-radius: 999px; background: rgba(255,255,255,.2); }.face-scan-progress i.active { background: #e9c769; box-shadow: 0 0 0 2px rgba(233,199,105,.2); }.face-scan-progress i.done { background: #75d57a; }.face-scan-guidance button { margin-top: 4px; border-color: rgba(255,255,255,.35); color: white; background: rgba(255,255,255,.08); }
.face-safety-settings h6 { margin: 0 0 8px; color: var(--green); font-size: .8em; }.face-setting-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.face-setting-grid > label:not(.face-history-setting) { display: grid; gap: 3px; color: var(--ink); font-size: .7em; font-weight: 800; }.face-history-setting { padding: 6px 8px; }
/* De wide-camera is een portretstream. De gids volgt uitsluitend een lokaal gevonden gezicht. */
.face-scan-stage { --face-scan-anchor-y: 58.5vh; grid-template-columns: 1fr; }
.face-scan-camera { min-height: 0; aspect-ratio: 9 / 16; }
.face-scan-camera > img { height: 100%; object-fit: cover; }
.face-scan-shade { background: radial-gradient(ellipse 29% 19% at var(--face-x,50%) var(--face-y,50%),transparent 0 92%,rgba(5,13,8,.64) 94%); }
.face-scan-ring { --face-x: 50%; --face-y: 50%; --face-ring-width: 154px; width: var(--face-ring-width); height: calc(var(--face-ring-width) * 1.285); inset: auto; left: var(--face-x); top: var(--face-y); transition: left .18s ease,top .18s ease,width .18s ease,height .18s ease; }
body.pi-kiosk-client .face-scan-stage { position: fixed; z-index: 220; top: 16.6667vh; left: 0; width: min(440px,43vw); max-height: calc(100vh - 20px); margin: 0; box-sizing: border-box; border-radius: 0 14px 14px 0; box-shadow: 0 18px 42px rgba(4,14,8,.48); }
body.pi-kiosk-client.face-scan-active { background: #07141b; }
body.pi-kiosk-client.face-scan-active .ui-screen { background: radial-gradient(circle at 74% 16%,#214c59 0,transparent 29%),radial-gradient(circle at 72% 84%,#182d58 0,transparent 34%),#07141b; }
body.pi-kiosk-client.face-scan-active .ui-screen::after { content: ''; position: absolute; z-index: 180; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg,rgba(105,236,255,.035) 0 1px,transparent 1px 42px),repeating-linear-gradient(0deg,rgba(105,236,255,.025) 0 1px,transparent 1px 42px),radial-gradient(circle at 38% 41%,rgba(59,224,230,.18),transparent 33%); box-shadow: inset 0 0 110px rgba(32,222,255,.24); }
body.pi-kiosk-client.face-scan-active .face-scan-stage { border: 1px solid rgba(111,240,255,.75); background: linear-gradient(150deg,rgba(8,28,37,.98),rgba(16,48,55,.98)); box-shadow: 0 0 0 1px rgba(64,220,240,.18),0 20px 55px rgba(1,10,19,.72),0 0 45px rgba(48,220,240,.28); }
.face-recognition-settings :disabled { cursor: not-allowed; opacity: .64; }
@media (max-width:720px) { .camera-grid,.face-scan-stage { grid-template-columns: 1fr; } }