.barcode-scanner{width:100%;max-width:640px;margin:0 auto;font-family:system-ui,-apple-system,sans-serif}.barcode-scanner__container{position:relative;width:100%;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #0000004d}.barcode-scanner__video{width:100%;height:auto;display:block;aspect-ratio:4 / 3;object-fit:cover}.barcode-scanner__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.6) 100%)}.barcode-scanner__target-box{position:relative;border:2px solid rgba(255,255,255,.3);border-radius:8px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #00ff87b3}50%{box-shadow:0 0 20px 10px #00ff8700}}.barcode-scanner__corner{position:absolute;width:20px;height:20px;border:3px solid #00ff87}.barcode-scanner__corner--top-left{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:8px 0 0}.barcode-scanner__corner--top-right{top:-2px;right:-2px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}.barcode-scanner__corner--bottom-left{bottom:-2px;left:-2px;border-right:none;border-top:none;border-radius:0 0 0 8px}.barcode-scanner__corner--bottom-right{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 8px}.barcode-scanner__hint{margin-top:24px;padding:8px 16px;background:#000000b3;color:#fff;font-size:14px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.barcode-scanner__controls{display:flex;gap:12px;padding:16px;background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.barcode-scanner__button{flex:1;padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.barcode-scanner__button--start{background:linear-gradient(135deg,#00ff87,#00d96e);color:#000}.barcode-scanner__button--start:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00ff8766}.barcode-scanner__button--start:active{transform:translateY(0)}.barcode-scanner__button--stop{background:linear-gradient(135deg,#ff4757,#ff3838);color:#fff}.barcode-scanner__button--stop:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff475766}.barcode-scanner__button--file{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.barcode-scanner__button--file:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.barcode-scanner__button--file:disabled{background:#888;cursor:not-allowed;transform:none;box-shadow:none}.barcode-scanner__camera-select{flex:1;padding:12px;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff1a;color:#fff;font-size:14px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.barcode-scanner__camera-select:disabled{opacity:.5;cursor:not-allowed}.barcode-scanner__result{padding:16px;background:linear-gradient(135deg,#00ff87,#00d96e);color:#000;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.barcode-scanner__result-label{font-size:12px;font-weight:600;text-transform:uppercase;opacity:.7;margin-bottom:4px}.barcode-scanner__result-text{font-size:20px;font-weight:700;font-family:Courier New,monospace;margin-bottom:4px;word-break:break-all}.barcode-scanner__result-format{font-size:12px;opacity:.7}.barcode-scanner__error{padding:12px 16px;background:#ff4757e6;color:#fff;font-size:14px;text-align:center}@media(max-width:640px){.barcode-scanner__controls{flex-direction:column}.barcode-scanner__button,.barcode-scanner__camera-select{width:100%}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;max-width:700px;padding:20px}.app{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;overflow:hidden}header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center}header h1{font-size:2rem;margin-bottom:8px}header p{font-size:1rem;opacity:.9}main{padding:20px}.start-section{display:flex;flex-direction:column;align-items:center;gap:20px}.buttons-row{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.primary-btn,.secondary-btn{border:none;padding:18px 35px;font-size:1.1rem;font-weight:600;border-radius:50px;cursor:pointer;transition:transform .2s,box-shadow .2s}.primary-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 20px #667eea66}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px #667eea80}.secondary-btn{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;box-shadow:0 4px 20px #11998e66}.secondary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px #11998e80}.secondary-btn:disabled{background:#ccc;box-shadow:none;cursor:not-allowed;transform:none}.scanner-section{display:flex;flex-direction:column;gap:15px}.close-btn{background:#ef4444;color:#fff;border:none;padding:12px 30px;font-size:1rem;font-weight:600;border-radius:25px;cursor:pointer;transition:background .2s;align-self:center}.close-btn:hover{background:#dc2626}.error-box{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:15px 20px;text-align:center;width:100%;max-width:400px}.error-box p{color:#dc2626;margin-bottom:10px}.error-box button{background:#dc2626;color:#fff;border:none;padding:8px 25px;border-radius:20px;cursor:pointer;font-weight:600}.result-details{background:#f8f9fa;border-radius:12px;padding:20px;width:100%;max-width:500px}.result-details h3{margin-bottom:15px;color:#333;font-size:1.1rem}.result-details table{width:100%;border-collapse:collapse}.result-details td{padding:8px 0;border-bottom:1px solid #eee}.result-details td:first-child{font-weight:600;color:#666;width:100px}.result-details code{background:#e9ecef;padding:2px 8px;border-radius:4px;font-family:Courier New,monospace;font-size:.9rem;word-break:break-all}@media(max-width:640px){header h1{font-size:1.5rem}header{padding:20px}main{padding:15px}.buttons-row{flex-direction:column;width:100%}.primary-btn,.secondary-btn{width:100%;padding:15px 30px}.result-details{padding:15px}}