/* Tela de login (só o visual). A fonte Figtree vem pelo <link> da página. */
html, .lg-corpo { margin: 0; background: var(--c-900); }
.lg-root {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Figtree', system-ui, sans-serif;
  background: radial-gradient(ellipse at 70% 30%, var(--c-600) 0%, var(--c-800) 45%, var(--c-900) 100%);
}
.lg-root * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

.lg-birds { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lg-bird {
  position: absolute;
  height: auto;
  user-select: none;
  animation-name: lg-float;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  transition: margin 0.1s ease-out;
}
/* Os 4 beija-flores (valores fixos: tamanho, posição, transparência, desfoque e ritmo) */
.lg-bird-1 { width: min(110px, 60vw); left: 30%; top: 10%; opacity: .08; filter: blur(3px);   animation-duration: 22s; animation-delay: -15s; }
.lg-bird-2 { width: min(160px, 60vw); left: 78%; top: 68%; opacity: .12; filter: blur(1.5px); animation-duration: 17s; animation-delay: -3s; }
.lg-bird-3 { width: min(240px, 60vw); left: 8%;  top: 58%; opacity: .10; filter: blur(2px);   animation-duration: 20s; animation-delay: -12s; }
.lg-bird-4 { width: min(520px, 60vw); left: 58%; top: 12%; opacity: .16;                      animation-duration: 26s; animation-delay: -6s; }
@keyframes lg-float {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(10vw, 20vh) scale(1.2) rotate(-4deg); }
  66%  { transform: translate(-5vw, 10vh) scale(0.8) rotate(3deg); }
  100% { transform: translate(5vw, -10vh) scale(1.1) rotate(-2deg); }
}

.lg-container { position: relative; z-index: 10; width: 100%; max-width: 440px; padding: 40px; }

.lg-header { margin-bottom: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lg-logo { height: 88px; width: auto; max-width: 100%; align-self: center; }
.lg-brand {
  display: block; font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin-bottom: 8px;
}
.lg-title { margin: 0 0 0 -4px; font-weight: 800; font-size: 3rem; line-height: 0.92; letter-spacing: -2px; }

.lg-group { position: relative; margin-bottom: 30px; transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1); }
.lg-group:focus-within { transform: translateX(10px); }
.lg-label {
  display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin-bottom: 8px;
}
.lg-input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  color: #fff; padding: 12px 0; font-size: 18px; font-family: inherit; outline: none;
}
.lg-input::placeholder { color: rgba(255, 255, 255, 0.4); }
/* Preenchimento automático do navegador (nome/PIN lembrados): o Chrome pinta o campo de azul-claro.
   Aqui o campo continua transparente e o texto branco. */
.lg-input:-webkit-autofill,
.lg-input:-webkit-autofill:hover,
.lg-input:-webkit-autofill:focus,
.lg-input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
}
.lg-input:autofill { background: transparent; color: #fff; }
.lg-glow {
  position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: var(--c-200);
  transition: width 0.6s cubic-bezier(0.2, 1, 0.3, 1); box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}
.lg-input:focus + .lg-glow { width: 100%; }

.lg-submit { margin-top: 44px; position: relative; filter: url(#lg-gooey); }
.lg-btn {
  background: #fff; color: var(--c-botao); border: 0; border-radius: 50px; padding: 20px 40px;
  font-size: 14px; font-weight: 800; font-family: inherit; text-transform: uppercase; letter-spacing: 2px;
  cursor: pointer; width: 100%; position: relative; z-index: 2; transition: letter-spacing 0.3s;
}
.lg-btn:hover { letter-spacing: 4px; }
.lg-btn:focus-visible { outline: 2px solid var(--c-200); outline-offset: 4px; }
.lg-drop {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: var(--c-200);
  transform: translate(-50%, -50%); z-index: 1; border-radius: 50px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lg-submit:hover .lg-drop { transform: translate(-50%, -50%) scale(1.05, 1.2); filter: brightness(1.1); }

/* Mensagem de erro do login (a mesma que o app já mostrava), abaixo do botão */
.lg-erro {
  margin: 20px 0 0; padding: 12px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
  font-size: 15px; font-weight: 600; color: #fff;
}

.lg-footer { margin-top: 36px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.lg-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s; }
.lg-link:hover { color: #fff; }
.lg-link:focus-visible { outline: 2px solid var(--c-200); outline-offset: 3px; }
/* "Esqueci meu PIN": a explicação aparece ao tocar no link (só CSS) */
.lg-ajuda { display: none; margin: 12px 0 0; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--c-200); }
.lg-ajuda:target { display: block; }

.lg-svg-hidden { position: absolute; width: 0; height: 0; }

@media (max-width: 480px) {
  .lg-container { padding: 28px; }
  .lg-title { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-bird { animation: none; transition: none; }
  .lg-group, .lg-btn, .lg-drop, .lg-glow { transition: none; }
}