body {
            font-family: 'Inter', sans-serif;
            background-color: #1f2937;
        }

        .font-header {
            font-family: 'Roboto Slab', serif;
        }

        .tree-wrapper {
            position: relative;
            width: 100%;
            /* height e overflow removidos */
            border-radius: 0.75rem;
            cursor: grab;
        }

        /* ESTILO AJUSTADO DOS CONTÊINERES (COM A ALTERAÇÃO) */
        #main-container {
            position: relative;
            width: 100%;
            min-height: 180vh;
            background-color: #111827;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 25px 25px;
            border-radius: 0.75rem;
            overflow: visible;
        }

        #humanities-container,
        #optional-container {
            position: relative;
            width: 100%;
            min-height: 140vh;
            background-color: #111827;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 25px 25px;
            border-radius: 0.75rem;
            overflow: visible;
        }

        .node {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 130px;
            height: 90px;
            border-radius: 0.75rem;
            border: 3px solid;
            cursor: pointer;
            transition: all 0.3s ease;
            transform: translate(-50%, -50%);
            z-index: 10;
            padding: 5px;
            text-align: center;
            box-sizing: border-box;
            font-size: 11px;
        }

        .node:hover {
            z-index: 99;
            /* Eleva o nó sobre os outros ao passar o mouse */
        }

        /* --- Main Subjects States --- */
        .subject-locked {
            background-color: #374151;
            border-color: #4b5563;
            color: #9ca3af;
        }

        .subject-locked:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        .subject-available {
            background-color: #2563eb;
            border-color: #60a5fa;
            color: white;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }

        .subject-available:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        .subject-completed {
            background-color: #16a34a;
            border-color: #4ade80;
            color: white;
            font-weight: bold;
            box-shadow: 0 0 20px rgba(74, 222, 128, 0.7);
        }

        .subject-satisfied {
            background-color: #4a4a28;
            /* Fundo dourado escuro */
            border-color: #fbbf24;
            /* Borda âmbar/dourada */
            color: #fde68a;
            /* Texto dourado claro */
            cursor: not-allowed;
            /* Indica que não é mais clicável */
        }

        .subject-satisfied:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        .subject-inprogress {
            background-color: #f97316;
            border-color: #fdba74;
            color: white;
            box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
        }

        .subject-inprogress:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        /* --- Humanities Subjects States --- */
        .humanities-locked {
            background-color: #374151;
            border-color: #4b5563;
            color: #9ca3af;
        }

        .humanities-locked:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        .humanities-available {
            background-color: #a855f7;
            border-color: #c084fc;
            color: white;
            box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
        }

        .humanities-available:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        .humanities-completed {
            background-color: #16a34a;
            border-color: #4ade80;
            color: white;
            font-weight: bold;
            box-shadow: 0 0 20px rgba(74, 222, 128, 0.7);
        }

        .humanities-inprogress {
            background-color: #f97316;
            border-color: #fdba74;
            color: white;
            box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
        }

        .humanities-inprogress:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        /* --- Optional/Track Subjects States --- */
        .optional-locked {
            background-color: #374151;
            border-color: #4b5563;
            color: #9ca3af;
        }

        .optional-locked:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        .optional-available {
            background-color: #dc2626;
            border-color: #f87171;
            color: white;
            box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
        }

        .optional-available:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        .optional-completed {
            background-color: #16a34a;
            border-color: #4ade80;
            color: white;
            font-weight: bold;
            box-shadow: 0 0 20px rgba(74, 222, 128, 0.7);
        }

        .optional-inprogress {
            background-color: #f97316;
            border-color: #fdba74;
            color: white;
            box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
        }

        .optional-inprogress:hover {
            transform: translate(-50%, -50%) scale(1.05);
        }

        /* Settings Toggle */
        body.disable-glow .tree-wrapper svg path[id^="pulse-"] {
            display: none !important;
            animation: none !important;
            opacity: 0 !important;
        }

        /* O restante do seu CSS continua aqui sem alterações... */
        .node .tooltip {
            visibility: hidden;
            opacity: 0;
            width: 220px;
            background-color: var(--bg-card);
            color: var(--text-main);
            text-align: center;
            border-radius: 8px;
            padding: 8px;
            position: absolute;
            z-index: 20;
            bottom: 115%;
            left: 50%;
            margin-left: -110px;
            transition: opacity 0.3s;
            border: 1px solid var(--border-main);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
        }

        .node .tooltip::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--bg-card) transparent transparent transparent;
        }

        .node .tooltip.visible,
        .node .tooltip-satisfied.visible {
            visibility: visible;
            opacity: 1;
        }

        .line-locked {
            stroke: #4b5563;
            stroke-width: 2;
            stroke-dasharray: 4, 4;
            fill: none;
            opacity: 0.6;
        }

        @keyframes flowLine {
            from {
                stroke-dashoffset: var(--line-length);
            }

            to {
                stroke-dashoffset: 0;
            }
        }


        @keyframes travelPulse {
            0% {
                stroke-dashoffset: var(--pulse-start);
                opacity: 0;
            }

            5% {
                opacity: 0;
            }

            10% {
                opacity: 0.6;
            }

            90% {
                opacity: 0.6;
            }

            95% {
                opacity: 0;
            }

            100% {
                stroke-dashoffset: var(--pulse-end);
                opacity: 0;
            }
        }

        .line-completed {
            stroke: #16a34a;
            stroke-width: 3;
            fill: none;
            filter: drop-shadow(0 0 3px #4ade80);
            transition: stroke-dashoffset 1.5s ease-out;
            opacity: 0.6;
        }

        .remove-btn {
            background: none;
            border: none;
            color: #f87171;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
            padding: 0 0.5rem;
            transition: color 0.2s;
        }

        .remove-btn:hover {
            color: #ef4444;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
            transition: opacity 0.3s ease;
        }

        .modal-box {
            background-color: #1f2937;
            border-radius: 0.75rem;
            padding: 2rem;
            border: 1px solid #4b5563;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }

        .modal-overlay:not(.hidden) .modal-box {
            transform: scale(1);
        }

        .tab-btn {
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background-color: transparent;
            color: #9ca3af;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
        }

        .tab-btn:hover {
            color: #d1d5db;
        }

        .tab-link {
            display: inline-block;
            text-decoration: none;
        }

        .tab-btn.active {
            color: #60a5fa;
            border-bottom-color: #60a5fa;
        }

        .period-header {
            position: absolute;
            left: 10px;
            transform: translateY(-50%);
            color: #6b7280;
            font-weight: bold;
            font-size: 1.25rem;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            background-color: rgba(31, 41, 55, 0.5);
            padding: 10px 5px;
            border-radius: 8px;
        }

        .track-header {
            position: absolute;
            left: 5px;
            transform: translateY(-50%);
            color: #9ca3af;
            font-weight: bold;
            font-size: 1rem;
            background-color: rgba(31, 41, 55, 0.6);
            padding: 8px 4px;
            border-radius: 8px;
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        .node .tooltip-satisfied {
            visibility: hidden;
            opacity: 0;
            width: 220px;
            background-color: var(--bg-card);
            color: var(--text-main);
            text-align: center;
            border-radius: 8px;
            padding: 8px;
            position: absolute;
            z-index: 20;
            bottom: 115%;
            left: 50%;
            margin-left: -110px;
            transition: opacity 0.3s;
            border: 2px solid var(--node-satis-border);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
        }

        .node .tooltip-satisfied::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--node-satis-border) transparent transparent transparent;
        }

        /* Adicione este novo estilo para o tooltip posicionado abaixo */
        .node .tooltip.below {
            bottom: auto;
            /* Remove a regra que o força para cima */
            top: 115%;
            /* Posiciona 15% abaixo do nó */
        }

        /* Adicione este estilo para corrigir a seta quando o tooltip estiver abaixo */
        .node .tooltip.below::after {
            top: auto;
            /* Remove a regra da seta antiga */
            bottom: 100%;
            /* Coloca a seta no topo do tooltip */
            margin-left: -5px;
            /* Inverte a direção da borda para apontar para cima */
            border-color: transparent transparent var(--bg-card) transparent;
        }

        /* Se você também quer que a borda dourada funcione para tooltips satisfeitos abaixo */
        .node .tooltip-satisfied.below::after {
            border-color: transparent transparent var(--node-satis-border) transparent;
        }

        /* ================================================= */
        /* === ESTILOS PARA DISPOSITIVOS MÓVEIS (INÍCIO) === */
        /* ================================================= */

        /* Esta regra só aplica os estilos abaixo em telas com largura máxima de 768px */
        @media (max-width: 768px) {

            /* 1. Ajuste no Contêiner Principal da Árvore */
            /* Para forçar um layout mais vertical, aumentamos a largura (width) e
        diminuímos a altura (height) do contêiner interno. Isso "estica" o conteúdo
        na vertical, tornando a rolagem para baixo mais natural no celular. */
            #main-container,
            #humanities-container,
            #optional-container {
                width: 280%;
                /* Mais largo para espalhar os nós verticalmente */
                height: 135vh;
                /* Menos alto para compensar a largura */
            }

            /* 2. Diminuir o Tamanho dos Nós (Matérias) */
            /* Os nós originais (130x90px) são muito grandes para uma tela de celular.
        Vamos diminuí-los para que caibam melhor na tela. */
            .node {
                width: 110px;
                height: 75px;
                font-size: 10px;
                /* Reduzimos um pouco a fonte para caber no novo tamanho */
            }

            /* 3. Ajustar o tamanho da fonte do cabeçalho */
            /* A classe 'text-3xl' será usada para o título principal em telas pequenas,
        e as outras classes do Tailwind (sm:, md:) cuidarão dos tamanhos maiores. */
            .font-header-responsive {
                font-size: 1.875rem;
                /* Equivalente a text-3xl do Tailwind */
                line-height: 2.25rem;
            }

            /* 4. Ajustes finos nas barras de progresso e formulários */
            /* Em telas muito pequenas, podemos empilhar os formulários para não ficarem espremidos. */
            #ac-form,
            #cce-form {
                grid-column: span 2 / span 2;
                /* Faz cada formulário ocupar a largura total */
            }
        }

        /* ================================================= */
        /* === ESTILOS PARA DISPOSITIVOS MÓVEIS (FIM) ==== */
        /* ================================================= */

        .modal-overlay.hidden {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .modal-overlay.active {
            opacity: 1 !important;
            pointer-events: auto !important;
            display: flex !important;
        }