body {
  background: #f4f6fb;
}
.login-bg, .scan-bg {
  background: linear-gradient(135deg, #4f7cff 0%, #2541b2 100%);
  min-height: 100vh;
}
.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
}
.app-navbar {
  background: linear-gradient(90deg, #2541b2, #4f7cff);
}
.stat-card {
  border-radius: 14px;
}
.card {
  border-radius: 14px;
}

/* ==== Video / kamera ==== */
.video-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror biar natural */
}
.video-wrap canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}
.scan-frame {
  position: absolute;
  inset: 12%;
  border: 3px dashed rgba(255,255,255,.6);
  border-radius: 16px;
  pointer-events: none;
}

.result-box {
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.result-box.sukses { border: 3px solid #2ecc71; }
.result-box.gagal { border: 3px solid #e74c3c; }

@media (max-width: 480px) {
  .video-wrap { max-width: 100%; }
  .result-box { max-width: 100%; }
}