:root{
  --blue:#00178A;
  --navy:#10265d;
  --lime:#E1FE02;
  --ink:#13285c;
  --muted:#7380a0;
  --bg:#f4f7ff;
  --glass:rgba(255,255,255,.74);
  --glass-strong:rgba(255,255,255,.9);
  --line:rgba(0,23,138,.10);
  --shadow:0 28px 80px rgba(16,38,93,.15);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:
  radial-gradient(circle at 10% 0%,rgba(0,23,138,.10),transparent 28%),
  radial-gradient(circle at 100% 18%,rgba(225,254,2,.13),transparent 26%),
  linear-gradient(145deg,#f8fbff 0%,#eef3ff 58%,#f7fff2 100%);
  overflow-x:hidden}
button,a{font:inherit}
.bg-orb{position:fixed;border-radius:999px;filter:blur(6px);pointer-events:none;opacity:.45}.orb-a{width:220px;height:220px;left:-120px;top:32vh;background:rgba(0,23,138,.10)}.orb-b{width:190px;height:190px;right:-100px;bottom:8vh;background:rgba(225,254,2,.16)}
.scan-page{width:min(100%,760px);margin:0 auto;padding:20px 18px 36px;position:relative;z-index:1}
.brand-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(16,38,93,.10);overflow:hidden}.brand-mark img{width:39px;height:39px;object-fit:contain}.brand-copy strong{display:block;font-family:Manrope,system-ui,sans-serif;font-size:15px;letter-spacing:-.02em}.brand-copy small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.02em}.live-pill{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(16,38,93,.08);font-size:10px;font-weight:800;color:var(--navy);white-space:nowrap}.live-pill span{width:7px;height:7px;border-radius:50%;background:#27b36a;box-shadow:0 0 0 5px rgba(39,179,106,.12)}
.scan-shell{background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.84);box-shadow:var(--shadow);border-radius:32px;padding:24px}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--blue)}.hero-copy h1{font-family:Manrope,system-ui,sans-serif;font-size:40px;line-height:1.02;letter-spacing:-.045em;margin:7px 0 10px}.hero-copy h1 span{color:#5571bf}.hero-copy p{margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.6;max-width:620px}
.scanner-card{background:rgba(255,255,255,.67);border:1px solid rgba(255,255,255,.92);border-radius:24px;padding:12px;box-shadow:0 16px 38px rgba(16,38,93,.08)}.scanner-topline{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 10px}.scanner-label{font-size:10px;font-weight:900;letter-spacing:.11em;color:var(--navy)}.secure-chip{font-size:9px;font-weight:800;color:var(--blue);background:rgba(0,23,138,.08);padding:6px 9px;border-radius:999px}
.scanner{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,#09133a,#050a24);aspect-ratio:1/1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 32px rgba(3,12,45,.18)}.scanner video{width:100%;height:100%;display:block;object-fit:cover}.scan-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 0 34%,rgba(0,0,0,.28) 65%,rgba(0,0,0,.55) 100%);pointer-events:none}.frame{position:absolute;left:14%;right:14%;top:14%;bottom:19%;border-radius:24px;pointer-events:none}.corner{position:absolute;width:38px;height:38px;border-color:var(--lime);border-style:solid;filter:drop-shadow(0 0 10px rgba(225,254,2,.45))}.corner.tl{left:0;top:0;border-width:4px 0 0 4px;border-radius:16px 0 0 0}.corner.tr{right:0;top:0;border-width:4px 4px 0 0;border-radius:0 16px 0 0}.corner.bl{left:0;bottom:0;border-width:0 0 4px 4px;border-radius:0 0 0 16px}.corner.br{right:0;bottom:0;border-width:0 4px 4px 0;border-radius:0 0 16px 0}.scan-line{position:absolute;left:6%;right:6%;top:12%;height:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);box-shadow:0 0 14px rgba(225,254,2,.65);animation:scanLine 2.6s ease-in-out infinite}@keyframes scanLine{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(300px);opacity:1}}
.scan-hint{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;background:rgba(3,13,43,.72);color:#fff;border-radius:13px;font-size:11px;font-weight:700;backdrop-filter:blur(10px)}.hint-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(225,254,2,.12);flex:0 0 auto}
.privacy-note{display:flex;align-items:flex-start;gap:8px;padding:11px 4px 3px;color:var(--muted);font-size:10px;line-height:1.55}.privacy-icon{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(0,23,138,.07);color:var(--blue);font-size:10px;font-weight:900;flex:0 0 auto}
.message{padding:11px 13px;border-radius:12px;font-size:12px;margin-top:10px}.error{background:#fff0f0;color:#9e2f2f}.hidden{display:none!important}
.guide-card{margin-top:16px;background:var(--glass-strong);border:1px solid rgba(255,255,255,.94);border-radius:24px;padding:18px;box-shadow:0 14px 34px rgba(16,38,93,.07)}.guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}.guide-head h2{font-family:Manrope,system-ui,sans-serif;font-size:18px;line-height:1.1;letter-spacing:-.03em;margin:6px 0 0}.guide-badge{padding:7px 9px;border-radius:999px;background:rgba(225,254,2,.28);color:var(--navy);font-size:9px;font-weight:900;white-space:nowrap}.steps{display:grid;gap:0}.step{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid rgba(0,23,138,.07)}.step:last-child{border-bottom:0;padding-bottom:2px}.step-no{width:28px;height:28px;border-radius:10px;background:rgba(0,23,138,.08);color:var(--blue);display:grid;place-items:center;font-family:Manrope,system-ui,sans-serif;font-weight:900;font-size:12px}.step-body strong{display:block;font-size:12px;line-height:1.45}.step-body p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.back-button{width:100%;margin-top:16px;border:1px solid var(--line);background:rgba(255,255,255,.74);color:var(--navy);border-radius:16px;padding:13px 16px;font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 10px 24px rgba(16,38,93,.05);transition:transform .18s ease,background .18s ease}.back-button:active{transform:scale(.99)}.back-arrow{font-size:15px;vertical-align:-1px;margin-right:4px}
@media(min-width:680px){.scan-page{padding-top:30px}.scan-shell{padding:30px}.hero-copy h1{font-size:48px}.scanner{aspect-ratio:16/10}.scan-card{padding:16px}.guide-head h2{font-size:20px}.steps{grid-template-columns:1fr 1fr;column-gap:20px}.step:nth-child(odd){border-right:1px solid rgba(0,23,138,.07);padding-right:14px}.step:nth-child(even){padding-left:14px}}
@media(max-width:430px){.scan-page{padding:14px 12px 24px}.brand-copy strong{font-size:14px}.scan-shell{padding:18px;border-radius:28px}.hero-copy h1{font-size:36px}.hero-copy p{font-size:12px}.guide-card{padding:16px}.scanner-card{padding:10px}.scanner{border-radius:18px}.corner{width:30px;height:30px}.frame{left:15%;right:15%;top:15%;bottom:20%}.scan-line{animation-name:scanLineSmall}}
@keyframes scanLineSmall{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(220px);opacity:1}}

/* Stage 18 v10 — 4-step journey */
.flow-progress{margin:0 0 18px;padding:14px;border:1px solid rgba(0,23,138,.10);border-radius:20px;background:rgba(255,255,255,.68);box-shadow:0 10px 26px rgba(16,38,93,.06)}
.flow-progress-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:11px;font-size:10px}.flow-progress-top strong{font-size:11px;color:var(--navy)}.flow-progress-top span{font-weight:800;color:var(--blue);white-space:nowrap}.flow-progress-track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:5px}.flow-step{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}.flow-step b{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:#edf1fb;color:#7e8aa7;font-size:10px;font-weight:900}.flow-step span{font-size:8px;color:#7784a2;font-weight:800;white-space:nowrap}.flow-step.active b{background:var(--blue);color:#fff;box-shadow:0 7px 14px rgba(0,23,138,.16)}.flow-step.active span{color:var(--blue)}.flow-connector{height:3px;border-radius:999px;background:#e4eafa}.guide-badge{padding:7px 9px;border-radius:999px;background:rgba(225,254,2,.28);color:var(--navy);font-size:9px;font-weight:900;white-space:nowrap}.step-current{background:rgba(0,23,138,.025);border-radius:12px;padding-left:7px!important;padding-right:7px!important}.step-current .step-no{background:var(--blue);color:#fff}
@media(max-width:430px){.flow-progress{padding:12px}.flow-progress-top{font-size:9px}.flow-progress-top strong{font-size:10px}.flow-step b{width:25px;height:25px;border-radius:9px}.flow-step span{font-size:7px}.flow-progress-track{gap:3px}}

/* Stage 18 v11 — mobile overflow / responsive stabilization */
html, body { width:100%; max-width:100%; overflow-x:clip; }
body { min-width:0; }
.scan-page,
.scan-shell,
.brand-bar,
.brand,
.brand-copy,
.hero-copy,
.flow-progress,
.scanner-card,
.guide-card,
.flow-progress-top,
.flow-progress-track,
.scanner,
.privacy-note,
.step,
.step-body { min-width:0; max-width:100%; }
.scan-page { width:100%; }
.scan-shell { width:100%; }
.flow-progress-track { grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr); }
.flow-step { min-width:0; }
.flow-step span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:430px){
  .scan-page { padding:12px 10px 22px; }
  .brand-bar { margin-bottom:12px; }
  .brand { gap:8px; }
  .brand-mark { width:40px; height:40px; border-radius:13px; flex:0 0 40px; }
  .brand-mark img { width:34px; height:34px; }
  .brand-copy strong { font-size:13px; }
  .brand-copy small { font-size:9px; }
  .live-pill { padding:7px 9px; font-size:9px; }
  .live-pill span { width:6px; height:6px; }
  .scan-shell { padding:14px; border-radius:22px; }
  .hero-copy .eyebrow { font-size:8px; letter-spacing:.13em; }
  .hero-copy h1 { font-size:31px; line-height:1.02; margin:5px 0 8px; }
  .hero-copy p { font-size:11px; line-height:1.48; margin-bottom:14px; }
  .flow-progress { padding:10px; border-radius:16px; margin-bottom:12px; }
  .flow-progress-top { font-size:8px; margin-bottom:8px; }
  .flow-progress-top strong { font-size:9px; }
  .flow-progress-top span { font-size:8px; }
  .flow-progress-track { grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr); gap:2px; }
  .flow-step b { width:23px; height:23px; border-radius:8px; font-size:9px; }
  .flow-step span { font-size:6.8px; }
  .flow-connector { height:2px; }
  .scanner-card { padding:8px; border-radius:18px; }
  .scanner-topline { padding:2px 2px 8px; }
  .scanner-label { font-size:8px; letter-spacing:.09em; }
  .secure-chip { font-size:8px; padding:5px 7px; }
  .scanner { border-radius:15px; aspect-ratio:1/1; }
  .frame { left:16%; right:16%; top:16%; bottom:18%; }
  .corner { width:25px; height:25px; border-width:3px 0 0 3px; }
  .corner.tr { border-width:3px 3px 0 0; }
  .corner.bl { border-width:0 0 3px 3px; }
  .corner.br { border-width:0 3px 3px 0; }
  .scan-line { animation-name:scanLineSmall; }
  .scan-hint { left:10px; right:10px; bottom:10px; padding:9px 10px; font-size:9px; border-radius:11px; }
  .privacy-note { font-size:8.5px; line-height:1.45; padding-top:9px; }
  .privacy-icon { width:16px; height:16px; font-size:9px; }
  .guide-card { margin-top:12px; padding:12px; border-radius:18px; }
  .guide-head { gap:8px; padding-bottom:9px; }
  .guide-head h2 { font-size:15px; }
  .guide-badge { font-size:7.5px; padding:6px 7px; }
  .step { grid-template-columns:26px minmax(0,1fr); gap:8px; padding:9px 0; }
  .step-no { width:25px; height:25px; border-radius:8px; font-size:10px; }
  .step-body strong { font-size:10.5px; }
  .step-body p { font-size:8.5px; line-height:1.42; }
  .back-button { margin-top:12px; padding:11px 13px; font-size:10.5px; border-radius:13px; }
}

