:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,sans-serif;background:#0d0d14;color:#eee}.app{height:100dvh;height:100vh;min-height:-webkit-fill-available;display:flex;flex-direction:column;padding:.5rem;overflow:hidden}.app h1{text-align:center;font-size:1rem;margin:0 0 .5rem;flex-shrink:0}.barcode-scanner{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1;min-height:0;width:100%}.scanner-viewport{position:relative;width:100%;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:#000}.strip-canvas{position:absolute;left:-9999px;top:0}.scanner-canvas{width:100%;height:100%;object-fit:cover;display:block}.line-overlay{position:absolute;inset:0;pointer-events:none}.viewfinder{position:absolute;inset:10%;border:none}.viewfinder:before,.viewfinder:after{content:"";position:absolute;width:28px;height:28px;border-color:#00e676;border-style:solid;border-width:0}.viewfinder:before{top:0;left:0;border-top-width:3px;border-left-width:3px;border-radius:6px 0 0}.viewfinder:after{top:0;right:0;border-top-width:3px;border-right-width:3px;border-radius:0 6px 0 0}.viewfinder .corner-bl{position:absolute;bottom:0;left:0;width:28px;height:28px;border-bottom:3px solid #00e676;border-left:3px solid #00e676;border-radius:0 0 0 6px}.viewfinder .corner-br{position:absolute;bottom:0;right:0;width:28px;height:28px;border-bottom:3px solid #00e676;border-right:3px solid #00e676;border-radius:0 0 6px}.scan-line{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:3px;background:linear-gradient(90deg,transparent 0%,#00e676 20%,#69f0ae 50%,#00e676 80%,transparent 100%);box-shadow:0 0 16px #00e676}.barcode-bars{position:absolute;left:50%;bottom:15%;transform:translate(-50%);display:flex;gap:2px;align-items:flex-end}.barcode-bars span{width:3px;height:20px;background:#00e67680;border-radius:1px;animation:barPulse 1s ease-in-out infinite}.barcode-bars span:nth-child(1){animation-delay:0s;height:16px}.barcode-bars span:nth-child(2){animation-delay:.12s;height:22px}.barcode-bars span:nth-child(3){animation-delay:.24s;height:14px}.barcode-bars span:nth-child(4){animation-delay:.36s;height:20px}.barcode-bars span:nth-child(5){animation-delay:.48s;height:18px}.barcode-bars span:nth-child(6){animation-delay:.6s;height:24px}.barcode-bars span:nth-child(7){animation-delay:.72s;height:16px}.barcode-bars span:nth-child(8){animation-delay:.84s;height:20px}.barcode-bars span:nth-child(9){animation-delay:.96s;height:14px}.barcode-bars span:nth-child(10){animation-delay:1.08s;height:18px}@keyframes barPulse{0%,to{opacity:.5}50%{opacity:1}}.scanner-status{text-align:center;flex-shrink:0;width:100%;padding:.25rem 0}.status-text{margin:.4rem 0;color:#ffffffb3;font-size:.9rem}.status-text.success{color:#69f0ae;font-weight:600}.status-text.error{color:#ff8a80}.scanned-value{margin-top:.75rem;padding:1rem 1.25rem;background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-radius:12px;font-family:Monaco,Consolas,monospace;font-size:1.1rem;font-weight:500;letter-spacing:.08em;color:#e8f5e9;word-break:break-all;line-height:1.5;max-width:100%;text-align:center}
