/* Стили сканера контрольной точки — только для scan.html */

.cam-box {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}

.cam-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* рамка прицела */
.cam-frame {
  position: absolute;
  inset: 14%;
  border-radius: 16px;
  pointer-events: none;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 26px 3px,
    linear-gradient(var(--gold), var(--gold)) top left / 3px 26px,
    linear-gradient(var(--gold), var(--gold)) top right / 26px 3px,
    linear-gradient(var(--gold), var(--gold)) top right / 3px 26px,
    linear-gradient(var(--gold), var(--gold)) bottom left / 26px 3px,
    linear-gradient(var(--gold), var(--gold)) bottom left / 3px 26px,
    linear-gradient(var(--gold), var(--gold)) bottom right / 26px 3px,
    linear-gradient(var(--gold), var(--gold)) bottom right / 3px 26px;
  background-repeat: no-repeat;
}

.cam-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  font-size: 13.5px;
  color: var(--muted);
}

.cam-box.is-live .cam-hint {
  display: none;
}

.scan-status {
  font-size: 12.5px;
  color: var(--muted);
}

.scan-status.ok {
  color: var(--green);
  font-weight: 700;
}

.scan-status.err {
  color: var(--coral);
  font-weight: 700;
}

/* карточка распознанного пассажира */
.pass-card .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.pass-card .row:last-child {
  border-bottom: none;
}

.pass-card .k {
  color: var(--muted);
}

.pass-card .v {
  font-weight: 700;
  text-align: right;
}

/* тестовые QR */
.test-qrs {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.test-qrs figure {
  margin: 0;
  text-align: center;
}

.test-qrs figcaption {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 7px;
}

.qr-white {
  width: 128px;
  height: 128px;
  background: #fff;
  border-radius: 10px;
  padding: 7px;
  box-sizing: border-box;
}

.qr-white svg {
  display: block;
  width: 100%;
  height: 100%;
}