/* Stage 18 v12 — active queue gate */
.active-queue-state{
  margin-bottom:18px;
  padding:28px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(242,246,255,.88));
  box-shadow:0 18px 42px rgba(16,38,93,.10);
  text-align:center;
}
.active-queue-icon{
  width:54px;height:54px;border-radius:18px;margin:0 auto 12px;
  display:grid;place-items:center;background:var(--blue);color:#fff;
  font-family:Manrope,system-ui,sans-serif;font-size:25px;font-weight:900;
  box-shadow:0 10px 22px rgba(0,23,138,.18);
}
.active-queue-eyebrow{font-size:9px;font-weight:900;letter-spacing:.16em;color:var(--blue)}
.active-queue-state h2{margin:7px auto 8px;font-family:Manrope,system-ui,sans-serif;font-size:27px;line-height:1.05;letter-spacing:-.04em;color:var(--navy);max-width:540px}
.active-queue-state>p{margin:0 auto 18px;color:var(--muted);font-size:12px;line-height:1.55;max-width:540px}
.active-ticket{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:9px;margin:0 0 16px;text-align:left}
.active-ticket>div{padding:13px 14px;border-radius:15px;background:rgba(255,255,255,.82);border:1px solid rgba(0,23,138,.08)}
.active-ticket span{display:block;color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.active-ticket strong{display:block;color:var(--navy);font-family:Manrope,system-ui,sans-serif;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.active-queue-button{width:100%;border:0;border-radius:16px;padding:14px 18px;background:linear-gradient(135deg,#00178A,#2446d4);color:#fff;font-weight:900;font-size:13px;cursor:pointer;box-shadow:0 12px 24px rgba(0,23,138,.18)}
.active-queue-button span{margin-left:7px;font-size:16px}
@media(max-width:430px){
  .active-queue-state{padding:20px 14px;border-radius:20px}
  .active-queue-icon{width:48px;height:48px;border-radius:16px}
  .active-queue-state h2{font-size:22px}
  .active-queue-state>p{font-size:10.5px;margin-bottom:14px}
  .active-ticket{grid-template-columns:1fr 1fr;gap:7px}
  .active-ticket>div:first-child{grid-column:1/-1}
  .active-ticket strong{font-size:13px}
  .active-queue-button{padding:13px 14px;font-size:12px}
}