@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.overflow-x-hidden {
  overflow-x: hidden !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
}

.gradient-bg {
  background: linear-gradient(135deg, #1e1b4b 0%, #581c87 50%, #831843 100%);
  min-height: 100vh;
}

.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #9333ea 100%);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(147, 51, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.module-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.module-card:hover {
  transform: translateY(-5px);
}

.module-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.module-locked:hover {
  transform: none;
}

.drag-item {
  cursor: grab;
  transition: all 0.2s;
  user-select: none;
}

.drag-item:active {
  cursor: grabbing;
  opacity: 0.7;
  transform: scale(0.95);
}

.drop-zone {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
  min-height: 200px;
}

.drop-zone.drag-over {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
  }

  50% {
    box-shadow: 0 0 40px rgba(147, 51, 234, 0.8);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

.code-block {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
}

.success-message {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 1rem;
  border-radius: 0.75rem;
  margin: 1rem 0;
  animation: fadeIn 0.5s ease-out;
}

.error-message {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  padding: 1rem;
  border-radius: 0.75rem;
  margin: 1rem 0;
  animation: fadeIn 0.5s ease-out;
}

/* Responsivo */
@media (max-width: 768px) {
  .gradient-bg {
    padding: 1rem;
  }

  h1 {
    font-size: 2rem !important;
  }

  .text-6xl {
    font-size: 3rem !important;
  }
}

/* Scrollbar customizada */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #06b6d4 0%, #9333ea 100%);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0891b2 0%, #7e22ce 100%);
}

/* style.css - Versão Simplificada */

/* ---------------------------------------------------- */
/* 1. Reset Básico e Fundo para a página de Login */
/* ---------------------------------------------------- */

body.login-page {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: #fff;
  /* Seu fundo roxo/azul */
  background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%);

  /* Centraliza o conteúdo (Flexbox) */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* ---------------------------------------------------- */
/* 2. Estilo do Container de Login */
/* ---------------------------------------------------- */

.login-container {
  background-color: rgba(0, 0, 0, 0.7);
  /* Fundo escuro semi-transparente */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 300px;
  /* Mais estreito para ser simples */
  text-align: center;
}

.login-container h2,
.login-container h3 {
  margin-bottom: 15px;
  color: #e0e0e0;
}

/* ---------------------------------------------------- */
/* 3. Inputs e Labels */
/* ---------------------------------------------------- */

.input-group {
  margin-bottom: 15px;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #bdbdbd;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #5a189a;
  /* Borda roxa escura */
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
  box-sizing: border-box;
}

/* ---------------------------------------------------- */
/* 4. Estilo dos Botões */
/* ---------------------------------------------------- */

.button-group {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}

.button-group button {
  flex-basis: 48%;
  padding: 10px 0;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary {
  /* Registrar */
  background-color: #9370db;
  /* Roxo principal */
  color: white;
}

.btn-secondary {
  /* Login */
  background-color: #4CAF50;
  /* Verde */
  color: white;
}

.btn-primary:hover,
.btn-secondary:hover {
  opacity: 0.85;
}

/* style.css - Melhorias para o Formulário Integrado no Index */

/* ---------------------------------------------------- */
/* 1. Estilo do Painel de Autenticação (Formulário) */
/* ---------------------------------------------------- */

.auth-panel {
  /* Tornamos o fundo transparente ou muito suave. 
       Isso remove o "bloco preto" feio. */
  background-color: rgba(0, 0, 0, 0.3);
  /* Um leve toque de preto, mas quase transparente */
  padding: 25px;
  border-radius: 10px;
  /* Adicionamos uma borda sutil para definir o painel */
  border: 1px solid rgba(147, 112, 219, 0.5);
  /* Borda roxa semi-transparente */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  width: 250px;
  /* Definir uma largura fixa ajuda */
  margin-top: 20px;
  /* Alinhamento de texto (se o seu formulário estiver dentro de um container Flex) */
  text-align: left;
}

.auth-panel h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #e0e0e0;
  /* Texto mais claro */
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid rgba(147, 112, 219, 0.2);
  /* Linha divisória sutil */
  padding-bottom: 10px;
}

