/* Layout centralizado do formulário de autenticação */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#authContainer {
  width: 100%;
  max-width: 400px;
  background: var(--bg-800);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0,0,0,.6);
  text-align: center;
  backdrop-filter: blur(3px);
  border: 1px solid var(--border);
}

@keyframes authExit {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}
body.login-transition #authContainer { animation: authExit 600ms ease forwards; }
body.login-transition { pointer-events: none; }

#authContainer h2 { margin-bottom: 25px; color: var(--text-light); }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; background: var(--bg-800); color: var(--text-light); }
.auth-button { width: 100%; padding: 15px; margin-top: 20px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s; font-weight: bold; }
#loginBtn { background: var(--yellow-dark); color: var(--bg-900); }
#registerBtn { background: var(--blue-dark); color: var(--text-light); }
#toggleAuth { margin-top: 20px; font-size: 0.9em; color: var(--text-muted); }
#toggleAuth button { background: none; border: none; color: var(--blue); cursor: pointer; text-decoration: underline; padding: 0; font-weight: bold; }
#registerForm { display: none; }
.tag-input-wrapper { display: flex; align-items: center; gap: 8px; }
.tag-prefix { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; background: var(--bg-800); color: var(--text-light); border: 1px solid var(--border); border-radius: 6px; font-weight: 700; }
.tag-input-wrapper input[type="text"] { flex: 1; max-width: 120px; }
.links { display:flex; gap:14px; align-items:center; justify-content:center; }
.social-item { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.social-item .icon { width:34px; height:34px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); font-size:16px; color:#94a3b8; }
.social-item .icon svg { width:18px; height:18px; display:block; }
.social-item:hover .icon { color:#e5e7eb; }
.social-item:hover .icon.whatsapp { border-color:#22c55e; box-shadow:0 0 10px rgba(34,197,94,0.35); }
.social-item:hover .icon.discord { border-color:#5865F2; box-shadow:0 0 10px rgba(88,101,242,0.35); }