@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080D14;--bg-surface:#111827;--bg-card:#1F2937;--bg-elevated:#2D3748;
  --white:#F9FAFB;--text:#E5E7EB;--text-muted:#9CA3AF;--text-dim:#6B7280;
  --border:#374151;--border-light:#4B5563;
  --blue:#3B82F6;--blue-glow:rgba(59,130,246,.25);
  --green:#10B981;--green-glow:rgba(16,185,129,.25);
  --red:#EF4444;--red-glow:rgba(239,68,68,.25);
  --amber:#F59E0B;--amber-glow:rgba(245,158,11,.25);
  --vermilion:#FF6B35;--vermilion-glow:rgba(255,107,53,.3);
  --radius:12px;--radius-sm:8px;
}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--white);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
#app{position:relative;height:100vh;height:100dvh;overflow:hidden}
.view{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.view.active-view{display:flex}

.onboarding{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center}
.onboarding-content{width:100%;max-width:420px;padding:2rem;position:relative}
.onboarding-skip{position:absolute;top:0;right:0;background:none;border:none;color:var(--text-muted);font-size:.875rem;cursor:pointer;padding:.5rem}
.onboarding-page{display:none;text-align:center;padding:3rem 1rem}
.onboarding-page.active{display:block}
.onboarding-icon{color:var(--blue);margin-bottom:1.5rem}
.onboarding-page h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.onboarding-page p{color:var(--text-muted);line-height:1.6}
.onboarding-indicators{display:flex;gap:.5rem;justify-content:center;margin-top:2rem}
.indicator{width:8px;height:8px;border-radius:50%;background:var(--border)}
.indicator.active{background:var(--blue)}
.onboarding-nav{display:flex;gap:.75rem;margin-top:2rem}

.btn{padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all .15s ease}
.btn-primary{background:var(--blue);color:white}
.btn-primary:hover{background:#2563EB}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--text-muted)}

#view-home{padding:env(safe-area-inset-top) 1.5rem 5rem 1.5rem;justify-content:flex-start}
#view-home header{text-align:center;padding:2rem 0 1rem}
.brand-title{font-size:2rem;font-weight:900;letter-spacing:-.02em}
.brand-subtitle{color:var(--text-muted);font-size:.75rem;margin-top:.25rem;text-transform:uppercase;letter-spacing:.1em}
.mode-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:9999px;font-size:.7rem;font-weight:600;margin-top:.75rem}
.mode-badge.live{background:rgba(16,185,129,.12);color:var(--green)}
.mode-badge.offline{background:rgba(245,158,11,.12);color:var(--amber)}
.mode-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.cta-card{display:flex;align-items:center;gap:1rem;width:100%;padding:1.25rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s ease;text-align:left;margin-top:1.5rem;color:var(--white)}
.cta-card:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 4px 20px var(--blue-glow)}
.cta-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--blue-glow);border-radius:var(--radius-sm);color:var(--blue);flex-shrink:0}
.cta-text h2{font-size:1rem;font-weight:700}
.cta-text p{font-size:.75rem;color:var(--text-muted);margin-top:.125rem}
.cta-arrow{color:var(--text-muted);margin-left:auto}
.btn-demo{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.75rem;padding:.75rem;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:all .15s}
.btn-demo:hover{border-color:var(--blue);color:var(--blue)}

.history-section{margin-top:2rem;flex:1}
.history-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--text-muted)}
.history-header h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.skeleton-card{height:3rem;background:var(--bg-surface);border-radius:var(--radius-sm);margin-bottom:.5rem;animation:pulse 1.5s ease infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.8}}
.scan-card{display:flex;align-items:center;gap:.75rem;padding:.875rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.5rem;animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.scan-card-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.75rem}
.scan-card-icon.safe{background:rgba(16,185,129,.15);color:var(--green)}
.scan-card-icon.fake{background:rgba(239,68,68,.15);color:var(--red)}
.scan-card-info{flex:1;min-width:0}
.scan-card-batch{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-card-meta{font-size:.7rem;color:var(--text-muted);margin-top:.125rem}
.scan-card-badge{font-size:.65rem;font-weight:600;padding:.125rem .5rem;border-radius:9999px;flex-shrink:0}
.scan-card-badge.safe{background:rgba(16,185,129,.15);color:var(--green)}
.scan-card-badge.fake{background:rgba(239,68,68,.15);color:var(--red)}
.history-empty{text-align:center;color:var(--text-dim);font-size:.8rem;padding:2rem 0}

#view-scan{background:#000;padding:env(safe-area-inset-top) 0 0 0}
.scan-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;position:relative;z-index:10}
.brand-mark{font-weight:800;font-size:.85rem;letter-spacing:.08em;color:var(--white)}
.scan-header-right{display:flex;align-items:center;gap:.75rem}
.live-badge{color:var(--green);font-size:.65rem;font-weight:600;letter-spacing:.05em}
.offline-badge{color:var(--amber);font-size:.65rem;font-weight:700;letter-spacing:.05em;padding:.2rem .6rem;background:rgba(245,158,11,.15);border-radius:9999px;animation:pulse 2s ease infinite}

