@media (max-width: 600px) {

    /* Ajuste no Header para centralizar e melhorar o layout */
    header {
        /* Garante que o menu ocupe toda a largura */
        width: 100%; 
        /* Altera para empilhar itens (Nome do Investidor e Menu) */
        flex-direction: column; 
        gap: 15px; /* Espaçamento entre os blocos */
        padding: 15px 10px;
        text-align: center;
    }

    /* Seletor para os links do seu menu */
    .menu-principal a,
    header a { /* Use 'header a' se os links estão soltos no header */
        /* AUMENTA O TAMANHO DA FONTE */
        font-size: 1.2em; 
        font-weight: bold;
        color: #f0b90b; /* Mantém a cor de destaque, se for o caso */
        text-decoration: none;
        
        /* AUMENTA A ÁREA DE CLIQUE (padding) */
        display: inline-block; /* Permite aplicar padding vertical */
        padding: 8px 12px; /* Aumenta o espaçamento interno para facilitar o toque */
        margin: 0 5px; /* Espaçamento entre os links */
        border-radius: 5px;
        
        /* Opcional: Adiciona um pequeno fundo para destacar a área de toque */
        /* background-color: rgba(255, 255, 255, 0.05); */ 
    }
    
    /* Garante que a informação do investidor e o título estejam visíveis */
    h1 {
        font-size: 1.1em;
        margin-bottom: 0;
    }
    
    /* Aumenta o espaçamento geral dos itens do painel de controle */
    #painelControle {
        padding: 10px;
        margin-bottom: 10px;
    }
}