/* ---------------------------------------------------- */
/* 2. Estilo de Inputs e Labels */
/* ---------------------------------------------------- */

.auth-panel .input-group {
  margin-bottom: 15px;
}

.auth-panel label {
  font-size: 13px;
  color: #bdbdbd;
  /* Cinza claro suave */
}

.auth-panel input[type="text"],
.auth-panel input[type="password"] {
  width: 100%;
  padding: 8px;
  /* Reduzimos um pouco o padding para ficar mais compacto */
  border: none;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.95);
  /* Quase branco sólido */
  color: #333;
  box-sizing: border-box;
  font-size: 14px;
}

/* ---------------------------------------------------- */
/* 3. Estilo dos Botões Limpos e Integrados */
/* ---------------------------------------------------- */

.button-group-index {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.btn-clean {
  flex-basis: 48%;
  padding: 8px 0;
  border: 1px solid #9370db;
  /* Borda visível para definir o botão */
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  background-color: transparent;
  /* Fundo transparente é a chave */
  color: #9370db;
  /* Cor roxa no texto para destacar */
  transition: all 0.2s;
}

.btn-clean:hover {
  background-color: #9370db;
  /* Roxo ao passar o mouse */
  color: white;
  /* Texto branco no hover */
}

/* ---------------------------------------------------- */
/* 4. Estilo da Mensagem de Status (Manter legível) */
/* ---------------------------------------------------- */
.auth-panel #mensagem {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
}

/* style.css - Posicionamento Superior Esquerdo */

/* ---------------------------------------------------- */
/* 1. LAYOUT PRINCIPAL (HEADER/HERO SECTION) */
/* ---------------------------------------------------- */
.hero-section {
  /* Usa Flexbox para criar colunas lado a lado */
  display: flex;
  justify-content: space-between;
  /* Espaçamento entre as duas colunas */
  align-items: flex-start;
  /* Alinha o conteúdo ao topo */

  padding: 60px 10%;
  /* Espaço no topo e nas laterais */
  width: 80%;
  margin: 0 auto;
  /* Centraliza a seção principal na tela */
  box-sizing: border-box;
}

.hero-content-left,
.hero-content-right {
  flex-basis: 48%;
  /* Dá quase metade da largura para cada coluna */
  padding: 10px;
  text-align: center;
}

/* Garante que o ícone e texto na direita fiquem bonitos */
.hero-content-right .main-title {
  font-size: 2.5em;
  color: #4CAF50;
  /* Cor de destaque verde/roxo */
}

.hero-content-right .subtitle {
  font-size: 1.2em;
  color: #e0e0e0;
  margin-bottom: 20px;
}

/* ---------------------------------------------------- */
/* 2. ESTILO DO PAINEL DE AUTENTICAÇÃO (auth-panel) */
/* ---------------------------------------------------- */
.auth-panel {
  /* Estilo para que o painel pareça um bloco de conteúdo destacado */
  background-color: rgba(255, 255, 255, 0.08);
  /* Fundo muito claro e transparente */
  padding: 20px;
  border-radius: 8px;
  /* Destaque a borda com a cor principal (Roxo) */
  border-left: 5px solid #9370db;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  width: 90%;
  /* Ocupa quase toda a largura da coluna esquerda */
  margin: 0 auto;
  /* Centraliza dentro da coluna */
  text-align: left;
}

.auth-panel h3 {
  color: #fff;
  font-size: 16px;
  text-align: left;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: none;
  /* Remove a linha divisória */
}

/* ---------------------------------------------------- */
/* 3. Estilo de Inputs e Botões (Reajuste) */
/* ---------------------------------------------------- */

.auth-panel input[type="text"],
.auth-panel input[type="password"] {
  /* Mantemos as configurações limpas */
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
  padding: 10px;
}

.button-group-index {
  margin-top: 20px;
  justify-content: flex-start;
  /* Alinha os botões à esquerda */
  gap: 10px;
  /* Adiciona espaço entre os botões */
}

.btn-clean {
  flex-basis: auto;
  /* Deixa o tamanho ser definido pelo conteúdo/padding */
  padding: 10px 15px;
  font-size: 14px;
  /* Remove a borda e usa um fundo sutil para destacar */
  border: 1px solid transparent;
  background-color: #9370db;
  /* Fundo roxo */
  color: white;
}

.btn-clean:hover {
  background-color: #7b4cbf;
  /* Roxo mais escuro no hover */
}

/* style.css - Novo Posicionamento Superior Esquerdo e Compacto */

/* ---------------------------------------------------- */
/* 1. LAYOUT PRINCIPAL (HEADER/HERO SECTION) */
/* ---------------------------------------------------- */
.hero-section {
  /* Usamos Grid Layout para controlar as áreas com mais precisão */
  display: grid;
  /* Define duas colunas: a da esquerda (pequena) e a da direita (grande) */
  grid-template-columns: 300px 1fr;
  /* Coloca o ícone e título na área central (coluna 2, linha 1) */
  grid-template-areas: "auth-area central-area";

  padding: 40px 10%;
  /* Espaço no topo e nas laterais */
  min-height: 40vh;
  /* Garante que a área do header tenha uma altura mínima */
  width: 80%;
  margin: 0 auto;
}

/* ---------------------------------------------------- */
/* 2. Área do Formulário (AUTH-PANEL) */
/* ---------------------------------------------------- */
.hero-content-left {
  grid-area: auth-area;
  /* Associa esta div à área 'auth-area' */
  text-align: left;
  align-self: start;
  /* Alinha o conteúdo ao topo da área */
}

.auth-panel {
  /* Mantenha o estilo visual, mas diminua o tamanho */
  background-color: rgba(255, 255, 255, 0.08);
  padding: 15px;
  /* Reduzindo o preenchimento */
  border-radius: 8px;
  border-left: 5px solid #9370db;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  width: 250px;
  /* Largura Fina e Fixa */
  margin: 0;
  /* Remove margens desnecessárias */
}

.auth-panel h3 {
  font-size: 16px;
  margin-bottom: 5px;
  /* Mais compacto */
}

.auth-call-to-action {
  font-size: 13px;
  color: #bdbdbd;
  margin-bottom: 15px;
}

/* ---------------------------------------------------- */
/* 3. Área Central (Ícone e Título Principal) */
/* ---------------------------------------------------- */
.hero-content-right {
  grid-area: central-area;
  /* Associa esta div à área 'central-area' */
  text-align: center;
  /* Centraliza o título e ícone */
  padding-top: 20px;
  /* Ajuste para centralizar verticalmente na área */
}

/* ---------------------------------------------------- */
/* 4. Estilo dos Botões (Para serem compactos) */
/* ---------------------------------------------------- */
.button-group-index {
  margin-top: 10px;
  justify-content: space-around;
  /* Distribui os botões */
}

.btn-clean {
  padding: 8px 12px;
  /* Botões mais pequenos */
  font-size: 14px;
}

/* style.css - Posicionamento Superior Direita */

/* ---------------------------------------------------- */
/* 1. LAYOUT PRINCIPAL (HEADER/HERO SECTION) */
/* ---------------------------------------------------- */
.hero-section {
  /* Usamos Grid Layout novamente, mas mudamos a ordem */
  display: grid;
  /* Define duas colunas: a da esquerda (grande) e a da direita (pequena, para o painel) */
  grid-template-columns: 1fr 300px;
  /* A ordem das áreas é invertida: central-area primeiro, auth-area depois */
  grid-template-areas: "central-area auth-area";

  padding: 40px 10%;
  min-height: 40vh;
  width: 80%;
  margin: 0 auto;
}

/* ---------------------------------------------------- */
/* 2. Área Central (Ícone e Título Principal) - AGORA À ESQUERDA */
/* ---------------------------------------------------- */
.hero-content-right {
  /* Este é o seu conteúdo central (ícone, título) */
  grid-area: central-area;
  text-align: center;
  /* Centraliza o título e ícone */
  padding-top: 20px;
  /* Ajuste para que o ícone e título fiquem alinhados ao topo/meio da coluna */
  align-self: start;
}

