:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#ecf7f4;background:#071b21;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:300px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.43;cursor:not-allowed}.scanner-shell{min-height:100dvh;background:radial-gradient(ellipse at top left,#12483c,#0b2830 40%,#071922 85%);padding-bottom:max(25px,env(safe-area-inset-bottom))}.scanner-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px max(16px,env(safe-area-inset-left));border-bottom:1px solid #ffffff1a;background:#0b2530bb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.scanner-header>div:first-child{display:flex;gap:9px;align-items:center}.scanner-header img{width:46px;height:46px;border-radius:13px}.scanner-header span:not(.scanner-status){font-size:20px;letter-spacing:-.05em;font-weight:900}.scanner-header span b{color:#23c99d}.scanner-header span small{display:block;margin-top:1px;letter-spacing:.15em;font-size:8px;color:#9ebbb9;font-weight:800}.scanner-status{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #ffffff2c;border-radius:999px;background:#ffffff09;font-size:10px;font-weight:780;color:#bdcbcd;white-space:nowrap}.scanner-status span{width:8px;height:8px;border-radius:99px;background:#d59a30}.scanner-status.active{color:#66f7c6;background:#0bc48c17;border-color:#27cc9c55}.scanner-status.active span{background:#28d9a2;box-shadow:0 0 0 4px #28d9a221}.scanner-content{width:min(570px,100%);margin:0 auto;padding:23px 17px 45px;display:grid;gap:14px}.scanner-unpaired{display:grid;justify-items:stretch;gap:14px;padding:30px 18px;border:1px solid #ffffff20;border-radius:24px;background:#122d33aa;text-align:center}.scanner-unpaired-icon{display:grid;place-items:center;justify-self:center;width:75px;height:75px;border:1px solid #28b99466;border-radius:23px;background:#21be9240;color:#70f6cc}.scanner-eyebrow{font-size:10px;letter-spacing:.18em;font-weight:850;color:#37dca9}.scanner-unpaired h1{font-size:clamp(25px,7vw,33px);line-height:1.09;letter-spacing:-.04em;margin:0}.scanner-unpaired p{color:#b4cdca;font-size:13px;line-height:1.68;margin:0}.scanner-main-action{display:flex;justify-content:center;align-items:center;gap:9px;width:100%;min-height:54px;padding:9px 14px;border:1px solid #0fc997;border-radius:14px;color:#072b24;background:#17c99a;font-size:14px;font-weight:850;box-shadow:0 10px 23px #08bf8b1e}.scanner-main-action.stop{background:transparent;border-color:#fff5;color:#e3f5f2;box-shadow:none}.scanner-linked{display:grid;gap:17px}.scanner-binding{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #29bf9566;border-radius:16px;background:#1cc19317}.scanner-binding>svg{flex:0 0 auto;color:#29d8a6}.scanner-binding>div{flex:1;min-width:0;display:grid;gap:3px}.scanner-binding>div small{font-size:9px;letter-spacing:.12em;font-weight:850;color:#60dfbb}.scanner-binding>div strong{font-size:15px}.scanner-binding>div span{font-size:11px;color:#adbfbd}.scanner-binding>button{display:grid;place-items:center;width:34px;height:34px;background:#ffffff08;border:1px solid #ffffff2b;border-radius:10px;color:#ddd}.scanner-view{display:grid;gap:12px}.scanner-placeholder{display:grid;justify-items:center;align-content:center;gap:12px;aspect-ratio:4/3;border:1px solid #ffffff26;border-radius:19px;background:linear-gradient(140deg,#0e2830,#0a1e23);text-align:center}.scanner-placeholder svg{color:#42cda4;filter:drop-shadow(0 0 22px #28d0a144)}.scanner-placeholder strong{font-size:16px}.scanner-placeholder span{font-size:12px;color:#a9bab9}.scanner-video{position:relative;overflow:hidden;aspect-ratio:4/3;background:#000;border:1px solid #33cba599;border-radius:19px}.scanner-video video{display:block;width:100%;height:100%;object-fit:cover}.scanner-reticle{position:absolute;pointer-events:none;top:28%;right:12%;bottom:28%;left:12%;border:3px solid #31edb9;border-radius:14px;box-shadow:0 0 0 150px #031a1933,0 0 15px #11cfa2a3}.scanner-reticle:after{content:"";position:absolute;left:3%;right:3%;top:50%;height:2px;background:#22eab17e}.scanner-torch{position:absolute;z-index:3;top:10px;right:10px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff66;border-radius:12px;background:#062724dd;color:#fff}.scanner-last{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px;border:1px solid #ffffff22;border-radius:15px;background:#ffffff09}.scanner-last>div{display:grid;grid-template-columns:21px auto;column-gap:9px;row-gap:3px;align-items:center;min-width:0}.scanner-last svg{grid-row:1/3;color:#3cdcae}.scanner-last span{font-size:10px;color:#b0c9c3}.scanner-last strong{font-size:13px;overflow-wrap:anywhere}.scanner-last>small{font-size:10px;color:#b3c3c0;white-space:nowrap}.scanner-pending{display:grid;gap:9px;padding:14px;border:1px solid #e0a34d7d;border-radius:14px;background:#c8792e18}.scanner-pending strong{display:flex;gap:8px;align-items:center;font-size:12px;color:#efba70}.scanner-pending p{margin:0;color:#dfc2a6;line-height:1.6;font-size:11px}.scanner-pending>button,.scanner-pending-confirm button{min-height:39px;border:1px solid #ebb46b67;border-radius:9px;color:#082324;background:#e5b264;font-size:12px;font-weight:790}.scanner-pending>button{display:flex;align-items:center;justify-content:center;gap:7px}.scanner-pending-confirm{display:grid;grid-template-columns:1fr 1fr;gap:9px}.scanner-pending-confirm button:first-child{background:transparent;color:#ecbd79}.scanner-manual{padding:13px;border:1px solid #ffffff20;border-radius:12px;background:#ffffff05}.scanner-manual summary{font-size:11px;font-weight:750;cursor:pointer}.scanner-manual form{display:flex;gap:8px;margin-top:12px}.scanner-manual input{flex:1;min-width:0;height:42px;padding:0 10px;background:#18353c;color:#fff;border:1px solid #ffffff28;border-radius:9px;font-size:13px}.scanner-manual button{padding:0 13px;border:0;border-radius:9px;background:#1acc9e;color:#042c23;font-size:12px;font-weight:800}.scanner-notice,.scanner-error{display:flex;align-items:flex-start;gap:9px;padding:13px;border:1px solid #20cfa055;border-radius:12px;background:#0ac28d1d;color:#b0f8dd;font-size:11px;line-height:1.6}.scanner-notice svg,.scanner-error svg{flex:0 0 auto;margin-top:2px}.scanner-error{background:#d4a04e19;border-color:#d4a04e77;color:#ffd396}.scanner-footnote{display:flex;align-items:flex-start;gap:8px;margin:7px 0 0;color:#91a7a5;font-size:10px;line-height:1.7}.scanner-footnote svg{flex:0 0 auto;margin-top:1px;color:#36c89c}@media(max-width:380px){.scanner-header{gap:6px;padding:12px}.scanner-header img{width:38px;height:38px}.scanner-header span:not(.scanner-status){font-size:18px}.scanner-status{font-size:9px;padding:7px}.scanner-content{padding:17px 10px 35px}.scanner-last{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.scanner-linked .scanner-video,.scanner-linked .scanner-placeholder{width:92%;max-width:430px;height:clamp(112px,28vw,158px);aspect-ratio:auto;margin-inline:auto;border-radius:15px}.scanner-linked .scanner-placeholder{gap:5px}.scanner-linked .scanner-placeholder svg{height:43px;width:43px}.scanner-linked .scanner-placeholder strong{font-size:13px}.scanner-linked .scanner-placeholder span{font-size:10px}.scanner-linked .scanner-reticle{top:17%;right:10%;bottom:17%;left:10%;border-width:2px;border-radius:10px}.scanner-linked .scanner-torch{width:34px;height:34px;top:8px;right:8px;border-radius:9px}.scanner-linked .scanner-view{gap:9px}.scanner-linked .scanner-main-action{min-height:47px}.scanner-header-controls{display:flex;align-items:center;gap:9px}.scanner-theme-toggle{flex:0 0 auto;display:grid;place-items:center;width:39px;height:39px;border:1px solid #ffffff35;border-radius:12px;background:#fff1;color:#dbf8ee}.scanner-theme-toggle:hover{border-color:#1fc99b}.scanner-theme-toggle:focus-visible{outline:2px solid #0dbf91;outline-offset:3px}@media(max-width:380px){.scanner-header-controls{gap:6px}.scanner-theme-toggle{width:35px;height:35px}}html[data-theme=light]{color-scheme:light;color:#162b30;background:#eff6f3}html[data-theme=light] .scanner-shell{background:radial-gradient(ellipse at top left,#daf4e9,#edf8f4 43%,#f5f8fc 90%);color:#192d33}html[data-theme=light] .scanner-header{background:#f7fffcdd;border-bottom-color:#c9e4dd}html[data-theme=light] .scanner-header span small{color:#657d79}html[data-theme=light] .scanner-theme-toggle{background:#e6f4ef;border-color:#b5d5ca;color:#145c4b}html[data-theme=light] .scanner-status{background:#f4f8f7;border-color:#cadad5;color:#566c70}html[data-theme=light] .scanner-status.active{background:#ddf9ed;border-color:#87dec0;color:#087657}html[data-theme=light] .scanner-unpaired{background:#ffffffdb;border-color:#cfdfdb;box-shadow:0 18px 48px #15403412}html[data-theme=light] .scanner-unpaired p{color:#566f70}html[data-theme=light] .scanner-unpaired-icon{background:#dbf9ec;color:#127c5a;border-color:#b7e6d2}html[data-theme=light] .scanner-binding{background:#e8f9f1;border-color:#b2e5d0}html[data-theme=light] .scanner-binding>div span,html[data-theme=light] .scanner-last span,html[data-theme=light] .scanner-last>small{color:#5f7676}html[data-theme=light] .scanner-binding>button{background:#f7fffc;border-color:#cae1d9;color:#34524b}html[data-theme=light] .scanner-placeholder{background:linear-gradient(130deg,#f8fffc,#e6f3ef);border-color:#cbded7}html[data-theme=light] .scanner-placeholder strong{color:#23463e}html[data-theme=light] .scanner-placeholder span{color:#627e79}html[data-theme=light] .scanner-main-action.stop{background:#fff;border-color:#adcfc2;color:#16634e}html[data-theme=light] .scanner-last{background:#ffffffdb;border-color:#cedfd8}html[data-theme=light] .scanner-pending{background:#fff8e9;border-color:#eac58f}html[data-theme=light] .scanner-pending strong{color:#a86517}html[data-theme=light] .scanner-pending p{color:#87612d}html[data-theme=light] .scanner-pending-confirm button:first-child{color:#925b21}html[data-theme=light] .scanner-manual{background:#ffffffd4;border-color:#d0e0d9}html[data-theme=light] .scanner-manual input{background:#f1f7f5;color:#17312b;border-color:#c1d9cf}html[data-theme=light] .scanner-notice{background:#e0faee;border-color:#a5e3c7;color:#0b7354}html[data-theme=light] .scanner-error{background:#fff3e3;border-color:#e9c38c;color:#965817}html[data-theme=light] .scanner-footnote{color:#657d7b}.scanner-last{align-items:flex-start}.scanner-last .scanner-last-product{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1 1 auto}.scanner-last-product>svg{flex:0 0 auto;color:#3cdcae;margin-top:7px}.scanner-last .scanner-last-copy{min-width:0;display:grid;gap:3px}.scanner-last-copy>span{color:#b0c9c3;font-size:10px;line-height:1.35}.scanner-last-copy>span em{color:#efba70;font-style:normal;font-weight:750}.scanner-last-copy>strong{display:block;min-width:0;overflow-wrap:anywhere;color:inherit;font-size:14px;line-height:1.35;font-weight:830}.scanner-last-copy>code{color:#93c1b7;font:650 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;letter-spacing:.02em}.scanner-last>small{padding-top:6px}html[data-theme=light] .scanner-last-copy>span{color:#567b74}html[data-theme=light] .scanner-last-copy>code{color:#416b60}html[data-theme=light] .scanner-last-copy>span em{color:#a66b19}@media(max-width:445px){.scanner-last{flex-wrap:wrap}.scanner-last>small{width:100%;padding:0 0 0 31px}}.scanner-sound-enable{display:flex;gap:9px;align-items:center;justify-content:center;padding:11px 13px;border:1px solid #45cba777;border-radius:12px;background:#10ad8920;color:#65eac1;font-size:12px;font-weight:800}html[data-theme=light] .scanner-sound-enable{color:#13644d;background:#caeee4;border-color:#70bba5}.scanner-offline-note{display:flex;align-items:flex-start;gap:11px;padding:15px;border:1px solid #edb45e8c;border-radius:14px;background:#a76b2633;color:#ffd596}.scanner-offline-note>svg{flex:0 0 auto;margin-top:2px}.scanner-offline-note div{display:grid;gap:5px;min-width:0}.scanner-offline-note strong{font-size:13px}.scanner-offline-note span{font-size:11px;line-height:1.65}html[data-theme=light] .scanner-offline-note{color:#854b1c;background:#fff4df;border-color:#deaf67}