/* ============================================================================
 *  Tema claro do verificacao (05/10/2026) — o mesmo visual das abas do app:
 *  fundo da barra (#F2F2F7) com clarão branco, cartão branco, tinta #081E1D,
 *  botão escuro, acento íris, fonte Jost e o logo oficial da Ventura no topo.
 *
 *  Carregado DEPOIS do <style> de cada página: só troca cor e forma, não mexe
 *  em nada da lógica (as mesmas classes e ids de sempre).
 * ========================================================================== */
:root {
  --bg: #F2F2F7; --tx: #081E1D; --mut: #5A6967; --line: #DCE2E1;
  --a1: #7482ED; --a2: #59C9E6; --a3: #E39BCB; --ok: #1B8F63;
  --err: #C0272C; --err-bg: rgba(192, 39, 44, .06); --err-border: rgba(192, 39, 44, .25);
  --iris: linear-gradient(100deg, #59FAFC 0%, #7482ED 38%, #EEC0DD 72%, #ECF4C5 100%);
}

body {
  background: radial-gradient(80% 50% at 50% 28%, #FFFFFF 0%, #F2F2F7 100%) fixed;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--tx);
}

/* topo: o logo oficial no lugar do "VENTURA" escrito */
.top { margin-bottom: 18px; }
.wm {
  width: 156px; height: 36px; padding: 0; gap: 0; font-size: 0; letter-spacing: 0; color: transparent;
  background: url(/lib/marca/ventura-lockup-color-light.png) center / contain no-repeat;
}
.wm svg { display: none; }

/* o cartão */
.frame { background: #FFFFFF; border: 1px solid #E3E3E8; box-shadow: 0 16px 44px rgba(8, 30, 29, .08); }

/* textos */
.step h2, .welcome h2, .verify h2, .done-screen h2, .processing h2, .pwd-screen h2 {
  font-weight: 500; font-size: 21px; letter-spacing: .01em; color: var(--tx);
}
.step p, .welcome p, .verify p, .done-screen p, .processing p, .pwd-screen p, .loading p { color: var(--mut); }
.step .name { color: var(--a1); }
.error-screen h2 { font-weight: 500; }

/* o círculo do ícone */
.halo, .welcome .halo { border-color: #E3E3E8; background: #FFFFFF; color: var(--a1); box-shadow: 0 10px 30px rgba(8, 30, 29, .07); }
.halo::before, .welcome .halo::before { border-top-color: var(--a1); }

/* campos */
.inp, .verify .date-opt, .tel-opt {
  background: #F7F8F8; border: 1px solid #E3E3E8; color: var(--tx);
}
.inp:focus { border-color: var(--a1); background: #FFFFFF; }
.inp::placeholder { color: #A3AFAD; }
.tel-opt:hover { background: #F0F3F3; }
.tel-opt.selected, .verify .date-opt.selected { border-color: var(--a1); background: rgba(116, 130, 237, .07); }
.err-msg { color: var(--err); }

/* botões: o escuro do app */
.btn, .verify .vbtn, .pwd-btn {
  background: #081E1D; color: #FFFFFF; border-radius: 16px;
  font-family: 'Jost', system-ui, sans-serif; font-weight: 500; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
}
.btn.ghost { background: transparent; color: var(--tx); border: 1px solid var(--line); }
.spin { border-color: rgba(255, 255, 255, .3); border-top-color: #FFFFFF; }
.legal { color: #8A9895; opacity: 1; }

/* câmera: a imagem continua, as bordas clareiam para o cartão */
.vig { background: radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(255, 255, 255, .35) 78%, rgba(255, 255, 255, .9) 100%); }
.gring { stroke: rgba(255, 255, 255, .8); }
.guide.locked .gring { stroke: #FFFFFF; }
.gdot { fill: #2FBF89; }
.hint { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .94) 55%); }
.hint .ht { color: var(--tx); font-weight: 500; }
.hint .hs { color: var(--mut); }
.steps i { background: rgba(8, 30, 29, .14); }
.steps i.done { background: #2FBF89; box-shadow: none; }

/* camadas por cima da câmera (processando, senha, pronto) */
.processing, .pwd-screen, .done-screen { background: rgba(255, 255, 255, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
.processing .spinner, .loading .spinner { border-color: #E3E3E8; border-top-color: var(--a1); }

/* miudezas */
.dots span { background: var(--a1); }
.attempts { background: #F2F2F7; color: var(--mut); }
.attempts strong { color: var(--tx); }
.pw-rules span.ok { color: var(--ok); }