*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:#fef3c7;
  color:#1a1a1a;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle,#f59e0b22 1px,transparent 1px);
  background-size:20px 20px;
}

#video{
  position:fixed;top:0;left:0;
  width:1px;height:1px;opacity:0;pointer-events:none;
}

.app{
  max-width:380px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  padding:20px 18px 28px;
  display:flex;flex-direction:column;
  align-items:center;gap:14px;
}

/* stickers */
.sticker{
  background:#ef4444;
  color:#fff;
  font-weight:800;font-size:.75rem;
  padding:6px 16px;
  border-radius:8px;
  transform:rotate(-3deg);
  letter-spacing:1px;
  box-shadow:2px 3px 0 #991b1b;
}
.top-sticker{margin-top:8px}

.small-sticker{
  font-size:.6rem;
  padding:4px 10px;
  transform:rotate(3deg);
  background:#8b5cf6;
  box-shadow:2px 3px 0 #5b21b6;
  position:absolute;
  right:-8px;top:-10px;
}

/* header */
.header{text-align:center;margin-top:4px}
h1{
  font-size:2.8rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-2px;
  color:#1a1a1a;
}
h1 .hl{
  color:#ef4444;
  background:#fef08a;
  padding:0 8px;
  border-radius:6px;
  display:inline-block;
  transform:rotate(1deg);
}
.subtitle{
  font-size:.95rem;
  color:#92400e;
  font-weight:600;
  margin-top:4px;
}

/* nominal */
.nominal-box{
  background:#fff;
  border:3px solid #1a1a1a;
  border-radius:16px;
  padding:20px 28px;
  display:flex;align-items:center;gap:8px;
  position:relative;
  box-shadow:4px 4px 0 #1a1a1a;
  width:100%;
  justify-content:center;
}
.rp{
  font-size:1.1rem;font-weight:800;
  color:#92400e;
}
.nominal{
  font-size:2.8rem;font-weight:900;
  color:#1a1a1a;
  letter-spacing:-1px;
}

/* scanner */
.scanner-wrap{
  width:100%;text-align:center;
}
.scanner{
  position:relative;
  width:180px;height:180px;
  margin:0 auto 10px;
}
.scanner-frame{
  width:100%;height:100%;
  position:relative;
  border:3px dashed #d4d4d8;
  border-radius:16px;
}
.sc{
  position:absolute;width:24px;height:24px;
  border-color:#ef4444;border-style:solid;border-width:0;
}
.sc:nth-child(1){top:-3px;left:-3px;border-top-width:3px;border-left-width:3px;border-radius:10px 0 0 0}
.sc:nth-child(2){top:-3px;right:-3px;border-top-width:3px;border-right-width:3px;border-radius:0 10px 0 0}
.sc:nth-child(3){bottom:-3px;left:-3px;border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 10px}
.sc:nth-child(4){bottom:-3px;right:-3px;border-bottom-width:3px;border-right-width:3px;border-radius:0 0 10px 0}

.scanner-beam{
  position:absolute;width:80%;height:3px;
  left:10%;
  background:#ef4444;
  border-radius:2px;
  animation:scan 2s ease-in-out infinite;
  opacity:.8;
}
@keyframes scan{
  0%,100%{top:10%;opacity:0}
  10%{opacity:.8}
  90%{opacity:.8}
  50%{top:85%}
}

.cam-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;
  opacity:.2;
}
.cam-hint{
  font-size:.78rem;
  color:#a1a1aa;
  font-style:italic;
}
.perm-hint{
  font-size:.72rem;
  color:#ef4444;
  font-weight:700;
  text-align:center;
  margin-top:4px;
  animation:pulse 1.5s ease-in-out infinite;
}
.perm-hint.hide{display:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* buttons */
.btn{
  width:100%;
  padding:16px;
  border:3px solid #1a1a1a;
  border-radius:14px;
  font-family:inherit;
  font-size:1rem;font-weight:800;
  cursor:pointer;
  transition:transform .1s,box-shadow .1s;
  -webkit-tap-highlight-color:transparent;
  letter-spacing:.3px;
}
.btn:active{transform:translate(2px,2px);box-shadow:none!important}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

.btn-scan{
  background:#ef4444;
  color:#fff;
  box-shadow:4px 4px 0 #991b1b;
  font-size:1.1rem;
  padding:18px;
}
.btn-scan:hover:not(:disabled){background:#dc2626}

/* marquee */
.marquee{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  background:#1a1a1a;
  color:#fef08a;
  padding:10px 0;
  overflow:hidden;
  margin-top:8px;
}
.marquee-inner{
  display:inline-block;
  white-space:nowrap;
  font-size:.78rem;font-weight:700;
  animation:scroll 18s linear infinite;
}
@keyframes scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* footer */
.footer{
  font-size:.72rem;
  color:#a1a1aa;
  margin-top:auto;
}

/* flash */
@keyframes flashAnim{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.flash-overlay{
  position:fixed;inset:0;
  background:#fff;z-index:999;
  pointer-events:none;
  animation:flashAnim .25s ease-out forwards;
}

/* active scanner */
.scanner-frame.active{border-color:#ef4444;border-style:solid}
.scanner-frame.active .sc{border-color:#16a34a}
.scanner-frame.active .scanner-beam{background:#16a34a}
.scanner-frame.active~.cam-icon{display:none}

/* toast */
#toast{
  position:fixed;bottom:40px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#1a1a1a;color:#fef08a;
  padding:10px 22px;border-radius:10px;
  font-size:.8rem;font-weight:700;
  border:2px solid #fbbf24;
  box-shadow:3px 3px 0 #92400e;
  opacity:0;transition:all .3s;z-index:1000;
  pointer-events:none;white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}