Sem mudar os nomes de class e id. Refaça minha interface para uma aparência mais bonita e definida com espaços e respiro para que fique organizado e bonito de se ver, use tecnicas de alto nivel com card, magens, bordas, transição, icones referentes as paginas e todas as outras tecnicas de alto nivel. As cores continuam preto, cinza e neon roxo escurto para detalhes. Pagina deve ser toda em pt-bt assim como o codigo refinado e extremamente organizado e comentado em detalhes. O projeto e de uma carteira TRX tron que tbm vai ganhar um bot de farmimg passivo o nome do projeto e 'VTron' entao seja um artista para que tudo fique lindo leve mas bonito e suave e intuitivo.   

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vtron - VoiD Tron Wallet</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <aside>
        <h2>Vtron</h2>
        <button id="btn_login" onclick="showSection('login')">Login</button>
        <button id="btn_dashboard" onclick="showSection('dashboard')" disabled>Dashboard</button>
        <button id="btn_bot" onclick="showSection('bot')" disabled>SR Voting Bot</button>
    </aside>

    <div class="main-content">
        <!-- Login Section -->
        <section id="login_section" class="section">
            <h1>Vtron - VoiD Tron</h1>
            <h2>Login to your Wallet</h2>
            <input id="wallet_address" type="text" placeholder="Enter Wallet Address" required>
            <input id="private_key" type="password" placeholder="Enter Private Key" required>
            <button onclick="login()">Login</button>
            <p class="error" id="login_error"></p>
        </section>

        <!-- Dashboard Section -->
        <section id="dashboard_section" class="section" style="display: none;">
            <h2>Dashboard</h2>
            <p><strong>Balance:</strong> <span id="balance"></span> TRX</p>
            <p><strong>Invested:</strong> <span id="invested_amount"></span> TRX</p>
            <p><strong>Passive Income (Hoje):</strong> <span id="daily_income"></span> TRX</p>
            <p><strong>Total Acumulado:</strong> <span id="total_acumulado"></span> TRX</p>
            <button onclick="toggleSendTrx()">Enviar TRX</button>
            <button onclick="toggleBotSettings()">Gerenciar Bot</button>

            <!-- Enviar TRX -->
            <div id="send_trx_section" style="display: none;">
                <h3>Enviar TRX</h3>
                <input id="send_to_address" type="text" placeholder="Endereço de Destino" required>
                <input id="send_amount" type="number" placeholder="Quantidade em TRX" required>
                <button onclick="sendTrx()">Enviar</button>
                <p id="send_result" class="result"></p>
            </div>
        </section>

        <!-- Bot Configuration Section -->
        <section id="bot_section" class="section" style="display: none;">
            <h2>Configure SR Voting Bot</h2>
            <input id="bot_investment_amount" type="number" placeholder="Valor a Investir em TRX">
            <button onclick="startBot()">Iniciar Bot</button>
            <button onclick="stopBot()">Parar Bot</button>
            <p id="bot_status" class="result"></p>
        </section>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>


/* static/style.css */

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #ccc;
}

aside {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background-color: #111;
    padding-top: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
}

aside h2 {
    color: #8A2BE2;
    text-align: center;
    margin-bottom: 30px;
}

aside button {
    display: block;
    width: 160px;
    margin: 10px auto;
    padding: 10px;
    background-color: #8A2BE2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

aside button:hover {
    background-color: #6A0DAD;
}

.main-content {
    margin-left: 220px;
    padding: 20px;
}

.section {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
}

h1, h2 {
    color: #8A2BE2;
}

input {
    display: block;
    width: 80%;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #222;
    color: #fff;
}

button {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px 20px;
    background-color: #8A2BE2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #6A0DAD;
}

.result {
    margin-top: 10px;
    color: #00FF00;
}

.error {
    color: red;
}