.face-pose-wrap {
  position: relative;
}

.face-pose-wrap::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px solid rgba(148, 163, 184, 0.85);
  border-radius: 12px;
  pointer-events: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25);
}

.face-pose-wrap.face-pose--loading::after {
  border-color: rgba(148, 163, 184, 0.75);
}

.face-pose-wrap.face-pose--no-face::after {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.face-pose-wrap.face-pose--off-center::after {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.face-pose-wrap.face-pose--frontal::after {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.face-pose-wrap.face-pose--face::after {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.face-pose-guide {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}