* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --azul-bg: #23439f;
  --azul-bg2: #1c357f;
  --azul-card: #2f53b3;
  --azul-btn: #128ae0;
  --azul-btn2: #0f78c4;
  --branco: #ffffff;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(160deg, var(--azul-bg), var(--azul-bg2));
  color: var(--branco);
  min-height: 100vh;
  overflow-x: hidden;
}

.screen { display: none; flex-direction: column; align-items: center;
  min-height: 100vh; padding: 24px 22px 36px; }
.screen.active { display: flex; }

.logo { width: 64px; align-self: flex-end; margin: 6px 4px 0; }
.logo-top { width: 120px; margin: 8px auto 18px; }
.arte { width: 86%; max-width: 360px; margin: 26px 0 30px; display: block; }

.card {
  width: 100%; max-width: 440px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(4px);
}

input[type="text"] {
  width: 100%; border: none; border-radius: 14px;
  padding: 18px 18px; font-size: 17px; color: #1a2a4a;
  background: #fff; outline: none;
}
input[type="text"]::placeholder { color: #9aa3b5; }

.btn-primary, .btn-secondary, .btn-ghost {
  width: 100%; border: none; border-radius: 14px; padding: 17px;
  font-size: 17px; font-weight: 700; cursor: pointer; transition: filter .15s, opacity .15s;
}
.btn-primary { background: linear-gradient(180deg, var(--azul-btn), var(--azul-btn2)); color: #fff; }
.btn-primary:disabled { opacity: .5; }
.btn-primary:active { filter: brightness(.92); }
.btn-secondary { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.btn-ghost { background: transparent; color: #cfe0ff; font-weight: 600; }

.terms { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #dfe7ff; justify-content: center; }
.terms input { width: 20px; height: 20px; }
.terms a { color: #ffd44d; }

.label { font-size: 15px; color: #dfe7ff; margin-bottom: 2px; }

.foto-box {
  width: 100%; aspect-ratio: 3/4; border: 2px dashed rgba(255,255,255,0.4);
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; position: relative; background: rgba(255,255,255,0.05);
}
.foto-hint { color: #cfe0ff; font-size: 15px; padding: 0 20px; text-align: center; }
#video, #preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#video { transform: scaleX(-1); }                 /* selfie espelhada */
.foto-box.live #video { display: block; }
.foto-box.live .foto-hint { display: none; }
.foto-box.has-img #preview { display: block; }
.foto-box.has-img .foto-hint, .foto-box.has-img #video, .foto-box.has-img #guia { display: none; }
.guia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.foto-box.live #guia { display: block; }
.guia ellipse, .guia path {
  fill: none; stroke: rgba(255,255,255,0.92); stroke-width: 2.5;
  stroke-dasharray: 6 6; filter: drop-shadow(0 0 2px rgba(0,0,0,.55));
}

.resultado-img { width: 100%; border-radius: 16px; display: block; box-shadow: 0 8px 28px rgba(0,0,0,.35); }

.err { color: #ffd1d1; font-size: 14px; text-align: center; min-height: 1em; }

.loading { position: fixed; inset: 0; background: rgba(20,30,70,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 50; }
.loading.hidden { display: none; }
.loading p { font-size: 19px; font-weight: 700; }
.loading small { color: #b9c7ee; }
.spinner { width: 56px; height: 56px; border: 5px solid rgba(255,255,255,0.25);
  border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }