/* Tela de login. Tema escuro fixo, acento azul único, raios: cartão 16px, controles 10px.
   Ícones: Phosphor (uma família só). Números do fundo são decorativos e fictícios. */
:root {
  color-scheme: dark;
  --bg: #08070d;
  --ink: #eef0f4;
  --ink-2: #b6bcc7;
  --line: rgba(255, 255, 255, .14);
  --accent: #7c5ce0;
  --accent-text: #b39dff;
  --accent-ring: rgba(139, 108, 246, .4);
  --err: #ffa3a3;
  --r-card: 16px;
  --r-ctl: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); overflow-x: hidden; }
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }

/* ---------- fundo: ícones, números e mini gráficos soltos, flutuando (camadas: 0 fundo, 1 véu, 2 conteúdo) ---------- */
.lg-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.lg-glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 224, .26), transparent 65%); animation: glow 26s ease-in-out infinite alternate; }
.lg-glow.g1 { left: -15vmax; top: -20vmax; }
.lg-glow.g2 { right: -20vmax; bottom: -25vmax; background: radial-gradient(circle, rgba(76, 201, 240, .1), transparent 65%); animation-duration: 32s; animation-direction: alternate-reverse; }
@keyframes glow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(8vmax, 6vmax, 0); } }
.lg-par { position: absolute; inset: 0; transition: transform .9s var(--ease); }
.lg-items { position: absolute; inset: 0; }
.lg-bg.is-paused * { animation-play-state: paused !important; }

.fl { position: absolute; animation: appear 1.4s ease var(--ap, 0s) backwards; }
.fl > * { display: block; animation: bob var(--dur, 9s) ease-in-out var(--del, 0s) infinite alternate; }
.fl.d1 { filter: blur(3px); opacity: .22; }
.fl.d2 { filter: blur(1.5px); opacity: .32; }
.fl.d3 { filter: blur(.6px); opacity: .42; }
.fl.rise > * { animation: rise var(--dur, 9s) linear var(--del, 0s) infinite; }
@keyframes appear { from { opacity: 0; } }
@keyframes bob { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx, 6px), -16px, 0); } }
@keyframes rise { 0% { opacity: 0; transform: translate3d(0, 34px, 0); } 18%, 82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx, 10px), -80px, 0); } }

.fl i.ph { font-size: 28px; line-height: 1; }
.fl.d2 i.ph { font-size: 38px; }
.fl.d3 i.ph { font-size: 48px; }
.c1 { color: #a78bfa; }
.c3 { color: #b9b2cc; }

.chip { padding: 6px 12px; border-radius: var(--r-ctl); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: var(--ink-2); font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl.d2 .chip { font-size: 18px; padding: 8px 14px; }
.fl.d3 .chip { font-size: 22px; padding: 9px 16px; }
.chip.up { color: #67d6a3; }

.spark { width: 96px; height: 38px; overflow: visible; }
.fl.d2 .spark { width: 130px; height: 50px; }
.fl.d3 .spark { width: 170px; height: 64px; }
.spark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: spark 9s ease-in-out var(--del, 0s) infinite; }
@keyframes spark { 0% { stroke-dashoffset: 1; } 45%, 65% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }

.mb { display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.fl.d2 .mb { height: 58px; gap: 6px; }
.fl.d3 .mb { height: 78px; gap: 8px; }
.mb i { width: 8px; height: 100%; border-radius: 3px 3px 0 0; background: currentColor; transform-origin: bottom; transform: scaleY(var(--h)); animation: pulse 7s ease-in-out calc(var(--i) * -1.1s) infinite alternate; }
.fl.d2 .mb i { width: 10px; }
.fl.d3 .mb i { width: 14px; }
@keyframes pulse { from { transform: scaleY(var(--h)); } to { transform: scaleY(calc(1.15 - var(--h) * .7)); } }

.lg-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 28% 50%, rgba(8, 7, 13, .6), rgba(8, 7, 13, .2) 75%); }

/* ---------- conteúdo ---------- */
.lg-main { position: relative; z-index: 2; min-height: 100dvh; max-width: 1240px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(28px, 6vw, 96px); }
.lg-brand h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; font-weight: 600; letter-spacing: -.04em; }
.lg-brand .line { display: block; }
.lg-brand .line + .line { margin-top: .06em; font-style: italic; color: var(--accent-text); padding-bottom: .04em; }
.lg-brand .word { display: inline-block; white-space: nowrap; }
.lg-brand .col { display: inline-block; width: 1.15em; height: 1.15em; margin-right: .1em; vertical-align: -.22em; filter: invert(1) hue-rotate(235deg) saturate(1.4); animation: letter 1s var(--ease) .1s backwards; }
.lg-brand p { margin-top: 22px; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); animation: rise-in .9s var(--ease) 1.3s backwards; }
.ch { display: inline-block; animation: letter 1s var(--ease) backwards; animation-delay: calc(var(--i) * 38ms + .15s); transition: transform .4s var(--ease); }
.ch:hover { transform: translateY(-.07em); }
@keyframes letter { from { opacity: 0; transform: translateY(.6em) rotate(5deg); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }

.lg-card { position: relative; justify-self: end; width: 100%; max-width: 420px; padding: 32px; border-radius: var(--r-card); background: rgba(14, 17, 24, .7); border: 1px solid var(--line); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px rgba(2, 4, 10, .55); animation: rise-in 1s var(--ease) .75s backwards; }
.lg-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(220px circle at var(--x, 50%) var(--y, -20%), rgba(167, 139, 250, .95), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lg-card:hover::before, .lg-card:focus-within::before { opacity: 1; }
.lg-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.lg-card .sub { margin-top: 4px; color: var(--ink-2); font-size: 14px; }

.lg-form { display: grid; gap: 18px; margin-top: 24px; }
.lg-form.is-error { animation: shake .5s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.lg-field { display: grid; gap: 8px; }
.lg-field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.lg-input { position: relative; }
.lg-input input { width: 100%; height: 48px; padding: 0 14px; font-size: 16px; color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-ctl); outline: 2px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s; }
.lg-input input:hover { border-color: rgba(255, 255, 255, .32); }
.lg-input input:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px var(--accent-ring); background: rgba(255, 255, 255, .09); }
.lg-input.has-toggle input { padding-right: 84px; }
.lg-toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; min-width: 70px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.lg-toggle:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.lg-toggle:focus-visible { outline: 2px solid #a78bfa; }
.lg-hint { font-size: 13px; color: #f3c86b; }
.lg-error { padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid rgba(255, 140, 140, .35); background: rgba(255, 110, 110, .1); color: var(--err); font-size: 14px; }

.lg-btn { position: relative; overflow: hidden; height: 50px; width: 100%; border: 0; border-radius: var(--r-ctl); background: var(--accent); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 10px 28px rgba(60, 30, 140, .5); transition: transform .25s var(--ease), filter .2s, box-shadow .25s var(--ease); }
.lg-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 32px rgba(60, 30, 140, .6); }
.lg-btn:active { transform: translateY(0) scale(.98); }
.lg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lg-btn.is-loading { pointer-events: none; }
.lg-btn.is-loading::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: rgba(255, 255, 255, .85); animation: load 1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .lg-main { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; padding-top: 28px; padding-bottom: 28px; }
  .lg-brand h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .lg-brand p { font-size: 15px; margin-top: 14px; }
  .lg-card { justify-self: stretch; max-width: none; padding: 24px; }
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lg-btn.is-loading::after { width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  .lg-card { background: #12161e; -webkit-backdrop-filter: none; backdrop-filter: none; }
}