/* ---------------------------------------------------- */
/* 3. Área do Formulário (AUTH-PANEL) - AGORA À DIREITA */
/* ---------------------------------------------------- */
.hero-content-left {
  /* Este é o container do seu auth-panel */
  grid-area: auth-area;
  /* Associa esta div à área 'auth-area' */
  text-align: right;
  /* Alinha o conteúdo à direita da coluna */
  align-self: start;
  /* Alinha o conteúdo ao topo da área */

  /* Remove o padding superior que pode ter sido herdado */
  padding-top: 0;
}

/* 4. Auth Panel - Garantir que o painel flutue à direita */
.auth-panel {
  /* Mantenha as configurações de tamanho e estilo */
  width: 250px;
  margin-left: auto;
  /* IMPORTANTE: Empurra o painel para o lado direito da sua coluna */
}

/* 5. Botões - Alinhar os botões à direita dentro do painel */
.button-group-index {
  justify-content: flex-end;
  /* Alinha os botões à direita */
  gap: 10px;
}

/* style.css - Regras Essenciais para a Página de Registro/Login */

/* 1. Fundo do Corpo (Body) e Centralização */
body.login-page {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: #fff;
  /* Aplica o seu fundo roxo/azul */
  background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%);

  /* Centraliza o conteúdo (Flexbox) */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* 2. Estilo do Container de Login/Registro */
.login-container {
  background-color: rgba(0, 0, 0, 0.7);
  /* Fundo escuro semi-transparente */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 350px;
  /* Largura adequada para formulário */
  text-align: center;
}

/* styles.css */

/* ---------------------------------------------------- */
/* 1. Estilo para a Barra de Topo (Retirado do último passo) */
/* ---------------------------------------------------- */
.btn-navbar-action {
  padding: 6px 12px;
  /* 🌟 NOVO: Aumenta o arredondamento dos cantos 🌟 */
  border-radius: 9999px;
  /* Arredondamento total (pill shape) */
  font-weight: 600;
  transition: all 0.2s;
  font-size: 0.9rem;
  border: none;
  /* Remove a borda para um visual mais limpo */
  color: white;
  /* Texto branco */
}

/* ---------------------------------------------------- */
/* 2. Cores Comuns para Login/Registro */
/* ---------------------------------------------------- */

/* Botão de Login (Azul Comum) */
#btn-login-top {
  background-color: #3b82f6;
  /* Tailwind blue-500 */
}

/* Botão de Registro (Vermelho Comum) */
#btn-registrar-top {
  background-color: #ef4444;
  /* Tailwind red-500 */
}

/* Efeito Hover (passar o mouse) */
#btn-login-top:hover {
  background-color: #2563eb;
  /* Azul um pouco mais escuro */
}

#btn-registrar-top:hover {
  background-color: #dc2626;
  /* Vermelho um pouco mais escuro */
}

/* 3. Inputs e Labels */
.input-group {
  margin-bottom: 15px;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #bdbdbd;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
  box-sizing: border-box;
}

/* 4. Estilo do Botão */
.btn-primary {
  width: 100%;
  /* Botão em tela cheia no formulário */
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #9370db;
  /* Roxo principal */
  color: white;
}

/* 5. Estilo do Link de Voltar */
.link-voltar {
  display: block;
  margin-top: 20px;
  color: #9370db;
  /* Roxo para o link */
  text-decoration: none;
  font-size: 14px;
}

.link-voltar:hover {
  text-decoration: underline;
}

