.camera-panel {
  align-self: start;
  height: min(68vh, 680px);
  border: 5px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.face-guide {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(62%, 430px);
  height: min(78%, 480px);
  border: 4px solid #60a5fa;
  border-radius: 28% 28% 34% 34%;
  box-shadow: 0 0 0 2px #0f172a66, 0 0 24px #2563eb66;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.face-recognized .face-guide {
  border-color: #4ade80;
  box-shadow: 0 0 0 2px #052e1666, 0 0 30px #22c55e99;
}

.server-clock { display: grid; justify-items: end; gap: 3px; }
.server-clock span { color: #64748b; font-size: 0.82rem; font-weight: 800; }
.server-clock time { font-variant-numeric: tabular-nums; }

.camera-panel.face-recognized {
  border-color: #22c55e;
  box-shadow: 0 0 0 8px #22c55e33;
  animation: recognized-blink 0.42s ease-in-out 4;
}

.recognition-badge {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 50%;
  padding: 14px 24px;
  border-radius: 999px;
  background: #16a34aeb;
  color: #fff;
  font-size: clamp(1.15rem, 2.8vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -18px) scale(0.92);
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}

.face-recognized .recognition-badge {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.challenge {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 2px solid #93c5fd;
  border-radius: 12px;
  background: #eff6ff;
}

.challenge strong { color: #1e40af; font-size: 0.9rem; }
.challenge span { color: #1d4ed8; font-size: clamp(1.25rem, 2.5vw, 1.8rem); font-weight: 900; text-align: center; }
.challenge-left, .challenge-right { animation: challenge-pulse 1.1s ease-in-out infinite; }
.challenge-checking { border-color: #fbbf24; background: #fffbeb; }
.challenge-checking span { color: #a16207; }
.challenge-done { border-color: #4ade80; background: #f0fdf4; }
.challenge-done span { color: #15803d; }
.challenge-error { border-color: #f87171; background: #fef2f2; }
.challenge-error span { color: #b91c1c; }
.mobile-challenge {
  min-width: 0;
  grid-template-columns: auto minmax(280px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}
.mobile-challenge span { font-size: clamp(1.35rem, 2.8vw, 2rem); }

.kiosk-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 460px) auto;
  align-items: center;
  margin-bottom: 18px;
}
.kiosk-title h1 { margin-bottom: 2px; }
.kiosk-title p { margin: 0; color: #5f636d; }
.header-event-fieldset legend { text-align: center; width: 100%; }
.punch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.punch-action {
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 12px 26px;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 900;
  border: 2px solid var(--md-primary);
  border-radius: 18px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(29,27,32,.2);
}
.punch-in { background: #19733f; border-color: #19733f; }
.punch-out { background: #315da8; }
.punch-action:disabled { background: #e3e3e8; border-color: #b8b8bf; color: #6d6d74; opacity: 1; }
.punch-action:not(:disabled):active { transform: scale(.97); }
.kiosk-guidance-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.kiosk-guidance-row > .terminal-badge { margin: 0; width: max-content; }
.card > #challenge { display: none; }

@keyframes recognized-blink {
  0%, 100% { border-color: #22c55e; box-shadow: 0 0 0 8px #22c55e33; }
  50% { border-color: #f0fdf4; box-shadow: 0 0 0 15px #22c55e77; }
}

@keyframes challenge-pulse {
  50% { transform: scale(1.025); box-shadow: 0 0 0 6px #3b82f622; }
}

@media (prefers-reduced-motion: reduce) {
  .camera-panel.face-recognized, .challenge-left, .challenge-right { animation: none; }
}

@media (max-width: 800px) {
  .kiosk-head { grid-template-columns: minmax(180px, .8fr) minmax(340px, 1.2fr); gap: 10px 18px; }
  .kiosk-head .server-clock { grid-column: 1; grid-row: 2; justify-items: start; }
  .punch-action { min-height: 70px; font-size: 1.7rem; }
  .mobile-challenge { padding: 12px 16px; }
  .mobile-challenge span { font-size: clamp(1.45rem, 4.5vw, 2rem); }
  .camera-panel { height: min(53vh, 500px); min-height: 390px; }
  .face-guide { width: min(72%, 430px); height: min(82%, 480px); }
}

@media (max-width: 600px) {
  .kiosk-head { grid-template-columns: 1fr; }
  .kiosk-head .server-clock { grid-column: 1; grid-row: auto; justify-self: start; }
  .kiosk-guidance-row { grid-template-columns: 1fr; gap: 8px; }
  .mobile-challenge { grid-template-columns: 1fr; }
  .punch-action { min-height: 62px; }
  .camera-panel { height: 48vh; min-height: 340px; }
}

@media (orientation: portrait) and (max-width: 800px) {
  .camera-panel video,
  .camera-panel canvas {
    object-fit: contain;
    background: #121318;
  }
  .face-guide {
    width: min(42%, 300px);
    height: min(78%, 430px);
  }
}