.scan-viewport{position:relative;flex:1;overflow:hidden}
#camera-feed{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72%;aspect-ratio:4/3;pointer-events:none}
.frame-corner{position:absolute;width:24px;height:24px;border-color:var(--blue);border-style:solid;border-width:0}
.frame-corner.tl{top:0;left:0;border-top-width:3px;border-left-width:3px;border-top-left-radius:4px}
.frame-corner.tr{top:0;right:0;border-top-width:3px;border-right-width:3px;border-top-right-radius:4px}
.frame-corner.bl{bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:4px}
.frame-corner.br{bottom:0;right:0;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:4px}

.scan-line{position:absolute;top:0;left:5%;width:90%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--blue),transparent);opacity:0;box-shadow:0 0 12px var(--blue)}
.scan-line.active{opacity:1;animation:scanSweep 2.5s ease-in-out infinite}
@keyframes scanSweep{0%{top:0}50%{top:100%}100%{top:0}}

.demo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000}
.demo-top-labels{position:absolute;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;flex-direction:column;align-items:center;padding-top:1rem;z-index:6}
.demo-pill{background:rgba(255,107,53,.15);color:var(--vermilion);font-size:.6rem;font-weight:700;letter-spacing:.08em;padding:.25rem .75rem;border-radius:9999px}
.demo-hint{color:var(--text-muted);font-size:.65rem;margin-top:.35rem}
.demo-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72%;aspect-ratio:4/3;z-index:5}
.demo-frame .frame-corner{border-color:var(--vermilion)!important}
.scan-line.demo-sweep{opacity:1;animation:scanSweep 2.5s ease-in-out infinite;background:linear-gradient(90deg,transparent,var(--vermilion),var(--vermilion),transparent);box-shadow:0 0 12px var(--vermilion)}

.scan-footer{text-align:center;padding:.5rem 1rem;position:relative;z-index:5}
.scan-status{font-size:.75rem;font-weight:600;color:var(--white);text-transform:uppercase;letter-spacing:.08em}
.scan-sub{font-size:.6rem;color:var(--text-dim);margin-top:.125rem;letter-spacing:.05em}

.ocr-display{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:15;background:rgba(8,13,20,.92);border:1px solid var(--blue);border-radius:var(--radius-sm);padding:.6rem 1.2rem;display:flex;align-items:center;gap:.75rem;animation:fadeInUp .4s ease}
.ocr-label{font-size:.55rem;font-weight:700;letter-spacing:.08em;color:var(--blue);text-transform:uppercase}
.ocr-text{font-size:1.1rem;font-weight:800;color:var(--white);letter-spacing:.06em;font-family:'Courier New',monospace}

.ai-panel{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);z-index:15;background:rgba(8,13,20,.92);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;min-width:260px;animation:fadeInUp .4s ease}
.ai-title{font-size:.55rem;font-weight:700;letter-spacing:.08em;color:var(--blue);text-transform:uppercase;margin-bottom:.5rem}
.ai-step{font-size:.72rem;color:var(--text-dim);padding:.2rem 0;display:flex;align-items:center;gap:.5rem;transition:all .3s ease}
.ai-step .step-icon{font-size:.6rem;transition:all .3s ease}
.ai-step.active{color:var(--blue)}
.ai-step.active .step-icon{color:var(--blue)}
.ai-step.done{color:var(--green)}
.ai-step.done .step-icon{color:var(--green)}

