.barcode-scan-action,
.barcode-primary-action,
.barcode-secondary-action{
  min-height:44px;
  border:1px solid #48d9c866;
  border-radius:10px;
  padding:9px 13px;
  background:#48d9c814;
  color:var(--cyan);
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer
}
.barcode-scan-action:focus-visible,
.barcode-primary-action:focus-visible,
.barcode-secondary-action:focus-visible,
.barcode-manual-form input:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px
}
.barcode-primary-action:disabled{
  cursor:wait;
  opacity:.65
}
.barcode-secondary-action{
  border-color:var(--line);
  background:#ffffff08;
  color:var(--text)
}
.barcode-scanner[hidden]{
  display:none
}
.barcode-scanner{
  scroll-margin-top:86px;
  margin-top:18px;
  padding:18px;
  border:1px solid #48d9c844;
  border-radius:16px;
  background:linear-gradient(155deg,#102533ee,#091721f2)
}
.barcode-scanner-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px
}
.barcode-scanner-head em{
  color:var(--cyan);
  font-size:9px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.16em
}
.barcode-scanner-head h2{
  margin:5px 0 0;
  font-size:18px
}
.barcode-scanner-head p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.5
}
.barcode-scanner-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:16px;
  margin-top:16px
}
.barcode-camera-shell{
  position:relative;
  min-width:0;
  min-height:260px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#02070b
}
.barcode-camera-shell video{
  display:block;
  width:100%;
  height:100%;
  min-height:260px;
  aspect-ratio:4/3;
  object-fit:cover
}
.barcode-reticle{
  position:absolute;
  inset:50% auto auto 50%;
  width:min(72%,360px);
  height:34%;
  transform:translate(-50%,-50%);
  border:2px solid #48d9c8cc;
  border-radius:14px;
  box-shadow:0 0 0 999px #0004;
  pointer-events:none
}
.barcode-camera-state{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 9px;
  border:1px solid #ffffff22;
  border-radius:999px;
  background:#071018dd;
  color:var(--muted);
  font-size:9px
}
.barcode-scanner-controls{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:12px
}
.barcode-status{
  min-height:46px;
  margin:0;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#ffffff05;
  color:var(--muted);
  font-size:10px;
  line-height:1.5
}
.barcode-manual-form{
  display:grid;
  gap:7px
}
.barcode-manual-form label{
  color:var(--muted);
  font-size:10px;
  font-weight:700
}
.barcode-manual-form>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px
}
.barcode-manual-form input{
  min-width:0;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 11px;
  background:#071018;
  color:var(--text);
  font:inherit;
  font-size:12px
}
.barcode-result{
  min-width:0;
  padding:13px;
  border:1px solid #5ce09a44;
  border-radius:12px;
  background:#5ce09a0d
}
.barcode-result small,
.barcode-result strong,
.barcode-result span{
  display:block
}
.barcode-result small{
  color:var(--green);
  font-size:9px;
  font-weight:800
}
.barcode-result strong{
  margin-top:7px;
  overflow-wrap:anywhere;
  font-size:16px
}
.barcode-result span{
  margin-top:5px;
  color:var(--muted);
  font-size:9px
}
.barcode-safety-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.55
}
@media(max-width:800px){
  .barcode-scan-action{
    grid-column:1/-1;
    width:100%
  }
  .barcode-scanner{
    padding:14px
  }
  .barcode-scanner-grid{
    grid-template-columns:1fr
  }
  .barcode-camera-shell,
  .barcode-camera-shell video{
    min-height:220px
  }
}
@media(max-width:520px){
  .barcode-scanner-head{
    flex-direction:column
  }
  .barcode-scanner-head .barcode-secondary-action{
    width:100%
  }
  .barcode-manual-form>div{
    grid-template-columns:1fr
  }
  .barcode-manual-form .barcode-secondary-action{
    width:100%
  }
  .barcode-camera-shell,
  .barcode-camera-shell video{
    min-height:200px
  }
}
@media(prefers-reduced-motion:reduce){
  .barcode-scanner{
    scroll-behavior:auto
  }
}