/* SKYNET face-recognition overlay — boxes + name tags over live tiles. */
.sk-vfaces {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden;
}
.sk-vface {
  position: absolute; left: 0; top: 0; will-change: transform;
  border: 2px solid var(--cyan); border-radius: 2px;
  box-shadow: 0 0 8px rgba(var(--cyan-rgb), .5);
  /* CSS-interpolate between the 10Hz updates so tracking looks smooth */
  transition: transform .12s linear, width .12s linear, height .12s linear;
}
.sk-vface-unknown {
  border-color: var(--orange); box-shadow: 0 0 8px rgba(var(--orange-rgb), .5);
}
.sk-vface-tag {
  position: absolute; left: -2px; bottom: 100%; margin-bottom: 3px;
  background: rgba(4, 6, 8, .82); color: var(--cyan);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  padding: 3px 6px; white-space: nowrap;
}
.sk-vface-unknown .sk-vface-tag { color: var(--orange); background: transparent; padding: 0; }
.sk-vface-q {
  pointer-events: auto; cursor: pointer;
  background: var(--orange); color: #1a0e00; border: none; border-radius: 0;
  width: 22px; height: 22px; font-size: 13px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 10px -1px rgba(var(--orange-rgb), .8);
}
.sk-vface-q:hover { filter: brightness(1.1); }