.verdict-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}
.verdict-overlay.fake-verdict{background:radial-gradient(ellipse at center,rgba(239,68,68,.2) 0%,rgba(8,13,20,1) 60%)}
.verdict-overlay.safe-verdict{background:radial-gradient(ellipse at center,rgba(16,185,129,.2) 0%,rgba(8,13,20,1) 60%)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.verdict-content{text-align:center;padding:2rem}
.verdict-shield{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.verdict-shield.fake-glow{background:rgba(239,68,68,.15);box-shadow:0 0 40px var(--red-glow);color:var(--red);animation:pulseGlow 2s ease infinite}
.verdict-shield.safe-glow{background:rgba(16,185,129,.15);box-shadow:0 0 40px var(--green-glow);color:var(--green);animation:pulseGlow 2s ease infinite}
@keyframes pulseGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.verdict-type{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem}
.verdict-main{font-size:2.5rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.5rem}
.verdict-batch-display{font-size:.8rem;color:var(--text-muted);margin-bottom:1rem;font-family:'Courier New',monospace;letter-spacing:.04em}
.safe-color{color:var(--green)}
.fake-color{color:var(--red)}

.status-stack{display:flex;flex-direction:column;gap:0;margin:1rem 0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;min-width:260px}
.s-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem .75rem;border-bottom:1px solid var(--border)}
.s-row:last-child{border-bottom:none}
.s-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.s-val{font-size:.65rem;font-weight:600;color:var(--text)}

.warning-badge{display:inline-block;padding:.35rem 1rem;background:rgba(239,68,68,.15);color:var(--red);font-size:.7rem;font-weight:700;letter-spacing:.08em;border-radius:9999px;margin:1rem 0;border:1px solid rgba(239,68,68,.3);animation:warningPulse 1.5s ease infinite}
@keyframes warningPulse{0%,100%{opacity:1}50%{opacity:.6}}

.btn-scan-another{margin-top:1.5rem;padding:.75rem 2rem;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--white);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}
.btn-scan-another:hover{border-color:var(--blue);color:var(--blue)}

.scan-toolbar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:1.5rem;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(0,0,0,.8),transparent);z-index:10}
.tool-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:rgba(8,13,20,.6);color:var(--text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;backdrop-filter:blur(8px)}
.tool-btn:hover{border-color:var(--blue);color:var(--blue)}
.tool-btn.active{border-color:var(--blue);color:var(--blue);background:rgba(59,130,246,.1)}
.zoom-lbl{font-size:.45rem;font-weight:700;margin-top:2px}

.scan-error{position:absolute;inset:0;z-index:20;background:rgba(8,13,20,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}
.scan-error p{color:var(--text-muted);margin-bottom:1.5rem;font-size:.875rem}
.scan-error-actions{display:flex;gap:.75rem}

@keyframes fadeInUp{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

.dash-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1.5rem 1.5rem env(safe-area-inset-top) 1.5rem}
.dash-title{font-size:1.1rem;font-weight:900;letter-spacing:-.01em}
.dash-slash{color:var(--blue);font-weight:400}
.dash-sub{font-size:.7rem;color:var(--text-muted);margin-top:.125rem}
.btn-refresh{background:none;border:1px solid var(--border);color:var(--text-muted);font-size:.65rem;font-weight:600;padding:.35rem .75rem;border-radius:var(--radius-sm);cursor:pointer;letter-spacing:.05em}
.btn-refresh:hover{border-color:var(--blue);color:var(--blue)}
.offline-chip{margin:0 1.5rem;padding:.4rem .75rem;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-sm);color:var(--amber);font-size:.7rem;font-weight:500;text-align:center}

.dash-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:1rem 1.5rem}
.dash-metric{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center}
.metric-num{display:block;font-size:1.75rem;font-weight:900;color:var(--white);line-height:1}
.metric-label{display:block;font-size:.55rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.375rem}
.dash-metric.red .metric-num{color:var(--red)}
.dash-metric.amber .metric-num{color:var(--amber)}
.dash-metric.blue .metric-num{color:var(--blue)}

.dash-section{padding:0 1.5rem;margin-bottom:1.5rem}
.dash-section-title{font-size:.65rem;font-weight:700;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;margin-bottom:.75rem}

.map-area{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);height:160px;position:relative;overflow:hidden}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(59,130,246,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.06) 1px,transparent 1px);background-size:30px 30px}
.map-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red-glow);animation:mapPulse 2s ease infinite}
.map-dot.green{background:var(--green);box-shadow:0 0 8px var(--green-glow)}
@keyframes mapPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

.cluster-card{background:var(--bg-surface);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);padding:1rem;position:relative;overflow:hidden}
.cluster-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--red)}
.cluster-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.cluster-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:mapPulse 1.5s ease infinite}
.cluster-title{font-size:.8rem;font-weight:700;color:var(--red)}
.cluster-detail{font-size:.7rem;color:var(--text-muted);line-height:1.5}

.threat-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.5rem}
.threat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.threat-dot.red{background:var(--red)}
.threat-dot.amber{background:var(--amber)}
.threat-info{flex:1;min-width:0}
.threat-batch{font-size:.8rem;font-weight:600}
.threat-meta{font-size:.65rem;color:var(--text-muted);margin-top:.125rem}
.threat-badge{font-size:.6rem;font-weight:600;padding:.15rem .5rem;border-radius:9999px;flex-shrink:0}
.threat-badge.fake{background:rgba(239,68,68,.15);color:var(--red)}
.threat-badge.suspicious{background:rgba(245,158,11,.15);color:var(--amber)}

