body{font-family:system-ui;background:#0d1420;color:#eef5ff;margin:0;padding:18px}main{max-width:680px;margin:auto}h1{font-size:25px;margin-bottom:4px}.sub{color:#a9bbcf}.panel{background:#192536;border-radius:16px;padding:15px;margin:13px 0}button{border:0;border-radius:11px;padding:12px;margin:4px;background:#3f6ee8;color:#fff;font-weight:700}.safe{background:#23845e}.warn{background:#b27b18}.danger{background:#b9364c}.light{background:#e2ad32;color:#17202d}button:disabled{opacity:.35}input{width:100%}.status{font-weight:800;color:#8dd1ff}.good{color:#8ce3b4}.bad{color:#ff9ca9}#log{white-space:pre-wrap;font:12px ui-monospace,monospace;max-height:330px;overflow:auto;background:#0b111b;padding:10px;border-radius:10px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.pad{text-align:center}.pad button{min-width:78px;touch-action:none}small{color:#a9bbcf}
.sensor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:360px;margin:10px auto}
.sensor{border:1px solid #4a586b;border-radius:12px;padding:12px;text-align:center;background:#263548;font-weight:700}
.sensor.ok{background:#174a39;color:#b6f7d3;border-color:#308c6b}
.sensor.alert{background:#703039;color:#fff1b4;border-color:#d94d5f}
.sensor.unknown{color:#a9bbcf}
.camera-container{position:relative;width:100%;max-width:400px;aspect-ratio:4/3;background:#060b13;border-radius:14px;overflow:hidden}
.camera-container video,.camera-container canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.camera-container canvas{pointer-events:none}
.camera-container video,.camera-container canvas{transform-origin:center center;transition:transform .28s ease-out}
.camera-container{background:#071322}
.config-label{display:block;margin:10px 0;font-size:13px;color:#bfd2e6}
.config-input{box-sizing:border-box;width:100%;padding:11px;background:#101c2a;color:#fff;border:1px solid #52647a;border-radius:8px;font:inherit;margin-top:4px}
.code-status{font:12px ui-monospace,monospace;color:#8dd1ff;word-wrap:break-word}
.face-count{position:absolute;top:8px;left:8px;background:#132235d9;border:1px solid #6ea8a0;border-radius:9px;padding:6px 9px;font-size:12px;font-weight:800;pointer-events:none}
.face-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.face-result>div{background:#102030;border:1px solid #304256;border-radius:10px;padding:8px;min-width:0;text-align:center}
.face-result strong{display:block;font-size:18px;margin-top:4px;color:#8ce3b4;overflow-wrap:anywhere}
.face-controls{margin-top:8px}
@media(max-width:380px){.face-result strong{font-size:14px}}


/* Het telefoonhoofd: lokaal geanimeerde ogen, zonder externe afbeeldingen. */
.eye-stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#273d62 0%,#111c33 58%,#080e1d 100%);border:1px solid #405b7b;border-radius:25px;min-height:210px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;isolation:isolate}
.eye-stage:before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 20deg,transparent 0deg,#57d8d912 40deg,transparent 95deg,#6a8df51a 180deg,transparent 270deg);animation:eye-aura 16s linear infinite;z-index:-1}
@keyframes eye-aura{to{transform:rotate(360deg)}}
.eyes{display:flex;align-items:center;justify-content:center;gap:clamp(14px,5vw,45px);width:100%}
.eye{width:clamp(88px,28%,150px);aspect-ratio:1.12;background:linear-gradient(145deg,#faffff,#c4f7ff);border-radius:47% 47% 48% 48%;box-shadow:0 0 35px #57dfff65,inset 0 -12px 22px #7ad3f444;position:relative;overflow:hidden;transform-origin:center center;transition:transform .18s}
.eye:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 6px 10px #fff9;pointer-events:none}
.pupil{position:absolute;left:50%;top:50%;width:43%;height:52%;border-radius:50%;background:radial-gradient(circle at 36% 29%,#a0ffff 0 10%,#24577f 13%,#111a3d 45%,#080e2c 72%);transform:translate(calc(-50% + var(--look-x,0px)),calc(-50% + var(--look-y,0px)));transition:transform .18s ease-out;box-shadow:0 0 13px #3280a7a8}
.pupil:after{content:"";position:absolute;top:12%;left:19%;width:22%;height:18%;background:#fff;border-radius:50%;box-shadow:9px 10px 0 -4px #ffffffb0}
.eye-stage.blink .eye{transform:scaleY(.075)}
.eye-mouth{width:44px;height:17px;border-bottom:5px solid #8ceaf3;border-radius:0 0 50% 50%;opacity:.8;transition:width .2s,height .2s}
.eye-stage.happy .eye-mouth{width:60px;height:26px;border-bottom-width:7px}
.eye-stage.searching .eye-mouth{width:13px;height:13px;border:3px solid #8ceaf3;border-radius:50%}
.eye-stage.fullscreen{position:fixed;inset:0;z-index:10000;width:100vw;height:100dvh;max-width:none;border:0;border-radius:0;min-height:0}
.eye-stage.fullscreen .eye{width:min(32vw,35vh,280px)}
.eye-stage.fullscreen .eyes{gap:min(8vw,80px)}
.eye-stage.fullscreen .eye-mouth{transform:scale(1.5)}
.eye-exit{position:absolute;right:14px;top:14px;z-index:5;display:none;background:#17243ecc}
.eye-stage.fullscreen .eye-exit{display:block}
.eye-caption{font-size:13px;color:#a3c3d6;text-align:center}
.eye-stage.fullscreen .eye-caption{font-size:18px}
.follow-status{border:1px solid #52647a;border-radius:10px;background:#101c2a;padding:11px;margin-top:10px;min-height:26px;font-weight:650}
.follow-controls label{display:block;margin:10px 0;color:#e0ecf9}
.follow-controls input[type=checkbox]{width:auto;transform:scale(1.25);margin-right:10px}
#followStop{font-size:19px;min-height:54px}
@media(prefers-reduced-motion:reduce){.eye-stage:before{animation:none}.eye,.pupil{transition:none}}

/* v3.2: vaste, ondubbelzinnige DOELKRUIS op het scherm; video + gezichtslaag
   worden samen verplaatst. De doelmarkering transformeert zelf nooit mee. */
#targetCross{position:absolute;inset:0;z-index:4;pointer-events:none}
#targetCross .target-cross-horizontal{position:absolute;left:calc(50% - 27px);top:50%;width:54px;height:2px;background:#ffe26a;box-shadow:0 0 2px #222}
#targetCross .target-cross-vertical{position:absolute;top:calc(50% - 27px);left:50%;height:54px;width:2px;background:#ffe26a;box-shadow:0 0 2px #222}
#targetCross .target-cross-center{position:absolute;top:calc(50% - 5px);left:calc(50% - 5px);height:10px;width:10px;border:2px solid #ffe26a;border-radius:50%;box-sizing:border-box}