.qr-wrapper{padding-top:8rem;padding-bottom:4rem;background:#f8f9fa;min-height:100vh}.dark .qr-wrapper{background:#030712}.qr-container{background:#fff;border-radius:12px;padding:40px;box-shadow:0 2px 8px #00000014}.dark .qr-container{background:#111827;box-shadow:0 2px 8px #0000004d}.page-title{font-size:36px;font-weight:700;text-align:center;margin-bottom:12px;background:linear-gradient(135deg,#4facfe,#00f2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dark .page-title{background:linear-gradient(135deg,#3b82f6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-subtitle{text-align:center;font-size:16px;color:#7f8c8d;margin-bottom:32px}.dark .page-subtitle{color:#9ca3af}.tabs{display:flex;gap:12px;margin-bottom:32px;border-bottom:2px solid #e1e8ed}.dark .tabs{border-bottom-color:#374151}.tab-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border:none;background:none;font-size:16px;font-weight:600;color:#6c757d;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s}.tab-btn:hover{color:#4facfe}.tab-btn.active{color:#4facfe;border-bottom-color:#4facfe}.dark .tab-btn.active{color:#3b82f6;border-bottom-color:#3b82f6}.tab-icon{width:20px;height:20px}.tab-content{display:none}.tab-content.active{display:block}.input-section{margin-bottom:24px}.input-label{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#2c3e50;margin-bottom:12px}.dark .input-label{color:#f3f4f6}.label-icon{width:20px;height:20px;color:#4facfe}.dark .label-icon{color:#3b82f6}.qr-textarea{width:100%;padding:16px;border:2px solid #e1e8ed;border-radius:8px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;resize:vertical;background:#f8f9fa;color:#2c3e50;transition:border-color .2s}.dark .qr-textarea{background:#1f2937;border-color:#374151;color:#e5e7eb}.qr-textarea:focus{outline:none;border-color:#4facfe}.dark .qr-textarea:focus{border-color:#3b82f6}.input-info{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:16px;flex-wrap:wrap}.char-count{font-size:13px;color:#6c757d;font-weight:500;transition:color .2s}.dark .char-count{color:#9ca3af}.limit-warning{font-size:12px;color:#ffc107;background:#ffc1071a;padding:4px 12px;border-radius:4px;border:1px solid rgba(255,193,7,.3);animation:pulse 2s ease-in-out infinite}.dark .limit-warning{background:#fbbf2426;border-color:#fbbf244d;color:#fbbf24}.limit-warning.hidden{display:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.controls{display:flex;justify-content:center;gap:16px;margin-bottom:32px;flex-wrap:wrap}.btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-icon{width:20px;height:20px}.btn-primary{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#3f9bed,#00d9ed)}.btn-secondary{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff}.btn-secondary:hover:not(:disabled){background:linear-gradient(135deg,#32d86a,#27e8c6)}.btn-webcam{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.btn-webcam:hover{background:linear-gradient(135deg,#e9608a,#edcf30)}.btn-webcam.active{background:linear-gradient(135deg,#ef4444,#dc2626)}.btn-small{padding:8px 16px;font-size:14px}.qr-output{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:48px}.qr-canvas-container{position:relative;width:256px;height:256px}.qrcode-container{border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden}.qrcode-container img,.qrcode-container canvas{display:block!important;border-radius:8px}#qr-canvas{border-radius:8px;box-shadow:0 4px 12px #0000001a;display:none}#qr-canvas.visible{display:block}.qr-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border:2px dashed #cbd5e0;border-radius:8px;color:#a0aec0}.qr-placeholder.hidden{display:none}.error-correction-info{width:100%;max-width:400px;transition:all .3s ease}.error-correction-info.hidden{display:none}.ec-badge{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #4facfe;border-radius:12px;padding:16px 20px;box-shadow:0 2px 8px #4facfe33}.dark .ec-badge{background:linear-gradient(135deg,#3b82f61a,#06b6d40d);border-color:#3b82f6}.ec-badge svg{width:32px;height:32px;color:#4facfe;flex-shrink:0}.dark .ec-badge svg{color:#3b82f6}.ec-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#6c757d;margin-bottom:4px}.dark .ec-label{color:#9ca3af}.ec-level{font-size:18px;font-weight:700;color:#2c3e50;margin-bottom:2px}.dark .ec-level{color:#f3f4f6}.ec-description{font-size:13px;color:#6c757d}.dark .ec-description{color:#9ca3af}.ec-levels-table{display:flex;flex-direction:column;gap:12px}.ec-level-row{background:#4facfe0d;border-left:3px solid #4facfe;border-radius:6px;padding:12px 16px}.dark .ec-level-row{background:#3b82f614;border-left-color:#3b82f6}.ec-level-name{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}.ec-level-name strong{color:#2c3e50;font-size:15px}.dark .ec-level-name strong{color:#f3f4f6}.ec-range{font-size:12px;color:#4facfe;background:#4facfe1a;padding:2px 8px;border-radius:4px;font-weight:600}.dark .ec-range{color:#3b82f6;background:#3b82f626}.ec-level-desc{font-size:13px;line-height:1.6;color:#34495e}.dark .ec-level-desc{color:#d1d5db}.qr-placeholder svg{width:64px;height:64px;margin-bottom:12px}.scan-methods{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}@media(max-width:768px){.scan-methods{grid-template-columns:1fr}}.scan-method{background:#f8f9fa;border-radius:12px;padding:24px;text-align:center}.dark .scan-method{background:#1f2937}.method-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:600;color:#2c3e50;margin-bottom:16px}.dark .method-title{color:#f3f4f6}.method-icon{width:24px;height:24px;color:#4facfe}.dark .method-icon{color:#3b82f6}.file-input{display:none}.file-label{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.file-label:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.file-label svg{width:20px;height:20px}.scan-output{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}.webcam-video{display:none;max-width:100%;width:640px;border-radius:12px;box-shadow:0 4px 12px #0000001a}.webcam-video.active{display:block}.scan-canvas{display:none}.scan-result{background:#d4edda;border:2px solid #28a745;border-radius:12px;padding:24px;width:100%;max-width:640px}.dark .scan-result{background:#22c55e33;border-color:#22c55e}.scan-result.hidden{display:none}.result-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#155724}.dark .result-header{color:#86efac}.result-header svg{width:32px;height:32px}.result-header h3{font-size:20px;font-weight:700;margin:0}.result-text{background:#fff;padding:16px;border-radius:8px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;word-break:break-all;color:#2c3e50;margin-bottom:16px}.dark .result-text{background:#111827;color:#e5e7eb}.result-actions{display:flex;justify-content:center}.info-section{background:linear-gradient(135deg,#4facfe15,#00f2fe15);border-radius:16px;padding:48px;margin-top:48px;border:1px solid rgba(79,172,254,.1)}.dark .info-section{background:linear-gradient(135deg,#3b82f60d,#06b6d40d);border-color:#3b82f633}.info-header{display:flex;align-items:center;gap:20px;margin-bottom:40px;padding-bottom:24px;border-bottom:2px solid rgba(79,172,254,.2)}.dark .info-header{border-bottom-color:#3b82f64d}.info-header-icon{width:64px;height:64px;background:linear-gradient(135deg,#4facfe,#00f2fe);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 16px #4facfe4d}.info-header-icon svg{width:36px;height:36px;color:#fff}.info-title{font-size:32px;font-weight:700;color:#2c3e50;margin:0;line-height:1.2}.dark .info-title{color:#f3f4f6}.info-tagline{font-size:16px;color:#4facfe;margin:4px 0 0;font-weight:500}.dark .info-tagline{color:#3b82f6}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:32px}.info-card{background:#fff;border-radius:12px;padding:28px;box-shadow:0 2px 8px #00000014;transition:all .3s ease;border:1px solid #e1e8ed}.dark .info-card{background:#111827;border-color:#374151;box-shadow:0 2px 8px #0003}.info-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #4facfe26}.dark .info-card:hover{box-shadow:0 8px 24px #3b82f64d}.highlight-card{background:linear-gradient(135deg,#4facfe10,#00f2fe10);border:2px solid #4facfe}.dark .highlight-card{background:linear-gradient(135deg,#3b82f61a,#06b6d41a);border-color:#3b82f6}.card-icon{width:48px;height:48px;background:linear-gradient(135deg,#4facfe,#00f2fe);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.card-icon svg{width:24px;height:24px;color:#fff}.card-title{font-size:20px;font-weight:700;color:#2c3e50;margin:0 0 12px}.dark .card-title{color:#f3f4f6}.card-content{font-size:15px;line-height:1.7;color:#34495e;margin:0}.dark .card-content{color:#d1d5db}.card-list{list-style:none;padding:0;margin:0}.card-list li{font-size:14px;line-height:1.7;color:#34495e;margin-bottom:12px;padding-left:28px;position:relative}.dark .card-list li{color:#d1d5db}.card-list li:before{content:"✓";position:absolute;left:0;color:#4facfe;font-weight:700;font-size:18px}.info-note{display:flex;gap:20px;background:linear-gradient(135deg,#fff3cd,#ffe8a3);border-left:4px solid #ffc107;padding:24px;border-radius:12px;align-items:start}.dark .info-note{background:linear-gradient(135deg,#fbbf2426,#fbbf241a);border-left-color:#fbbf24}.note-icon{width:40px;height:40px;background:#ffc107;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.dark .note-icon{background:#fbbf2433}.note-icon svg{width:24px;height:24px;color:#fff}.dark .note-icon svg{color:#fbbf24}.note-title{font-size:18px;font-weight:700;color:#856404;margin:0 0 8px}.dark .note-title{color:#fbbf24}.note-content{font-size:15px;line-height:1.7;color:#856404;margin:0}.dark .note-content{color:#fde047}.notification{position:fixed;top:100px;right:20px;padding:16px 24px;border-radius:8px;font-size:14px;font-weight:500;box-shadow:0 4px 12px #00000026;z-index:1000;opacity:0;transform:translate(400px);transition:all .3s ease}.notification.show{opacity:1;transform:translate(0)}.notification-success{background:#d4edda;color:#155724;border-left:4px solid #28a745}.dark .notification-success{background:#22c55e33;color:#86efac;border-left-color:#22c55e}.notification-error{background:#f8d7da;color:#721c24;border-left:4px solid #dc3545}.dark .notification-error{background:#ef444433;color:#fca5a5;border-left-color:#ef4444}.notification-warning{background:#fff3cd;color:#856404;border-left:4px solid #ffc107}.dark .notification-warning{background:#fbbf2433;color:#fde047;border-left-color:#fbbf24}.notification-info{background:#d1ecf1;color:#0c5460;border-left:4px solid #17a2b8}.dark .notification-info{background:#0ea5e933;color:#7dd3fc;border-left-color:#0ea5e9}