*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a0f;color:#e8e8ed;min-height:100dvh}.app{display:flex;flex-direction:column;min-height:100dvh}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#12121a}.header h1{font-size:1.1rem;font-weight:600}.badge{font-size:.7rem;padding:4px 8px;border-radius:999px;text-transform:uppercase}.badge.on{background:#1a5f4a;color:#a8f0d8}.badge.off{background:#5f1a1a;color:#f0a8a8}.viewport{position:relative;flex:1;min-height:50vh;background:#000;overflow:hidden}.viewport[role=button]{cursor:pointer}.viewport-start-hint{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;background:#00000059;pointer-events:none}.viewport-start-hint span{padding:14px 20px;border-radius:12px;background:#1a5f4aeb;font-weight:600;font-size:1rem}.video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;background:#000}.scan-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.scan-frame{position:absolute;border-radius:12px;border:2px solid rgba(255,214,80,.95);box-shadow:0 0 0 9999px #00000085;transition:border-color .2s,box-shadow .2s;overflow:hidden}.scan-frame--pulse{animation:frame-pulse 1.6s ease-in-out infinite}.scan-frame--lock{border-color:#ffb347;box-shadow:0 0 0 9999px #00000094,0 0 20px #ffb34780}.scan-frame--capture{border-color:#6ee7b7;box-shadow:0 0 0 9999px #0000009e,0 0 28px #6ee7b7b3;animation:capture-pop .35s ease-out}.scan-frame--price{border-color:#60a5fa;box-shadow:0 0 0 9999px #0000009e,0 0 24px #60a5fa99}.scan-frame--ok{border-color:#34d399;box-shadow:0 0 0 9999px #00000080,0 0 32px #34d399bf}.scan-frame--dup{border-color:#a78bfa}.scan-flash .scan-frame{animation:flash-white .35s ease-out}.scan-corner{position:absolute;width:22px;height:22px;border:3px solid #fff}.scan-corner--tl{top:6px;left:6px;border-right:none;border-bottom:none;border-radius:6px 0 0}.scan-corner--tr{top:6px;right:6px;border-left:none;border-bottom:none;border-radius:0 6px 0 0}.scan-corner--bl{bottom:6px;left:6px;border-right:none;border-top:none;border-radius:0 0 0 6px}.scan-corner--br{bottom:6px;right:6px;border-left:none;border-top:none;border-radius:0 0 6px}.scan-line{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,#6ee7b7,transparent);animation:scan-sweep 2.2s ease-in-out infinite;opacity:.85}.scan-progress{position:absolute;left:8px;right:8px;bottom:8px;height:6px;background:#00000073;border-radius:3px;overflow:hidden}.scan-progress-fill{height:100%;background:linear-gradient(90deg,#ffb347,#6ee7b7);border-radius:3px;transition:width .12s linear}.scan-hud{position:absolute;left:12px;right:12px;top:10px;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.9)}.scan-hint{font-size:.95rem;font-weight:600;padding:8px 12px;border-radius:8px;background:#0000008c;display:inline-block}.scan-hint--locking{color:#ffd89a}.scan-hint--capture,.scan-hint--price{color:#a7f3d0}.scan-hint--success{color:#6ee7b7;background:#1a5f4abf}.scan-hint--duplicate{color:#ddd6fe}.scan-barcode-preview{margin-top:8px;font-size:1.05rem;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}.scan-label{font-size:.7rem;font-weight:600;color:#9ca3af;margin-right:6px}.scan-price-preview{margin-top:6px;font-size:1.6rem;font-weight:800;color:#6ee7b7}.scan-lock-pct{margin-top:4px;font-size:.8rem;color:#ffb347}.scan-pipeline{position:absolute;left:12px;right:12px;bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;background:#000000b8;font-size:.85rem;font-weight:600}.scan-pipeline span.on{color:#6ee7b7}.scan-pipeline span.done{color:#888}.scan-pipe{color:#555}@keyframes frame-pulse{0%,to{border-color:#ffd650b3}50%{border-color:#ffd650}}@keyframes scan-sweep{0%{top:12%}50%{top:82%}to{top:12%}}@keyframes capture-pop{0%{transform:scale(1)}40%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes flash-white{0%{filter:brightness(1.4)}to{filter:brightness(1)}}.scan-tip{margin:0 16px 8px;padding:10px 12px;font-size:.82rem;line-height:1.35;color:#ffd89a;background:#50320059;border-radius:8px;border:1px solid rgba(255,180,80,.25)}.actions{padding:12px 16px;display:flex;gap:8px;align-items:center}.actions--secondary{padding-top:0;padding-bottom:8px}.file-input-hidden{display:none}.btn-secondary{flex:1;padding:10px;font-size:.85rem;background:#1e293b;color:#94a3b8}.decoder-badge{font-size:.65rem;color:#64748b;white-space:nowrap}.btn{flex:1;padding:14px;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;background:#2a2a38;color:#e8e8ed}.btn.primary{background:#1a5f4a;color:#fff}.error{color:#ff8a8a;padding:0 16px 8px;font-size:.85rem}.history{padding:12px 16px 24px;background:#12121a}.history h2{font-size:.9rem;margin-bottom:8px;color:#888}.history ul{list-style:none}.history li{display:flex;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px solid #2a2a38;font-size:.9rem}.history li span{margin-left:auto;color:#6ee7b7}.muted{color:#666;font-size:.85rem}.device-id{font-size:.65rem;color:#444;text-align:center;padding-bottom:12px}.app-version{color:#666}