/* Entrar / Criar conta: feixes de luz azuis (beams.js) atrás de um cartão de vidro escuro. */
* { box-sizing: border-box; }
html { background: #000; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 500px at 50% 110%, rgba(0,143,194,.28), transparent 70%), #000;
  color: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
#feixes { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity 1.2s ease; }
#feixes.pronto { opacity: 1; }
.marca { position: fixed; top: 22px; left: 26px; z-index: 2; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: rgba(255,255,255,.86); }

form#f, .cartao {
  position: relative; z-index: 1; isolation: isolate; width: min(100%, 380px); padding: 32px 30px 28px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 40px rgba(0,143,194,.08),
    0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
  animation: cartao-entra .8s cubic-bezier(.22,1,.36,1) both .15s;
}
@keyframes cartao-entra { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px); } }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
form#f::after, .cartao::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(255,255,255,.35) 0deg, rgba(255,255,255,.05) 80deg, rgba(56,182,230,0) 200deg, rgba(56,182,230,.95) 250deg, rgba(0,143,194,.35) 290deg, rgba(255,255,255,.35) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(56,182,230,.45)); animation: gira 7s linear infinite;
}
@keyframes gira { to { --ang: 360deg; } }

h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
p.sub { margin: 0 0 24px; color: rgba(255,255,255,.62); font-size: 13.5px; line-height: 1.5; }
label { display: block; margin: 16px 0 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72); }
input { width: 100%; height: 46px; padding: 0 14px; border-radius: 13px; font-size: 15px; color: #fff;
  border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
input::placeholder { color: rgba(255,255,255,.4); }
input:focus { outline: none; border-color: rgba(56,182,230,.9); background: rgba(0,0,0,.4); box-shadow: 0 0 0 4px rgba(0,143,194,.22); }
input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #0b1a22 inset; caret-color: #fff; }
button { width: 100%; height: 48px; margin-top: 24px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 650; color: #fff;
  background: linear-gradient(180deg, #19a6d8, #008FC2); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -8px rgba(0,143,194,.7);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease; }
button:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 36px -8px rgba(0,143,194,.85); }
button:active { transform: scale(.98); }
button:disabled { opacity: .6; cursor: default; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #38B6E6; outline-offset: 2px; }
.erro { margin-top: 14px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; display: none;
  background: rgba(255,90,80,.14); border: 1px solid rgba(255,120,110,.35); color: #ffb4ad; }
.erro.aviso { background: rgba(56,182,230,.14); border-color: rgba(56,182,230,.4); color: #bfe8f7; }
.ok { margin-top: 4px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  background: rgba(56,182,230,.14); border: 1px solid rgba(56,182,230,.4); color: #d4f0fb; }
.ok.aviso { background: rgba(56,182,230,.1); }
.rodape { margin-top: 20px; text-align: center; font-size: 13px; color: rgba(255,255,255,.55); }
.rodape a { color: #7FD3F0; text-decoration: none; font-weight: 600; }
.rodape a:hover { text-decoration: underline; }
.dica { margin-top: 7px; font-size: 12px; color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: reduce) { form#f, .cartao, form#f::after, .cartao::after { animation: none; } #feixes { transition: none; } }