:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;color:#26282c;background:#f4f2ef;font-synthesis:none;--accent:#bd302f;--border:#e1ded8}*{box-sizing:border-box}body{margin:0}main{max-width:660px;margin:auto;padding:24px 20px calc(32px + env(safe-area-inset-bottom))}header,.section-heading,.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:11px;letter-spacing:1.6px;color:#686660;font-weight:700}.badge{font-size:11px;padding:5px 8px;border-radius:6px;background:#e9e6e1;white-space:nowrap}.green{color:#386450;background:#eaf2ec}.intro{padding:30px 0 16px}h1{font-size:clamp(28px,7vw,40px);line-height:1.3;letter-spacing:-1px;margin:0 0 16px}h2{font-size:17px;margin:0}p{line-height:1.65}.intro p{font-size:14px;color:#6c6b66}.panel{background:#fff;border:1px solid var(--border);padding:20px;border-radius:14px;margin:16px 0;box-shadow:0 2px 8px #25201603}.hint{font-size:12px;color:#76736f;margin:10px 0;line-height:1.6}.actions{display:flex;gap:10px;margin:16px 0}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:9px;padding:13px 14px;min-height:46px;font:600 14px inherit;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;flex:1;position:relative}.button input[type=file]{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.primary{background:var(--accent);color:#fff}.secondary{background:#f6f5f2;border-color:var(--border);color:#3a3936}.quiet{background:#fff;color:#7a615b}.button:disabled{opacity:.5;cursor:not-allowed}.button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #e5a17a;outline-offset:3px}.compact .button{font-size:13px;padding:10px}.settings{margin-top:22px}.settings>label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}select{width:100%;border:1px solid var(--border);border-radius:8px;background:#fff;padding:12px;color:#333;font:inherit;font-size:14px}.switch-row{border-top:1px solid #eeece9;padding-top:14px;font-size:13px}.switch-row label,.live-toggle{display:flex;align-items:center;gap:7px}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px;flex-shrink:0}.notice{padding:14px;border:1px solid #e0ba83;background:#fff2df;border-radius:9px;font-size:13px;line-height:1.6}.camera-wrap{position:relative;background:#161616;border-radius:10px;overflow:hidden}video{width:100%;display:block;max-height:480px;object-fit:contain}.camera-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;color:white;text-shadow:0 1px 5px black}.live-toggle{font-size:13px}#preview{display:block;width:100%;height:auto;max-height:400px;object-fit:contain;margin:16px 0;border:1px solid var(--border);border-radius:8px;background:#f6f5f2}#retry{width:100%}#status{font-size:13px;line-height:1.6;padding-top:14px;color:#6d625b}progress{width:100%;height:6px;accent-color:var(--accent);margin-top:10px}.result{border-color:#d7aa9f}#code{display:block;font-size:clamp(32px,10vw,48px);font-weight:750;letter-spacing:2px;font-variant-numeric:tabular-nums;padding:18px 0 4px;overflow-wrap:anywhere}.confirm-row{font-size:13px;margin-top:16px}.text-link{font-size:13px;color:#a52929}summary{font-size:13px;font-weight:600;cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.6;color:#736d67}footer{padding:8px 4px;font-size:12px;color:#89837b;line-height:1.7}footer a{color:#8b4139}a{color:#a52929}[hidden]{display:none!important}@media(max-width:360px){main{padding:18px 12px}.panel{padding:15px}.actions{gap:7px}.button{font-size:12px;padding:12px 8px}.badge{font-size:10px}}
.preview-stage{position:relative;margin:16px 0}.preview-stage #preview{margin:0;border:0}#cropOverlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;touch-action:none}#cropOverlay.selecting{pointer-events:auto;cursor:crosshair}.candidate-choices{display:flex;flex-wrap:wrap;gap:8px}.candidate-choices button{font:inherit;font-variant-numeric:tabular-nums;padding:8px 12px;background:#f6f5f2;border:1px solid #ccc;border-radius:6px}.candidate-choices button[aria-pressed=true]{border-color:#bd302f;color:#bd302f}.scene-status{padding:10px 12px;background:#fff4df;border-radius:8px;font-size:13px;line-height:1.6}.scene-status.verified{background:#eaf2ec;color:#28543b}

.fallback-toggle{display:flex!important;align-items:center;gap:7px;font-size:13px!important;font-weight:400!important;margin-top:12px}.failure{border-color:#e2bf8a}.failure>p,.failure li{font-size:13px;line-height:1.7}.failure ul{padding-left:20px}#failureRaw{background:#f7f5f1;padding:12px;max-height:180px;overflow:auto}#diagnosticCopyText{width:100%;min-height:160px;font-size:13px}#cropPreview{display:block;width:100%;max-height:220px;object-fit:contain;background:#f2efea;border:1px solid var(--border);border-radius:8px}.preview-stage{scroll-margin-block:20px}

/* Keep the picture, primary actions and waiting state in one measured group.
   The conservative fallback also works before viewport measurement is ready. */
.capture-focus{display:flow-root;scroll-margin-block:12px;margin-top:16px;--capture-top:env(safe-area-inset-top,0px);--capture-bottom:env(safe-area-inset-bottom,0px)}
.capture-focus .actions{margin:0 0 10px;flex-wrap:wrap}
.capture-focus .actions .button{min-width:0;overflow-wrap:anywhere}
#cameraBox .actions{margin:10px 0}
#cameraBox video,#imageFocus #preview{height:auto;max-height:240px;max-height:35svh;object-fit:contain}
#imageFocus .preview-stage{margin:0}
#captureFeedback #status{padding-top:8px}
#captureFeedback #cancelRecognition{margin-top:8px;width:100%}
.capture-focus .live-toggle{line-height:1.5}
label.button{overflow:hidden}
.capture-scroll-space{height:0;pointer-events:none}
main{padding-top:12px}
header h1{font-size:20px;line-height:1.3;letter-spacing:0;margin:0}
#recognitionSettings{border-top:1px solid var(--border);padding-top:12px;margin-top:16px}
#recognitionSettings summary{margin-bottom:12px;color:#736d67}
@media(max-width:360px){.live-toggle{font-size:12px}.section-heading{flex-wrap:wrap}.settings select{max-width:100%}}
@media(orientation:landscape){main{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}}