.head-scanner-page{--scan-red:#e92336;--scan-green:#2d8a65;--scan-ink:#191a1e;width:min(100%,620px);margin:0 auto;padding:12px 16px 36px;color:var(--scan-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fffdfa;min-height:100svh;box-sizing:border-box}
.head-scanner-page *{box-sizing:border-box}.head-scanner-page [hidden]{display:none!important}.head-scanner-page .scan-workspace{display:flex;flex-direction:column;gap:12px;margin:0}.head-scanner-page button,.head-scanner-page select,.head-scanner-page input{font:inherit}.scan-top{display:flex;align-items:center;gap:12px}.scan-top>a{width:40px;height:40px;border-radius:14px;background:#edecea;display:grid;place-items:center;text-decoration:none;color:#191a1e;font-size:32px;line-height:1}.scan-top h1{font-size:21px;line-height:1.2;letter-spacing:-.5px;margin:0;font-weight:700}.scan-top span{font-size:12px;color:#716e6b}.scan-top .scan-connection{margin-left:auto;font-weight:600;color:#2d8a65}.scan-connection[data-offline=true]{color:#a45b0b}.scan-event{display:flex;flex-direction:column;gap:4px}.scan-event>span{font-size:11px;color:#716e6b}.scan-event select{width:100%;height:40px;padding:0 12px;background:#fff;border:1px solid #e4e8ef;border-radius:12px;font-size:14px;font-weight:600;color:#191a1e;min-width:0}
.head-scanner-page .scan-camera{position:relative;aspect-ratio:auto;height:62svh;min-height:320px;max-height:720px;width:100%;border-radius:24px;overflow:hidden;background:#14161a}.head-scanner-page .scan-camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.head-scanner-page .scan-target{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;max-width:330px;aspect-ratio:1;border:2px dashed #ffffffcc;border-radius:24px;box-shadow:0 0 0 500px #0002}.scan-start-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#171a20e6;color:#fffd}.scan-start-cover>span{font-size:15px}.head-scanner-page button{cursor:pointer;border-radius:14px;border:1px solid #e4e8ef;background:#fff;color:#191a1e;padding:12px 16px;font-size:14px;font-weight:600}.head-scanner-page button:disabled{opacity:.5;cursor:default}.scan-start-cover button,.scan-manual button{background:var(--scan-red)!important;border:0!important;color:white!important}.head-scanner-page .scan-camera-caption{position:absolute;bottom:16px;left:12px;right:12px;text-align:center;color:#fff;font-size:12px}
.head-scanner-page .scan-feedback{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:0;text-align:center;background:#12151de8;color:#fff;animation:scan-enter 160ms ease-out}.head-scanner-page .scan-feedback i{font-size:30px;display:grid;place-items:center;width:52px;height:52px}.head-scanner-page .scan-feedback strong{align-self:auto;font-size:23px;font-weight:700;line-height:1.2}.head-scanner-page .scan-feedback span{font-size:14px;line-height:1.5;max-width:320px}.head-scanner-page .scan-feedback[data-kind=checking]{background:#11141b70}.head-scanner-page .scan-feedback[data-kind=checking] i{border:3px solid #ffffff30;border-top-color:#fff;border-radius:50%;animation:scan-spin 650ms linear infinite}.head-scanner-page .scan-feedback[data-kind=checking] i::before{content:''}.head-scanner-page .scan-feedback[data-kind=checking] strong{font-size:15px}.head-scanner-page .scan-feedback[data-kind=success]{background:#18543deb}.head-scanner-page .scan-feedback[data-kind=success] i{width:clamp(140px,45vw,260px);height:clamp(140px,45vw,260px);border-radius:50%;border:3px solid #ffffff55;font-size:clamp(90px,30vw,180px);font-weight:400;line-height:1}.head-scanner-page .scan-feedback[data-kind=success] i::before{content:'✓'}.head-scanner-page .scan-feedback[data-kind=error]{background:#661c29eb}.head-scanner-page .scan-feedback[data-kind=error] i::before{content:'!'}.head-scanner-page .scan-feedback[data-kind=offline]{background:#784d0eea}.head-scanner-page .scan-feedback[data-kind=offline] i::before{content:'✓'}.head-scanner-page .scan-feedback.is-leaving{animation:scan-exit 200ms ease-in forwards}
.scan-totals{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:2px 2px 6px}.head-scanner-page .scan-counter{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;flex:1}.scan-totals progress{width:100%;height:4px;order:3;accent-color:#2d8a65}.scan-totals small{font-size:11px;color:#716e6b}.head-scanner-page details{border:1px solid #e4e8ef;border-radius:16px;padding:12px 14px;background:#fff}.head-scanner-page summary{cursor:pointer;font-size:14px;font-weight:600}.scan-offline p{font-size:12px;line-height:1.5;color:#716e6b}.scan-offline small{display:block;font-size:12px;margin-top:10px;color:#716e6b}.scan-manual>div{display:flex;gap:10px;margin-top:12px}.scan-manual input{min-width:0;flex:1;border:1px solid #e4e8ef;border-radius:12px;padding:10px;font-size:14px}.scan-manual button{width:44px;padding:0;font-size:20px}.scan-history h2{font-size:17px;font-weight:600;margin:8px 0 6px}.scan-history ol{list-style:none;padding:0;margin:0}.scan-history li{padding:12px 2px;border-bottom:1px solid #e4e8ef;display:grid;grid-template-columns:1fr auto;gap:4px 12px}.scan-history li strong{font-size:14px;font-weight:600}.scan-history li span,.scan-history li time{font-size:12px;color:#716e6b}.scan-history li small{grid-column:1/-1;color:#716e6b;font-size:11px}.scan-history-empty{font-size:13px;color:#716e6b}.head-scanner-page .scan-help{font-size:12px;color:#716e6b;line-height:1.5;margin:0}.head-scanner-page :focus-visible{outline:2px solid var(--scan-red);outline-offset:3px}@keyframes scan-spin{to{transform:rotate(360deg)}}@keyframes scan-enter{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes scan-exit{to{opacity:0;transform:scale(.98)}}@media(prefers-reduced-motion:reduce){.head-scanner-page .scan-feedback{animation:none}.head-scanner-page .scan-feedback.is-leaving{opacity:0}.head-scanner-page .scan-feedback[data-kind=checking] i{animation:none}}@media(min-width:900px){.head-scanner-page{border:1px solid #e4e8ef;border-radius:24px;margin:16px auto}}
.scan-workspace .scan-feedback > span { white-space: pre-line; overflow-wrap: anywhere; text-align: center; }