* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0d10; color: #e8eaed; font-family: system-ui, -apple-system, sans-serif; }

.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0b0d10;
}

.overlay form {
  display: flex; flex-direction: column; gap: 12px;
  width: 280px; padding: 32px;
  background: #15181c; border: 1px solid #2a2e34; border-radius: 12px;
}

.overlay h1 { margin: 0 0 8px; font-size: 20px; font-weight: 500; }

.overlay input, .overlay button {
  width: 100%; padding: 10px 12px; font-size: 14px;
  background: #0b0d10; color: #e8eaed;
  border: 1px solid #2a2e34; border-radius: 6px;
}
.overlay input:focus { outline: none; border-color: #4a90e2; }
.overlay button { background: #4a90e2; color: white; border: none; cursor: pointer; }
.overlay button:hover { background: #3a7fd1; }
.overlay button:disabled { opacity: 0.5; cursor: not-allowed; }

.error { color: #e26a6a; font-size: 13px; margin: 0; }

#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.status {
  position: fixed; top: 16px; left: 16px;
  padding: 6px 12px; background: rgba(0,0,0,0.6); border-radius: 4px;
  font-size: 12px; pointer-events: none;
}
.status.hidden { display: none; }