:root {color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#08111b;color:#ecf5ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 70% -20%,#17334a 0%,#08111b 58%);min-height:100vh}
.app{max-width:1360px;margin:0 auto;padding:14px 22px 10px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.eyebrow{color:#45d7ce;font-size:10px;letter-spacing:1.8px;font-weight:800;margin:0 0 3px}
h1{font-size:clamp(23px,2.6vw,32px);line-height:1.15;margin:0 0 3px}
.subhead{color:#a4b5c8;margin:0;font-size:12px}
.privacy{border:1px solid #215e5c;background:#102b30;color:#70e5db;border-radius:20px;padding:7px 11px;font-size:11px;white-space:nowrap}
.layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:12px;align-items:start}
.panel{background:#132231;border:1px solid #294053;border-radius:15px;overflow:hidden}
.video-panel{padding:12px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.section-heading h2{font-size:14px;margin:0}.section-heading span{font-size:11px;color:#88a5b8}
.video-shell{position:relative;aspect-ratio:16/9;max-height:min(39vh,360px);background:#060b12;border-radius:10px;overflow:hidden}
.video-shell video,.video-shell canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.video-shell canvas{pointer-events:none}
.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c9d8e7;text-align:center;padding:12px}
.camera-placeholder .face-icon{font-size:40px;color:#3db6b3;margin-bottom:3px}.camera-placeholder strong{font-size:16px}.camera-placeholder p{font-size:11px;color:#91a5ba;margin:6px 0 0}
.roi-selector{border:1px solid #29495a;border-radius:10px;padding:9px;margin:9px 0 6px;background:#0d1d2a}
.roi-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;font-size:12px}.roi-heading span{color:#58ddd4;font-size:11px}
.roi-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.roi-buttons button{border:1px solid #376073;background:#203446;color:#d6e7f4;font-size:10px;line-height:1.15;text-align:center;border-radius:7px;padding:7px 4px;min-height:30px;min-width:0;font-weight:600;cursor:pointer}
.roi-buttons button.selected{background:#21adab;color:#061b22;border-color:#54ede2}.roi-buttons button:disabled{opacity:.5;cursor:default}
.roi-hint{color:#a3b9cb;font-size:10px;margin:6px 0 0;line-height:1.3}
.instructions{min-height:28px;display:flex;align-items:center;color:#c8d9e9;font-size:11px;line-height:1.35;padding:3px 0}
.actions{display:flex;gap:7px;flex-wrap:nowrap}
.actions button{font:inherit;font-size:12px;font-weight:700;border:0;border-radius:9px;padding:10px 9px;cursor:pointer;flex:1;min-height:39px}
.actions #previewBtn{background:#273b4c;color:#e2eef8}.actions #startBtn{background:#35d4c6;color:#071a24}.actions #stopBtn{flex:0 0 65px;background:#273b4c;color:#e2eef8}
button:disabled{opacity:.45;cursor:default}
.metrics{display:flex;flex-direction:column;gap:12px}.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.metric{padding:14px 16px;min-height:115px}.metric p{font-size:10px;color:#a5bbcf;letter-spacing:.8px;font-weight:800;margin:0}
.number{display:flex;align-items:baseline;gap:6px;margin:10px 0 6px}.number span{font-size:clamp(31px,3vw,43px);line-height:1;font-weight:750;letter-spacing:-2px}.number small{font-size:12px;color:#94a9bc}
.metric-footer{color:#69cdc6;font-size:11px}.wave-panel{padding:14px;min-height:176px}.wave-panel canvas{width:100%;height:82px;display:block}
.progress{height:6px;border-radius:10px;background:#253b4a;margin-top:12px;overflow:hidden}.progress>div{height:100%;width:0;background:#40d2c4;transition:width .3s}
.tiny{font-size:11px;color:#a9bed0;margin:9px 0 0}footer{margin-top:12px;color:#9db0c0;font-size:10px;line-height:1.4}footer p{margin:4px 0}footer strong{color:#dce9f1}
[hidden]{display:none!important}
@media(min-width:1000px) and (max-height:740px){.app{padding-top:8px}.header{margin-bottom:9px}.video-shell{max-height:32vh}.metric{min-height:101px;padding:11px 14px}.wave-panel{min-height:155px}.wave-panel canvas{height:68px}}
@media(max-width:850px){.app{padding:12px}.layout{grid-template-columns:1fr}.video-shell{max-height:none;aspect-ratio:16/9}.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding:10px;min-height:100px}.metric p{font-size:9px}.number span{font-size:30px}.number small{font-size:10px}.metric-footer{font-size:10px}.wave-panel{min-height:150px}.wave-panel canvas{height:70px}}
@media(max-width:600px){.header{flex-wrap:wrap;gap:7px}.privacy{font-size:10px;padding:5px 9px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roi-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.video-shell{aspect-ratio:4/3}.actions{flex-wrap:wrap}.actions #previewBtn,.actions #startBtn{flex:1 1 42%}.actions #stopBtn{flex:1 1 100%}}
@media(max-width:360px){.app{padding:8px}.video-panel{padding:9px}.roi-buttons button{font-size:10px}.metric{padding:10px}}

/* Version 2.2: visible and compact at 100% zoom */
.app{max-width:1500px;padding:9px 16px 8px}
.header{margin-bottom:8px}
.video-shell{aspect-ratio:16/8.2;max-height:min(33vh,280px)}
.roi-selector{margin:7px 0 4px;padding:7px}
.roi-buttons button{min-height:32px}
.metric{min-height:100px;padding:11px 13px}
.metrics{gap:8px}.metrics-grid{gap:8px}
.wave-panel{min-height:153px;padding:11px}.wave-panel canvas{height:67px}
.build-label{color:#54ede2;font-weight:700;letter-spacing:.3px}
.camera-placeholder{background:#060b12}
@media(max-width:850px){.video-shell{aspect-ratio:16/9;max-height:none}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* MOBILE BROWSER v3: viewport-first layout. Desktop styles are unchanged. */
.swipe-hint{display:none}
@media (max-width: 700px) and (orientation: portrait){
  html,body{margin:0;width:100%;overflow-x:hidden}
  .app{width:100%;max-width:none;padding:calc(env(safe-area-inset-top,0px) + 6px) 8px calc(env(safe-area-inset-bottom,0px) + 5px)}
  .header{display:flex;flex-direction:column;gap:2px;margin:0 0 6px;position:relative;padding-right:2px}
  .header>div{min-width:0;width:100%}
  .eyebrow{font-size:8px;letter-spacing:.35px;line-height:1.2;margin:0 0 3px;white-space:normal}
  h1{font-size:clamp(18px,5.1vw,22px);line-height:1.12;margin:0}
  .subhead{display:none}
  .privacy{display:none}
  .layout{display:flex;flex-direction:column;gap:6px}
  .panel{border-radius:10px}
  .video-panel{padding:6px 7px;display:flex;flex-direction:column;gap:4px}
  .section-heading{margin:0 0 2px;min-height:14px}
  .section-heading h2{font-size:12px}
  .section-heading span{font-size:10px}
  .video-shell{width:100%;height:clamp(124px,22dvh,196px);max-height:none;aspect-ratio:auto;border-radius:8px}
  .video-shell video,.video-shell canvas{object-fit:contain}
  .camera-placeholder strong{font-size:13px}
  .camera-placeholder p{font-size:10px;margin-top:3px}
  .roi-selector{margin:0;padding:5px 6px;border-radius:7px;min-width:0}
  .roi-heading{font-size:10px;margin:0 0 4px;min-height:12px}
  .roi-heading span{font-size:10px}
  .roi-heading .swipe-hint{display:inline;color:#83a9bb;font-size:9px;font-weight:400}
  .roi-buttons{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .roi-buttons::-webkit-scrollbar{display:none}
  .roi-buttons button{flex:0 0 auto;width:auto;max-width:125px;min-width:84px;min-height:34px;padding:5px 8px;white-space:normal;font-size:10px;scroll-snap-align:start}
  .roi-hint{display:none}
  .instructions{min-height:19px;max-height:31px;font-size:10px;padding:0;line-height:1.25;overflow:hidden}
  .actions{display:flex;flex-wrap:nowrap;gap:5px}
  .actions #previewBtn,.actions #startBtn{flex:1 1 0;min-width:0}
  .actions #stopBtn{flex:0 0 46px;min-width:46px}
  .actions button{font-size:10px;line-height:1.15;padding:6px 4px;min-height:37px;border-radius:7px}
  .metrics{gap:6px}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .metric{min-width:0;min-height:67px;padding:7px 10px;display:flex;flex-direction:column;justify-content:space-between}
  .metric p{font-size:9px;line-height:1.15;letter-spacing:.35px;min-height:10px}
  .number{gap:5px;margin:2px 0 1px}
  .number span{font-size:clamp(25px,7vw,34px);letter-spacing:-1px}
  .number small{font-size:10px}
  .metric-footer{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wave-panel{padding:7px 10px;min-height:0}
  .wave-panel canvas{height:clamp(30px,5dvh,47px)}
  .progress{margin-top:5px;height:4px}
  .tiny{margin:4px 0 0;font-size:10px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  footer{margin-top:5px;font-size:9px;line-height:1.24}
  footer p{margin:2px 0}
  footer .build-label{display:none}
}
@media (max-width:700px) and (orientation:portrait) and (max-height:720px){
  .video-shell{height:clamp(100px,18dvh,140px)}
  .metric{min-height:59px;padding:5px 9px}
  .number span{font-size:25px}
  .roi-buttons button{min-height:30px}
  .actions button{min-height:34px}
  .wave-panel canvas{height:26px}
  .wave-panel{padding:5px 9px}
  .instructions{font-size:9px;min-height:15px}
  footer{font-size:8px}
}
@media (max-width:700px) and (orientation:landscape){
  .app{padding:7px 9px}.header{margin-bottom:6px}
  .layout{display:grid;grid-template-columns:1.1fr .9fr;gap:7px}
  .video-panel{padding:6px}.video-shell{max-height:38dvh;aspect-ratio:16/8}
  .roi-selector{padding:5px;margin:4px 0}
  .roi-buttons{display:flex;overflow-x:auto;gap:5px}
  .roi-buttons button{flex:0 0 92px}
  .roi-hint{display:none}
  .metrics-grid{gap:5px}.metric{min-height:65px;padding:6px}
  .number span{font-size:24px}.wave-panel{min-height:70px}.wave-panel canvas{height:28px}
}

/* v3.1: Controls first, live camera and metrics follow when users scroll. */
@media (max-width:700px) and (orientation:portrait){
  .video-panel .roi-selector{order:0}
  .video-panel .actions{order:1}
  .video-panel .section-heading{order:2;margin-top:4px}
  .video-panel .video-shell{order:3;height:clamp(205px,33dvh,345px)}
  .video-panel .instructions{order:4}
  .video-panel .video-shell video,.video-panel .video-shell canvas{object-fit:contain}
}
@media (max-width:700px) and (orientation:portrait) and (max-height:720px){
  .video-panel .video-shell{height:clamp(165px,28dvh,240px)}
}
@media (max-width:700px) and (orientation:landscape){
  .video-panel{display:flex;flex-direction:column}
  .video-panel .roi-selector{order:0}
  .video-panel .actions{order:1}
  .video-panel .section-heading{order:2}
  .video-panel .video-shell{order:3}
  .video-panel .instructions{order:4}
}

/* v3.2 — Fix mobile horizontal overflow caused by flex min-content sizing.
   Keep the controls above the camera, and preserve the camera's proportions. */
@media (max-width:700px) and (orientation:portrait) {
  html, body { width:100%; max-width:100%; }
  .app, .layout, .video-panel, .metrics,
  .metrics-grid, .wave-panel, .roi-selector,
  .roi-heading, .roi-buttons, .actions, .video-shell {
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .app, .layout, .video-panel, .metrics,
  .roi-selector, .roi-buttons, .actions, .video-shell { width:100%; }
  .layout { align-items:stretch; }
  .video-panel { flex:0 1 auto; overflow:hidden; }
  .roi-selector { align-self:stretch; }
  .roi-heading strong { min-width:0; }
  .roi-heading #roiName { max-width:40%; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .roi-buttons { flex:0 1 auto; overflow-x:auto; overflow-y:hidden; }
  .actions { flex:0 1 auto; }
  .actions button { min-width:0; overflow-wrap:anywhere; }
  .video-panel .video-shell {
    order:3;
    align-self:stretch;
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    max-height:min(36dvh,320px);
    aspect-ratio:4 / 3;
    overflow:hidden;
  }
  .video-panel .video-shell video,
  .video-panel .video-shell canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scaleX(-1);
  }
  .camera-placeholder { inset:0; max-width:100%; padding:12px; }
  .camera-placeholder strong, .camera-placeholder p { max-width:100%; overflow-wrap:break-word; }
  .metrics, .metrics-grid, .metric { min-width:0; }
  .metric { overflow:hidden; }
  .metric p { overflow-wrap:anywhere; }
}
@media (max-width:700px) and (orientation:landscape) {
  .app,.layout,.video-panel,.metrics,.roi-selector,.roi-buttons,.actions,.video-shell {min-width:0;max-width:100%;}
  .video-panel,.metrics{width:100%;}
  .video-panel .video-shell{width:100%;aspect-ratio:4/3;height:auto;max-height:43dvh;overflow:hidden}
  .video-panel .video-shell video,.video-panel .video-shell canvas{object-fit:contain}
}