@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap);:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--accent:#ec4899;--accent-light:#f472b6;--green:#10b981;--green-dark:#059669;--red:#ef4444;--bg:#09090f;--surface-1:#ffffff0a;--surface-2:#ffffff12;--border:#ffffff17;--border-hover:#ffffff2e;--text-1:#f8fafc;--text-2:#cbd5e1;--text-3:#94a3b8;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--shadow-glow:0 0 60px #6366f126;--shadow-card:0 4px 24px #0006;--shadow-raised:0 8px 40px #00000080}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;background:#09090f;background:var(--bg);background-attachment:fixed;background-image:radial-gradient(ellipse 80% 60% at 20% 10%,#6366f12e 0,#0000 60%),radial-gradient(ellipse 60% 50% at 80% 80%,#ec489924 0,#0000 55%),radial-gradient(ellipse 50% 40% at 50% 50%,#10b98112 0,#0000 60%);color:#f8fafc;color:var(--text-1);font-family:Outfit,sans-serif;min-height:100vh;overflow-x:hidden}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 #6366f199;transform:scale(1)}70%{box-shadow:0 0 0 12px #6366f100;transform:scale(1.02)}to{box-shadow:0 0 0 0 #6366f100;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes progress-pulse{0%,to{opacity:1}50%{opacity:.6}}.animate-fade-in{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) both}.app-shell{margin:0 auto;max-width:860px;padding:40px 20px 80px}.hero{margin-bottom:36px;text-align:center}.hero__badge{align-items:center;background:#6366f126;border:1px solid #6366f159;border-radius:100px;color:#818cf8;color:var(--primary-light);display:inline-flex;font-size:.8rem;font-weight:600;gap:6px;letter-spacing:.06em;margin-bottom:16px;padding:5px 14px;text-transform:uppercase}.gradient-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#a78bfa,#f472b6 50%,#38bdf8);-webkit-background-clip:text;background-clip:text;font-size:clamp(2.4rem,6vw,4rem);font-weight:800;line-height:1.1;margin-bottom:10px}.hero__sub{color:#cbd5e1;color:var(--text-2);font-size:1.15rem;font-weight:500;margin-bottom:10px}.hero__desc{color:#94a3b8;color:var(--text-3);font-size:.93rem;line-height:1.6;margin:0 auto;max-width:480px}.mode-toggle{display:flex;gap:12px;justify-content:center;margin-bottom:24px}.mode-btn{align-items:center;background:#ffffff0a;background:var(--surface-1);border:1px solid #ffffff17;border:1px solid var(--border);border-radius:16px;border-radius:var(--radius-md);color:#cbd5e1;color:var(--text-2);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:8px;padding:10px 24px;transition:all .25s ease}.mode-btn:hover{background:#ffffff12;background:var(--surface-2);border-color:#ffffff2e;border-color:var(--border-hover);color:#f8fafc;color:var(--text-1)}.mode-btn.active{background:linear-gradient(135deg,#4f46e5,#ec4899);background:linear-gradient(135deg,var(--primary-dark),var(--accent));border-color:#0000;box-shadow:0 4px 18px #6366f166;color:#fff}.glass-card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff0a;background:var(--surface-1);border:1px solid #ffffff17;border:1px solid var(--border);border-radius:32px;border-radius:var(--radius-xl);box-shadow:0 0 60px #6366f126,0 8px 40px #00000080;box-shadow:var(--shadow-glow),var(--shadow-raised);margin-bottom:28px;overflow:hidden;padding:36px}.drop-zone{align-items:center;background:#6366f108;border:2px dashed #ffffff17;border:2px dashed var(--border);border-radius:24px;border-radius:var(--radius-lg);cursor:pointer;display:flex;justify-content:center;min-height:220px;overflow:hidden;position:relative;transition:all .3s ease}.drop-zone:hover{background:#6366f112;box-shadow:0 0 0 4px #6366f11a}.drop-zone--loading,.drop-zone:hover{border-color:#6366f1;border-color:var(--primary)}.drop-zone--loading{background:#6366f10f;cursor:default}.drop-zone__idle{align-items:center;display:flex;flex-direction:column;gap:12px;padding:20px;text-align:center}.drop-zone__icon{align-items:center;background:linear-gradient(135deg,#6366f133,#ec489933);border-radius:16px;border-radius:var(--radius-md);color:#818cf8;color:var(--primary-light);display:flex;height:72px;justify-content:center;margin-bottom:4px;width:72px}.drop-zone__title{color:#f8fafc;color:var(--text-1);font-size:1.1rem;font-weight:600}.drop-zone__sub{color:#94a3b8;color:var(--text-3);font-size:.9rem}.drop-zone__formats{background:#ffffff0d;border:1px solid #ffffff17;border:1px solid var(--border);border-radius:100px;color:#94a3b8;color:var(--text-3);font-size:.78rem;letter-spacing:.05em;padding:4px 14px}.preview-wrap{align-items:center;display:flex;flex-direction:column;gap:10px;padding:16px;width:100%}.preview-img{border-radius:16px;border-radius:var(--radius-md);box-shadow:0 4px 24px #0006;box-shadow:var(--shadow-card);max-height:260px;max-width:100%;object-fit:contain}.preview-hint{color:#94a3b8;color:var(--text-3);font-size:.82rem}.loading-state{align-items:center;display:flex;flex-direction:column;gap:16px;padding:30px}.spinner-ring{animation:spin .9s linear infinite;border:4px solid #6366f126;border-radius:50%;border-top:4px solid var(--primary-light);height:56px;width:56px}.loading-state__title{color:#818cf8;color:var(--primary-light);font-size:1rem;font-weight:600}.progress-bar{background:#ffffff14;border-radius:100px;height:6px;overflow:hidden;width:240px}.progress-bar__fill{animation:progress-pulse 1.5s ease-in-out infinite;background:linear-gradient(90deg,#6366f1,#ec4899);background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:100px;height:100%;transition:width .3s ease}.loading-state__pct{color:#94a3b8;color:var(--text-3);font-size:.88rem;font-weight:500}@keyframes scanLine{0%{top:10%}50%{top:85%}to{top:10%}}.camera-wrap{display:flex;flex-direction:column;gap:18px}.viewfinder-box{aspect-ratio:4/3;background:#000;border:2px solid #6366f166;border-radius:24px;border-radius:var(--radius-lg);box-shadow:0 0 0 1px #6366f126,inset 0 0 40px #0009;overflow:hidden;position:relative;width:100%}.viewfinder-video{border-radius:22px;border-radius:calc(var(--radius-lg) - 2px);display:block;height:100%;object-fit:cover;width:100%}.scan-line{animation:scanLine 2s ease-in-out infinite;background:linear-gradient(90deg,#0000,#818cf8,#ec4899,#818cf8,#0000);background:linear-gradient(90deg,#0000,var(--primary-light),var(--accent),var(--primary-light),#0000);border-radius:2px;box-shadow:0 0 10px 2px #818cf880;height:2px;left:8%;right:8%;z-index:3}.scan-corner,.scan-line{pointer-events:none;position:absolute}.scan-corner{border-color:#818cf8;border-color:var(--primary-light);border-style:solid;height:28px;width:28px;z-index:4}.scan-corner.tl{border-radius:4px 0 0 0;border-width:3px 0 0 3px;left:12px;top:12px}.scan-corner.tr{border-radius:0 4px 0 0;border-width:3px 3px 0 0;right:12px;top:12px}.scan-corner.bl{border-radius:0 0 0 4px;border-width:0 0 3px 3px;bottom:12px;left:12px}.scan-corner.br{border-radius:0 0 4px 0;border-width:0 3px 3px 0;bottom:12px;right:12px}.scan-status-pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000b3;border:1px solid #ffffff26;border-radius:100px;bottom:14px;font-size:.82rem;left:50%;padding:6px 16px;pointer-events:none;transform:translateX(-50%);white-space:nowrap;z-index:5}.capturing-overlay,.scan-status-pill{color:#cbd5e1;color:var(--text-2);font-weight:600;position:absolute}.capturing-overlay{align-items:center;background:#000000bf;border-radius:22px;border-radius:calc(var(--radius-lg) - 2px);display:flex;flex-direction:column;font-size:.95rem;gap:14px;inset:0;justify-content:center;z-index:6}.camera-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.camera-hint{color:#94a3b8;color:var(--text-3);font-size:.82rem;line-height:1.5;padding:0 8px;text-align:center}.btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.btn{align-items:center;border:none;border-radius:10px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:8px;justify-content:center;outline:none;padding:10px 22px;transition:all .25s ease;white-space:nowrap}.btn--primary{background:linear-gradient(135deg,#4f46e5,#ec4899);background:linear-gradient(135deg,var(--primary-dark),var(--accent));box-shadow:0 4px 18px #6366f159;color:#fff}.btn--primary:hover{box-shadow:0 6px 24px #6366f180;transform:translateY(-2px)}.btn--green{background:linear-gradient(135deg,#10b981,#059669);background:linear-gradient(135deg,var(--green),var(--green-dark));box-shadow:0 4px 18px #10b9814d;color:#fff}.btn--green:hover{box-shadow:0 6px 24px #10b98173;transform:translateY(-2px)}.btn--ghost{background:#ffffff12;background:var(--surface-2);border:1px solid #ffffff17;border:1px solid var(--border);color:#cbd5e1;color:var(--text-2)}.btn--ghost:hover{background:#ffffff1a;border-color:#ffffff2e;border-color:var(--border-hover);color:#f8fafc;color:var(--text-1)}.btn--outline{background:#0000;border:1px solid #ffffff17;border:1px solid var(--border);color:#cbd5e1;color:var(--text-2)}.btn--outline:hover{border-color:#ffffff2e;border-color:var(--border-hover);color:#f8fafc;color:var(--text-1)}.btn--pulse{animation:pulse-ring 2.2s infinite}.alert{align-items:center;border-radius:10px;border-radius:var(--radius-sm);display:flex;font-size:.92rem;font-weight:500;gap:10px;margin-bottom:18px;padding:13px 18px}.alert--error{background:#ef44441f;border:1px solid #ef444459;color:#fca5a5}.alert--success{background:#10b9811f;border:1px solid #10b98159;color:#6ee7b7}.results-section{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff0a;background:var(--surface-1);border:1px solid #ffffff17;border:1px solid var(--border);border-radius:32px;border-radius:var(--radius-xl);box-shadow:0 0 60px #6366f126,0 8px 40px #00000080;box-shadow:var(--shadow-glow),var(--shadow-raised);padding:32px}.results-header{align-items:center;border-bottom:1px solid #ffffff17;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:28px;padding-bottom:24px}.results-header__left{align-items:center;display:flex;gap:14px}.results-header__title{color:#f8fafc;color:var(--text-1);font-size:1.3rem;font-weight:700}.results-header__sub{color:#94a3b8;color:var(--text-3);font-size:.85rem;margin-top:2px}.results-header__actions{display:flex;flex-wrap:wrap;gap:10px}.barcode-banner{align-items:center;background:linear-gradient(135deg,#6366f12e,#ec48991f);border:1px solid #6366f14d;border-radius:16px;border-radius:var(--radius-md);color:#818cf8;color:var(--primary-light);display:flex;gap:14px;margin-bottom:24px;padding:16px 20px}.barcode-banner>div{display:flex;flex-direction:column;gap:2px}.barcode-banner__label{color:#94a3b8;color:var(--text-3);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.barcode-banner__value{font-feature-settings:"tnum";color:#f8fafc;color:var(--text-1);font-size:1.05rem;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.04em}.cards-grid{grid-gap:14px;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:28px}.result-card{align-items:center;background:#ffffff12;background:var(--surface-2);border:1px solid #ffffff17;border-left:3px solid #ec4899;border:1px solid var(--border);border-left:3px solid var(--accent,var(--primary));border-radius:16px;border-radius:var(--radius-md);display:flex;gap:14px;padding:16px 18px;transition:all .2s ease}.result-card:hover{background:#ffffff12;border-color:#ffffff2e;border-color:var(--border-hover);box-shadow:0 4px 24px #0006;box-shadow:var(--shadow-card);transform:translateY(-1px)}.result-card--missing{border-left-color:#94a3b8b3;opacity:.68}.result-card__icon{align-items:center;border-radius:10px;border-radius:var(--radius-sm);display:flex;flex-shrink:0;height:38px;justify-content:center;width:38px}.result-card__body{display:flex;flex-direction:column;gap:3px;min-width:0}.result-card__label{color:#94a3b8;color:var(--text-3);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.result-card__value{color:#f8fafc;color:var(--text-1);font-size:.97rem;font-weight:600;line-height:1.3;word-break:break-word}.result-card--missing .result-card__value{color:#94a3b8;color:var(--text-3);font-style:italic}.raw-ocr{border:1px solid #ffffff17;border:1px solid var(--border);border-radius:16px;border-radius:var(--radius-md);overflow:hidden}.raw-ocr summary{align-items:center;background:#ffffff08;color:#94a3b8;color:var(--text-3);cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:8px;list-style:none;padding:13px 18px;transition:color .2s}.raw-ocr summary:hover{background:#ffffff0d;color:#cbd5e1;color:var(--text-2)}.raw-ocr summary:before{content:"▶";font-size:.7rem;transition:transform .2s}.raw-ocr[open] summary:before{transform:rotate(90deg)}.raw-ocr__text{background:#00000040;color:#94a3b8;color:var(--text-3);font-size:.82rem;line-height:1.65;max-height:200px;overflow-y:auto;padding:16px 18px;white-space:pre-wrap;word-break:break-word}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}@media (max-width:600px){.glass-card,.results-section{border-radius:24px;border-radius:var(--radius-lg);padding:22px 18px}.mode-toggle{gap:8px}.mode-btn{font-size:.88rem;padding:9px 16px}.results-header{align-items:flex-start;flex-direction:column}.cards-grid{grid-template-columns:1fr}.gradient-text{font-size:2.2rem}}