#auth-section {
    background-color: rgba(255, 255, 255, 0.98); /* Fundo branco levemente transparente */
    padding: 40px; /* Preenchimento interno generoso */
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); /* Sombra mais forte para efeito de "card" */
    text-align: center; /* Centraliza texto e botões dentro da seção */
    max-width: 400px; /* Largura máxima para o formulário */
    width: 90%; /* Largura responsiva (90% da largura do pai, até 400px) */
    
    /* Centraliza o card de autenticação na tela usando posicionamento absoluto */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ajusta para centralizar com base no próprio tamanho do elemento */
    
    z-index: 10; /* Garante que fique acima de outros elementos se houver */
    
    /* Animação de entrada suave */
    opacity: 0;
    transform: translate(-50%, -60%); /* Começa ligeiramente acima do centro */
    animation: authFadeIn 0.6s ease-out forwards; /* Animação ao carregar */
}

/* Animação de fade-in para a seção de autenticação */
@keyframes authFadeIn {
    to {
        opacity: 1;
        transform: translate(-50%, -50%); /* Vai para a posição central final */
    }
}

#auth-section h2 {
    font-size: 2.2em; /* Título maior e mais impactante */
    color: #333; /* Cor de texto escura */
    margin-bottom: 30px; /* Espaço abaixo do título */
    font-weight: bold;
    letter-spacing: -0.5px; /* Ajuste sutil no espaçamento entre letras */
}

#loginForm {
    display: flex;
    flex-direction: column; /* Empilha inputs e botões verticalmente */
    gap: 15px; /* Espaço entre os elementos do formulário */
    margin-bottom: 25px; /* Espaço antes do botão do Google */
}

/* Estilos para os campos de email e senha */
#emailInput,
#passwordInput {
    width: 100%; /* Ocupa a largura total disponível */
    padding: 15px; /* Preenchimento interno para os campos */
    border: 1px solid #ddd; /* Borda cinza clara */
    border-radius: 8px; /* Cantos levemente arredondados */
    font-size: 1.1em; /* Tamanho de fonte maior */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave para o foco */
    background-color: #f9f9f9; /* Fundo ligeiramente off-white */
    color: #333; /* Cor do texto digitado */
}

#emailInput::placeholder,
#passwordInput::placeholder {
    color: #aaa; /* Cor do texto de placeholder */
}

#emailInput:focus,
#passwordInput:focus {
    outline: none; /* Remove a borda de foco padrão do navegador */
    border-color: #667eea; /* Borda azul/roxa no foco */
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2); /* Sombra suave de "brilho" no foco */
}

/* Estilos para os botões primários (Entrar, Registrar) */
#loginBtn,
#registerBtn {
    width: 100%; /* Largura total */
    padding: 15px 20px;
    border: none;
    border-radius: 8px; /* Cantos arredondados */
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease; /* Transições suaves para hover */
    text-transform: uppercase; /* Texto em maiúsculas */
    letter-spacing: 1px; /* Espaçamento entre letras */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente azul/roxo */
    color: white;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3); /* Sombra para o botão */
}

#loginBtn:hover,
#registerBtn:hover {
    transform: translateY(-3px); /* Levanta o botão no hover */
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); /* Sombra mais forte no hover */
    opacity: 0.95; /* Leve transparência no hover */
}

/* Estilos para o botão de Login com Google */
#googleLoginBtn {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fff; /* Vermelho do Google */
    color: gray;
    margin-top: 20px; /* Espaço entre os botões do formulário e o botão do Google */
    display: flex; /* Para alinhar o ícone e o texto */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre ícone e texto */
    box-shadow: 0 5px 20px rgba(219, 68, 55, 0.3); /* Sombra para o botão */
}

#googleLoginBtn:hover {
    background-color: #c0392b; /* Vermelho mais escuro no hover */
    transform: translateY(-3px); /* Levanta o botão no hover */
    box-shadow: 0 8px 25px rgba(219, 68, 55, 0.4); /* Sombra mais forte no hover */
    opacity: 0.95;
    color: white;
}

.googleLoginBtn:hover {
    background: #f8f9fa;
   // color: white;
}

.googleLoginBtn:active {
    background: #f1f3f4;
}

.googleLoginBtn .google-icon {
    flex: 0 0 20px;
}

/* Estilo para o ícone do Google (SVG inline data-URI) */
.google-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cpath%20fill%3D%27%23EA4335%27%20d%3D%27M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.05%2017.74%209.5%2024%209.5z%27/%3E%3Cpath%20fill%3D%27%234285F4%27%20d%3D%27M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%205.99c4.51-4.18%207.09-10.36%207.09-17.64z%27/%3E%3Cpath%20fill%3D%27%23FBBC05%27%20d%3D%27M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z%27/%3E%3Cpath%20fill%3D%27%2334A853%27%20d%3D%27M24%2048c6.48%200%2011.93-2.14%2015.9-5.81l-7.73-5.99c-2.14%201.45-4.87%202.3-8.17%202.3-6.26%200-11.57-3.55-13.47-8.72l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z%27/%3E%3C/svg%3E");
}

#authError {
    color: #e74c3c; /* Vermelho para mensagens de erro */
    margin-top: 20px;
    font-weight: bold;
    font-size: 0.95em;
}

.loading.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


/* Novos estilos para o branding do aplicativo (logo + texto) */
.app-branding {
    display: flex; /* Para alinhar a imagem e o texto lado a lado */
    align-items: center; /* Alinha verticalmente a imagem e o texto ao centro */
    gap: 10px; /* Espaço entre a imagem e o texto */
}

.app-logo {
    height: 30px; /* Altura da sua imagem do logo, ajuste conforme necessário */
    width: auto; /* Mantém a proporção da imagem */
    /* Adicione outros estilos para o logo se precisar (ex: border-radius) */
}

.app-title-text {
    color: white; /* Cor do texto, mantendo a consistência do seu h1 anterior */
    //font-size: clamp(1.5rem, 5vw, 2.5rem); /* Mantém o tamanho responsivo do seu h1 anterior */
font-size: clamp(1.2rem, 3.5vw, 2.5rem);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Mantém a sombra do seu h1 anterior */
    white-space: nowrap; /* Evita que o texto quebre em várias linhas se o espaço for limitado */
}