:root {
            --bg: #282a36;
            --selection: #44475a;
            --foreground: #f8f8f2; /* Cor branca para textos gerais */
            --comment: #6272a4;
            --cyan: #8be9fd;
            --green: #50fa7b;
            --orange: #ffb86c;
            --pink: #ff79c6;
            --purple: #bd93f9;
            --red: #ff5555;
            --yellow: #f1fa8c;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body {
            height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--foreground);
            overflow: hidden;
        }
        #neuron-canvas { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            z-index: 0;   /* Mude de -1 para 0 */
            background-color: var(--bg);
        }

        /* 6. Adição ao CSS (Versão Melhorada) */

/* Estilo principal da Navbar */
nav {
    top: 0;
    background-color: rgba(40, 42, 54, 0.8);
    backdrop-filter: blur(10px); /* Aumenta o desfoque para mais destaque */
    border-bottom: 1px solid var(--selection); /* Borda sutil para separação */
    padding: 15px 0; /* Aumenta o espaçamento vertical */
}

/* Container interno para alinhar o conteúdo */
.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px; /* Mais espaçamento nas laterais */
}

/* Estilo da marca/título principal */
.nav-brand {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--pink);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Transição suave */
}

.nav-brand:hover {
    color: #ff92d3; /* Rosa mais claro */
    text-shadow: 0 0 8px rgba(255, 121, 198, 0.7); /* Efeito de brilho */
}

/* Lista de links de navegação */
.nav-links {
    list-style: none;
    display: flex;
    gap: 35px; /* Espaçamento moderno entre os itens */
}

/* Estilo individual de cada link */
.nav-links a {
    text-decoration: none;
    color: var(--foreground);
    font-weight: bold;
    padding-bottom: 8px; /* Espaço para a linha animada */
    position: relative; /* Necessário para o pseudo-elemento ::after */
    transition: color 0.3s ease;
}

/* Efeito de hover principal no link */
.nav-links a:hover {
    color: var(--cyan); /* Muda a cor do texto ao passar o mouse */
}

/* A linha animada */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--cyan);
    bottom: 0;
    left: 0;
    transform: scaleX(0); /* Começa invisível (escala 0) */
    transform-origin: center; /* Animação cresce a partir do centro */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Transição suave */
}

/* Animação da linha ao passar o mouse */
.nav-links a:hover::after {
    transform: scaleX(1); /* Torna a linha visível (escala 1) */
}
        nav, footer { position: absolute; width: 100%; background-color: rgba(40, 42, 54, 0.8); backdrop-filter: blur(5px); text-align: center; padding: 10px; z-index: 10; }
        nav { top: 0; color: var(--pink); }
        footer { bottom: 0; font-size: 0.9em; color: var(--comment); }
        .card { position: absolute; background-color: rgba(68, 71, 90, 0.8); backdrop-filter: blur(10px); padding: 20px; border-radius: 12px; border: 1px solid var(--comment); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: opacity 0.5s ease, transform 0.5s ease; z-index: 15; }
        .card-header { cursor: move; color: var(--purple); margin: -20px -20px 20px -20px; padding: 15px 20px; text-align: center; border-bottom: 1px solid var(--comment); position: relative; background-color: rgba(0,0,0,0.1); border-top-left-radius: 12px; border-top-right-radius: 12px; }
        .toggle-button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 1.2em; color: var(--cyan); padding: 0 5px; user-select: none; }
        .toggle-button:hover { color: var(--yellow); }
        .card-content { max-height: 600px; overflow: hidden; transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin-top 0.4s ease-out; }
        .card-content.hidden { max-height: 0; opacity: 0; margin-top: -20px; pointer-events: none; }
        #network-controls { width: 320px; }
        #neuron-controls { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; z-index: 20; }
        .card.hidden { opacity: 0; pointer-events: none; transform: scale(0.9); }
        .control-group { margin-bottom: 15px; }
        .control-group label { font-size: 0.9em; color: var(--cyan); display: block; margin-bottom: 5px; }
        input[type="range"], input[type="number"] { width: 100%; margin-top: 5px; }
        input[type="number"] { padding: 8px; background-color: var(--bg); border: 1px solid var(--comment); color: var(--foreground); border-radius: 5px; font-size: 1em; -moz-appearance: textfield; }
        input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        button { width: 100%; padding: 10px; margin-top: 10px; background-color: var(--pink); border: none; color: var(--foreground); font-size: 1em; font-weight: bold; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; }
        button:hover { background-color: #ff92d3; }
        #train-button { background-color: var(--green); color: var(--bg); }
        #train-button:hover { background-color: #81ff9e; }
        button.secondary { background-color: var(--cyan); color: var(--bg); font-size: 0.8em; padding: 8px; margin-top: 0; }
        button.secondary:hover { background-color: #b3f2ff; }
        #back-to-network { background-color: var(--orange); }
        .info-group { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--comment); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.9em; transition: margin-top 0.4s ease-out; }
        .card-content.hidden ~ #train-button { margin-top: 0; }
        .card-content.hidden ~ .info-group { margin-top: 10px; border-top: none; padding-top: 0; }
        .single-neuron-info { grid-template-columns: 1fr; text-align: center; }
        .info-group strong { color: var(--green); }
        hr { border: none; border-top: 1px solid var(--comment); margin: 20px 0; transition: opacity 0.3s ease-out; }
        .card-content.hidden hr { opacity: 0; }

        .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(40, 42, 54, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
        .modal.visible { opacity: 1; pointer-events: all; }
        .modal-content-wrapper { background-color: var(--selection); padding: 30px; border-radius: 12px; width: 80%; max-width: 900px; max-height: 80vh; overflow-y: auto; border: 1px solid var(--purple); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
        .modal-header { width: 80%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .modal-header h2 { color: var(--purple); }
        .close-modal { background: none; border: none; font-size: 2.5em; color: var(--red); cursor: pointer; line-height: 1; padding: 5px; }
        .close-modal:hover { color: #ff8080; }
        #learning-chart-canvas { background-color: rgba(0,0,0,0.2); border-radius: 8px; width: 80%; max-width: 900px; height: 60vh; }
        
        #algorithm-content h3 { color: var(--cyan); margin-top: 25px; margin-bottom: 10px; font-size: 1.4em; }
        #algorithm-content p { margin-bottom: 10px; line-height: 1.6; }
        #algorithm-content code { display: block; background-color: var(--bg); padding: 15px; border-radius: 8px; font-family: 'Fira Code', 'Cascadia Code', monospace; white-space: pre-wrap; word-break: break-all; color: var(--green); overflow-x: auto; margin-top: 10px; margin-bottom: 20px; font-size: 0.9em; }
        #algorithm-content strong { color: var(--orange); }
        #algorithm-content ul { list-style-position: inside; margin-left: 10px; }

        /* Estilização Melhorada para o Footer */
footer {
            position: absolute; bottom: 0; width: 100%;
            background-color: rgba(40, 42, 54, 0.8);
            backdrop-filter: blur(5px);
            padding: 10px;
            z-index: 10;
        }
        .footer-container { max-width: 1400px; margin: 0 auto; padding: 10px 30px; text-align: center; }
        .footer-links { list-style: none; display: flex; justify-content: center; gap: 25px; margin: 0 0 10px 0; padding: 0; }
        .footer-links a { text-decoration: none; color: var(--comment); font-size: 0.9em; transition: color 0.3s ease; }
        .footer-links a:hover { color: var(--cyan); }
        .copyright { font-size: 0.8em; color: var(--selection); }