.message-box {
    padding: 15px 20px;
    margin: 20px auto; /* Centraliza a caixa */
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    max-width: 600px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Mensagem de ERRO (usa seu vermelho-botao) */
.message-box.error {
    background-color: rgba(var(--vermelho-botao-rgb), 0.1); /* Fundo muito suave */
    border: 1px solid var(--vermelho-botao);
    color: var(--vermelho-botao); /* Texto em vermelho forte */
}

/* Mensagem de SUCESSO (usa seu verde-primario) */
.message-box.success {
    background-color: rgba(var(--verde-primario-rgb), 0.1); /* Fundo muito suave */
    border: 1px solid var(--verde-primario);
    color: var(--verde-primario); /* Texto em verde forte */
}

/* Paleta de Cores */
:root {
    --fundo-principal: #121417; /* Preto */
    --fundo-secundario: #1e2024; /* Cinza Escuro para cards */
    --verde-primario: #00ff80; /* Verde Neon */
    --verde-botao: #00b875; /* Verde Sóbrio */
    --vermelho-botao: #f6465d; 
    --texto-claro: #f0f0f0;
    --borda: #33363b;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--fundo-principal);
    color: var(--texto-claro);
    margin: 0;
    /* Imagem de Fundo (Ajuste o caminho da sua imagem) */
    background-image: url('img/background.jpg'); 
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Centraliza os containers na tela */
/* Estilos Gerais (Aplicam-se a todas as telas, mas são simples) */
.center-page {
    /* Mantenha o padding para dar respiro nas bordas, inclusive no mobile */
    padding: 0 20px; 
    
    /* REMOVA max-width: 900px; */
    /* REMOVA margin-left: auto; */
    /* REMOVA margin-right: auto; */
    
    width: 90%; 
}

.container, .auth-container {
    background-color: rgba(30, 32, 36, 0.95); /* Fundo semi-transparente */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 255, 128, 0.2); /* Sombra verde neon */
    padding: 30px;
    margin: 30px auto;
    max-width: 800px;
}

.auth-container { max-width: 400px; }

h1, h2, h3 { color: var(--verde-primario); text-align: center; margin-bottom: 20px; }

/* Logo */
.logo {
    font-size: 2em;
    font-weight: 900;
    color: var(--verde-primario);
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(0, 255, 128, 0.5);
}
.logo span {
    color: var(--texto-claro);
    font-size: 0.5em;
    vertical-align: top;
    margin-left: 5px;
}
.logo a {
    text-decoration: none;
    color: inherit;
}

/* Formulários e Inputs */
input {
    width: 93%; padding: 12px; background-color: #0b0c0e;
    border: 1px solid var(--borda); border-radius: 6px;
    color: var(--texto-claro); margin-bottom: 15px;
}

/* Botões e Navbar (Estilos do seu sistema anterior) */
.btn {
    width: 100%; padding: 12px; border: none; border-radius: 6px;
    font-weight: 700; cursor: pointer; transition: background-color 0.3s;
    text-decoration: none; display: block; text-align: center;
}
.btn-primary { background-color: var(--verde-botao); color: var(--fundo-principal); }
.btn-primary:hover { background-color: var(--verde-primario); }
.btn-secondary { background-color: var(--vermelho-botao); color: var(--fundo-principal); }

/* --- MEDIA QUERY (Responsividade para Celular) --- */
@media (max-width: 600px) {
    
    /* 1. Ajusta o container navbar */
    .navbar {
        /* Muda para empilhar o título e os links */
        flex-direction: column; 
        align-items: center;
        padding: 15px 10px;
        text-align: center;
        gap: 10px; /* Espaço entre o título e os links */
    }

    /* 2. Ajusta o div que agrupa os links */
    .navbar > div {
        /* Permite que os links se distribuam em linha, mas com espaço */
        display: flex;
        flex-wrap: wrap; /* Permite quebrar linha se a tela for muito estreita */
        justify-content: center;
        width: 100%;
    }

    /* 3. Aumenta a fonte e a área de toque dos links */
    .navbar a {
        /* AUMENTA A FONTE */
        font-size: 1.1em; 
        font-weight: bold;
        
        /* AUMENTA A ÁREA DE CLIQUE (PADDING) */
        display: inline-block; 
        padding: 10px 15px; /* Padding generoso para facilitar o toque */
        margin: 5px; /* Espaçamento entre os botões */
        border-radius: 6px;
        
        /* Opcional: Efeito visual leve para área de toque */
        background-color: rgba(255, 255, 255, 0.05);
        color: white; /* Garante que o texto seja visível */
        text-decoration: none;
    }
    
    /* Outras media queries (se existirem, adicione-as aqui) */
    /* ... seu @media (max-width: 600px) anterior ... */
}

h1 {
    /* Aumenta o tamanho da fonte no desktop (ou mantém o que você já tem) */
    font-size: 1.6em; 
    font-weight: 700; /* Deixa a fonte mais grossa (Bold) */
    
    /* Cor de destaque, como o amarelo/dourado da Binance (Ex: #f0b90b) */
    color: var(--amarelo-destaque, #f0b90b); 
    
    /* Adiciona uma sombra de texto suave para melhorar a leitura */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4); 
    
    /* Espaçamento em volta */
    margin: 10px 0; 
}

/* Opcional: Estilo para o nome do investidor dentro da navbar da página profile.php */
/* (Para a página Perfil, que usa 'Meus Dados de Cadastro') */
.navbar > span {
    font-size: 1.3em;
    font-weight: 800; /* Super bold */
    color: var(--amarelo-destaque, #f0b90b) !important;
    text-shadow: 0 0 5px rgba(255, 165, 0, 0.5); 
}
/* Tabela */
table {
    width: 100%; border-collapse: collapse; margin-top: 20px;
}
th, td {
    padding: 12px; text-align: left; border-bottom: 1px solid var(--borda);
}
th {
    background-color: var(--fundo-principal);
    color: var(--verde-primario);
}

/* 1. Estilo para o contêiner dos links */
.navbar > div {
    display: flex;
    gap: 10px; /* Espaçamento entre os links */
    align-items: center;
}

/* 2. Estilo para os links (transforma em botões de menu) */
.navbar a {
    /* Torna o link um bloco inline para aplicar padding e fundo */
    display: inline-block;
    
    /* Aumenta a área de clique e o espaçamento */
    padding: 8px 15px; 
    
    /* Aumenta a fonte para melhor legibilidade no desktop */
    font-size: 1em; 
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    
    /* Cor e fundo para destacar */
    color: var(--texto-principal, #e6e6e6); /* Cor do texto padrão */
    background-color: var(--fundo-principal, #2b2b3a); /* Fundo do container */
    
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* 3. Efeito ao passar o mouse */
/* NOVO Estilo para o link ATIVO (Desktop e Mobile) */
/* NOVO Estilo para o link ATIVO (Sublinhado Amarelo) */
.navbar a.active {
    /* 1. Remove o fundo sólido verde/cor, se houver */
    background-color: transparent !important;
    
    /* 2. Garante a cor do texto de destaque */
    color: var(--amarelo-destaque, #f0b90b) !important; 
    font-weight: bold;
    
    /* 3. ADICIONA O SUBLINHADO AMARELO (borda inferior) */
    border-bottom: 2px solid var(--amarelo-destaque, #f0b90b) !important;
    
    /* Zera a margem inferior para que a linha fique bem justa */
    margin-bottom: -2px; 
    
    /* Garante que o item ativo não mude no hover (opcional, mas bom) */
    pointer-events: none;
}

/* Garante que os links inativos não tenham o sublinhado */
.navbar a:not(.active) {
    border-bottom: none;
}

/* --- MEDIA QUERY: ESTILOS PARA DESKTOP (Telas com 768px ou mais) --- */
@media (min-width: 768px) {
    
    /* Centraliza o contêiner principal */
    .center-page {
        max-width: 900px; 
        margin-left: auto;
        margin-right: auto;
        padding: 0; 
        width: 100%; 
    }
    
    /* 1. FORÇA O LAYOUT LADO A LADO */
    .navbar {
        display: flex; /* Essencial */
        
        /* Força a direção horizontal para desktop */
        flex-direction: row !important; 
        
        /* Título à esquerda, Menu à direita */
        justify-content: space-between; 
        align-items: center; 
        
        /* Resolve o Conflito de Largura */
        padding-left: 30px; 
        padding-right: 30px; 
        padding-top: 15px; 
        padding-bottom: 15px;
    }
    
    /* 2. Garante que os LINKS (o <div>) fiquem em linha */
    .navbar > div {
        display: flex;
        gap: 15px;
        /* Garante que o alinhamento vertical dos links internos seja perfeito */
        align-items: center; 
        /* Remove qualquer margin/padding que possa estar forçando quebra */
        margin: 0; 
        padding: 0;
    }
    
    /* Outras regras... */
}

/* --- Responsividade da Tabela para Mobile e Desktop --- */
.table-responsive {
    /* Esta regra é a mágica: se o conteúdo for maior que o container, 
       cria uma barra de rolagem horizontal. */
    overflow-x: auto;
    
    /* Garante que o scroll só apareça se necessário */
    -webkit-overflow-scrolling: touch; 
}