:root{--bg:#f3f6fb;--card:#fff;--text:#0f172a;--muted:#5b677a;--border:#dbe3ee;--blue:#1457d9;--blue2:#e8f0ff;--navy:#071f44;--green:#16a34a;--green2:#dcfce7;--red:#dc2626;--red2:#fee2e2;--amber:#b45309;--amber2:#ffedd5;--shadow:0 14px 34px rgba(15,23,42,.08);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,#eef4ff 0,#f8fafc 240px,var(--bg));color:var(--text);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}.app-shell{max-width:1240px;margin:auto;padding:18px 18px 92px}.appbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.brand-lockup{display:flex;align-items:center;gap:13px}.logo{width:64px;height:64px;border-radius:18px;background:#fff;border:1px solid var(--border);object-fit:cover;box-shadow:var(--shadow)}h1{margin:0;font-size:clamp(28px,4.4vw,44px);letter-spacing:-.045em;line-height:1}.appbar p,.card-head p,.microcopy,.hint{margin:4px 0 0;color:var(--muted)}.top-summary{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.state-pill{display:inline-flex;align-items:center;border-radius:999px;background:var(--green2);color:#166534;font-weight:900;padding:9px 12px}.state-pill.warn{background:var(--amber2);color:#92400e}.layout{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr);gap:16px}.left-stack,.right-stack{display:flex;flex-direction:column;gap:16px}.card{background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.priority-card{border-color:#bfd2ff}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.card h2{margin:0;font-size:21px;letter-spacing:-.025em}.step-badge{display:grid;place-items:center;min-width:34px;height:34px;border-radius:999px;background:var(--blue2);color:#123d93;font-weight:900}.field-label{display:block;font-weight:900;margin:12px 0 6px}.scan-input,.small-input{width:100%;border:1px solid var(--border);border-radius:16px;background:#f8fafc;color:var(--text);font-size:18px;padding:15px 14px;outline:none}.scan-input{font-size:22px;padding:18px}.scan-input:focus,.small-input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(20,87,217,.12)}.btn{border:0;border-radius:15px;padding:13px 15px;min-height:48px;font-size:16px;font-weight:900;cursor:pointer;background:#e7edf6;color:#1e293b;margin:4px;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:var(--navy);color:#fff}.btn.ghost{background:#edf2f8;color:#334155}.btn.full{display:flex;width:100%;margin:10px 0 0}.btn:focus-visible{outline:4px solid rgba(20,87,217,.25);outline-offset:2px}.button-row,.mode-actions{display:flex;gap:8px;flex-wrap:wrap}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mode-item{background:#f8fafc;border:1px solid var(--border);border-radius:18px;padding:12px}.mode-item small,.queue-summary small{display:block;color:var(--muted);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.pill{display:inline-flex;align-items:center;margin-top:7px;border-radius:999px;padding:9px 12px;font-weight:900;background:#e2e8f0}.pill.good{background:var(--green2);color:#166534}.pill.caution{background:var(--amber2);color:#92400e}.camera-box{position:relative;border-radius:20px;overflow:hidden;background:#020617;border:2px solid #1d4ed8;box-shadow:0 16px 35px rgba(15,23,42,.2)}.camera-box video{display:block;width:100%;max-height:380px;min-height:260px;object-fit:cover;background:#000}.camera-topline{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;background:#dbeafe;color:#1e3a8a;font-weight:900}.scan-frame{position:absolute;left:12%;right:12%;top:28%;bottom:27%;border:4px solid rgba(34,197,94,.95);border-radius:20px;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.22)}.camera-status{padding:11px 12px;background:#0f172a;color:#e0f2fe;font-weight:800}.camera-scan-now{width:calc(100% - 24px);margin:12px;background:var(--green);color:#fff;font-size:18px}.camera-dont-capture{width:calc(100% - 24px);margin:0 12px 12px}.qr-display{text-align:center;background:#f8fafc;border:1px solid var(--border);border-radius:18px;padding:14px;margin-top:12px}.qr-display img{max-width:280px;width:100%;height:auto}.status-groups{display:flex;flex-direction:column;gap:12px}.status-group h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:#475569;margin:8px 0}.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.status-btn{border:2px solid transparent;border-radius:16px;padding:12px;min-height:52px;font-weight:900;text-align:left;box-shadow:0 4px 12px rgba(15,23,42,.06);cursor:pointer}.status-btn.active{border-color:#071f44;box-shadow:0 0 0 4px rgba(7,31,68,.12)}.queue-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}.queue-summary div{background:#f8fafc;border:1px solid var(--border);border-radius:18px;padding:12px}.queue-summary strong{font-size:30px;line-height:1}.queue-list{margin-top:12px;max-height:360px;overflow:auto;border-top:1px solid var(--border)}.queued-row{padding:10px 0;border-bottom:1px solid var(--border)}.queued-row.synced b{color:var(--green)}.queued-row.failed b{color:var(--red)}.log{background:#0f172a;color:#e5eefc;border-radius:18px;padding:12px;min-height:120px;max-height:260px;overflow:auto;font-size:15px;line-height:1.55}.log .ok{color:#86efac}.log .err{color:#fca5a5}.log .info{color:#bfdbfe}.check-row{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:15px;background:#f8fafc;margin:8px 0;font-weight:800}.check-row input{width:22px;height:22px}.advanced{margin:10px 0;padding:12px;border:1px solid var(--border);border-radius:16px;background:#f8fafc}.advanced summary{font-weight:900;cursor:pointer}.guide-dialog{width:min(940px,94vw);max-height:88vh;border:0;border-radius:24px;padding:0;box-shadow:0 24px 80px rgba(0,0,0,.32)}.guide-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;padding:16px;z-index:2}.quick-help{padding:16px;background:#f8fafc}.guide-panels{padding:16px}.guide-panel{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:14px;margin:0 auto 14px}.bottom-nav{display:none}.hidden{display:none!important}.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;border-radius:999px;padding:13px 18px;font-weight:1000;box-shadow:0 16px 40px rgba(0,0,0,.2);background:var(--green);color:#fff}.toast.err{background:var(--red)}.scan-feedback-flash::before{content:"QR Scanned";position:fixed;z-index:9998;left:50%;top:18px;transform:translateX(-50%);background:#22c55e;color:#052e16;font-weight:1000;padding:12px 18px;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.25);animation:scanFlash .25s ease-out}.scan-error-flash::before{content:"Not scanned";position:fixed;z-index:9998;left:50%;top:18px;transform:translateX(-50%);background:#ef4444;color:white;font-weight:1000;padding:12px 18px;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.25);animation:scanFlash .60s ease-out}@keyframes scanFlash{from{opacity:.2;transform:translateX(-50%) scale(.92)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@media (max-width:860px){body{font-size:17px}.app-shell{padding:12px 12px 96px}.appbar{position:sticky;top:0;z-index:5;background:rgba(243,246,251,.94);backdrop-filter:blur(14px);padding:8px 0}.logo{width:48px;height:48px}.appbar p{display:none}.top-summary{font-size:13px}.layout{display:block}.right-stack{display:block}.tab-panel{display:none}.tab-panel.active{display:block}.card{padding:16px;margin-bottom:14px;border-radius:20px}.mode-grid{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.button-row .btn{flex:1 1 140px}.camera-box video{min-height:310px;max-height:58vh}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-top:1px solid var(--border);padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right))}.bottom-nav button{border:0;background:transparent;border-radius:14px;padding:10px 4px;font-weight:1000;color:#475569}.bottom-nav button.active{background:var(--blue2);color:#123d93}.scan-input{font-size:21px}.btn{min-height:52px}.card h2{font-size:22px}}
@media (min-width:861px){.tab-panel{display:block!important}}
/* V12 button alignment + simple camera-first scanner mode */
.status-btn,.bottom-nav button{text-align:center;display:flex;align-items:center;justify-content:center;line-height:1.15}.mode-actions .btn,.button-row .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}.icon-btn{width:56px;height:56px;border:0;border-radius:999px;background:rgba(15,23,42,.36);color:white;font-size:31px;font-weight:900;display:grid;place-items:center;backdrop-filter:blur(12px)}.camera-status-badge{display:none}.camera-focus{background:#000;overflow:hidden}.camera-focus .app-shell,.camera-focus .bottom-nav{display:none}.camera-focus #cameraBox{position:fixed;inset:0;z-index:9999;display:block!important;border:0;border-radius:0;background:#000;box-shadow:none}.camera-focus #cameraBox video{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:100%;object-fit:cover}.camera-focus .camera-topline{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 16px) 22px 12px;background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,0));color:white}.camera-focus #cameraModeLabel{font-size:18px;font-weight:1000;border:2px solid rgba(255,255,255,.9);border-radius:18px;padding:10px 18px;background:rgba(0,0,0,.25);backdrop-filter:blur(10px)}.camera-focus .camera-status-badge{display:block;position:absolute;top:calc(env(safe-area-inset-top) + 86px);left:50%;transform:translateX(-50%);z-index:3;color:white;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:9px 16px;font-weight:1000;max-width:86vw;text-align:center;backdrop-filter:blur(10px)}.camera-focus .scan-frame{left:14%;right:14%;top:32%;bottom:24%;border:8px solid rgba(255,255,255,.64);border-radius:40px;box-shadow:none}.camera-focus .scan-frame:before,.camera-focus .scan-frame:after{content:"";position:absolute;inset:-8px;border-radius:40px;border:8px solid transparent;border-top-color:rgba(255,255,255,.92);border-bottom-color:rgba(255,255,255,.92)}.camera-focus .scan-frame:after{border-top-color:transparent;border-bottom-color:transparent;border-left-color:rgba(255,255,255,.92);border-right-color:rgba(255,255,255,.92)}.camera-focus .camera-status{position:absolute;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom) + 112px);z-index:3;background:rgba(0,0,0,.44);color:white;border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:12px;text-align:center;backdrop-filter:blur(10px)}.camera-focus .camera-scan-now{position:absolute;left:22px;right:22px;bottom:calc(env(safe-area-inset-bottom) + 38px);z-index:3;width:auto;margin:0;border-radius:26px;min-height:64px;font-size:21px;background:rgba(255,255,255,.86);color:#111827}.camera-focus .camera-dont-capture{position:absolute;right:22px;bottom:calc(env(safe-area-inset-bottom) + 112px);z-index:4;width:auto;margin:0;background:rgba(0,0,0,.42);color:white;border:1px solid rgba(255,255,255,.28)}.camera-focus #scanCameraNowBtn.hidden{display:none!important}.camera-focus #doNotCaptureBtn.hidden{display:none!important}@media (orientation:landscape){.camera-focus .scan-frame{left:28%;right:28%;top:28%;bottom:18%}}

/* V13 compact landscape + top active status */
.active-status{background:#dbeafe;color:#1e3a8a}.scan-card #cameraBox{margin-top:12px}.camera-card{display:none!important}@media (min-width:861px){.app-shell{max-width:1280px;padding:10px 14px 16px}.appbar{margin-bottom:8px}.logo{width:52px;height:52px;border-radius:14px}h1{font-size:30px}.appbar p{font-size:14px}.state-pill{padding:7px 10px}.layout{grid-template-columns:minmax(330px,.78fr) minmax(520px,1.22fr);gap:10px}.left-stack,.right-stack{gap:10px}.card{padding:12px;border-radius:18px}.card-head{margin-bottom:8px}.card h2{font-size:18px}.card-head p,.microcopy{font-size:13px;line-height:1.25}.step-badge{min-width:28px;height:28px}.scan-input{font-size:19px;padding:13px}.small-input{font-size:15px;padding:10px}.btn{min-height:40px;padding:9px 11px;font-size:14px;border-radius:12px}.mode-grid{gap:7px}.mode-item{padding:8px;border-radius:14px}.mode-item small,.queue-summary small{font-size:10px}.pill{padding:7px 10px;margin-top:5px}.status-groups{gap:6px}.status-group h3{font-size:12px;margin:4px 0}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.status-btn{min-height:40px;padding:8px;font-size:13px;border-radius:12px}.queue-summary{gap:7px;margin-bottom:6px}.queue-summary div{padding:8px;border-radius:14px}.queue-summary strong{font-size:22px}.check-row{padding:8px;margin:6px 0}.check-row input{width:18px;height:18px}.advanced{padding:8px;margin:6px 0}.log{min-height:86px;max-height:130px;font-size:13px;padding:9px}.qr-display{padding:8px}.qr-display img{max-width:180px}.queue-list{max-height:145px}.settings-card .field-label{margin:7px 0 4px}.button-row{gap:4px}.button-row .btn{flex:1 1 120px}.mode-actions .btn{flex:1 1 150px}}
@media (min-width:861px) and (max-height:760px){.title p,.card-head p,.microcopy{display:none}.app-shell{padding-top:6px}.card{padding:10px}.scan-input{padding:10px}.btn{min-height:36px;padding:7px 9px}.log{min-height:70px;max-height:95px}.status-btn{min-height:36px;padding:6px}.mode-item{padding:6px}.queue-list{max-height:95px}}

/* V13 no body scroll landscape fit */
@media (min-width:861px){html,body{height:100%;overflow:hidden}.app-shell{height:100vh;overflow:hidden;display:flex;flex-direction:column}.layout{flex:1;min-height:0;overflow:hidden}.left-stack,.right-stack{min-height:0;overflow:hidden}.left-stack{display:grid;grid-template-rows:auto auto minmax(70px,1fr)}.right-stack{display:grid;grid-template-rows:minmax(190px,1fr) auto auto}.status-card,.queue-card,.settings-card,.activity-card{min-height:0;overflow:hidden}.status-card{display:flex!important;flex-direction:column}.status-groups{min-height:0;overflow:auto;padding-right:3px}.settings-card .card-head,.queue-card .card-head{margin-bottom:5px}.settings-card .card-head p,.queue-card .card-head p{display:none}.settings-card .btn.full{margin-top:6px}.queue-card .btn.full{margin-top:5px}.queue-summary{grid-template-columns:repeat(2,1fr)}.activity-card{display:flex;flex-direction:column}.activity-card .log{flex:1;min-height:0;max-height:none}.mode-card .card-head p{display:none}.scan-card .field-label,.settings-card .field-label{font-size:12px}.top-summary{align-items:center}}
@media (min-width:861px) and (max-height:650px){.appbar{margin-bottom:5px}.logo{width:44px;height:44px}h1{font-size:25px}.state-pill{font-size:12px;padding:5px 8px}.card{padding:8px}.card h2{font-size:16px}.scan-input{font-size:17px;padding:8px}.small-input{font-size:14px;padding:7px}.btn{min-height:32px;padding:6px 8px;font-size:13px}.step-badge{display:none}.mode-grid{grid-template-columns:repeat(3,1fr)}.mode-item{padding:5px}.pill{padding:5px 8px}.status-btn{min-height:31px;font-size:12px;padding:5px}.status-grid{gap:4px}.status-group h3{font-size:11px;margin:2px 0}.check-row{font-size:13px;padding:5px;margin:4px 0}.advanced{padding:5px}.queue-summary div{padding:5px}.queue-summary strong{font-size:18px}.log{font-size:12px}.right-stack{grid-template-rows:minmax(170px,1fr) auto auto}}

/* V14 active pill color and more status room */
#topActiveStatus{transition:background .16s ease,color .16s ease;min-width:150px;justify-content:center}.status-card{padding-bottom:10px}@media (min-width:861px){.status-card{padding-bottom:8px}.status-groups{padding-bottom:2px}.top-summary .state-pill{display:inline-flex;align-items:center;justify-content:center}}

/* V15 professional visual system: restrained WAC industrial app */
:root{--bg:#F5F7FA;--card:#FFFFFF;--surface:#FFFFFF;--surface-muted:#EEF2F6;--text:#17202A;--muted:#667085;--border:#DDE3EA;--blue:#1E5AA8;--navy:#16457F;--green:#18A058;--orange:#F5A524;--red:#D92D20;--shadow:0 1px 2px rgba(16,24,40,.06);--shadow-md:0 4px 12px rgba(16,24,40,.08);--shadow-lg:0 12px 32px rgba(16,24,40,.14);--radius:18px}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,rgba(30,90,168,.08),transparent 32rem),linear-gradient(180deg,#F7F9FC 0%,#EEF2F6 100%);color:var(--text);font-weight:400}.appbar{background:rgba(245,247,250,.72);border:1px solid rgba(221,227,234,.72);border-radius:24px;padding:10px 12px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.logo{box-shadow:var(--shadow);border-color:var(--border)}h1{color:#0B1F3A;font-weight:800}.appbar p{color:var(--muted);font-weight:500}.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.priority-card{border-color:rgba(30,90,168,.25);box-shadow:var(--shadow-md)}.card h2{font-weight:800;color:#101828}.card-head p,.microcopy{color:var(--muted)}.step-badge{background:#E8F0FF;color:#16457F}.state-pill{border:1px solid rgba(24,160,88,.20);box-shadow:var(--shadow);font-weight:800}.state-pill.warn{background:#FFF4E5;color:#8A4B00;border-color:rgba(245,165,36,.25)}#topActiveStatus{position:relative;border:1px solid rgba(30,90,168,.22);box-shadow:var(--shadow);font-weight:900}#topActiveStatus::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--status-color,#1E5AA8);display:inline-block;margin-right:7px;box-shadow:0 0 0 3px color-mix(in srgb,var(--status-color,#1E5AA8) 18%,transparent)}.scan-input,.small-input{background:#FBFCFE;border-color:#CFD8E3;color:#17202A;box-shadow:inset 0 1px 0 rgba(16,24,40,.02)}.scan-input:focus,.small-input:focus{border-color:#1E5AA8;box-shadow:0 0 0 4px rgba(30,90,168,.14)}.btn{border:1px solid transparent;border-radius:14px;font-weight:800;letter-spacing:-.01em;transition:background-color 120ms ease,transform 120ms ease,box-shadow 120ms ease,border-color 120ms ease}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(180deg,#2468BA 0%,#1E5AA8 100%);border-color:rgba(255,255,255,.16);box-shadow:0 4px 10px rgba(30,90,168,.24);color:#fff}.btn.secondary{background:#0F2F5F;color:white;box-shadow:0 3px 8px rgba(15,47,95,.18)}.btn.ghost{background:#FFFFFF;color:#17202A;border-color:#DDE3EA;box-shadow:var(--shadow)}.mode-item{background:#FBFCFE;border-color:#DDE3EA;box-shadow:var(--shadow)}.pill{border:1px solid rgba(16,24,40,.08);box-shadow:var(--shadow);font-weight:900}.status-card{background:#FFFFFF}.status-groups{scrollbar-width:thin}.status-btn{background:#fff;border:1px solid rgba(16,24,40,.10);border-left:5px solid var(--status-color,#94a3b8);box-shadow:var(--shadow);color:#17202A;font-weight:800;justify-content:flex-start;text-align:left}.status-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.status-btn.active{border-color:rgba(16,24,40,.16);border-left-color:var(--status-color,#1E5AA8);box-shadow:0 0 0 3px color-mix(in srgb,var(--status-color,#1E5AA8) 18%,transparent),var(--shadow-md);background:linear-gradient(180deg,#fff,rgba(238,242,246,.78))}.status-group h3{color:#475467;font-weight:900;letter-spacing:.075em}.queue-summary div{background:#FBFCFE;border-color:#DDE3EA;box-shadow:var(--shadow)}.queue-summary strong{color:#101828}.log{background:transparent;color:#17202A;border-radius:0;padding:0;display:flex;flex-direction:column;gap:8px}.activity-item{background:#FFFFFF;border:1px solid #E3E8EF;border-left:4px solid #2563EB;border-radius:14px;padding:10px 12px;box-shadow:0 1px 2px rgba(16,24,40,.04);color:#17202A}.activity-item b{display:block;font-size:14px;line-height:1.25;font-weight:800}.activity-item small{display:block;color:#667085;margin-top:3px;font-weight:600}.activity-item.ok{border-left-color:#18A058}.activity-item.err{border-left-color:#D92D20}.activity-item.info{border-left-color:#1E5AA8}.check-row,.advanced{background:#FBFCFE;border-color:#DDE3EA}.bottom-nav{box-shadow:0 -4px 16px rgba(16,24,40,.08)}.bottom-nav button.active{background:#E8F0FF;color:#16457F}.camera-focus{background:#07111f}.camera-focus .camera-topline,.camera-focus .camera-status,.camera-focus .camera-status-badge,.camera-focus .camera-dont-capture{background:rgba(10,18,28,.58);backdrop-filter:blur(6px);border-color:rgba(255,255,255,.16)}.camera-focus .scan-frame{border:2px solid rgba(255,255,255,.82);border-radius:24px;box-shadow:0 0 0 999px rgba(0,0,0,.42),0 0 32px rgba(30,90,168,.35)}.camera-focus .scan-frame:before,.camera-focus .scan-frame:after{display:none}.camera-focus .camera-scan-now{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(238,242,246,.94));color:#17202A;box-shadow:var(--shadow-lg)}.toast{box-shadow:var(--shadow-lg)}.scan-feedback-flash::before{background:rgba(24,160,88,.92);color:white}.scan-error-flash::before{background:rgba(217,45,32,.92)}@media (min-width:861px){.appbar{padding:8px 10px}.status-btn{justify-content:center;text-align:center;border-left-width:4px}.activity-item{padding:8px 10px}.activity-item b{font-size:13px}.activity-item small{font-size:12px}}@media (max-width:860px){.appbar{border-radius:0;border-left:0;border-right:0;border-top:0}.status-btn{justify-content:center;text-align:center;border-left-width:0;border-top:5px solid var(--status-color,#94a3b8)}}

/* V16 camera black screen fix: keep camera container visible while hiding surrounding UI */
.camera-focus .app-shell{display:block!important;max-width:none!important;width:100vw!important;height:100vh!important;padding:0!important;margin:0!important;overflow:hidden!important;background:#000!important}.camera-focus .appbar{display:none!important}.camera-focus .layout{display:block!important;width:100vw!important;height:100vh!important;overflow:hidden!important}.camera-focus .left-stack{display:block!important;width:100vw!important;height:100vh!important;overflow:hidden!important}.camera-focus .right-stack{display:none!important}.camera-focus .scan-card{display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important;z-index:9998!important}.camera-focus .scan-card>*:not(#cameraBox){display:none!important}.camera-focus #cameraBox{display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;border:0!important;border-radius:0!important;background:#000!important;overflow:hidden!important}.camera-focus #video{display:block!important;position:absolute!important;inset:0!important;width:100vw!important;height:100vh!important;max-height:none!important;min-height:100vh!important;object-fit:cover!important;background:#000!important}.camera-focus #scanCanvas{display:none!important}.camera-focus .bottom-nav{display:none!important}

/* V17 camera ergonomics and zoom */
.camera-focus .camera-topline{top:auto!important;bottom:calc(env(safe-area-inset-bottom) + 18px)!important;left:18px!important;right:18px!important;z-index:5!important;padding:0!important;background:transparent!important;border:0!important;display:grid!important;grid-template-columns:64px 1fr 64px!important;gap:12px!important;align-items:center!important}.camera-focus #cameraModeLabel{justify-self:center;min-height:56px;display:flex;align-items:center;justify-content:center;border-radius:999px;padding:0 22px;background:rgba(10,18,28,.68);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 24px rgba(0,0,0,.22)}.camera-focus .icon-btn{width:64px!important;height:64px!important;background:rgba(10,18,28,.68)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 8px 24px rgba(0,0,0,.22)!important}.camera-focus .camera-status-badge{top:calc(env(safe-area-inset-top) + 22px)!important}.camera-focus .scan-frame{top:20%!important;bottom:38%!important;left:12%!important;right:12%!important}.camera-focus .camera-status{bottom:calc(env(safe-area-inset-bottom) + 160px)!important;left:18px!important;right:18px!important}.camera-focus .camera-scan-now{bottom:calc(env(safe-area-inset-bottom) + 92px)!important;left:22px!important;right:22px!important;min-height:56px!important}.camera-focus .camera-dont-capture{bottom:calc(env(safe-area-inset-bottom) + 160px)!important}.camera-zoom-controls{display:flex;align-items:center;gap:10px;position:absolute;z-index:6;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom) + 232px);background:rgba(10,18,28,.62);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 10px;backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.22)}.zoom-btn{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.14);color:#fff;font-size:28px;font-weight:900;display:grid;place-items:center}.camera-zoom-controls input[type=range]{flex:1;accent-color:#fff;min-width:0}.camera-focus #cameraZoomControls.hidden{display:none!important}@media (orientation:landscape){.camera-focus .scan-frame{left:30%!important;right:30%!important;top:16%!important;bottom:28%!important}.camera-zoom-controls{left:50%;right:auto;transform:translateX(-50%);width:min(520px,70vw);bottom:calc(env(safe-area-inset-bottom) + 96px)}.camera-focus .camera-topline{left:24px!important;right:24px!important}.camera-focus .camera-status{bottom:calc(env(safe-area-inset-bottom) + 168px)!important}}

/* V18 logo blue outer background: this is intentionally LAST so it wins */
:root{--logo-blue:#0b40a3;--logo-blue-deep:#073070;--logo-blue-soft:#1e5083;}
html{background:var(--logo-blue-deep)!important;}
body{background:radial-gradient(circle at top left,rgba(255,255,255,.10),transparent 30rem),linear-gradient(180deg,var(--logo-blue) 0%,var(--logo-blue-soft) 58%,var(--logo-blue-deep) 100%)!important;}
.app-shell{background:transparent!important;}
@media (min-width:861px){html,body{background:radial-gradient(circle at top left,rgba(255,255,255,.10),transparent 30rem),linear-gradient(180deg,var(--logo-blue) 0%,var(--logo-blue-soft) 58%,var(--logo-blue-deep) 100%)!important;}}
.camera-focus body,.camera-focus{background:#07111f!important;}

/* V19 fluid responsive sizing system: viewport/rem/clamp instead of brittle fixed px */
:root{
  --fluid-gap:clamp(0.45rem,1.4vw,1rem);
  --fluid-pad:clamp(0.65rem,1.7vw,1.15rem);
  --fluid-card-radius:clamp(0.9rem,2.2vw,1.35rem);
  --fluid-control-radius:clamp(0.7rem,1.8vw,1rem);
  --fluid-touch:clamp(2.75rem,7.4vw,3.4rem);
  --fluid-small-touch:clamp(2.25rem,6vw,2.8rem);
  --fluid-title:clamp(1.55rem,5.5vw,2.55rem);
  --fluid-h2:clamp(1.02rem,2.6vw,1.35rem);
  --fluid-body:clamp(0.94rem,2.4vw,1.08rem);
  --fluid-label:clamp(0.75rem,1.9vw,0.9rem);
  --camera-edge:clamp(0.9rem,4.5vw,1.6rem);
  --camera-bottom-controls:calc(env(safe-area-inset-bottom) + clamp(0.8rem,4vh,1.7rem));
  --camera-control-size:clamp(3.1rem,14vw,4.2rem);
}
body{font-size:var(--fluid-body)!important;}
.app-shell{width:min(100%,78rem);padding:clamp(0.55rem,2vw,1.15rem)!important;padding-bottom:calc(clamp(5.5rem,12vh,7rem) + env(safe-area-inset-bottom))!important;}
h1{font-size:var(--fluid-title)!important}.card h2{font-size:var(--fluid-h2)!important}.card{padding:var(--fluid-pad)!important;border-radius:var(--fluid-card-radius)!important}.layout,.left-stack,.right-stack,.status-groups{gap:var(--fluid-gap)!important}.btn{min-height:var(--fluid-touch)!important;border-radius:var(--fluid-control-radius)!important;font-size:clamp(0.86rem,2.2vw,1rem)!important;padding:clamp(0.55rem,1.6vw,0.85rem) clamp(0.7rem,2vw,1rem)!important}.scan-input,.small-input{border-radius:var(--fluid-control-radius)!important;font-size:clamp(1rem,3.6vw,1.35rem)!important;padding:clamp(0.65rem,2vw,1.05rem)!important}.small-input{font-size:clamp(0.92rem,2.5vw,1.05rem)!important}.status-grid{gap:clamp(0.35rem,1.25vw,0.65rem)!important}.status-btn{min-height:clamp(2.55rem,7.2vw,3.25rem)!important;border-radius:clamp(0.65rem,1.8vw,1rem)!important;font-size:clamp(0.78rem,2.1vw,0.95rem)!important;padding:clamp(0.45rem,1.4vw,0.8rem)!important}.mode-grid,.queue-summary{gap:var(--fluid-gap)!important}.mode-item,.queue-summary div,.check-row,.advanced{padding:clamp(0.5rem,1.55vw,0.85rem)!important;border-radius:clamp(0.7rem,1.7vw,1rem)!important}.state-pill{padding:clamp(0.38rem,1.25vw,0.65rem) clamp(0.55rem,1.7vw,0.85rem)!important;font-size:clamp(0.74rem,2vw,0.92rem)!important}.logo{width:clamp(2.75rem,9vw,4rem)!important;height:clamp(2.75rem,9vw,4rem)!important;border-radius:clamp(0.8rem,2.2vw,1.15rem)!important}.appbar{gap:var(--fluid-gap)!important;padding:clamp(0.45rem,1.35vw,0.8rem)!important;border-radius:clamp(1rem,3vw,1.5rem)!important}.log{gap:clamp(0.35rem,1vw,0.55rem)!important}.activity-item{padding:clamp(0.45rem,1.2vw,0.75rem) clamp(0.55rem,1.55vw,0.85rem)!important;border-radius:clamp(0.65rem,1.7vw,0.95rem)!important}.bottom-nav{padding:clamp(0.35rem,1.4vw,0.6rem) max(clamp(0.45rem,2vw,0.8rem),env(safe-area-inset-left)) calc(clamp(0.35rem,1.4vw,0.6rem) + env(safe-area-inset-bottom)) max(clamp(0.45rem,2vw,0.8rem),env(safe-area-inset-right))!important}.bottom-nav button{min-height:clamp(2.45rem,7.5vw,3.15rem)!important;border-radius:clamp(0.65rem,2vw,0.95rem)!important;font-size:clamp(0.74rem,2.2vw,0.92rem)!important}
@media (max-width:860px){.app-shell{width:100%;padding-left:clamp(0.55rem,3vw,1rem)!important;padding-right:clamp(0.55rem,3vw,1rem)!important}.top-summary{gap:clamp(0.3rem,1.8vw,0.55rem)!important}.brand-lockup{gap:clamp(0.45rem,2vw,0.8rem)!important}.mode-grid{grid-template-columns:1fr!important}.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:861px){.app-shell{height:100vh!important;max-width:98vw!important;padding:clamp(0.35rem,1.2vh,0.75rem) clamp(0.6rem,1.2vw,1rem)!important}.layout{grid-template-columns:minmax(20rem,38%) minmax(30rem,62%)!important;gap:clamp(0.45rem,1vw,0.75rem)!important}.left-stack,.right-stack{gap:clamp(0.4rem,1vh,0.7rem)!important}.right-stack{grid-template-rows:minmax(0,1fr) auto auto!important}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.card{padding:clamp(0.45rem,1.1vh,0.75rem)!important}.btn{min-height:clamp(2rem,5.2vh,2.6rem)!important}.status-btn{min-height:clamp(1.9rem,5vh,2.5rem)!important}.log{max-height:none!important}.queue-list{max-height:18vh!important}}
/* Camera layout uses viewport percentages so it looks consistent across phone sizes */
.camera-focus .camera-topline{left:var(--camera-edge)!important;right:var(--camera-edge)!important;bottom:var(--camera-bottom-controls)!important;grid-template-columns:var(--camera-control-size) 1fr var(--camera-control-size)!important;gap:clamp(0.55rem,2.8vw,0.9rem)!important}.camera-focus .icon-btn{width:var(--camera-control-size)!important;height:var(--camera-control-size)!important;font-size:clamp(1.55rem,7vw,2rem)!important}.camera-focus #cameraModeLabel{min-height:var(--camera-control-size)!important;padding:0 clamp(1rem,5vw,1.5rem)!important;font-size:clamp(0.95rem,4vw,1.15rem)!important}.camera-focus .camera-status-badge{top:calc(env(safe-area-inset-top) + clamp(0.75rem,3.5vh,1.4rem))!important;padding:clamp(0.45rem,1.6vh,0.65rem) clamp(0.8rem,4vw,1.1rem)!important;font-size:clamp(0.85rem,3.5vw,1rem)!important}.camera-focus .scan-frame{left:12vw!important;right:12vw!important;top:18vh!important;bottom:43vh!important;border-radius:clamp(1rem,5vw,1.7rem)!important}.camera-zoom-controls{left:var(--camera-edge)!important;right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 32vh)!important;padding:clamp(0.35rem,1.4vh,0.55rem) clamp(0.45rem,2vw,0.7rem)!important}.zoom-btn{width:clamp(2.35rem,10vw,3rem)!important;height:clamp(2.35rem,10vw,3rem)!important;font-size:clamp(1.45rem,6vw,1.9rem)!important}.camera-focus .camera-status{left:var(--camera-edge)!important;right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 24vh)!important;font-size:clamp(0.82rem,3.2vw,0.98rem)!important;padding:clamp(0.55rem,2vw,0.8rem)!important}.camera-focus .camera-scan-now{left:var(--camera-edge)!important;right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 13vh)!important;min-height:clamp(3rem,10vh,3.7rem)!important;font-size:clamp(1rem,4.2vw,1.25rem)!important}.camera-focus .camera-dont-capture{right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 24vh)!important}
@media (orientation:landscape){.camera-focus .scan-frame{left:31vw!important;right:31vw!important;top:14vh!important;bottom:30vh!important}.camera-zoom-controls{left:50%!important;right:auto!important;width:min(34rem,62vw)!important;bottom:calc(env(safe-area-inset-bottom) + 18vh)!important}.camera-focus .camera-status{bottom:calc(env(safe-area-inset-bottom) + 30vh)!important}.camera-focus .camera-topline{left:clamp(1rem,3vw,1.8rem)!important;right:clamp(1rem,3vw,1.8rem)!important}}

/* V20 desktop landscape scroll and darker logo-blue background: intentionally LAST */
:root{--logo-blue:#082b63;--logo-blue-deep:#041a38;--logo-blue-soft:#0b3774;}
html{background:var(--logo-blue-deep)!important;}
body{background:radial-gradient(circle at top left,rgba(255,255,255,.075),transparent 28rem),linear-gradient(180deg,var(--logo-blue) 0%,var(--logo-blue-soft) 46%,var(--logo-blue-deep) 100%)!important;}
.logo{content:url('assets/icon-512.png');object-fit:contain!important;background:#071f44!important;image-rendering:auto;filter:contrast(1.03) saturate(1.04);}
/* Do not trap desktop/landscape users in a no-scroll viewport. Phone portrait remains tabbed. */
@media (min-width:861px){
  html,body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;}
  .app-shell{height:auto!important;min-height:100svh!important;overflow:visible!important;display:block!important;max-width:min(98vw,82rem)!important;}
  .layout{height:auto!important;min-height:0!important;overflow:visible!important;display:grid!important;align-items:start!important;grid-template-columns:minmax(21rem,38%) minmax(31rem,62%)!important;}
  .left-stack,.right-stack{height:auto!important;min-height:0!important;overflow:visible!important;display:flex!important;flex-direction:column!important;}
  .status-card,.queue-card,.settings-card,.activity-card{height:auto!important;min-height:0!important;overflow:visible!important;}
  .status-card{display:block!important;}
  .status-groups{max-height:none!important;overflow:visible!important;}
  .activity-card .log{max-height:clamp(7rem,18vh,14rem)!important;overflow:auto!important;}
  .queue-list{max-height:clamp(7rem,22vh,16rem)!important;overflow:auto!important;}
}
@media (min-width:861px) and (orientation:landscape){
  html,body{overflow-y:auto!important;}
  .app-shell{padding-bottom:clamp(0.8rem,2vh,1.4rem)!important;}
}
.camera-focus html,.camera-focus body,.camera-focus{background:#07111f!important;overflow:hidden!important;}

/* V21 flat statuses: no category headings, tighter cleaner grid */
.flat-status-group{margin:0!important}.flat-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.status-group h3{display:none!important}.settings-card a.btn{text-decoration:none}@media (min-width:861px){.flat-status-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.status-groups{gap:clamp(.3rem,.8vw,.55rem)!important}}


/* V22 camera scan-frame higher */
.camera-focus .scan-frame {
  top: 14vh !important;
  bottom: 48vh !important;
}


/* V23 higher-accuracy camera scanner, QR lock-on guide, and flashlight */
.scan-frame{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.scan-frame>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:88%;padding:.45rem .75rem;border-radius:999px;background:rgba(4,12,24,.54);color:#fff;font-size:clamp(.75rem,2.6vw,.92rem);font-weight:850;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.5);backdrop-filter:blur(5px)}
.scan-frame::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(96,165,250,.95),transparent);box-shadow:0 0 14px rgba(96,165,250,.9);animation:qrScanLine 1.7s ease-in-out infinite}
@keyframes qrScanLine{0%,100%{transform:translateY(-7vh);opacity:.35}50%{transform:translateY(7vh);opacity:1}}
.scan-frame.detecting{border-color:#fbbf24!important;box-shadow:0 0 0 999px rgba(0,0,0,.38),0 0 30px rgba(251,191,36,.45)!important}
.scan-frame.locked{border-color:#22c55e!important;box-shadow:0 0 0 999px rgba(0,0,0,.30),0 0 36px rgba(34,197,94,.7)!important}
.scan-frame.detecting>span{background:rgba(146,64,14,.82)}
.scan-frame.locked>span{background:rgba(20,83,45,.86)}
.scan-frame.locked>span::before{content:"✓ ";font-weight:1000}
.qr-lock-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.qr-lock-overlay polygon{fill:rgba(251,191,36,.10);stroke:#fbbf24;stroke-width:7;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 7px rgba(0,0,0,.75))}
.qr-lock-overlay.locked polygon{fill:rgba(34,197,94,.12);stroke:#22c55e;animation:qrLockPulse .38s ease-out}
@keyframes qrLockPulse{from{stroke-width:12;opacity:.45}to{stroke-width:7;opacity:1}}
.camera-torch{position:absolute;z-index:7;top:calc(env(safe-area-inset-top) + 1rem);right:var(--camera-edge,1rem);display:grid!important}
.camera-torch.hidden{display:none!important}
.camera-torch.active{background:rgba(255,255,255,.94)!important;color:#111827!important;border-color:#fff!important;box-shadow:0 0 0 4px rgba(250,204,21,.35),0 8px 24px rgba(0,0,0,.28)!important}
.camera-torch span{font-size:.95em;line-height:1}
.camera-focus .camera-torch{width:var(--camera-control-size)!important;height:var(--camera-control-size)!important}
.camera-focus .camera-status-badge{max-width:calc(100vw - 2 * var(--camera-control-size) - 4rem)!important}
@media (orientation:landscape){
  .camera-focus .camera-torch{top:calc(env(safe-area-inset-top) + .8rem)!important;right:clamp(1rem,3vw,1.8rem)!important}
  .scan-frame::after{animation-name:qrScanLineLandscape}
  @keyframes qrScanLineLandscape{0%,100%{transform:translateY(-12vh);opacity:.35}50%{transform:translateY(12vh);opacity:1}}
}
@media (prefers-reduced-motion:reduce){.scan-frame::after,.qr-lock-overlay.locked polygon{animation:none}}

.camera-focus .scan-frame::after{display:block!important}
.scan-frame.error{border-color:#ef4444!important;box-shadow:0 0 0 999px rgba(0,0,0,.40),0 0 32px rgba(239,68,68,.6)!important}
.scan-frame.error>span{background:rgba(127,29,29,.88)}
.scan-frame.error>span::before{content:"! ";font-weight:1000}
.qr-lock-overlay.error polygon{fill:rgba(239,68,68,.12);stroke:#ef4444}


/* V24 polished production scanner */
.toast.warn{background:#b45309;color:#fff}
.camera-focus .scan-frame{display:block!important;overflow:visible;will-change:transform,border-color,box-shadow;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}
.camera-focus .scan-frame::after{content:""!important;display:block!important;position:absolute!important;left:8%!important;right:8%!important;top:12%!important;height:2px!important;border:0!important;border-radius:999px!important;background:linear-gradient(90deg,transparent,rgba(147,197,253,.98),#fff,rgba(147,197,253,.98),transparent)!important;box-shadow:0 0 16px rgba(96,165,250,.95)!important;animation:qrCenterSweep 1.45s cubic-bezier(.45,0,.55,1) infinite!important;opacity:.92}
@keyframes qrCenterSweep{0%{top:18%;transform: translateY(0);opacity:.35}48%,52%{top:50%;opacity:1}100%{top:87%;opacity:.35}}
.scan-frame.ready{border-color:#93c5fd!important;box-shadow:0 0 0 9999px rgba(0,0,0,.34),0 0 34px rgba(96,165,250,.62)!important}
.scan-frame.duplicate{border-color:#f59e0b!important;box-shadow:0 0 0 9999px rgba(0,0,0,.38),0 0 30px rgba(245,158,11,.55)!important}
.scan-frame.ready>span{background:rgba(30,64,175,.82)}
.scan-frame.ready>span::before{content:"Ready · ";font-weight:1000}
.scan-frame.duplicate>span{background:rgba(146,64,14,.88)}
.scan-frame.duplicate>span::before{content:"Duplicate · ";font-weight:1000}
.qr-lock-overlay.ready polygon{fill:rgba(96,165,250,.10);stroke:#93c5fd}
.qr-lock-overlay.duplicate polygon{fill:rgba(245,158,11,.12);stroke:#f59e0b}
.scan-frame.success-flash{border-color:#fff!important;box-shadow:0 0 0 9999px rgba(34,197,94,.62),0 0 42px rgba(34,197,94,.95)!important;animation:cameraSuccessFlash .45s ease-out!important}
@keyframes cameraSuccessFlash{0%{box-shadow:0 0 0 9999px rgba(34,197,94,0),0 0 0 rgba(34,197,94,0)}20%{box-shadow:0 0 0 9999px rgba(34,197,94,.68),0 0 48px rgba(34,197,94,1)}100%{box-shadow:0 0 0 9999px rgba(34,197,94,0),0 0 24px rgba(34,197,94,.25)}}
.scan-frame.invalid-shake{animation:cameraInvalidShake .34s ease both!important}
@keyframes cameraInvalidShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.camera-box.duplicate-pulse .camera-status{animation:duplicateStatusPulse .4s ease}
@keyframes duplicateStatusPulse{0%,100%{background:rgba(10,18,28,.68)}45%{background:rgba(146,64,14,.92)}}
.camera-focus .camera-status-badge{top:calc(env(safe-area-inset-top) + clamp(4.35rem,9.5vh,5.5rem))!important;max-width:min(82vw,34rem)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.camera-focus .scan-frame{top:max(calc(env(safe-area-inset-top) + 8.25rem),19vh)!important;bottom:43vh!important}
@media (orientation:landscape){.camera-focus .scan-frame{top:14vh!important;bottom:30vh!important}}
.camera-focus .camera-status{transition:background-color .14s ease,transform .14s ease;will-change:contents}
.camera-focus.manual-mode .scan-frame,.camera-focus.auto-mode .scan-frame{display:block!important;visibility:visible!important;opacity:1!important}
.camera-focus.manual-mode .camera-scan-now{touch-action:manipulation}
.camera-focus #video{transform:translateZ(0);backface-visibility:hidden}
.camera-focus .camera-torch{top:calc(env(safe-area-inset-top) + .8rem)!important}
@media (orientation:landscape){
  .camera-focus .camera-status-badge{top:calc(env(safe-area-inset-top) + clamp(.75rem,3vh,1.35rem))!important;max-width:42vw!important}
  .camera-focus .scan-frame::after{animation-name:qrCenterSweep!important}
}
@media (prefers-reduced-motion:reduce){.camera-focus .scan-frame::after,.scan-frame.success-flash,.scan-frame.invalid-shake,.camera-box.duplicate-pulse .camera-status{animation:none!important}}


/* V24 camera control spacing refinements */
.camera-focus .camera-dont-capture{display:none!important}
.camera-focus.manual-mode.manual-preview-active .camera-dont-capture{display:flex!important;right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 24vh)!important;width:clamp(8.5rem,34vw,11rem)!important;min-height:clamp(2.8rem,7vh,3.25rem)!important;margin:0!important}
.camera-focus.manual-mode.manual-preview-active .camera-status{right:calc(var(--camera-edge) + clamp(9rem,36vw,11.5rem))!important}
@media (orientation:landscape){
  .camera-focus .scan-frame{top:14vh!important;bottom:42vh!important}
  .camera-focus .camera-status{left:var(--camera-edge)!important;right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 35vh)!important}
  .camera-zoom-controls{left:50%!important;right:auto!important;width:min(34rem,62vw)!important;bottom:calc(env(safe-area-inset-bottom) + 25vh)!important}
  .camera-focus .camera-scan-now{left:var(--camera-edge)!important;right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 15vh)!important}
  .camera-focus.manual-mode.manual-preview-active .camera-status{right:calc(var(--camera-edge) + clamp(9rem,18vw,12rem))!important}
  .camera-focus.manual-mode.manual-preview-active .camera-dont-capture{right:var(--camera-edge)!important;bottom:calc(env(safe-area-inset-bottom) + 35vh)!important;width:clamp(8.5rem,17vw,11rem)!important}
}


/* V25 manual-ready status and one-session camera guide dismissal */
.scan-frame > span.camera-guide-hidden {
  display: none !important;
}

.camera-focus #cameraBox.manual-mode .camera-status.qr-ready {
  color: #ffffff !important;
  background: rgba(30, 90, 168, 0.94) !important;
  border-color: rgba(147, 197, 253, 1) !important;
  box-shadow:
    0 0 0 2px rgba(147, 197, 253, 0.30),
    0 0 26px rgba(59, 130, 246, 0.80),
    0 8px 28px rgba(0, 0, 0, 0.30) !important;
  transform: scale(1.015);
}

/* V26 user-preferred feedback timing and safe-area toast placement */
.toast{top:calc(env(safe-area-inset-top) + 11%)!important}


/* V29: stronger, longer, single-pass success flash.
   Restores the clear V25-style green coverage while keeping one iOS-safe
   opacity animation. It fades in quickly, holds at full strength, then
   fades out once—without revealing a second green lock state underneath. */
.scan-frame.success-flash {
  animation: none !important;
  transition: none !important;
}
.camera-focus .scan-frame.success-flash::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -2px !important;
  border: 3px solid rgba(255, 255, 255, .98) !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow:
    0 0 0 9999px rgba(34, 197, 94, .80),
    0 0 48px rgba(34, 197, 94, .98),
    inset 0 0 18px rgba(34, 197, 94, .38) !important;
  pointer-events: none !important;
  opacity: 0;
  animation: cameraSuccessFlashV29 .70s cubic-bezier(.22, .72, .28, 1) both !important;
  will-change: opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@keyframes cameraSuccessFlashV29 {
  0% { opacity: 0; }
  8% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .camera-focus .scan-frame.success-flash::before {
    animation: cameraSuccessFlashV29 .70s linear both !important;
  }
}

/* V28 white camera icons and in-camera quick status picker */
.camera-icon-svg svg{
  width:52%;
  height:52%;
  display:block;
  fill:currentColor;
  stroke:currentColor;
  color:#fff;
}
#cameraSettingsBtn,
#torchBtn{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.camera-torch.active{
  color:#fff!important;
  background:rgba(30,90,168,.94)!important;
  border-color:rgba(147,197,253,.95)!important;
  box-shadow:0 0 0 4px rgba(96,165,250,.28),0 8px 24px rgba(0,0,0,.28)!important;
}
.camera-status-badge{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  color:#fff;
  border:1px solid color-mix(in srgb,var(--status-color,#fff) 58%,rgba(255,255,255,.35));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--status-color,#fff) 16%,transparent),0 8px 24px rgba(0,0,0,.20);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.camera-focus .camera-status-badge{display:flex}
.camera-status-badge:active{transform:translateX(-50%) scale(.97)}
.camera-status-badge:focus-visible{outline:3px solid rgba(147,197,253,.95);outline-offset:3px}
.camera-status-chevron{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.camera-status-picker{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:clamp(.75rem,3vw,1.25rem);
  padding-bottom:max(clamp(.75rem,3vw,1.25rem),env(safe-area-inset-bottom));
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.camera-status-picker.hidden{display:none!important}
.camera-status-picker-panel{
  width:min(46rem,100%);
  max-height:min(78vh,46rem);
  overflow:auto;
  overscroll-behavior:contain;
  background:rgba(248,250,252,.98);
  color:#17202a;
  border:1px solid rgba(255,255,255,.72);
  border-radius:clamp(1.25rem,5vw,1.8rem);
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  animation:cameraStatusPickerIn .18s ease-out both;
}
@keyframes cameraStatusPickerIn{from{opacity:0;transform:translateY(1.25rem) scale(.98)}to{opacity:1;transform:none}}
.camera-status-picker-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1rem .8rem;
  background:rgba(248,250,252,.96);
  border-bottom:1px solid #dde3ea;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.camera-status-picker-eyebrow{margin:0 0 .15rem;color:#667085;font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.075em}
.camera-status-picker-header h2{margin:0;font-size:clamp(1.25rem,5vw,1.65rem);line-height:1.15;letter-spacing:-.025em}
.camera-status-picker-close{width:2.75rem;height:2.75rem;flex:0 0 auto;border:0;border-radius:999px;background:#e8edf4;color:#17202a;font-size:1.8rem;line-height:1;display:grid;place-items:center;font-weight:700;cursor:pointer}
.camera-status-picker-list{padding:.75rem 1rem 1.1rem}
.camera-status-picker-group+ .camera-status-picker-group{margin-top:.85rem}
.camera-status-picker-group h3{margin:.25rem 0 .5rem;color:#667085;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.075em}
.camera-status-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.camera-status-option{
  min-height:3.35rem;
  padding:.65rem .7rem;
  border:1px solid color-mix(in srgb,var(--status-color,#94a3b8) 38%,#d0d5dd);
  border-left:5px solid var(--status-color,#94a3b8);
  border-radius:.9rem;
  background:#fff;
  color:#17202a;
  display:flex;
  align-items:center;
  gap:.55rem;
  text-align:left;
  font:inherit;
  font-size:.88rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  touch-action:manipulation;
}
.camera-status-option:active{transform:scale(.98)}
.camera-status-option:focus-visible{outline:3px solid color-mix(in srgb,var(--status-color,#1e5aa8) 45%,transparent);outline-offset:2px}
.camera-status-option.active{background:color-mix(in srgb,var(--status-color,#94a3b8) 15%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--status-color,#94a3b8) 24%,transparent)}
.camera-status-option-dot{width:.65rem;height:.65rem;flex:0 0 auto;border-radius:999px;background:var(--status-color,#94a3b8);box-shadow:0 0 0 3px color-mix(in srgb,var(--status-color,#94a3b8) 18%,transparent)}
.camera-status-option-current{margin-left:auto;padding:.2rem .42rem;border-radius:999px;background:#e8edf4;color:#475467;font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.camera-box.status-picker-open .camera-zoom-controls,
.camera-box.status-picker-open .camera-status,
.camera-box.status-picker-open .camera-scan-now,
.camera-box.status-picker-open .camera-dont-capture,
.camera-box.status-picker-open .camera-topline,
.camera-box.status-picker-open .camera-torch,
.camera-box.status-picker-open .camera-status-badge,
.camera-box.status-picker-open .scan-frame,
.camera-box.status-picker-open .qr-lock-overlay{pointer-events:none}
@media (orientation:landscape){
  .camera-status-picker{align-items:center;padding:max(.7rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
  .camera-status-picker-panel{max-height:92vh}
  .camera-status-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:390px){.camera-status-picker-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.camera-status-picker-panel{animation:none}}


/* V30 scanned-pieces ledger: scan-first confirmation and audit trail */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.scan-history-card{border-color:rgba(30,90,168,.28)!important;box-shadow:0 8px 24px rgba(4,26,56,.12)!important;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important}
.scan-history-head{align-items:center!important}.scan-history-head .step-badge{background:#e8f0ff!important;color:#16457f!important}
.scan-history-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-bottom:.65rem}.scan-history-summary>div{min-width:0;padding:.62rem .7rem;border:1px solid #dbe4ef;border-radius:14px;background:#f8fafc;box-shadow:0 1px 2px rgba(16,24,40,.04)}.scan-history-summary small{display:block;color:#667085;font-size:.68rem;font-weight:900;letter-spacing:.055em;text-transform:uppercase}.scan-history-summary strong{display:block;margin-top:.12rem;color:#101828;font-size:clamp(1.15rem,3vw,1.55rem);line-height:1}
.scan-history-filters{display:grid;grid-template-columns:minmax(10rem,1fr) minmax(7.5rem,.38fr) minmax(8.5rem,.5fr);gap:.48rem;align-items:center}.scan-history-filters label{min-width:0}.scan-history-filters .small-input{width:100%;min-height:42px!important;padding:.58rem .7rem!important;font-size:.84rem!important;background:#fff!important}.scan-history-search{position:relative}
.scan-history-actions{display:flex;align-items:center;justify-content:space-between;gap:.55rem;margin:.62rem 0}.history-view-toggle{display:inline-grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid #d7e0eb;border-radius:12px;background:#eef2f6}.history-view-btn{border:0;border-radius:9px;background:transparent;color:#475467;font:inherit;font-size:.78rem;font-weight:850;padding:.48rem .68rem;cursor:pointer}.history-view-btn.active{background:#fff;color:#16457f;box-shadow:0 1px 4px rgba(16,24,40,.12)}.history-export-actions{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}.history-export-actions .btn{margin:0!important;min-height:38px!important;padding:.5rem .68rem!important;font-size:.78rem!important}
.scan-history-list{border:1px solid #dbe4ef;border-radius:16px;background:#fff;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;max-height:min(42vh,34rem);min-height:9rem}.scan-history-row{position:relative;border-bottom:1px solid #e7ecf2;background:#fff;transition:background-color .16s ease,box-shadow .16s ease}.scan-history-row:last-child{border-bottom:0}.scan-history-row:hover{background:#fbfdff}.scan-history-row.just-added{animation:historyArrival .75s ease-out}.scan-history-row-main{display:grid;grid-template-columns:6px minmax(5.8rem,.8fr) minmax(8.2rem,1.25fr) minmax(6.2rem,.75fr) auto 18px;gap:.58rem;align-items:center;width:100%;min-width:0;padding:.64rem .7rem;border:0;background:transparent;color:#17202a;text-align:left;cursor:pointer;font:inherit}.scan-history-color{align-self:stretch;width:6px;min-height:2.9rem;border-radius:999px;background:var(--status-color);box-shadow:0 0 0 3px var(--status-soft)}.scan-history-piece,.scan-history-status,.scan-history-operator{min-width:0}.scan-history-piece strong,.scan-history-operator strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.89rem;font-weight:900}.scan-history-piece small,.scan-history-status small,.scan-history-operator small{display:block;margin-top:.18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#667085;font-size:.69rem;font-weight:650}.scan-history-status-pill{display:inline-flex;max-width:100%;align-items:center;border-radius:999px;padding:.36rem .56rem;background:var(--status-color);color:var(--status-text);font-size:.72rem;font-weight:900;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}.scan-history-sync{display:inline-flex;align-items:center;gap:.34rem;justify-self:end;border-radius:999px;padding:.32rem .48rem;background:#eef2f6;color:#475467;font-size:.68rem;font-weight:900;white-space:nowrap}.sync-dot{width:7px;height:7px;border-radius:50%;background:#98a2b3}.sync-synced .scan-history-sync{background:#e9f9ef;color:#087443}.sync-synced .sync-dot{background:#18a058}.sync-pending .scan-history-sync,.sync-syncing .scan-history-sync{background:#fff4e5;color:#8a4b00}.sync-pending .sync-dot,.sync-syncing .sync-dot{background:#f5a524}.sync-failed .scan-history-sync{background:#feeceb;color:#b42318}.sync-failed .sync-dot{background:#d92d20}.scan-history-chevron{width:18px;height:18px;fill:none;stroke:#667085;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}.scan-history-row.expanded .scan-history-chevron{transform:rotate(180deg)}
.sync-conflict .scan-history-sync{background:#fff0c2;color:#713f12;box-shadow:inset 0 0 0 1px #f59e0b}.sync-conflict .sync-dot{background:#dc2626;box-shadow:0 0 0 2px #fee2e2}.queued-row.conflict b{color:#b45309}
.scan-history-details{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:.48rem;padding:0 .78rem .78rem 1.72rem}.scan-history-row.expanded .scan-history-details,.scan-history-list.detailed .scan-history-details{display:grid}.scan-history-list.detailed .scan-history-chevron{display:none}.scan-history-details>div{min-width:0;padding:.54rem .62rem;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc}.scan-history-details small{display:block;color:#667085;font-size:.63rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.scan-history-details strong{display:block;margin-top:.18rem;overflow-wrap:anywhere;color:#17202a;font-size:.75rem;line-height:1.28}.scan-history-details .history-error{grid-column:1/-1;border-color:#fecdca;background:#fff6f5}.scan-history-details .history-error strong{color:#b42318}.scan-history-list.compact .scan-history-operator{display:none}.scan-history-list.compact .scan-history-row-main{grid-template-columns:6px minmax(5.8rem,.8fr) minmax(8.2rem,1.35fr) auto 18px}.scan-history-empty{display:grid;place-items:center;align-content:center;min-height:9rem;padding:1.2rem;text-align:center;color:#667085}.scan-history-empty span{display:grid;place-items:center;width:2.25rem;height:2.25rem;margin-bottom:.45rem;border-radius:50%;background:#e9f9ef;color:#087443;font-size:1.15rem;font-weight:1000}.scan-history-empty strong{color:#344054}.scan-history-empty p{max-width:28rem;margin:.22rem 0 0;font-size:.82rem}
.diagnostics-panel{margin-top:.85rem;padding-top:.8rem;border-top:1px solid #dbe3ee}.diagnostics-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.65rem;margin-bottom:.55rem}.diagnostics-heading h3{margin:0;color:#344054;font-size:.9rem}.diagnostics-heading p{margin:.15rem 0 0;color:#667085;font-size:.74rem}.diagnostics-heading .btn{flex:0 0 auto;margin:0!important;min-height:34px!important;padding:.4rem .62rem!important;font-size:.72rem!important}.diagnostics-log{min-height:6.5rem!important;max-height:13rem!important;padding:.55rem!important;border:1px solid #dbe3ee!important;border-radius:12px!important;background:#f8fafc!important}.advanced-settings[open]{padding-bottom:.75rem!important}
.print-history{display:none}
@keyframes historyArrival{0%{background:#dff5e8;box-shadow:inset 0 0 0 2px rgba(24,160,88,.32)}100%{background:#fff;box-shadow:inset 0 0 0 0 rgba(24,160,88,0)}}
@media (min-width:861px){.scan-history-card{min-height:24rem!important}.scan-history-list{max-height:min(46vh,36rem)}.left-stack{align-content:start}.settings-card .advanced-settings .diagnostics-log{max-height:11rem!important}}
@media (max-width:1100px) and (min-width:861px){.scan-history-list.detailed .scan-history-operator{display:none}.scan-history-list.detailed .scan-history-row-main{grid-template-columns:6px minmax(5.5rem,.8fr) minmax(8rem,1.3fr) auto 18px}.scan-history-details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.scan-history-card{margin-bottom:1rem!important}.scan-history-filters{grid-template-columns:1fr 1fr}.scan-history-search{grid-column:1/-1}.scan-history-actions{align-items:stretch;flex-direction:column}.history-view-toggle{align-self:flex-start}.history-export-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.history-export-actions .btn{width:100%}.scan-history-list{max-height:none;min-height:11rem}.scan-history-row-main,.scan-history-list.compact .scan-history-row-main,.scan-history-list.detailed .scan-history-row-main{grid-template-columns:6px minmax(5rem,.72fr) minmax(7.4rem,1.28fr) auto 16px;gap:.44rem;padding:.68rem .58rem}.scan-history-operator{display:none!important}.scan-history-sync{font-size:0;padding:.36rem}.scan-history-sync .sync-dot{width:9px;height:9px}.scan-history-details{grid-template-columns:1fr 1fr;padding:0 .62rem .68rem 1.45rem}.scan-history-details>div{padding:.48rem .52rem}.scan-history-summary>div{padding:.55rem .6rem}}
@media (max-width:430px){.scan-history-row-main,.scan-history-list.compact .scan-history-row-main,.scan-history-list.detailed .scan-history-row-main{grid-template-columns:6px minmax(4.7rem,.7fr) minmax(6.8rem,1.3fr) 12px}.scan-history-sync{position:absolute;right:.58rem;top:.52rem}.scan-history-chevron{align-self:end}.scan-history-status small{display:none}.scan-history-details{grid-template-columns:1fr}.scan-history-filters{grid-template-columns:1fr}.scan-history-search{grid-column:auto}.scan-history-summary small{font-size:.61rem}}
@media print{body.printing-history{background:#fff!important;color:#111!important}.printing-history .app-shell,.printing-history .bottom-nav,.printing-history .guide-dialog,.printing-history #toast{display:none!important}.printing-history .print-history{display:block!important;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#111}.print-history-header{margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid #16457f}.print-history-header h1{margin:0;color:#0b1f3a;font-size:22px}.print-history-header p{margin:5px 0 0;color:#475467;font-size:11px}.print-history table{width:100%;border-collapse:collapse;font-size:9.5px}.print-history th{padding:7px 6px;border:1px solid #cfd8e3;background:#eef3f8;text-align:left}.print-history td{padding:7px 6px;border:1px solid #dbe3ee;vertical-align:top}.print-status{display:inline-block;padding:3px 6px;border-left:5px solid var(--status-color);background:#f8fafc;font-weight:700}@page{size:landscape;margin:.45in}}
/* Keep sync state readable on phones; the colored dot remains a secondary cue. */
@media (max-width:860px){.scan-history-sync{font-size:.62rem!important;padding:.31rem .42rem!important}.scan-history-sync .sync-dot{width:7px!important;height:7px!important}}

/* V33 branding, standalone safe areas, and configurable camera top widget */
.logo{
  width:68px!important;
  height:68px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
}
@media (max-width:860px){.logo{width:58px!important;height:58px!important}}
@media (min-width:861px){.logo{width:64px!important;height:64px!important}}

.advanced-subsection{margin:1rem 0;padding:1rem;border:1px solid #dbe3ee;border-radius:16px;background:#fff}
.advanced-subsection-heading{margin-bottom:.65rem}.advanced-subsection-heading h3{margin:0;color:#17202a;font-size:1rem}.advanced-subsection-heading p{margin:.2rem 0 0;color:#667085;font-size:.84rem;line-height:1.35}
.camera-widget-settings .check-row{margin:.45rem 0;background:#f8fafc}

.camera-top-widget{display:none}
.camera-focus .camera-top-widget{
  position:absolute;
  top:max(calc(env(safe-area-inset-top) + 1rem),4.75rem);
  left:50%;
  z-index:9;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  width:max-content;
  max-width:min(calc(100vw - 8.5rem),34rem);
  transform:translateX(-50%);
}
html.standalone-app .camera-focus .camera-top-widget{
  top:max(calc(env(safe-area-inset-top) + 1rem),4.75rem)!important;
}
@media (max-width:600px){html.standalone-app .camera-focus .camera-top-widget{top:max(calc(env(safe-area-inset-top) + 1rem),6rem)!important}}
.camera-focus .camera-top-widget .camera-status-badge{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  display:flex!important;
  width:max-content!important;
  min-width:9rem;
  max-width:100%!important;
  padding:.55rem .85rem!important;
  transform:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.camera-top-widget .camera-status-badge:active{transform:scale(.97)!important}
.camera-widget-copy{display:flex;min-width:0;flex-direction:column;align-items:center;gap:.12rem;line-height:1.12}
.camera-widget-status{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:1000}
.camera-widget-detail{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.82);font-size:.7rem;font-weight:750;letter-spacing:.01em}
.camera-widget-network{display:flex;align-items:center;justify-content:center;gap:.32rem}
.camera-widget-network::before{content:"";width:.42rem;height:.42rem;border-radius:999px;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.16)}
.camera-widget-network.offline::before{background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.16)}
.camera-widget-undo{
  min-height:2rem;
  max-width:100%;
  padding:.38rem .72rem;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(10,18,28,.72);
  color:#fff;
  font:inherit;
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  touch-action:manipulation;
}
.camera-widget-undo:active:not(:disabled){transform:scale(.96)}
.camera-widget-undo:disabled{opacity:.48;cursor:default}
.camera-box.status-picker-open .camera-top-widget{pointer-events:none}
.camera-focus #cameraBox.widget-has-undo .scan-frame{top:max(calc(env(safe-area-inset-top) + 10.75rem),23vh)!important}

@media (max-width:600px){
  html.standalone-app body:not(.camera-focus) .app-shell{
    padding-top:max(calc(env(safe-area-inset-top) + .65rem),4.25rem)!important;
  }
}
@media (orientation:landscape){
  .camera-focus .camera-top-widget,
  html.standalone-app .camera-focus .camera-top-widget{
    top:max(calc(env(safe-area-inset-top) + .7rem),.8rem)!important;
    max-width:min(42vw,34rem);
  }
  .camera-focus #cameraBox.widget-has-undo .scan-frame{top:18vh!important}
}

/* V34 front-page logo refinement: slightly rounded corners, no frame, slightly larger */
.logo{
  content:url('assets/logo.png') !important;
  width:clamp(3.15rem,10.5vw,4.6rem) !important;
  height:clamp(3.15rem,10.5vw,4.6rem) !important;
  border-radius:12px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  object-fit:contain !important;
  padding:0 !important;
}
@media (min-width:861px){
  .logo{
    width:clamp(3rem,5.2vw,4.1rem) !important;
    height:clamp(3rem,5.2vw,4.1rem) !important;
    border-radius:10px !important;
  }
}

/* V35 iPhone Home Screen layout stabilization
   - Keep the sticky app header below the Dynamic Island/status bar.
   - Keep the bottom navigation attached to the physical bottom after tab changes.
   - Disable smooth scrolling and translucent nav compositing in standalone mode. */
@media (max-width:860px){
  html.standalone-app{
    scroll-behavior:auto!important;
    min-height:100%!important;
    min-height:100dvh!important;
  }
  html.standalone-app body{
    min-height:100%!important;
    min-height:100dvh!important;
    overscroll-behavior-y:none;
  }
  html.standalone-app body:not(.camera-focus) .app-shell{
    min-height:100dvh!important;
    padding-top:calc(env(safe-area-inset-top) + .55rem)!important;
    padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))!important;
  }
  html.standalone-app body:not(.camera-focus) .appbar{
    top:env(safe-area-inset-top)!important;
    margin-top:0!important;
  }
  html.standalone-app .bottom-nav{
    position:fixed!important;
    inset-inline:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    min-height:calc(4.45rem + env(safe-area-inset-bottom))!important;
    padding:clamp(.4rem,1.4vw,.6rem) max(clamp(.45rem,2vw,.8rem),env(safe-area-inset-left)) calc(clamp(.5rem,1.4vw,.7rem) + env(safe-area-inset-bottom)) max(clamp(.45rem,2vw,.8rem),env(safe-area-inset-right))!important;
    background:#f7f8fa!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
    overflow:visible!important;
    z-index:100!important;
  }
  html.standalone-app .bottom-nav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:7rem;
    background:#f7f8fa;
    pointer-events:none;
  }
}

/* CSS display-mode fallback, so the safe areas work even if iOS does not expose
   navigator.standalone early enough for the JavaScript class. */
@media (display-mode:standalone) and (max-width:860px){
  html{scroll-behavior:auto!important;min-height:100%!important;min-height:100dvh!important}
  body{min-height:100%!important;min-height:100dvh!important;overscroll-behavior-y:none}
  body:not(.camera-focus) .app-shell{
    min-height:100dvh!important;
    padding-top:calc(env(safe-area-inset-top) + .55rem)!important;
    padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))!important;
  }
  body:not(.camera-focus) .appbar{top:env(safe-area-inset-top)!important;margin-top:0!important}
  .bottom-nav{
    position:fixed!important;
    inset-inline:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    min-height:calc(4.45rem + env(safe-area-inset-bottom))!important;
    padding:clamp(.4rem,1.4vw,.6rem) max(clamp(.45rem,2vw,.8rem),env(safe-area-inset-left)) calc(clamp(.5rem,1.4vw,.7rem) + env(safe-area-inset-bottom)) max(clamp(.45rem,2vw,.8rem),env(safe-area-inset-right))!important;
    background:#f7f8fa!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
    overflow:visible!important;
    z-index:100!important;
  }
  .bottom-nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:7rem;background:#f7f8fa;pointer-events:none}
}

/* V63 iPhone/iPad browser camera controls safe-area fix
   Installed Home Screen app stays on the existing camera layout; this only targets browser mode. */
html:not(.standalone-app) body.camera-focus,
html:not(.standalone-app) body.camera-focus .app-shell,
html:not(.standalone-app) body.camera-focus .layout,
html:not(.standalone-app) body.camera-focus .left-stack,
html:not(.standalone-app) body.camera-focus .scan-card,
html:not(.standalone-app) body.camera-focus #cameraBox{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}
html:not(.standalone-app) body.camera-focus #video{
  height:100dvh!important;
  min-height:100dvh!important;
}
html:not(.standalone-app) body.camera-focus .camera-topline{
  top:calc(env(safe-area-inset-top) + clamp(0.65rem,2.2vh,1rem))!important;
  bottom:auto!important;
  left:max(clamp(0.75rem,3vw,1.25rem),env(safe-area-inset-left))!important;
  right:max(clamp(0.75rem,3vw,1.25rem),env(safe-area-inset-right))!important;
  z-index:30!important;
  grid-template-columns:clamp(3rem,12vw,3.8rem) minmax(0,1fr) clamp(3rem,12vw,3.8rem)!important;
}
html:not(.standalone-app) body.camera-focus .camera-topline .icon-btn,
html:not(.standalone-app) body.camera-focus .camera-topline #cameraBackBtn,
html:not(.standalone-app) body.camera-focus .camera-topline #cameraSettingsBtn{
  width:clamp(3rem,12vw,3.8rem)!important;
  height:clamp(3rem,12vw,3.8rem)!important;
  min-width:44px!important;
  min-height:44px!important;
}
html:not(.standalone-app) body.camera-focus #cameraModeLabel{
  min-height:clamp(2.75rem,10vw,3.5rem)!important;
  max-width:min(54vw,22rem)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html:not(.standalone-app) body.camera-focus .camera-status-badge{
  top:calc(env(safe-area-inset-top) + clamp(4.3rem,13vh,5.8rem))!important;
}
@media (orientation:landscape){
  html:not(.standalone-app) body.camera-focus .camera-topline{
    top:max(calc(env(safe-area-inset-top) + 0.45rem),0.55rem)!important;
    left:max(calc(env(safe-area-inset-left) + 0.65rem),0.8rem)!important;
    right:max(calc(env(safe-area-inset-right) + 0.65rem),0.8rem)!important;
    grid-template-columns:clamp(2.7rem,7vh,3.35rem) minmax(8rem,1fr) clamp(2.7rem,7vh,3.35rem)!important;
  }
  html:not(.standalone-app) body.camera-focus .camera-topline .icon-btn,
  html:not(.standalone-app) body.camera-focus .camera-topline #cameraBackBtn,
  html:not(.standalone-app) body.camera-focus .camera-topline #cameraSettingsBtn{
    width:clamp(2.7rem,7vh,3.35rem)!important;
    height:clamp(2.7rem,7vh,3.35rem)!important;
    min-width:44px!important;
    min-height:44px!important;
  }
  html:not(.standalone-app) body.camera-focus #cameraModeLabel{
    min-height:clamp(2.45rem,7vh,3.1rem)!important;
    max-width:48vw!important;
    font-size:clamp(0.82rem,2.4vh,1rem)!important;
  }
  html:not(.standalone-app) body.camera-focus .scan-frame{
    top:18vh!important;
    bottom:22vh!important;
    left:30vw!important;
    right:30vw!important;
  }
  html:not(.standalone-app) body.camera-focus .camera-status-badge{
    top:calc(env(safe-area-inset-top) + clamp(3.6rem,10vh,4.6rem))!important;
  }
}
/* V63.1 browser camera controls: keep X/settings near the bottom, but raised above Safari/Chrome browser bars.
   Installed Home Screen app keeps its original standalone camera layout. */
html:not(.standalone-app) body.camera-focus .camera-topline{
  top:auto!important;
  bottom:calc(env(safe-area-inset-bottom) + clamp(4.75rem,10vh,6.25rem))!important;
  left:max(clamp(0.75rem,3vw,1.25rem),env(safe-area-inset-left))!important;
  right:max(clamp(0.75rem,3vw,1.25rem),env(safe-area-inset-right))!important;
  z-index:35!important;
}
html:not(.standalone-app) body.camera-focus .camera-status{
  bottom:calc(env(safe-area-inset-bottom) + clamp(9.4rem,19vh,11.2rem))!important;
}
html:not(.standalone-app) body.camera-focus .camera-scan-now{
  bottom:calc(env(safe-area-inset-bottom) + clamp(13.2rem,27vh,15.2rem))!important;
}
@media (orientation:landscape){
  html:not(.standalone-app) body.camera-focus .camera-topline{
    top:auto!important;
    bottom:max(calc(env(safe-area-inset-bottom) + 0.85rem),0.85rem)!important;
    left:59vw!important;
    right:max(12px,env(safe-area-inset-right))!important;
  }
}

/* V63.9 QR targeting: guide-only tap input, center priority, and lightweight focus feedback. */
#scanFrame{pointer-events:auto;touch-action:manipulation;cursor:crosshair}
#scanFrame:focus-visible{outline:3px solid rgba(147,197,253,.95);outline-offset:5px}
.scan-frame>.scan-frame-guide{pointer-events:none}
.scan-frame>.scan-crosshair{
  position:absolute;left:50%;top:50%;width:clamp(44px,16vw,78px);height:clamp(44px,16vw,78px);
  transform:translate(-50%,-50%);padding:0;border:0;border-radius:0;background:transparent;
  color:rgba(255,255,255,.58);pointer-events:none;backdrop-filter:none
}
.scan-crosshair::before,.scan-crosshair::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;box-shadow:0 0 4px rgba(0,0,0,.65)
}
.scan-crosshair::before{width:100%;height:1px;transform:translate(-50%,-50%)}
.scan-crosshair::after{width:1px;height:100%;transform:translate(-50%,-50%)}
.scan-crosshair-dot{
  position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);
  border-radius:50%;background:#ef4444;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 5px rgba(0,0,0,.75)
}
.scan-frame>.tap-target-ring{
  position:absolute;width:38px;height:38px;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:0;border:2px solid rgba(147,197,253,.96);border-radius:50%;background:rgba(59,130,246,.08);
  box-shadow:0 0 0 4px rgba(59,130,246,.16),0 0 18px rgba(59,130,246,.65);
  pointer-events:none;backdrop-filter:none
}
.scan-frame>.tap-target-ring.targeting{animation:tapTargetPulse .52s ease-out both}
@keyframes tapTargetPulse{0%{opacity:.35;transform:translate(-50%,-50%) scale(.7)}45%{opacity:1}100%{opacity:.82;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.scan-frame>.tap-target-ring.targeting{animation:none}}