/* ============================================================
   TRAFEGOBI · AUTH (login / cadastro / recuperação)
   ============================================================ */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── Logo (as paginas de auth NAO carregam layout.css — sem isto o svg do
      logo explodia gigante e empurrava o conteudo pro fundo da pagina) ──── */
.logo {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text);
  display: inline-flex; align-items: center; gap: 0.55rem;
  position: relative; z-index: 1;
}
.logo span { color: var(--brand); }
.logo__mark {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--violet));
  display: grid; place-items: center; box-shadow: var(--shadow-brand);
  position: relative; overflow: hidden;
}
.logo__mark svg { width: 17px; height: 17px; position: relative; z-index: 1; }

/* ── Painel esquerdo (marca) ──────────────────────────────────── */
.auth__aside {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(160deg, #0a0a16, #0d0d1f 60%, #0a1411);
  border-right: 1px solid var(--line);
}
.auth__orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.auth__orb--1 { width: 26rem; height: 26rem; background: rgba(0,229,160,0.16); top: -8rem; right: -6rem; animation: drift 20s ease-in-out infinite; }
.auth__orb--2 { width: 22rem; height: 22rem; background: rgba(124,108,255,0.18); bottom: -8rem; left: -6rem; animation: drift 24s ease-in-out infinite reverse; }

.auth__aside-content { position: relative; z-index: 1; margin-block: auto; max-width: 30rem; }
.auth__headline { font-size: var(--fs-4xl); letter-spacing: -0.03em; margin-block: var(--sp-5) var(--sp-4); }
.auth__headline em { font-style: normal; background: linear-gradient(110deg, var(--brand), var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth__tagline { color: var(--text-2); font-size: var(--fs-lg); }

.auth__stats { display: flex; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap: wrap; }
.auth__stat-val { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; color: var(--brand); }
.auth__stat-label { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

.auth__aside-foot { position: relative; z-index: 1; font-size: var(--fs-xs); color: var(--text-3); }

/* ── Painel direito (formulário) ──────────────────────────────── */
.auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 3rem); }
.auth__card { width: 100%; max-width: 420px; }

.auth__back { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-5); }
.auth__back:hover { color: var(--text-2); }
.auth__back svg { width: 16px; height: 16px; }

.auth__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.auth__subtitle { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }

/* Tabs login/cadastro */
.auth__tabs { display: flex; gap: var(--sp-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; margin-bottom: var(--sp-6); }
.auth__tab { flex: 1; padding: 0.6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); border-radius: var(--r-xs); transition: all var(--t-fast); }
.auth__tab.is-active { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); }

.auth__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.auth__link { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
.auth__link:hover { text-decoration: underline; }

.auth__foot { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.auth__foot a { color: var(--brand); font-weight: 600; }

/* Estado de sucesso (recuperação) */
.auth__success { text-align: center; animation: scale-in var(--t-base) var(--ease); }
.auth__success-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,229,160,0.1); border: 1px solid rgba(0,229,160,0.25); display: grid; place-items: center; margin: 0 auto var(--sp-5); color: var(--brand); }
.auth__success-icon svg { width: 30px; height: 30px; }

/* ── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
  .auth__main { min-height: 100vh; }
}