.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:0 1.5rem}
.arch-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center}
.arch-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}
.arch-icon.blue-bg{background:rgba(59,130,246,.15);color:var(--blue)}
.arch-icon.orange-bg{background:rgba(255,107,53,.15);color:var(--vermilion)}
.arch-icon.green-bg{background:rgba(16,185,129,.15);color:var(--green)}
.arch-icon.red-bg{background:rgba(239,68,68,.15);color:var(--red)}
.arch-card h3{font-size:.8rem;font-weight:700;margin-bottom:.25rem}
.arch-detail{font-size:.65rem;color:var(--text-muted);line-height:1.4}
.arch-note{font-size:.6rem;color:var(--text-dim);margin-top:.375rem;font-style:italic}

.arch-separator{height:1px;background:var(--border);margin:1.5rem 1.5rem}
.arch-flow{padding:0 1.5rem 5rem}
.flow-steps{display:flex;flex-direction:column;gap:0;align-items:center}
.flow-step{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.flow-num{width:28px;height:28px;border-radius:50%;background:var(--blue);color:white;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}
.flow-step strong{font-size:.8rem;display:block}
.flow-step p{font-size:.65rem;color:var(--text-muted);margin-top:.125rem}
.flow-arrow{color:var(--text-dim);font-size:.8rem;padding:.25rem 0}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:.5rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom));background:rgba(8,13,20,.95);border-top:1px solid var(--border);backdrop-filter:blur(12px);z-index:50}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:.15rem;background:none;border:none;color:var(--text-dim);font-size:.55rem;font-weight:500;cursor:pointer;padding:.35rem .75rem;transition:color .15s}
.nav-item.active{color:var(--blue)}
.nav-item:hover{color:var(--text)}
.scan-nav-icon{width:40px;height:40px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 0 16px var(--blue-glow)}
.scan-nav .scan-nav-icon{background:var(--blue)}

.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-content{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;padding:1.5rem;width:100%;max-width:420px;animation:slideUpModal .2s ease}
@keyframes slideUpModal{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.modal-header h2{font-size:1rem;font-weight:700}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.25rem;cursor:pointer;padding:.25rem}
.manual-input{width:100%;padding:.875rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--white);font-size:1rem;font-family:'Courier New',monospace;font-weight:600;letter-spacing:.06em;text-align:center;text-transform:uppercase}
.manual-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-glow)}
.manual-hint{font-size:.7rem;color:var(--text-dim);margin-top:.5rem;text-align:center}
.modal-actions{display:flex;gap:.75rem;margin-top:1.25rem}
.modal-actions .btn{flex:1}

@media(max-width:380px){
  .dash-metrics{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr}
}

.demo-package{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:260px;z-index:4;
  background:linear-gradient(145deg,#f5f0e8 0%,#e8e0d0 50%,#ddd5c5 100%);
  border-radius:6px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.3);
  border:1px solid rgba(0,0,0,.08);
}
.pkg-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 6px;
}
.pkg-logo{
  width:32px;height:32px;border-radius:4px;
  background:linear-gradient(135deg,#1a5276,#2e86c1);
  color:white;font-size:14px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  font-family:serif;letter-spacing:-.5px;
}
.pkg-brand{
  font-size:6px;font-weight:700;color:#1a5276;
  text-transform:uppercase;letter-spacing:.5px;
  border:1px solid #1a5276;padding:2px 5px;border-radius:2px;
}
.pkg-body{padding:4px 14px 12px}
.pkg-drug{
  font-size:16px;font-weight:800;color:#1a1a1a;
  font-family:'Inter',sans-serif;line-height:1.1;
}
.pkg-dose{
  font-size:11px;font-weight:500;color:#555;margin-top:2px;
  font-family:'Inter',sans-serif;
}
.pkg-mfg{
  font-size:8px;color:#777;margin-top:3px;
  font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.3px;
}
.pkg-divider{
  height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12),transparent);
  margin:8px 0;
}
.pkg-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:3px;
}
.pkg-key{
  font-size:7px;color:#888;text-transform:uppercase;
  letter-spacing:.4px;font-family:'Inter',sans-serif;
}
.pkg-val{
  font-size:10px;font-weight:700;color:#1a1a1a;
  font-family:'Courier New',monospace;letter-spacing:.5px;
}
.pkg-barcode{
  display:flex;gap:1.5px;justify-content:center;
  margin-top:8px;height:28px;align-items:stretch;
}
.pkg-barcode span{
  display:block;background:#1a1a1a;border-radius:1px;
}
.pkg-barcode span:nth-child(odd){width:2px}
.pkg-barcode span:nth-child(even){width:1px}
.pkg-barcode span:nth-child(3n){width:3px}
.pkg-barcode span:nth-child(5n){width:1.5px}
.pkg-barcode span:nth-child(7n){background:transparent}

@keyframes pkgFlash{0%,100%{opacity:1}50%{opacity:.6}}