.app{width:100%;max-width:1200px;margin:0 auto;padding:10px;display:flex;flex-direction:column;align-items:center}.scanner-container{width:100%;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;overflow:hidden;display:flex;flex-direction:column;max-height:100vh;height:100vh}h1{text-align:center;padding:24px;color:#333;font-size:2rem;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;margin:0}.video-wrapper{width:100%;position:relative;background:#000;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-preview{width:100%;height:100%;object-fit:cover}@media (min-width: 769px){.video-preview{transform:scaleX(-1)}}.scanning-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.scanning-line{width:80%;height:2px;background:linear-gradient(90deg,transparent 0%,#4caf50 20%,#4caf50 80%,transparent 100%);animation:scanning 2s linear infinite;box-shadow:0 0 10px #4caf50}@keyframes scanning{0%{transform:translateY(-40%)}50%{transform:translateY(40%)}to{transform:translateY(-40%)}}.scanning-text{position:absolute;bottom:20px;color:#fff;background:#000000b3;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500}.video-placeholder{color:#fff;text-align:center;padding:40px;display:flex;flex-direction:column;gap:12px}.video-placeholder p{font-size:1.2rem;opacity:.8;margin:0}.video-placeholder .mobile-hint{font-size:.9rem;opacity:.6;font-style:italic}.error-message{background:#fee;color:#c33;padding:12px 20px;margin:16px;border-radius:8px;border-left:4px solid #c33}.camera-selector{padding:16px 20px;background:#f9f9f9;display:flex;align-items:center;gap:12px;border-top:1px solid #eee}.camera-selector label{font-weight:600;color:#333;font-size:.95rem}.camera-select{flex:1;padding:8px 12px;border:2px solid #ddd;border-radius:6px;font-size:.95rem;background:#fff;cursor:pointer;transition:border-color .2s}.camera-select:hover{border-color:#667eea}.camera-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.controls{padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}.scan-tips{text-align:center;padding:8px 16px;background:#f0f7ff;border-radius:8px;margin-top:8px}.scan-tips p{margin:0;font-size:.85rem;color:#555}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn:disabled:hover{transform:none;box-shadow:none}.btn{padding:12px 24px;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-secondary{background:#666;color:#fff}.btn-copy{background:#4caf50;color:#fff}.btn-clear{background:#f44336;color:#fff}.scanned-list-container{border-top:2px solid #eee;display:flex;flex-direction:column;max-height:400px;overflow:hidden}.scanned-list-header{padding:16px 20px;background:#f5f5f5;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.scanned-list-header h2{margin:0;color:#333;font-size:1.2rem;font-weight:600}.header-actions{display:flex;gap:8px}.header-actions .btn{padding:8px 16px;font-size:.9rem}.scanned-list{overflow-y:auto;padding:12px;flex:1}.empty-state{text-align:center;padding:40px;color:#999}.empty-state p{font-size:1.1rem}.scanned-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;margin-bottom:8px;background:#f9f9f9;border-radius:8px;border-left:4px solid #667eea;transition:all .2s}.scanned-item:hover{background:#f0f0f0;transform:translate(4px)}.scanned-item-content{flex:1;display:flex;flex-direction:column;gap:4px}.scanned-text{font-size:1rem;font-weight:600;color:#333;word-break:break-all;font-family:Courier New,monospace}.scanned-time{font-size:.85rem;color:#666}.btn-remove{background:#f44;color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-left:12px}.btn-remove:hover{background:#c00;transform:scale(1.1)}.scanned-list::-webkit-scrollbar{width:8px}.scanned-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.scanned-list::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.scanned-list::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 768px){.app{padding:0;max-width:100%}.scanner-container{border-radius:0;max-height:100vh;height:100vh}h1{font-size:1.3rem;padding:12px 16px}.video-wrapper{flex:1;min-height:200px}.scanned-list-container{max-height:30vh;min-height:150px}.scanned-list-header{flex-direction:column;align-items:flex-start;padding:12px}.scanned-list-header h2{font-size:1rem}.header-actions{width:100%;margin-top:8px}.header-actions .btn{flex:1;padding:10px 12px;font-size:.85rem}.controls{padding:12px}.btn{padding:14px 20px;font-size:.95rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}