.top-navbar {
  width: 100%;
  padding: 10px 10%;
  /* Preenchimento horizontal */
  box-sizing: border-box;
  /* Fundo sutil e elegante */
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  /* Usa Flexbox para colocar o status do usuário à direita */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.user-status-container {
  color: #fff;
  font-size: 14px;
}

.user-action-btns {
  display: flex;
  gap: 10px;
}

/* ---------------------------------------------------- */
/* 2. ESTILO DOS BOTÕES DA BARRA DE TOPO */
/* ---------------------------------------------------- */
.btn-clean-top {
  padding: 6px 10px;
  /* Botões menores e compactos */
  border: 1px solid #9370db;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  background-color: transparent;
  color: #9370db;
  /* Texto roxo */
  transition: all 0.2s;
}

.btn-destaque-top {
  background-color: #9370db;
  /* Fundo roxo de destaque para o Registro */
  color: white;
}

.btn-clean-top:hover {
  opacity: 0.8;
}

/* ---------------------------------------------------- */
/* 3. ESTILO DO TEXTO LOGADO */
/* ---------------------------------------------------- */
#username-display {
  margin-right: 15px;
  font-weight: bold;
  color: #4CAF50;
  /* Verde para indicar o estado logado */
}

/* ---------------------------------------------------- */
/* 4. LIMPEZA DO CSS ANTIGO DA HERO-SECTION */
/* ---------------------------------------------------- */
/* Lembre-se de REMOVER o seu antigo .auth-panel para que ele não apareça mais! */
.auth-panel {
  display: none;
  /* Desativar o painel antigo */
}

/* styles.css - CÓDIGO CONSOLIDADO E CORRIGIDO */

/* 1. Importação da Fonte e Resets */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Regra para Scrollbar Customizada (mantida) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #06b6d4 0%, #9333ea 100%);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0891b2 0%, #7e22ce 100%);
}

/* ---------------------------------------------------- */
/* 2. ESTILOS GLOBAIS DE COMPONENTES (Usados no Index) */
/* ---------------------------------------------------- */

.gradient-bg {
  background: linear-gradient(135deg, #1e1b4b 0%, #581c87 50%, #831843 100%);
  min-height: 100vh;
}

.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #9333ea 100%);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(147, 51, 234, 0.4);
}

/* Mantendo todas as suas animações @keyframes (pulse-glow, spin-slow, fadeIn) */
/* ... (Seu código @keyframes deve ser mantido aqui) ... */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
  }

  50% {
    box-shadow: 0 0 40px rgba(147, 51, 234, 0.8);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* ---------------------------------------------------- */
/* 3. ESTILOS PARA PÁGINAS DE FORMULÁRIO (Login/Registro) */
/* ---------------------------------------------------- */

body.login-page {
  /* Fundo de formulário */
  background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: #fff;
  font-family: Arial, sans-serif;
}

.login-container {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  max-width: 350px;
  width: 100%;
  text-align: center;
}

.login-container h2,
.login-container h3 {
  margin-bottom: 15px;
  color: #e0e0e0;
}

.input-group {
  margin-bottom: 15px;
  text-align: left;
}

.login-container label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #bdbdbd;
}

.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
  box-sizing: border-box;
}

/* Estilo para Botão Principal (Usado em Finalizar Registro/Entrar) */
.login-container .btn-primary {
  margin-top: 15px;
  width: 100%;
  /* Usa a regra .btn-primary global para os gradientes e hover */
}

.link-voltar {
  display: block;
  margin-top: 20px;
  color: #06b6d4;
  /* Cor ciano para link */
  text-decoration: none;
  font-size: 14px;
}

.link-voltar:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------- */
/* 4. ESTILOS DA BARRA DE TOPO (Navbar Buttons) */
/* ---------------------------------------------------- */

/* Botões da Navbar */
.btn-navbar-action {
  padding: 6px 12px;
  border-radius: 9999px;
  /* Arredondamento total */
  font-weight: 600;
  transition: all 0.2s;
  font-size: 0.9rem;
  border: none;
  color: white;
}

/* Login (Azul) */
#btn-login-top {
  background-color: #3b82f6;
}

#btn-login-top:hover {
  background-color: #2563eb;
}

/* Registro (Vermelho) */
#btn-registrar-top {
  background-color: #ef4444;
}

#btn-registrar-top:hover {
  background-color: #dc2626;
}