.search-box{position:relative;margin-bottom:var(--spacing-md);display:flex;gap:10px}.search-box input{flex:1;padding:15px 20px;font-size:var(--font-size-lg);border:2px solid var(--color-border);border-radius:10px;outline:none;transition:border-color .3s;color:var(--color-text-dark)}.scan-btn{width:auto!important;min-width:60px;padding:15px 20px!important;font-size:var(--font-size-2xl);background:var(--color-accent)!important;flex-shrink:0}.scan-btn:hover:not(:disabled){background:var(--color-text-light)!important}.search-box input:focus{border-color:var(--color-accent)}.search-box input:disabled{background:#f5f5f5}button{width:100%;padding:15px;font-size:var(--font-size-lg);font-weight:600;color:var(--color-secondary);background:var(--color-accent);border:none;border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #0003}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 480px){.search-box{flex-direction:column;gap:var(--spacing-sm)}.search-box input{padding:12px 15px;font-size:var(--font-size-base)}.scan-btn{width:100%!important;min-width:unset;padding:12px!important;font-size:var(--font-size-xl)}button{padding:12px;font-size:var(--font-size-base)}}@media (min-width: 481px) and (max-width: 768px){.search-box input,button{font-size:var(--font-size-base)}}.result.success{background:#f5f5f5;border:2px solid var(--color-primary);margin-top:var(--spacing-lg);padding:var(--spacing-md);border-radius:10px;animation:fadeIn .3s ease}.product-info{color:var(--color-text-dark)}.product-name{font-size:var(--font-size-xl);font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text-dark)}.price{font-size:var(--font-size-3xl);color:var(--color-text-dark);text-align:center;margin:var(--spacing-md) 0;font-weight:700}.original-price{text-decoration:line-through;color:var(--color-text-light);font-size:var(--font-size-xl);text-align:center;margin:10px 0 5px;font-weight:500}.discount-price{color:var(--color-error);font-size:32px;text-align:center;margin:5px 0;font-weight:700}.discount-badge{background:var(--color-error);color:var(--color-secondary);padding:8px 15px;border-radius:20px;text-align:center;font-weight:600;margin:15px auto;display:inline-block;font-size:var(--font-size-sm)}.product-detail{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--color-primary)}.product-detail:last-child{border-bottom:none}.detail-label{font-weight:500;color:var(--color-text-light)}.detail-value{font-weight:600;color:var(--color-text-dark)}@media (max-width: 480px){.result.success{margin-top:var(--spacing-md);padding:var(--spacing-sm)}.product-name{font-size:var(--font-size-lg);margin-bottom:var(--spacing-xs)}.price{font-size:var(--font-size-2xl);margin:var(--spacing-sm) 0}.original-price{font-size:var(--font-size-lg);margin:var(--spacing-xs) 0}.discount-price{font-size:var(--font-size-3xl)}.discount-badge{font-size:var(--font-size-sm);padding:6px 12px;margin:var(--spacing-sm) auto}.product-detail{flex-direction:column;gap:4px;padding:var(--spacing-xs) 0}.detail-label,.detail-value{font-size:var(--font-size-sm)}}@media (min-width: 481px) and (max-width: 768px){.result.success{padding:var(--spacing-lg)}.product-name{font-size:var(--font-size-xl)}.price{font-size:var(--font-size-3xl)}}.status{position:fixed;top:var(--spacing-md);right:var(--spacing-md);padding:10px 15px;border-radius:8px;font-size:var(--font-size-sm);font-weight:500;z-index:100;background:var(--color-accent);color:var(--color-secondary);display:flex;align-items:center;gap:8px}.status:before{content:"";width:10px;height:10px;border-radius:50%;display:inline-block}.status.checking:before{background:var(--color-warning)}.status.connected:before{background:var(--color-success)}.status.disconnected:before{background:var(--color-error)}@media (max-width: 480px){.status{top:var(--spacing-sm);right:var(--spacing-sm);padding:8px 12px;font-size:12px;border-radius:6px;gap:6px}.status:before{width:8px;height:8px}}@media (min-width: 481px) and (max-width: 768px){.status{top:var(--spacing-md);right:var(--spacing-md);font-size:var(--font-size-sm)}}.scanner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md)}.scanner-container{background:var(--color-secondary);border-radius:15px;padding:var(--spacing-md);max-width:500px;width:100%}.scanner-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.scanner-header h2{margin:0;font-size:var(--font-size-xl);color:var(--color-text-dark)}.close-btn{background:var(--color-error);color:var(--color-secondary);border:none;border-radius:50%;width:35px;height:35px;font-size:var(--font-size-xl);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.close-btn:hover{background:#d32f2f}.video-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:#000;position:relative}.video-container video{width:100%!important;height:100%!important;object-fit:cover}.camera-controls{margin:12px 0}.camera-select{width:100%;padding:12px;border-radius:8px;border:2px solid var(--color-border);font-size:16px;background:#fff;color:var(--color-text-dark)}.scanner-controls{display:flex;gap:10px;justify-content:center;margin:12px 0}.control-btn{padding:12px 24px;border-radius:8px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.torch-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.torch-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.torch-btn:disabled{opacity:.5;cursor:not-allowed}.scanner-hint{text-align:center;margin-top:15px;color:var(--color-text-light);font-size:var(--font-size-sm)}.scanner-error{background:#ffebee;border:2px solid var(--color-error);border-radius:10px;padding:15px;margin-bottom:15px}.scanner-error p{color:var(--color-error);margin:0;text-align:center;font-weight:500}.photo-capture-section{margin:20px 0;text-align:center}.capture-photo-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:15px 30px;font-size:16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.capture-photo-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.capture-photo-btn:disabled{opacity:.6;cursor:not-allowed}.photo-hint{color:var(--color-text-light);font-size:13px;margin-top:10px;font-style:italic}.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 480px){.scanner-overlay{padding:0}.scanner-container{border-radius:0;max-width:100%;height:100%;padding:var(--spacing-sm);display:flex;flex-direction:column}.scanner-header{margin-bottom:var(--spacing-sm)}.scanner-header h2{font-size:var(--font-size-lg)}.close-btn{width:40px;height:40px;font-size:var(--font-size-2xl)}.video-container{width:100%;max-height:40vh;aspect-ratio:16 / 9}.camera-select{font-size:14px;padding:10px}.control-btn{padding:10px 20px;font-size:14px}.scanner-hint{font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}}@media (min-width: 481px) and (max-width: 768px){.scanner-container{padding:var(--spacing-lg)}.scanner-header h2{font-size:var(--font-size-xl)}}@media (max-height: 500px) and (orientation: landscape){.scanner-overlay{padding:0;align-items:stretch}.scanner-container{border-radius:0;max-width:100%;width:100%;height:100vh;padding:8px;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;gap:8px}.scanner-header{margin-bottom:0;padding:4px 8px;background:#0000004d;border-radius:8px}.scanner-header h2{font-size:16px}.close-btn{width:32px;height:32px;font-size:18px}.scanner-error{padding:8px;margin:0;font-size:12px}#barcode-scanner-container{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:8px}#barcode-scanner-container video{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;border-radius:8px}#barcode-scanner-container>div{width:100%;height:100%}.focus-controls{margin:0!important;padding:4px 0!important;gap:6px!important}.focus-btn{padding:8px 16px!important;font-size:13px!important;box-shadow:0 2px 8px #667eea4d!important}.photo-capture-section{margin:4px 0;padding:4px 0}.capture-photo-btn{padding:8px 20px;font-size:13px;box-shadow:0 2px 8px #667eea4d}.photo-hint{font-size:11px;margin-top:4px}.scanner-hint{font-size:12px;margin-top:4px;padding:4px 8px;background:#0000004d;border-radius:6px}#barcode-scanner-container button{padding:6px 12px!important;font-size:12px!important;margin:3px 2px!important}#barcode-scanner-container select{padding:4px 8px!important;font-size:12px!important;margin:2px!important}}.language-selector{position:fixed;top:var(--spacing-md);left:var(--spacing-md);display:flex;gap:8px;z-index:100}.lang-btn{padding:8px 16px;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-dark);background:var(--color-secondary);border:2px solid var(--color-border);border-radius:8px;cursor:pointer;transition:all .2s;min-width:50px}.lang-btn:hover{background:var(--color-primary);transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.lang-btn.active{background:var(--color-accent);color:var(--color-secondary);border-color:var(--color-accent)}@media (max-width: 480px){.language-selector{top:var(--spacing-sm);left:var(--spacing-sm);gap:6px}.lang-btn{padding:6px 12px;font-size:12px;min-width:40px}}@media (min-width: 481px) and (max-width: 768px){.language-selector{top:var(--spacing-md);left:var(--spacing-md)}}.app{width:100%;max-width:500px}.container{background:var(--color-secondary);border-radius:20px;padding:var(--spacing-xl);box-shadow:0 10px 40px #00000026;width:100%}.logo-container{text-align:center;margin-bottom:var(--spacing-md)}.logo{max-width:200px;width:100%;height:auto;border-radius:10px}h1{color:var(--color-text-dark);text-align:center;margin-bottom:var(--spacing-lg);font-size:var(--font-size-2xl)}.loading{text-align:center;padding:var(--spacing-md)}.spinner{border:4px solid var(--color-primary);border-top:4px solid var(--color-accent);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.result{margin-top:var(--spacing-lg);padding:var(--spacing-md);border-radius:10px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.result.error{background:#ffebee;border:2px solid var(--color-error)}.error-message{color:var(--color-error);font-weight:500;text-align:center}@media (max-width: 480px){.container{padding:var(--spacing-md);border-radius:15px}.logo-container{margin-bottom:var(--spacing-sm)}.logo{max-width:150px}h1{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md)}.spinner{width:35px;height:35px}.result{margin-top:var(--spacing-md);padding:var(--spacing-sm)}}@media (min-width: 481px) and (max-width: 768px){.container{padding:var(--spacing-lg);border-radius:18px}.logo{max-width:180px}h1{font-size:var(--font-size-2xl)}}:root{--color-primary: #CEC9C2;--color-secondary: #FFFFFF;--color-accent: #000000;--color-text-dark: #000000;--color-text-light: #666666;--color-border: #CEC9C2;--color-error: #f44336;--color-success: #4caf50;--color-warning: #ff9800;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 20px;--spacing-lg: 30px;--spacing-xl: 40px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--color-primary);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md)}#root{width:100%;display:flex;justify-content:center}@media (max-width: 480px){body{padding:var(--spacing-sm)}}@media (min-width: 481px) and (max-width: 768px){body{padding:var(--spacing-md)}}