.scanner-panel {
  transition: border-color .2s, box-shadow .2s;
}

.scan-target {
  width: 58%;
  border-radius: 16px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.scan-target::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 12%;
  background: #55df86;
  box-shadow: 0 0 10px #55df86;
  animation: scan-line 1.35s ease-in-out infinite alternate;
}

.scanner-feedback {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 28px;
  text-align: center;
  background: rgba(7, 20, 12, .88);
}

.scanner-feedback b { font-size: 30px; line-height: 1; }
.scanner-feedback span { font-size: 17px; font-weight: 900; }
.scanner-feedback small { color: #c9d9ce; }
.scanner-panel.scan-success { border-color: #55df86; box-shadow: 0 0 0 3px rgba(85, 223, 134, .18); }
.scanner-panel.scan-success .scan-target { border-color: #55df86; box-shadow: 0 0 0 999px rgba(10, 54, 27, .45), 0 0 26px #55df86; transform: scale(1.04); animation: scan-confirm .45s ease; }
.scanner-panel.scan-success .scanner-feedback { background: rgba(7, 42, 19, .92); }
.scanner-panel.scan-success .scanner-feedback b { color: #55df86; }
.scanner-panel.scan-warning { border-color: #ffb142; }
.scanner-panel.scan-warning .scan-target { border-color: #ffb142; box-shadow: 0 0 0 999px rgba(65, 39, 5, .48); }
.scanner-panel.scan-warning .scanner-feedback { background: rgba(54, 32, 4, .94); }
.scanner-panel.scan-warning .scanner-feedback b { color: #ffb142; }
.scanner-panel.scan-warning .scanner-feedback small { color: #ffe0ad; }
.scanner-panel.scan-error { border-color: #ff5a5d; }
.scanner-panel.scan-error .scan-target { border-color: #ff5a5d; box-shadow: 0 0 0 999px rgba(65, 8, 10, .48); }
.scanner-panel.scan-error .scanner-feedback { background: rgba(54, 6, 8, .94); }
.scanner-panel.scan-error .scanner-feedback b { color: #ff7779; }
.scanner-panel.scan-error .scanner-feedback small { color: #ffd0d1; }
.scanner-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scanner-controls .btn:only-child { grid-column: 1 / -1; }

@keyframes scan-confirm {
  0% { transform: scale(.94); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1.04); }
}

@keyframes scan-line {
  from { top: 12%; }
  to { top: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-target::after { animation: none; top: 50%; }
  .scanner-panel.scan-success .scan-target { animation: none; }
}