:root {
    --verde: #00ff88;
    --fundo-card: #1e2538;
    --fundo-site: #0e1320;
    --texto: #ffffff;
    --botao-off: #151c30;
}

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

body {
    background-color: var(--fundo-site);
    color: var(--texto);
    font-family: 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.conteudo-principal {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    flex: 1;
}

.titulo-principal {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2rem;
}

.titulo-principal span { color: var(--verde); }

/* Estilo dos Botões */
.botoes { display: flex; flex-wrap: wrap; }

.botao {
    flex: 1;
    padding: 15px;
    background-color: var(--botao-off);
    color: var(--texto);
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.botao.ativo {
    background-color: var(--fundo-card);
    border-bottom: 4px solid var(--verde);
}

/* Conteúdo das Abas */
.abas-textos {
    background-color: var(--fundo-card);
    padding: 40px;
    border-radius: 0 0 12px 12px;
}

.aba-conteudo { display: none; }
.aba-conteudo.ativo { display: block; }

.aba-titulo { color: var(--verde); margin-bottom: 15px; }

.contador {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    font-weight: bold;
    color: var(--verde);
    font-size: 1.2rem;
}

.rodape { text-align: center; padding: 20px; background: var(--fundo-card); }