/* Visual theme for the self-contained Android camera preview only */
:root{--bg:#041322;--panel:#0b2438;--line:#27728a;--fg:#f6ffff;--muted:#a3c9d2;--teal:#6ffff0}
body{background:radial-gradient(circle at 28% 0,#0a354c 0,transparent 42%),linear-gradient(160deg,#061829,#041322 70%)}
.shell{max-width:530px;padding-top:23px}
header{padding:0 3px 7px;align-items:center}
.brand{font-size:16px;letter-spacing:.2em;color:#c5ffff;text-shadow:0 0 14px #4dffff4d}
.back{font-size:12px;color:#b1edfa;text-decoration:none}
.hero{padding-top:13px}.hero small{letter-spacing:.2em;color:#5ef0d7}
.hero h1{font-size:25px;line-height:1.4;letter-spacing:-.01em}
.panel{background:linear-gradient(140deg,#0d3246de,#061c30fa);border-color:#32637c;
 box-shadow:0 6px 30px #0005}
.panel h2{font-size:14px;letter-spacing:.075em}
.test-pill{letter-spacing:0;font-size:10px;float:right;border-radius:50px;
 border:1px solid #317382;padding:3px 10px;color:#8ffff0}
.live-shell{min-height:350px;aspect-ratio:3/4;border:1px solid #27d6dd;
 box-shadow:0 0 0 3px #00dcdb11,0 0 31px #21e5cf33}
.live-reticle{border:2px solid #4bf3e0;box-shadow:0 0 0 999px #0003,0 0 21px #4be9e855}
.live-reticle:before,.live-reticle:after{background:#b7fff3}
.live-top span{border:1px solid #43d0ce;border-radius:99px;backdrop-filter:blur(8px)}
.live-bottom{border:1px solid #3cc7c8;background:#071c2be8;box-shadow:0 0 19px #15cbbb29}
.live-bottom strong{color:#a0fff0}
.live-ocr-hint{background:#093e43cf;border:1px solid #4eeac5}
#startLive{background:linear-gradient(98deg,#46e5db,#96ffe0);color:#073139;box-shadow:0 0 20px #3debd045}
#freezeLive{background:#113c52;color:#c7ffff;border:1px solid #3993ab}
#stopLive{background:#0e2535;color:#d4ebed;border:1px solid #3f6375}
.notice{background:#051926;border-color:#265a70}
.preview-footer{font-size:11px;text-align:center;color:#7aafb9;line-height:2;opacity:.9}


/* Region-guided on-device viewfinder. Box represents analysis CROP not true segmentation. */
#liveShell{touch-action:none}
#focusReticle{transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;
 left:18%;top:18%;width:64%;height:64%;border:2px solid #70fff1;
 border-radius:12px;box-shadow:0 0 0 999px #0007,0 0 14px #75ffe9;
 background:transparent;pointer-events:none}
.region-info{display:grid;gap:3px;margin:10px 0 3px;padding:7px 11px;
 background:#082333;border:1px solid #1d6079;border-radius:9px}
.region-info strong{font-size:12px;color:#b9fff5}
.region-info small{font-size:11px;color:#a1cbd9}
#clearRegion.region-reset{margin:6px 0;min-height:38px;font-size:12px;
 background:#113449;color:#b0f5f4;border:1px solid #247589}
#clearRegion.region-reset:disabled{opacity:.45}
/* Recognition-first: keep the actual live object above the fold on phones. */
.hero{padding:4px 3px 8px}
.hero h1{font-size:22px;margin:7px 0}
.hero p{font-size:12px;line-height:1.55;margin:4px 0 7px}
.panel{padding:14px;margin:10px 0}
.panel h2{margin-bottom:10px}
.live-shell{min-height:300px}
.live-bottom{padding:10px}
.live-bottom strong{font-size:16px}
.live-ocr-hint{padding:7px 10px;box-shadow:0 0 12px #6cfdd01e}
.live-ocr-hint strong{font-size:12px}
.live-ocr-hint small{font-size:10px}
.scanner-engine-state{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.scanner-engine-state span{font-size:10px;line-height:1.5;color:#b5dee3;
 border:1px solid #327689;background:#08293b;border-radius:8px;padding:4px 7px}
.live-ocr-hint[hidden]{display:none}
#liveBarcode{border-color:#4bd0ff;background:#0a354fdd}
#liveBarcode strong{color:#bff8ff}
@media(max-width:450px){
 .shell{padding-left:12px;padding-right:12px;padding-top:10px}
 header{margin-bottom:6px}
 .hero h1{font-size:21px}
 .panel{padding:11px}
 .live-shell{aspect-ratio:3/4}
 .live-bottom{left:7px;right:7px;bottom:7px}
}


/* LIVE TARGET HUD: cosmetics FOLLOW the actual focused crop, never fabricate identity */
#liveShell{background:#030b18;isolation:isolate}
#focusReticle{z-index:2;border-width:2px;border-color:#70fff0;
 border-radius:15px;box-shadow:0 0 0 9999px #010b16a3,
  0 0 0 2px #5affd322,0 0 22px #2bffdd88;
 transition:left .24s ease,top .24s ease,width .24s ease,height .24s ease;
 background:linear-gradient(transparent 94%,#52fff41e 98%,transparent);
 pointer-events:none}
#focusReticle:before,#focusReticle:after{background:#9bfff5;box-shadow:0 0 8px #61fff2}
.hud-target-header{position:absolute;z-index:6;left:12px;top:61px;right:12px;display:flex;
 justify-content:space-between;align-items:center;gap:6px;pointer-events:none;
 font-size:9px;letter-spacing:.13em;color:#a9fff2;text-shadow:0 0 10px #4affee}
.hud-target-header span:first-child{max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hud-target-header span:last-child{padding:4px 7px;border:1px solid #60eecb9e;
 border-radius:5px;background:#021c2fdc;white-space:nowrap}
.hud-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hud-sweep:before{content:'';position:absolute;left:0;right:0;height:2px;top:0;
 background:#7fffee77;box-shadow:0 0 18px 3px #48ffdf3a;animation:scan-sweep 5.8s linear infinite}
@keyframes scan-sweep{0%{transform:translateY(0)}100%{transform:translateY(700px)}}
.focus-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#clearRegion.region-reset,#resumeAuto.region-reset{margin:5px 0;min-height:45px;font-size:12px}
#resumeAuto.region-reset{background:#073148;color:#b7eff3;border:1px solid #379ba1}
.focus-controls button:disabled{opacity:.42}
#liveShell .live-bottom{z-index:7;pointer-events:none;background:#061827ef;
 border-color:#52cec7aa;box-shadow:0 0 20px #45d5c539}
#liveShell .live-top{z-index:7;pointer-events:none}
@media(max-width:420px){.hud-target-header{top:56px;font-size:8px}}
@media(prefers-reduced-motion:reduce){
 .hud-sweep:before{animation:none;opacity:.4}
 #focusReticle{transition:none}
}

/* SILHOUETTE projection (real on-device alpha mask, never a rectangular crop). */
#subjectProjection[hidden]{display:none!important}
.subject-projection{position:absolute;z-index:4;left:8%;top:12%;width:84%;height:67%;
 pointer-events:none;transform-origin:center;animation:object-arrive .55s ease-out both;
 isolation:isolate}
.subject-projection:before{content:"";position:absolute;inset:8% 1% 5%;
 background:radial-gradient(ellipse,#013b47ae 0,#0015228c 55%,transparent 77%);
 filter:blur(9px);z-index:-1}
#subjectCutout{width:100%;height:100%;display:block;object-fit:contain;
 filter:drop-shadow(0 0 3px #c5fff9) drop-shadow(0 0 16px #41ffe089)
 drop-shadow(0 16px 22px #001725cc);animation:object-float 4s ease-in-out infinite}
.subject-scanline{position:absolute;left:11%;right:11%;height:3px;top:0%;
 background:linear-gradient(90deg,transparent,#4affea,#dfffff,#4affea,transparent);
 box-shadow:0 0 10px 3px #3efde46e;opacity:.6;mix-blend-mode:screen;
 animation:subject-scan 3.8s linear infinite;pointer-events:none}
.subject-label{position:absolute;bottom:-4px;left:10%;right:10%;text-align:center;
 font-size:9px;font-weight:600;letter-spacing:.13em;color:#bcfff6;
 text-shadow:0 0 12px #18d4db;background:#021521c9;border:1px solid #258d90;
 padding:6px 7px;border-radius:20px}
#liveShell.has-cutout #focusReticle{opacity:0}
#liveShell.has-cutout .hud-sweep{opacity:.28}
@keyframes object-arrive{from{opacity:0;transform:translateY(22px) scale(.83)}
 to{opacity:1;transform:translateY(-4px) scale(1.03)}}
@keyframes object-float{0%,100%{transform:translateY(0)}
 50%{transform:translateY(-7px)}}
@keyframes subject-scan{from{transform:translateY(0)}to{transform:translateY(280px)}}
@media(prefers-reduced-motion:reduce){
 .subject-projection,#subjectCutout,.subject-scanline{animation:none!important}
}

/* Camera-free smoke test: visible and readable on narrow Android phones. */
.diagnostic-panel{margin:11px 0 14px;border:1px solid #327f8b;border-radius:10px;
 padding:10px;background:#092234;color:#d2f9fa}
.diagnostic-panel summary{cursor:pointer;font-weight:650;color:#9afde7;min-height:30px}
.diagnostic-panel p{font-size:12px;line-height:1.6;color:#b9d7df}
#runCutoutSelfTest,#copyDiagnostics{font-size:12px;min-height:44px;margin:5px 0;
 border:1px solid #288f9b;border-radius:8px;background:#0b4053;color:#ceffff}
#runCutoutSelfTest:disabled{opacity:.45}
#selfTestCanvas{display:block;max-width:100%;height:auto;background:
 radial-gradient(ellipse at center,#174358,#051726);
 margin:9px auto;border:1px solid #2e8991;border-radius:12px}
#selfTestCanvas[hidden]{display:none}
#selfTestState{font-size:12px;color:#caffeb;overflow-wrap:anywhere}
#diagnosticText{white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;
 overflow:auto;font:11px/1.5 ui-monospace,monospace;color:#b5ebf5;
 padding:11px;background:#03131f;border:1px solid #295d77;border-radius:8px}

/* AUTO SILHOUETTE / foreground-first camera states.
 * Keep the raw camera video alive for inference while hiding its rendering.
 * No sweep, cross, or detection frame is allowed before the camera starts.
 */
#liveShell #focusReticle:before,#liveShell #focusReticle:after{
 content:none!important;display:none!important
}
#liveShell #focusReticle{opacity:0}
#liveShell.camera-on:not(.has-cutout) #focusReticle{opacity:.75}
#liveShell #liveVideo{
 transition:opacity .38s ease,filter .38s ease;
 opacity:0;filter:none
}
#liveShell.camera-on:not(.has-cutout) #liveVideo{
 opacity:.42;filter:blur(5px) saturate(.65) brightness(.75)
}
#liveShell.has-cutout #liveVideo{
 opacity:0!important;filter:none!important
}
#liveShell.has-cutout{
 background:radial-gradient(ellipse at 50% 43%,#0e3c50 0%,#061b2a 48%,#020b15 100%)
}
#liveShell .hud-sweep{opacity:0!important;transition:opacity .2s ease}
#liveShell .hud-sweep:before{animation:none!important}
#liveShell.camera-scanning:not(.has-cutout) .hud-sweep{opacity:.7!important}
#liveShell.camera-scanning:not(.has-cutout) .hud-sweep:before{
 animation:scan-sweep 5.8s linear infinite!important
}
#liveShell.has-cutout .hud-sweep{opacity:0!important}
#liveShell.has-cutout #focusReticle{opacity:0!important}
/* The product, not its background, receives any active scan beam. */
#subjectProjection[hidden] .subject-scanline{animation:none}
@media(prefers-reduced-motion:reduce){
 #liveShell.camera-scanning .hud-sweep:before,
 #liveShell .subject-scanline{animation:none!important}
 #liveShell #liveVideo{transition:none}
}

/* Camera readability: absolutely no pre-segmentation blur or dim.
 * Full camera feed remains bright and sharp for live aiming and OCR.
 * Black replaces ONLY the visual background AFTER a valid product mask,
 * while the source video remains active for device-local inference.
 */
#liveShell.camera-on:not(.has-cutout) #liveVideo{
 opacity:1!important;
 filter:none!important;
}
#liveShell.camera-on:not(.has-cutout) #focusReticle{
 box-shadow:0 0 18px #2bffdd88!important;
}
#liveShell.has-cutout{
 background:#020710!important;
}
#liveShell.has-cutout #liveVideo{
 opacity:0!important;
 filter:none!important;
}
#liveShell.has-cutout .subject-projection:before{
 background:radial-gradient(ellipse,#123344a8 0,#000000b3 58%,transparent 78%);
}

/* Non-overlapping product identity result — outside live viewfinder. */
.identity-result{display:grid;gap:7px;margin-top:11px;padding:13px;
 border:1px solid #36c1bc;border-radius:12px;background:#0a293c}
.identity-result[hidden],.identity-result a[hidden]{display:none!important}
.identity-result strong{font-size:16px;line-height:1.5;color:#ccfff6;overflow-wrap:anywhere}
.identity-result small{font-size:11px;line-height:1.6;color:#92cfd8}
.identity-result p{font-size:12px;line-height:1.6;margin:0;color:#d8e5eb}
.identity-result a{font-size:12px;color:#8bfcf4;text-decoration:underline}
.identity-result button{min-height:43px;margin:2px 0;background:#164d59;
 color:#daffff;border:1px solid #3b9f9c;font-size:12px}
.identity-result button:disabled{opacity:.44}

/* Progress is explicit, outside camera view. Only the small glyph rotates.
   Never animate the full-window laser while camera/model is idle. */
.scan-progress{display:flex;gap:8px;align-items:center;margin:7px 0 0;
 padding:9px 11px;min-height:40px;border:1px solid #2a8794;
 background:#0a2b3d;color:#ddfff6;border-radius:9px;font-size:12px}
.scan-progress[hidden]{display:none!important}
.scan-progress:before{content:"";width:12px;height:12px;flex:none;
 border:2px solid #5abdb4;border-top-color:#f0fff9;border-radius:50%;
 animation:scan-progress-spin .9s linear infinite}
.scan-progress[data-phase="segmented"]:before{content:"✓";animation:none;
 width:15px;height:15px;border:0;font-weight:800;color:#9bffe4}
.scan-progress[data-phase="rejected"]:before,
.scan-progress[data-phase="error"]:before{content:"!";animation:none;
 border:0;font-weight:800;color:#ffdb96}
@keyframes scan-progress-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.scan-progress:before{animation:none}}