body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* Grade de pontos: lembra o canvas onde os fluxos serão montados. */
  background-color: var(--bg);
  background-image: radial-gradient(rgba(31, 29, 26, .14) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

.login {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.brand { width: 220px; margin: 0; }
.brand img { display: block; width: 100%; height: auto; }

.form {
  width: 100%;
  padding: 24px;
  background: var(--primary-soft);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.title span {
  color: var(--sub);
  font-weight: 600;
  font-size: 17px;
}

.pw { position: relative; display: flex; gap: 12px; align-items: center; }
.pw .nb-input { flex: 1; }
.pw .nb-icon-btn { flex: none; }

.confirm {
  align-self: center;
  margin-top: 24px;
  min-width: 150px;
}

.foot { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.foot[hidden] { display: none; }
.foot img { border-radius: 6px; border: 2px solid var(--ink); }

/* ── Fundo animado: fluxos se montando pelos cantos (js/login-fundo.js) ── */
.login { position: relative; z-index: 1; }
.fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .5;
}
.fundo-cena { position: absolute; transition: opacity .6s ease; }
.fundo-cena.some { opacity: 0; }
.fundo-linhas { position: absolute; inset: 0; overflow: visible; }
.fundo-linha { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.fundo-linha.visivel { opacity: 1; }
.fundo-linha.desenha { transition: stroke-dashoffset .55s ease-out; }
.fundo-linha.corre { stroke-dasharray: 9 7; animation: fundo-corre .7s linear infinite; }
@keyframes fundo-corre { to { stroke-dashoffset: -16; } }
.fundo-dado { stroke: var(--ink); stroke-width: 2; }
.fundo-rastro { fill: none; stroke-width: 2.5; stroke-dasharray: 4 6; stroke-linecap: round; transition: opacity .8s ease; }
.fundo-rastro.some { opacity: 0; }

.fundo-no {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--ink);
  border-radius: 100%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .45s cubic-bezier(.2, 1.5, .4, 1);
}
.fundo-no.aparece { transform: translate(-50%, -50%) scale(1); }
.fundo-no.pulso { animation: fundo-pulso .5s ease-out; }
@keyframes fundo-pulso {
  0% { box-shadow: 0 0 0 0 rgba(31, 181, 122, .7); }
  100% { box-shadow: 0 0 0 14px rgba(31, 181, 122, 0); }
}

.fundo-aviao { position: absolute; left: 0; top: 0; line-height: 1; -webkit-text-stroke: 1.2px var(--ink); will-change: transform; }
.fundo-ok {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 100%;
  background: var(--primary);
  color: var(--ink);
  transform: translate(-50%, -50%);
  animation: fundo-ok .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes fundo-ok { from { transform: translate(-50%, -50%) scale(0); } }