*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;overflow:hidden}#root{width:100%;height:100vh;height:100dvh}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #e0e0e0}.modal-header h2{font-size:20px;font-weight:700;margin:0;color:#000}.modal-close{background:none;border:none;font-size:32px;color:#999;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.modal-close:hover{color:#000}.modal-body{padding:20px}@media(max-width:768px){.modal-content{max-width:100%;border-radius:12px}.modal-header{padding:16px}.modal-header h2{font-size:18px}.modal-body{padding:16px}}.create-product-form{display:flex;flex-direction:column;gap:20px}.upc-display{background:#f5f5f5;padding:16px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:8px}.upc-label{font-size:13px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.upc-code{font-size:24px;font-weight:700;color:#000;font-family:Courier New,monospace;letter-spacing:2px}.form-group input,.form-group textarea{padding:14px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;font-family:inherit;transition:border-color .2s ease;background:#fff}.modal-actions{display:flex;gap:12px;margin-top:8px}.btn{flex:1;padding:14px;border:2px solid #000;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;border-radius:8px}.btn-secondary{background:#fff;color:#000}.btn-primary{background:#000;color:#fff}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.upc-code{font-size:20px}.form-group input,.form-group textarea{padding:12px;font-size:15px}.modal-actions{flex-direction:column}.btn{padding:14px;font-size:15px}}.scanner-wrapper{position:fixed;inset:0;width:100%;height:100%;height:100dvh;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.scanner{position:absolute;top:env(safe-area-inset-top);left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:calc(110px + env(safe-area-inset-bottom));background:#000;overflow:hidden}.scanner-container{position:absolute;top:env(safe-area-inset-top);left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:calc(110px + env(safe-area-inset-bottom));pointer-events:none}.scanner video{width:100%!important;height:100%!important;object-fit:cover!important}.scanner canvas.drawingBuffer{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important}.scan-overlay{position:absolute;inset:0;pointer-events:none}.scan-line{position:absolute;top:30%;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#00ff00,transparent);animation:scanMove 2s ease-in-out infinite}@keyframes scanMove{0%,to{top:30%}50%{top:70%}}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:20px 20px 120px}.barcode-large{width:120px;height:120px;margin-bottom:20px;opacity:.3}.barcode-large svg{width:100%;height:100%;stroke:#000}.instruction{font-size:18px;color:#999;margin-top:0;text-align:center}.scan-button{position:fixed;bottom:calc(30px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:70px;height:70px;border-radius:50%;background:#000;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 10px #0003;z-index:10;padding:0;margin:0}.scan-button:active{transform:translate(-50%) scale(.95)}.scan-button.active{background:#fff;border:2px solid #000;box-shadow:0 2px 10px #0000001a}.barcode-icon,.close-icon{width:32px;height:32px}.scan-button.active .barcode-icon,.scan-button:not(.active) .close-icon{display:none}.scan-button:not(.active) .barcode-icon{display:block;stroke:#fff}.scan-button.active .close-icon{display:block;stroke:#000}.result-container{position:absolute;top:env(safe-area-inset-top);left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:calc(110px + env(safe-area-inset-bottom));background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;animation:slideUp .3s ease;padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right));padding-top:max(30px,env(safe-area-inset-top))}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.result-header{text-align:center;margin-bottom:30px}.checkmark{width:60px;height:60px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 15px}.result-header p{font-size:18px;color:#000;font-weight:500}.code-result{font-size:clamp(24px,5vw,32px);font-weight:700;color:#000;text-align:center;margin-bottom:40px;font-family:Courier New,monospace;letter-spacing:2px;word-break:break-all;padding:0 20px}.action-buttons{display:flex;gap:15px;width:100%;max-width:350px}.action-btn{flex:1;padding:16px;border:2px solid #000;background:#fff;color:#000;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.primary{background:#000;color:#fff}.action-btn:active{transform:scale(.98)}.error-toast{position:fixed;top:calc(20px + env(safe-area-inset-top));left:50%;transform:translate(-50%);background:#000;color:#fff;padding:12px 24px;padding-top:max(12px,env(safe-area-inset-top) + 12px);border-radius:8px;font-size:14px;z-index:100;white-space:nowrap;box-shadow:0 2px 10px #0003;max-width:calc(90% - env(safe-area-inset-left) - env(safe-area-inset-right));text-align:center}@media(max-width:768px){.scanner-container{bottom:calc(100px + env(safe-area-inset-bottom))}.result-container{bottom:calc(100px + env(safe-area-inset-bottom));padding:20px;padding-left:max(20px,env(safe-area-inset-left) + 10px);padding-right:max(20px,env(safe-area-inset-right) + 10px)}.scan-button{width:65px;height:65px;bottom:calc(25px + env(safe-area-inset-bottom))}.barcode-large{width:100px;height:100px}.instruction{font-size:16px}.checkmark{width:50px;height:50px;font-size:28px;margin-bottom:12px}.result-header p{font-size:16px}.action-buttons{flex-direction:column;gap:12px;max-width:280px}.action-btn{padding:14px;font-size:15px}.error-toast{font-size:13px;padding:10px 20px;padding-top:max(10px,env(safe-area-inset-top) + 10px);white-space:normal}.empty-state{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}@media(max-width:480px){.scan-button{width:60px;height:60px}.barcode-large{width:80px;height:80px}.instruction{font-size:14px}.code-result{margin-bottom:30px}}@media(max-width:360px){.action-btn{padding:12px;font-size:14px}.scan-button{width:55px;height:55px;bottom:calc(18px + env(safe-area-inset-bottom))}}@media(max-height:600px)and (orientation:landscape){.scanner-container,.result-container{bottom:calc(90px + env(safe-area-inset-bottom))}.scan-button{width:50px;height:50px;bottom:calc(20px + env(safe-area-inset-bottom))}.barcode-icon,.close-icon{width:24px;height:24px}.barcode-large{width:60px;height:60px}.result-container{flex-direction:row;flex-wrap:wrap;align-content:center;gap:15px;padding:15px 20px;padding-left:max(15px,env(safe-area-inset-left) + 10px);padding-right:max(15px,env(safe-area-inset-right) + 10px)}.result-header{margin-bottom:0;text-align:center;width:100%}.checkmark{width:40px;height:40px;font-size:24px}.code-result{font-size:18px;margin-bottom:0}.action-buttons{width:100%;max-width:none;flex-direction:row}.action-btn{padding:10px;font-size:14px}.empty-state{padding-bottom:calc(90px + env(safe-area-inset-bottom))}}@supports (padding: max(0px)){.scan-button{bottom:max(30px,calc(20px + env(safe-area-inset-bottom)))}.scanner-container,.result-container{bottom:max(110px,calc(100px + env(safe-area-inset-bottom)))}.error-toast{top:max(20px,calc(10px + env(safe-area-inset-top)))}.empty-state{padding-bottom:max(120px,calc(110px + env(safe-area-inset-bottom)))}@media(max-width:768px){.scan-button{bottom:max(25px,calc(15px + env(safe-area-inset-bottom)))}.scanner-container,.result-container{bottom:max(100px,calc(90px + env(safe-area-inset-bottom)))}.empty-state{padding-bottom:max(110px,calc(100px + env(safe-area-inset-bottom)))}}@media(max-width:480px){.scan-button{bottom:max(20px,calc(10px + env(safe-area-inset-bottom)))}}@media(max-width:360px){.scan-button{bottom:max(18px,calc(8px + env(safe-area-inset-bottom)))}}@media(max-height:600px)and (orientation:landscape){.scan-button{bottom:max(15px,calc(5px + env(safe-area-inset-bottom)))}.scanner-container,.result-container{bottom:max(80px,calc(70px + env(safe-area-inset-bottom)))}.empty-state{padding-bottom:max(90px,calc(80px + env(safe-area-inset-bottom)))}}}@supports (padding: env(safe-area-inset-left)){.result-container{padding-left:max(30px,calc(20px + env(safe-area-inset-left)));padding-right:max(30px,calc(20px + env(safe-area-inset-right)))}@media(max-width:768px){.result-container{padding-left:max(20px,calc(10px + env(safe-area-inset-left)));padding-right:max(20px,calc(10px + env(safe-area-inset-right)))}}}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.spinner{width:50px;height:50px;border:4px solid #f0f0f0;border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}.product-info{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px}.product-details{width:100%;background:#f5f5f5;padding:20px;border-radius:12px;margin-bottom:30px}.product-name{font-size:20px;font-weight:700;color:#000;margin:0 0 10px}.product-description{font-size:15px;color:#666;margin:0 0 15px;line-height:1.5}.product-price{font-size:24px;font-weight:700;color:#000;margin:0}.product-form-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px}.info-icon{width:60px;height:60px;border-radius:50%;background:#2196f3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;margin:0 auto 15px}.product-form{width:100%;display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:600;color:#000}.form-group input,.form-group textarea{padding:14px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;font-family:inherit;transition:border-color .2s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#000}.form-group textarea{resize:vertical;min-height:80px}.action-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.product-details{padding:15px}.product-name{font-size:18px}.product-description{font-size:14px}.product-price{font-size:20px}.form-group input,.form-group textarea{padding:12px;font-size:15px}.info-icon{width:50px;height:50px;font-size:24px}}#root{max-width:1280px;margin:0 auto;text-align:center}.app{width:100vw;height:100vh;height:100dvh;background:#fff;overflow:hidden}