* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  height: 100vh;
  overflow: hidden;
}
.screen { display: none; flex-direction: column; align-items: center;
  justify-content: center; height: 100vh; padding: 2rem; }
.screen.active { display: flex; }
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.subtitle { color: #94a3b8; margin-bottom: 1.5rem; }
.pin-display {
  font-size: 3rem; font-weight: bold; letter-spacing: 0.5rem;
  background: #1e293b; padding: 1rem 2rem; border-radius: 12px;
  min-width: 200px; text-align: center; margin-bottom: 1.5rem;
}
.numpad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem; max-width: 300px; width: 100%;
}
.num-btn {
  padding: 1.2rem; font-size: 1.5rem; border: none; border-radius: 12px;
  background: #1e293b; color: #f1f5f9; cursor: pointer; transition: 0.15s;
}
.num-btn:active { background: #334155; transform: scale(0.96); }
.num-btn.wide { grid-column: span 1; }
.num-btn.primary { background: #2563eb; }
.num-btn.primary:active { background: #1d4ed8; }
.error-msg { color: #f87171; margin-top: 1rem; font-size: 0.9rem; }
.hidden { visibility: hidden; }
.admin-link {
  position: fixed; bottom: 1rem; right: 1rem;
  color: #334155; font-size: 1.5rem; text-decoration: none;
}
.camera-container { position: relative; border-radius: 16px; overflow: hidden; }
video { width: 480px; max-width: 90vw; border-radius: 16px; }
.face-guide {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 200px; height: 250px;
  border: 3px solid rgba(59,130,246,0.7); border-radius: 50%;
}
#camera-status { color: #94a3b8; margin-top: 1rem; }
.btn-secondary {
  margin-top: 1.5rem; padding: 0.75rem 2rem; background: #334155;
  border: none; border-radius: 10px; color: #f1f5f9; cursor: pointer; font-size: 1rem;
}
.result-icon { font-size: 5rem; margin-bottom: 1rem; }
#result-title { font-size: 2rem; margin-bottom: 0.5rem; }
#result-message { color: #94a3b8; }