.site-terminal-face-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--commercial-brand) 30%, #d6e1dc);
  border-radius: 1.25rem;
  background: #0b1713;
  color: #f4fff9;
}

.face-camera-host {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.face-capture-view {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #0b1713;
}

.face-capture-view h2 {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 50%;
  max-width: 60%;
  margin: 0;
  padding: .45rem .85rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(5, 19, 14, .74);
  color: #ffffff;
  font-size: clamp(.9rem, 2.5vw, 1.2rem);
  text-align: center;
  backdrop-filter: blur(8px);
}

.face-capture-view video,
.face-dialog video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #0b1713;
  transform: scaleX(-1);
}

.face-capture-view [role="status"] {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: .9rem;
  background: rgba(5, 28, 20, .86);
  color: #ffffff;
  font-size: clamp(1.05rem, 3vw, 1.55rem);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
}

.face-capture-cancel,
.face-capture-restart,
.site-terminal-back {
  position: absolute;
  z-index: 5;
  top: .8rem;
  left: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 2.5rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(5, 19, 14, .72);
  color: #ffffff;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.face-capture-view .face-capture-restart {
  right: .8rem;
  left: auto;
}

.face-dialog { position: relative; }
.face-dialog video { height: min(48dvh, 25rem); object-fit: contain; }
.face-dialog .face-capture-cancel,
.face-dialog .face-capture-restart { position: static; }
.face-capture-restart:disabled { opacity: .5; cursor: wait; }
.face-capture-restart[hidden] { display: none; }

.face-map-open {
  position: relative;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: var(--commercial-brand, #00695c);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .28);
}

.face-map-avatar { font-size: 1.8rem; }

.face-map-plus {
  position: absolute;
  right: -.22rem;
  bottom: -.22rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #19a669;
  font-size: 1rem;
}

#face-status {
  position: absolute;
  z-index: 2;
  right: 4.6rem;
  top: .95rem;
  max-width: 42%;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .7rem;
  font-weight: 700;
  text-align: right;
}

.face-map-dialog,
.face-dialog {
  width: min(92vw, 34rem);
  max-height: 92dvh;
  padding: 1.25rem;
  border: 0;
  border-radius: 1.15rem;
  background: #f4faf7;
  color: #163c31;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .36);
}

.face-map-dialog::backdrop,
.face-dialog::backdrop {
  background: rgba(1, 13, 9, .76);
  backdrop-filter: blur(4px);
}

.face-map-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.face-map-dialog-header p,
.face-map-dialog-header h2 { margin: 0; }

.face-map-dialog-header p {
  color: var(--commercial-brand, #00695c);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.face-map-dialog label {
  display: block;
  margin-top: 1rem;
  font-weight: 800;
}

.face-map-dialog input {
  width: 100%;
  min-height: 3rem;
  margin-top: .4rem;
  padding: .7rem .85rem;
  border: 1px solid #8aa79d;
  border-radius: .65rem;
  background: #ffffff;
  color: #173a31;
  font: inherit;
}

.face-map-dialog > button:not(.face-dialog-icon),
.face-dialog > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  min-height: 3rem;
  margin-top: .8rem;
  padding: .75rem 1rem;
  border: 0;
  border-radius: .65rem;
  background: var(--commercial-brand, #00695c);
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.face-dialog-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid #c9d8d1;
  border-radius: 50%;
  background: transparent;
  color: #173a31;
  cursor: pointer;
}

.face-map-dialog button:disabled,
.face-map-open:disabled { opacity: .48; cursor: wait; }

body[data-site-theme="dark"] .face-map-dialog,
body[data-site-theme="dark"] .face-dialog { background: #182b24; color: #e7f4ed; }

body[data-site-theme="dark"] .face-map-dialog input { border-color: #416257; background: #0e1c17; color: #e7f4ed; }
body[data-site-theme="dark"] .face-dialog-icon { border-color: #416257; color: #e7f4ed; }

@media (max-width: 520px) {
  .face-capture-view h2,
  #face-status { display: none; }
  .face-capture-view [role="status"] { right: .65rem; bottom: .65rem; left: .65rem; }
}

/* The SVG and contained video share the camera aspect ratio and centre zone. */
.face-capture-guide { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.face-capture-guide[hidden] { display: none; }
.face-capture-guide svg { display: block; width: 100%; height: 100%; }
.face-capture-guide rect { fill: none; stroke: #8ff2cd; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 12 8; }

.face-recognition-preview { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; height: 100%; padding: 1.5rem; background: #0b1713; color: #f4fff9; text-align: center; }
.face-recognition-preview h2 { margin: 0; font-size: clamp(1.7rem, 5vw, 3rem); overflow-wrap: anywhere; }
.face-recognition-preview p { margin: 0; max-width: 34rem; }
.face-recognition-preview > button { position: static; justify-content: center; width: min(100%, 22rem); min-height: 3.2rem; border: 1px solid #8ff2cd; border-radius: .8rem; background: #00695c; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.face-recognition-preview .face-capture-cancel { background: transparent; }