/* No início do style.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Impede a rolagem lateral indesejada */
    max-width: 100vw;
}

body {
            /* ALTERADO: Poppins para números/títulos, Inter para texto principal */
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #161b22; /* Fundo principal (super escuro) */
            color: #ecf0f1;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: #1e2230; /* Fundo do container (escuro) */
            padding: 20px 30px;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            border: 1px solid #30363d; /* Borda sutil */
        }
        
        /* --- ESTILOS DO HEADER (REESTRUTURADO) --- */
        .header {
            display: flex;
            flex-direction: column; /* Altera para coluna para centralizar o logo */
            align-items: center; 
            padding-bottom: 15px;
            border-bottom: 2px solid #30363d;
            margin-bottom: 30px; 
            position: relative;
        }
        /* Contêiner do Logotipo (Centralizado no cabeçalho) */
        .header-logo-container {
            width: 100%;
            text-align: center;
            margin-bottom: 10px; 
            /* Para a logo de 250px, ajustamos o margin para garantir o espaço */
            margin-top: 20px;
            padding: 0;
            min-height: 210px; 
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* Contêiner do Nome e Controles (Posicionado absolutamente) */
        .header-left { 
            display: flex; 
            flex-direction: row; 
            align-items: center; 
            gap: 15px;
            /* Posicionamento do nome à esquerda */
            position: absolute;
            top: 20px; 
            left: 20px;
            z-index: 10; 
        }
        .header-right { 
            /* Posicionamento dos controles à direita */
            position: absolute;
            top: 20px; 
            right: 20px; 
            width: auto; 
            justify-content: flex-end;
            gap: 10px;
            align-items: center;
            display: flex; 
        }
        /* NOVO ESTILO: Garante que os elementos dentro do datetime fiquem em duas linhas */
        .header-right #datetime { 
            text-align: right; 
            font-size: 1em; 
            color: #8b949e; 
            display: flex; /* Transforma em flex para controlar os itens */
            flex-direction: column; /* Organiza em coluna */
            align-items: flex-end; /* Alinha o conteúdo à direita */
            gap: 5px; /* Espaço entre o texto e os botões */
        }
        /* NOVO ESTILO: Contêiner dos botões dentro do datetime */
        .header-right .control-buttons {
            display: flex;
            gap: 10px;
        }

        .header-left h1 { 
            margin: 0; 
            color: #5c9dff; 
            font-size: 1.5em; 
            line-height: 1; 
            text-align: left; 
        }
        .header-left .logo-text {
            /* Ocultado o ícone que estava ao lado do nome, mantendo apenas o H1 */
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }
        #menu-toggle-btn {
            transition: opacity 0.3s ease-in-out; 
            margin-left: 10px; 
        }


        /* --- ESTILOS DA LOGOMARCA (AUMENTADO para 250px e CENTRALIZADO) --- */
        #main-logo {
            width: 200px; /* MANTIDO EM 250PX */
            height: auto;
            margin: 0; 
            display: block;
            border-radius: 4px; 
        }
        /* Oculta o texto subtitle que não é usado no novo layout do header */
        .header-left .logo-text .subtitle {
            display: none;
        }

        /* --- ESTILOS DO CICLO DE ESTUDOS (Melhoria: Cards e Flex) --- */
        #cycle-view-content {
            display: flex;
            gap: 20px;
            flex-wrap: wrap; /* Permite que os cards se quebrem */
            justify-content: space-between;
            align-items: flex-start; /* Alinha o conteúdo ao topo */
        }

        /* Contêiner da Grid e Menu Rápido */
        .schedule-grid-container {
            /* Ocupa 100% do dynamic-content-container */
            width: 100%; 
        }

        /* Container do Ciclo/Cronograma que ocupa mais espaço */
        #dynamic-content-container {
            flex: 3; /* Ocupa mais espaço que o menu lateral */
            min-width: 60%; 
            order: 1; /* Garante que fique antes do menu lateral */
        }
        
        /* Menu Rápido (Lateral/Posicionado) */
        .button-group-vertical {
            flex: 1;
            min-width: 250px; /* Garante visibilidade do menu vertical */
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 15px;
            background-color: #1e2230;
            border: 1px solid #30363d;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            order: 2; /* Garante que fique depois do conteúdo dinâmico */
            
            /* CÓDIGO CHAVE ALTERADO: Remove o margin-top negativo para alinhar com o seletor de modo */
            margin-top: 0; 
        }

        .schedule-grid {
            /* MANTIDO: Oito colunas para permitir a logomarca na última posição */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Melhora a responsividade da grid */
            gap: 20px;
            margin-bottom: 20px;
        }
        .day-column {
            background-color: #1e2230; /* Fundo do container para os cards */
            border-radius: 12px; /* Mais arredondado */
            padding: 20px;
            border: 1px solid #30363d;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra mais suave */
            transition: transform 0.2s;
        }
        .day-column:hover {
            transform: translateY(-3px); /* Efeito moderno de elevação */
            border-color: #5c9dff;
        }
        .day-column h2 {
            font-size: 1.2em;
            text-align: left;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #30363d; /* Linha mais fina */
            color: #5c9dff; /* Dia da semana em destaque */
        }
        .day-column ul { list-style-type: none; padding: 0; margin: 0; min-height: 50px; padding-top: 10px; }
        .day-column li {
            color: #fff;
            margin-bottom: 8px;
            padding: 10px 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: none; /* Remove a sombra desnecessária nos itens */
            font-weight: 500;
            white-space: nowrap;
        }
        .day-column li.done { opacity: 0.6; text-decoration: line-through; }
        .day-column input[type="checkbox"] {
            margin-right: 12px;
            min-width: 18px;
            min-height: 18px;
            cursor: pointer;
            accent-color: #fff;
        }
        .day-column label { flex-grow: 1; font-size: 0.95em; }
        
        /* NOVO: Estilo para o Contêiner da Logomarca (Dia 8) - Mesma cor dos outros dias */
        .logo-placeholder-card {
            background-color: #1e2230; /* Fundo do container (igual a .day-column) */
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #30363d;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            /* Ocupa a altura máxima disponível para a grade */
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 150px; 
        }
        .logo-placeholder-card img {
            width: 100%; 
            max-width: 200px; /* ALTERADO: Aumentado para 150px */
            height: auto; /* Mantém a proporção com a largura limitada */
            opacity: 0.7;
            margin: 0; 
        }
        /* Estilos Light Mode para o card do logo */
        body.light-mode .logo-placeholder-card {
            background-color: #ffffff; /* Fundo igual a .day-column no light mode */
            border-color: #dfe7e5;
        }


        /* --- ESQUEMA DE CORES DAS MATÉRIAS (MANTIDO) --- */
        /* Essas cores fixas são para as matérias iniciais do sistema. Novas cores virão via JS (style="background-color: #HEX;") */
        .bg-const { background-color: #3498db; }
        .bg-adm { background-color: #e67e22; }
        .bg-rec_mat { background-color: #9b59b6; }
        .bg-afo { background-color: #8e44ad; }
        .bg-port { background-color: #f1c40f; color: #333; }
        .bg-ri { background-color: #e74c3c; }
        .bg-info { background-color: #1abc9c; }
        .bg-ing { background-color: #2ecc71; }
        .bg-rlm { background-color: #95a5a6; color: #333; }
        .bg-arq { background-color: #bdc3c7; color: #333; }
        .bg-adm_pes { background-color: #7D3C98; }


        /* --- MENU RÁPIDO (Botões de Navegação) --- */
        
        .button-group-vertical button {
            display: block;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 12px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: left;
            background: #161b22; /* Fundo escuro para os botões */
            color: #ecf0f1;
            border-left: 5px solid #5c9dff; /* Borda lateral para destaque */
            border-radius: 8px;
            box-shadow: none;
            border: none;
        }
        .button-group-vertical button:hover {
            background: #30363d; /* Cor de hover suave */
            transform: none; /* Remove a translação vertical no hover para botões verticais */
        }
        
        #reset-button, #reset-cycle-progress-button {
            background-color: #e74c3c;
            border-left-color: #c0392b;
            margin-top: 20px;
            /* Estilos para o botão que agora está fora do grupo */
            display: block;
            width: 100%;
            max-width: 100%;
            padding: 15px;
            font-size: 16px;
            border-radius: 8px;
            border: none;
            font-weight: bold;
            text-align: center;
        }
        #reset-button:hover, #reset-cycle-progress-button:hover {
            background-color: #c0392b;
        }

        #reset-cycle-progress-button {
    /* Regras removidas para permitir alinhamento flexível */
}

        #timer-button { background-color: #1abc9c; border-left-color: #16a085; color: #fff; }
        #timer-button:hover { background-color: #16a085; }
        
        #dashboard-button { background-color: #95a5a6; border-left-color: #7f8c8d; color: #2c3e50; }
        #dashboard-button:hover { background-color: #7f8c8d; }

        /* Botões de Edição: Mantidos na mesma cor de destaque */
        #edit-schedule-button, #edit-cycle-button-quick { background-color: #3498db; border-left-color: #2980b9; color: #fff; }
        #edit-schedule-button:hover, #edit-cycle-button-quick:hover { background-color: #2980b9; }

        #review-button { background-color: #f39c12; border-left-color: #e67e22; color: #fff; }
        #review-button:hover { background-color: #e67e22; }

        #flashcard-button { background-color: #8e44ad; border-left-color: #7D3C98; color: #fff; }
        #flashcard-button:hover { background-color: #7D3C98; }
        
        #tasks-button { background-color: #16a085; border-left-color: #1abc9c; color: #fff; }
        #tasks-button:hover { background-color: #1abc9c; }
/* Estilo do Botão Edital Verticalizado */
        #syllabus-button { background-color: #3f51b5; border-left-color: #5c6bc0; color: #fff; }
        #syllabus-button:hover { background-color: #5c6bc0; }

/* --- NOVO: ESTILO DO BOTÃO VIAGEM (AZUL OCEANO) --- */
        #voyage-button { background-color: #0984e3; border-left-color: #74b9ff; color: #fff; }
        #voyage-button:hover { background-color: #74b9ff; }

        .back-button {
            background-color: #4b5563; /* Cinza escuro */
            color: #ecf0f1;
            margin-top: 30px;
        }
        .back-button:hover { background-color: #374151; }

        /* Estilos do Cronômetro, Dashboard, Editor */
        #timer-view, #dashboard-view, #schedule-editor-view, #review-view, #flashcard-view, #tasks-view, #cycle-editor-view {
            text-align: center; /* Mantém o alinhamento geral do conteúdo da view */
            padding: 20px;
            border-top: 2px solid #30363d; 
            margin-top: 25px;
        }
        #timer-view h2, #dashboard-view h2, #schedule-editor-view h2, #review-view h2, #flashcard-view h2, #tasks-view h2, #cycle-editor-view h2 {
            margin-top: 0;
            font-size: 1.8em;
        }
        #dashboard-view h3, #review-view h3, #flashcard-view h3, #tasks-view h3, #cycle-editor-view h3 {
            font-size: 1.4em;
            color: #5c9dff; 
            border-bottom: 2px solid #30363d; 
            padding-bottom: 10px;
            margin-top: 30px;
            margin-bottom: 20px;
            text-align: left; /* Mantém o alinhamento esquerdo para a maioria dos h3 do dashboard */
        }

        /* Regra específica para centralizar o título H3 dentro do Goal Container */
        #dashboard-view .goal-container h3, 
        #cycle-mode-view .goal-container h3,
        .subject-management-box .goal-container h3 {
            text-align: center; 
            border-bottom: none; /* Remove a linha de baixo para o título da meta */
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 10px;
        }
        
        /* --- ESTILOS DA ETAPA 1: CONFIGURAÇÃO DO CRONÔMETRO (Melhorado) --- */
        
        #timer-setup-view {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #1e2230;
            border-radius: 12px;
            border: 1px solid #30363d;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            text-align: left; 
        }
        #timer-setup-view h2 {
            text-align: center;
            color: #5c9dff;
            margin-bottom: 20px;
        }

        .timer-controls {
            display: flex; 
            flex-direction: column;
            gap: 15px; 
            max-width: 600px; 
            margin: 0;
            text-align: left;
        }
        .timer-controls label {
            font-size: 1em;
            color: #8b949e; 
            padding-top: 0; 
        }
        .timer-control-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        /* NOVO: Estilo para o seletor de modo do cronômetro */
        #timer-mode-select {
            padding: 10px 15px;
            font-size: 1em;
            border-radius: 8px; 
            border: 1px solid #30363d;
            background-color: #161b22; 
            color: #ecf0f1;
            width: 100%;
            box-sizing: border-box;
        }

        .timer-controls select, .timer-controls input {
            padding: 10px 15px;
            font-size: 1em;
            border-radius: 8px; 
            border: 1px solid #30363d;
            background-color: #161b22; 
            color: #ecf0f1;
            width: 100%;
            box-sizing: border-box;
        }
        .timer-controls input[type="number"] {
            width: 100%; 
        }
        
        /* Botão de Iniciar da Configuração */
        #start-timer-setup {
            background-color: #2ecc71; 
            color: #fff;
            max-width: 100%; 
            margin-top: 25px; 
            font-size: 1.1em;
            padding: 15px;
        }
        #start-timer-setup:hover {
            background-color: #27ae60;
        }

        /* --- ESTILOS DA ETAPA 2: CRONÔMETRO ATIVO (VISUAL) --- */
        #timer-running-view {
            padding-top: 20px;
        }
        /* NOVO: Cor diferente para Pomodoro */
        #running-subject-title.pomodoro-focus {
            color: #e74c3c; /* Vermelho para Foco Pomodoro */
        }
        #running-subject-title.pomodoro-break {
            color: #3498db; /* Azul para Descanso Pomodoro */
        }
        #timer-status-badge {
            font-size: 1em;
            padding: 6px 14px;
            border-radius: 25px;
        }
        #timer-display-circle {
            width: 320px; 
            height: 320px;
            border: 8px solid #5c9dff; 
            border-radius: 50%;
            margin: 40px auto;
            box-shadow: 0 0 25px rgba(92, 157, 255, 0.2); 
            /* PROPRIEDADES PARA GARANTIR A CENTRALIZAÇÃO DO TEMPO */
            display: flex; 
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #timer-display-running {
            /* AJUSTE DO TAMANHO DA FONTE PARA NÃO VAZAR */
            font-size: 4em; /* Reduzido de 4.5em para 4em */ 
            line-height: 1.1; 
            margin-bottom: 5px; 
        }
        #timer-display-circle span {
            font-size: 1.1em;
            color: #ecf0f1; 
        }
        
        /* Container para os botões */
        #timer-controls-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        
        /* NOVO ESTILO: Container para alinhar os 3 botões (lado a lado) */
        #timer-buttons-aligned {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px; /* Espaço entre os botões */
        }

        /* Estilo padrão para os 3 botões (Pause, Stop, Discard) - Todos com 80px */
        #pause-timer-running, #stop-timer-running, #discard-timer-running {
            width: 80px; 
            height: 80px;
            font-size: 2.5em;
            border-radius: 50%; 
            box-shadow: 0 6px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(255, 255, 255, 0.1); 
            max-width: none;
            padding: 0;
            line-height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease;
        }
        
        #pause-timer-running {
            background-color: #3498db; 
            color: #fff;
            border: 3px solid #2980b9;
        }
        #pause-timer-running:hover {
            background-color: #2980b9;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
        }
        
        #stop-timer-running {
            background-color: #374151; /* Cinza escuro */
            color: #ecf0f1;
            border: 3px solid #30363d;
        }
        #stop-timer-running:hover {
            background-color: #4b5563;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        
        #discard-timer-running {
            background-color: #e74c3c;
            color: #fff;
            border: 3px solid #c0392b;
        }
        #discard-timer-running:hover {
            background-color: #c0392b;
        }


        /* --- ESTILOS DO MODAL E INPUTS (CORRIGIDOS) --- */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* MUDANÇA: Torna o fundo mais opaco (quase sólido) */
            background-color: rgba(0, 0, 0, 0.95); 
            z-index: 2000;
            justify-content: center;
            align-items: center;
            display: none; 
        }
        /* Garante que o conteúdo do modal seja totalmente opaco e se destaque */
        /* --- CORREÇÃO: BARRA DE ROLAGEM NO MODAL --- */
.modal-overlay .modal-content {
    background-color: #1e2230; 
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    max-width: 450px;
    width: 90%;
    z-index: 2001;
    text-align: left;
    
    /* NOVAS LINHAS MÁGICAS PARA CABER NA TELA: */
    max-height: 90vh;       /* Limita a altura a 90% da tela */
    overflow-y: auto;       /* Cria barra de rolagem se for maior */
    position: relative;     /* Garante posicionamento correto */
    margin: 20px;           /* Margem de segurança nas bordas */
}

/* Ajuste para o Modo Claro (mantém as cores brancas que fizemos antes) */
body.light-mode .modal-content {
    background-color: #ffffff !important;
    border: 2px solid #0056b3 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

        .modal-field input, .modal-field textarea, .modal-field select { /* Adicionado 'select' aqui */
            width: 100%;
            padding: 10px 15px;
            font-size: 1em;
            border-radius: 6px;
            border: 1px solid #30363d;
            background-color: #161b22; 
            color: #ecf0f1;
            box-sizing: border-box;
            font-family: inherit;
        }
        .modal-field input[type="date"] {
            color-scheme: dark;
        }
        
        .modal-buttons button {
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-top: 15px;
            border: none;
        }
        #modal-save-btn {
            background-color: #2ecc71;
            color: #161b22;
        }
        #modal-save-btn:hover {
            background-color: #27ae60;
        }
        #modal-cancel-btn {
            background-color: #4b5563;
            color: #ecf0f1;
        }
        #modal-cancel-btn:hover {
            background-color: #374151;
        }

        /* --- ESTILOS DO MENU HAMBÚRGUER --- */
        #menu-toggle-btn {
            font-size: 2.2em;
            background: transparent;
            border: none;
            color: #ecf0f1;
            cursor: pointer;
            padding: 0 10px;
            line-height: 1;
        }
        #sidebar-menu {
            height: 100vh;
            width: 280px;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #1e2230; 
            border-right: 1px solid #30363d;
            box-shadow: 4px 0 15px rgba(0,0,0,0.1);
            z-index: 1000;
            padding: 20px;
            box-sizing: border-box;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            overflow-y: auto; /* Adicionado para permitir scroll */
        }
        #sidebar-menu.visible { transform: translateX(0); }
        #sidebar-menu h2 {
            margin-top: 10px;
            padding-bottom: 15px;
            border-bottom: 2px solid #30363d;
            color: #5c9dff; 
        }
        /* NOVO: Estilo para a barra de meta no menu lateral */
        #menu-goal-container {
             margin-bottom: 20px;
             padding-bottom: 20px;
             border-bottom: 1px solid #30363d;
        }
        /* NOVO: Estilo para o input no menu lateral */
        #weekly-goal-input-menu {
             padding: 8px 10px !important;
             font-size: 0.9em !important;
             width: 60px !important; /* Largura reduzida */
             height: auto !important;
             box-sizing: content-box !important;
             text-align: center !important;
             margin: 0 5px 0 0 !important;
        }

        #sidebar-menu ul { list-style: none; padding: 0; margin: 0; }
        #sidebar-menu li { margin-bottom: 8px; }
        #sidebar-menu a {
            display: block;
            padding: 10px 12px; 
            text-decoration: none;
            color: #ecf0f1;
            font-size: 1.1em;
            font-weight: 500;
            background-color: #161b22; 
    	    border: 1px solid #30363d; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        #sidebar-menu a:hover { 
            background-color: #30363d; 
            border-color: #5c9dff; 
        }
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }
        #overlay.visible { display: block; }

        /* --- NOVO ESTILO PARA STREAK NO MENU --- */
        #menu-streak-box {
            background-color: #e67e22; 
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 2px;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.4);
            transition: transform 0.2s ease;
            display: block;
            border: 1px solid #d35400;
        }
        #menu-streak-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.6);
        }
        #menu-streak-box .streak-value {
            font-size: 1.4em;
            display: inline-block;
            margin-right: 5px;
        }
        
        /* --- NOVO ESTILO PARA BOTÕES DE FILTRO DO DASHBOARD (PROFISSIONAL) --- */
        .filter-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 25px;
            padding: 15px;
            border: 1px solid #30363d;
            background-color: #1e2230; /* Fundo do bloco de controle */
            border-radius: 12px;
        }

        .filter-buttons-quick {
            display: flex;
            gap: 10px;
        }

        .filter-buttons-quick button, .filter-custom-range button {
            padding: 10px 15px;
            font-size: 0.9em;
            font-weight: 600;
            cursor: pointer;
            border-radius: 8px; /* Mais arredondado */
            border: 1px solid #30363d; /* Borda sutil */
            background-color: #161b22; /* Fundo mais escuro que o container */
            color: #ecf0f1;
            transition: all 0.2s ease;
        }

        .filter-buttons-quick button:hover, .filter-custom-range button:hover {
            background-color: #30363d;
            border-color: #5c9dff; /* Borda com a cor de destaque no hover */
        }

        .filter-buttons-quick button.active {
            background-color: #5c9dff; /* Cor de destaque para o ativo */
            border-color: #5c9dff;
            color: #161b22; /* Texto escuro no botão azul */
        }

        .filter-custom-range {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .filter-custom-range input[type="date"] {
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #30363d;
            background-color: #161b22;
            color: #ecf0f1;
            color-scheme: dark;
        }

        /* --- NOVO ESTILO: CONTROLES DE ALTERNÂNCIA DE GRÁFICO --- */
        .chart-switch-btn {
            padding: 10px 15px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            border-radius: 8px;
            border: 1px solid #30363d;
            background-color: #161b22;
            color: #ecf0f1;
            transition: all 0.2s ease;
        }

        .chart-switch-btn:hover {
            background-color: #30363d;
        }

        .chart-switch-btn.active {
            background-color: #5c9dff; /* Cor de destaque para o ativo */
            border-color: #5c9dff;
            color: #161b22;
        }

        /* Garante que o container de gráficos fique centralizado */
        .stats-container-single {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            /* Adicionado padding para separar do logbook */
            padding-bottom: 20px; 
            border-bottom: 2px solid #30363d;
        }
        /* LARGURA DEFINIDA PARA OS CARDS NO MODO SINGLE */
        .stats-container-single .stats-box {
            min-width: 350px;
            max-width: 450px;
            flex: 0 0 auto; /* Não cresce nem encolhe */
            background-color: #1e2230;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #30363d;
        }
        
        /* NOVO ESTILO PARA REDUÇÃO DO TAMANHO DOS GRÁFICOS PIZZA (SOLICITAÇÃO) */

        .stats-box {
            /* Mantido para elementos fora do single-container (como Horas por Dia) */
            flex: 1;
            min-width: 300px; /* Garante que não fiquem muito pequenos */
        }

        .stats-chart-container {
            /* Novo contêiner para limitar o tamanho do gráfico */
            max-width: 350px; 
            margin: 0 auto; /* Centraliza o gráfico dentro do stats-box */
        }
        
        /* LÓGICA DE METAS */
        .goal-container {
            /* Centraliza todo o conteúdo do bloco de meta */
            text-align: center; 
            padding: 20px;
            background-color: #1e2230;
            border-radius: 12px;
            border: 1px solid #30363d;
        }

        /* NOVO ESTILO PROFISSIONAL PARA O INPUT E BOTÃO DA META */
        .goal-input-group {
            display: flex;
            justify-content: center; /* Centraliza o grupo de input e botão */
            align-items: center;
            margin: 15px auto 20px auto;
            max-width: 350px; /* Limita a largura do grupo para ficar mais coeso */
        }

        .goal-input-group label {
            margin-right: 10px;
            font-weight: 500;
            color: #8b949e;
            white-space: nowrap;
        }

        .goal-input-group input {
            width: 80px; /* Largura definida para o número de horas */
            padding: 10px 10px;
            font-size: 1em;
            border-radius: 8px 0 0 8px; /* Borda arredondada apenas à esquerda */
            border: 1px solid #5c9dff; /* Borda azul de destaque */
            background-color: #161b22;
            color: #ecf0f1;
            text-align: right;
            box-sizing: border-box;
            /* Remove a borda direita para se juntar ao botão */
            border-right: none; 
        }

        .goal-input-group button {
            padding: 10px 15px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            border-radius: 0 8px 8px 0; /* Borda arredondada apenas à direita */
            border: 1px solid #5c9dff; /* Borda azul de destaque */
            background-color: #5c9dff;
            color: #161b22;
            transition: background-color 0.2s;
            height: 42px; /* Ajusta a altura para alinhar com o input */
            line-height: 1.2;
        }

        .goal-input-group button:hover {
            background-color: #4a8ed9;
        }

        /* Melhoria de Usabilidade no Input do Editor de Cronograma */
        #new-subject-input {
            background-color: #161b22 !important; /* Força o fundo escuro */
            color: #ecf0f1 !important; /* Garante que a cor do texto seja clara */
            border: 1px solid #30363d;
            padding: 10px 15px;
            border-radius: 8px;
        }

        #logbook-table {
            width: 100%;
            border-collapse: collapse; /* Garante linhas finas e unidas */
        }

        #logbook-table th, #logbook-table td {
            /* Define a borda VISÍVEL e UNIFORME para todas as células (Data, Período, Matéria, etc.) */
            border: 1px solid #5c9dff; /* Azul de destaque para todas as divisórias */
            padding: 8px; /* Espaçamento interno */
            text-align: center; /* Centraliza o texto */
        }

        /* Destaque visual para o Cabeçalho da Tabela */
        #logbook-table th {
            background-color: #252a35; /* Fundo levemente diferente para o cabeçalho */
            font-weight: bold;
            color: #5c9dff; /* Texto do cabeçalho na cor de destaque */
        }
        
        /* Ajuste Light Mode para as divisórias */
        body.light-mode #logbook-table th, 
        body.light-mode #logbook-table td {
            /* No modo claro, usa um azul mais escuro para manter a visibilidade */
            border: 1px solid #0056b3; 
            color: #1e2230;
        }
        
        body.light-mode #logbook-table th {
            background-color: #e6e6e6; /* Fundo do cabeçalho no modo claro */
            color: #0056b3;
        }
        /* --- FIM ESTILOS DE LOG DE SESSÕES --- */

        
        /* --- ESTILOS DO MODO CLARO (Ajustados para o novo layout) --- */
        body.light-mode {
            background-color: #f4f7f6; 
            color: #1e2230; 
        }
        
        body.light-mode .container {
            background-color: #ffffff; 
            border-color: #dfe7e5; 
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        }
        
        body.light-mode .header {
            border-bottom-color: #dfe7e5;
        }
        body.light-mode .header-left h1 { color: #0056b3; } 
        
        /* Logomarca no ciclo em modo claro */
        body.light-mode .logo-placeholder-card {
            background-color: #ffffff; 
            border-color: #dfe7e5;
        }
        body.light-mode .logo-placeholder-card img {
             opacity: 0.8; /* Aumenta a opacidade do logo no light mode */
        }

        /* Menu Lateral no Modo Claro */
        body.light-mode #sidebar-menu {
             background-color: #f4f7f6; 
             border-right: 1px solid #dfe7e5;
        }
        body.light-mode #sidebar-menu h2 {
             color: #0056b3; 
             border-bottom-color: #dfe7e5;
        }
        body.light-mode #sidebar-menu li {
            margin-bottom: 8px;
        }
        body.light-mode #sidebar-menu a {
            background-color: #ffffff; 
            border: 1px solid #dfe7e5;
            color: #1e2230;
        }

        body.light-mode #sidebar-menu a:hover { 
            background-color: #f4f7f6; 
            border-color: #0056b3; 
        }
        
        /* Menu Meta Light Mode */
        body.light-mode #menu-goal-container h3 {
             color: #0056b3 !important;
             border-bottom-color: #dfe7e5 !important;
        }
        body.light-mode #menu-goal-container #goal-display-text-menu {
            color: #1e2230 !important;
        }
        body.light-mode #weekly-goal-input-menu {
            background-color: #ffffff !important;
            color: #1e2230 !important;
        }


        /* Streak Box Light Mode */
        body.light-mode #menu-streak-box {
            background-color: #f39c12; 
            color: #1e2230; 
            border: 1px solid #e67e22;
        }

        /* Ciclo Cards Light Mode */
        body.light-mode .day-column {
            background-color: #ffffff;
            border-color: #dfe7e5;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }
        body.light-mode .day-column h2 {
            color: #0056b3;
            border-bottom-color: #dfe7e5;
        }
        body.light-mode .day-column li {
            /* CORRIGIDO: Retirado o background fixo para permitir a cor da matéria */
        }

        /* Menu Rápido Vertical Light Mode */
        body.light-mode .button-group-vertical {
            background-color: #ffffff;
            border-color: #dfe7e5;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }
        body.light-mode .button-group-vertical button {
            background: #f4f7f6;
            color: #1e2230;
            border-left-color: #0056b3;
        }
        body.light-mode .button-group-vertical button:hover {
            background: #ffffff;
        }
        body.light-mode #reset-button, body.light-mode #reset-cycle-progress-button {
            background-color: #e74c3c;
            color: #fff;
            border-left-color: #c0392b;
        }
        
        /* Checkbox do Ciclo em Light Mode */
        body.light-mode .day-column input[type="checkbox"] {
            accent-color: #0056b3; 
        }
        
        /* Correção Inputs Modal Light Mode */
        body.light-mode .modal-field input, 
        body.light-mode .modal-field textarea,
        body.light-mode .modal-field input[type="date"],
        body.light-mode .modal-field select {
            background-color: #f4f7f6;
            color: #1e2230;
            border-color: #c0c0c0;
            color-scheme: light; 
        }
        
        /* Cronômetro Light Mode */
        body.light-mode #timer-setup-view {
            background-color: #ffffff;
            border-color: #dfe7e5;
        }
        body.light-mode #timer-display-circle {
            border: 8px solid #3498db;
            box-shadow: 0 0 25px rgba(52, 152, 219, 0.2);
        }
        /* NOVO: Cores de Pomodoro Light Mode */
        body.light-mode #running-subject-title.pomodoro-focus {
            color: #e74c3c; 
        }
        body.light-mode #running-subject-title.pomodoro-break {
            color: #0056b3; 
        }
        body.light-mode #running-subject-title {
            color: #0056b3;
        }
        body.light-mode #timer-display-circle span {
            color: #1e2230;
        }
        body.light-mode #pause-timer-running {
            background-color: #2ecc71; 
        }
        body.light-mode #pause-timer-running:hover {
            background-color: #27ae60;
        }

        /* Dashboard Filter Buttons Light Mode */
        body.light-mode .filter-buttons-quick button, body.light-mode .filter-custom-range button {
            background-color: #ffffff;
            border-color: #c0c0c0;
            color: #1e2230;
        }
        body.light-mode .filter-buttons-quick button:hover, body.light-mode .filter-custom-range button:hover {
            background-color: #f4f7f6;
            border-color: #0056b3;
        }
        body.light-mode .filter-buttons-quick button.active {
            background-color: #0056b3;
            border-color: #0056b3;
            color: #ffffff;
        }
        body.light-mode .filter-custom-range input[type="date"] {
            background-color: #ffffff;
            color: #1e2230;
            color-scheme: light;
        }
        body.light-mode .filter-controls {
            background-color: #ffffff;
            border-color: #dfe7e5;
        }
        
        /* Alternância de Gráfico Light Mode */
        body.light-mode .chart-switch-btn {
            background-color: #ffffff;
            border-color: #c0c0c0;
            color: #1e2230;
        }
        body.light-mode .chart-switch-btn:hover {
            background-color: #f4f7f6;
        }
        body.light-mode .chart-switch-btn.active {
            background-color: #0056b3;
            border-color: #0056b3;
            color: #ffffff;
        }

        body.light-mode .goal-container {
            background-color: #ffffff;
            border-color: #dfe7e5;
        }
        
        /* --- CORREÇÃO PRINCIPAL: FORÇA O BLOCO PARA MODO ESCURO E O TEXTO CLARO --- */
        
        /* Fundo dos Cards de Gráfico */
        /* O stats-container-single .stats-box já define o background escuro para gráficos do dashboard */
        body.light-mode .stats-container-single .stats-box {
            /* Mantém o fundo escuro do modo dark */
            background-color: #1e2230 !important; 
            border-color: #30363d;
            /* Força a cor base do texto para claro, resolvendo a ilegibilidade das legendas */
            color: #ecf0f1 !important; 
        }
        
        /* Força os títulos H4 dentro dos cards de gráfico (Tempo por Matéria/Atividade) para CLARO */
        body.light-mode .stats-container-single .stats-box h4 {
            color: #ecf0f1 !important;
        }
        
        /* Força os títulos H4 de tela cheia (Minhas Medalhas, Horas por Dia) para ESCURO (pois estão sobre o fundo claro da página) */
        body.light-mode #medal-container h4, 
        body.light-mode .stats-box-full h4 {
            color: #1e2230 !important; /* Cor escura no Light Mode */
        }
        
        /* Garante que o container de tela cheia não mude a cor de fundo (Seus filhos mudam) */
        body.light-mode .stats-box-full {
             background-color: transparent !important; /* Mantém o fundo transparente/do container */
             border: none !important;
             /* Força o texto ao redor para ser escuro, como os títulos de tela cheia */
             color: #1e2230 !important; 
        }
        
        /* Ajuste no Light Mode para o novo input group */
        body.light-mode .goal-input-group input {
            background-color: #f4f7f6;
            color: #1e2230;
            border-color: #0056b3;
        }
        body.light-mode .goal-input-group button {
            background-color: #0056b3;
            color: #ffffff;
            border-color: #0056b3;
        }
        body.light-mode .goal-input-group button:hover {
            background-color: #004494;
        }

        /* --- ESTILOS DO FLASHCARD (NOVO DESIGN) --- */

        /* Contêiner principal para a área de estudo */
        .flashcard-main-content {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .flashcard-studier, .flashcard-creator {
            max-width: 500px;
            margin: 0 0 30px 0;
            padding: 20px;
            background-color: #1e2230;
            border-radius: 12px;
            border: 1px solid #30363d;
            text-align: left;
            flex: 1 1 450px;
        }
        .flashcard-studier {
            min-width: 450px; /* Garante que o card tenha espaço */
        }

        /* Bloco de Instruções de Markdown (NOVO) */
        .flashcard-instructions {
            flex: 0 0 250px;
            max-width: 250px;
            padding: 20px;
            background-color: #1e2230;
            border-radius: 12px;
            border: 1px solid #30363d;
            text-align: left;
            order: -1; /* Coloca à esquerda */
            height: fit-content;
        }
        .flashcard-instructions h4 {
            color: #f39c12;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #30363d;
        }
        .flashcard-instructions p {
            font-size: 0.9em;
            margin-bottom: 15px;
            color: #8b949e;
        }
        .flashcard-instructions ul {
            list-style: none;
            padding: 0;
            font-size: 0.9em;
        }
        .flashcard-instructions li {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        body.light-mode .flashcard-instructions {
             background-color: #ffffff;
             border-color: #dfe7e5;
        }
        body.light-mode .flashcard-instructions h4 {
            color: #e67e22;
            border-bottom-color: #dfe7e5;
        }
        body.light-mode .flashcard-instructions p, 
        body.light-mode .flashcard-instructions li {
            color: #1e2230;
        }


        #fc-card-container {
            perspective: 1000px; /* Define a perspectiva para o efeito 3D */
            width: 100%;
            max-width: 500px;
            height: 250px; /* Altura fixa para visualização */
            margin: 20px auto;
        }

        #fc-card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s; /* Velocidade da animação de virar */
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        #fc-card.is-flipped {
            transform: rotateY(180deg);
        }

        #fc-card-front, #fc-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* Oculta a parte de trás durante a rotação */
            
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            
            padding: 20px;
            border-radius: 12px;
            font-size: 1.3em; /* Tamanho da fonte confortável */
            font-weight: 600;
            text-align: center;
            box-sizing: border-box;
            line-height: 1.4;

            /* --- AQUI ESTÁ A CORREÇÃO --- */
            overflow-y: auto;       /* Cria barra de rolagem vertical se necessário */
            overflow-x: hidden;     /* Evita barra de rolagem horizontal */
            word-wrap: break-word;  /* Quebra palavras muito longas para não vazar */
            word-break: break-word; /* Reforço para garantir a quebra */
        }

        /* --- OPCIONAL: Estilo para deixar a barra de rolagem mais bonita e discreta --- */
        #fc-card-front::-webkit-scrollbar, 
        #fc-card-back::-webkit-scrollbar {
            width: 6px; /* Barra fininha */
        }
        #fc-card-front::-webkit-scrollbar-track, 
        #fc-card-back::-webkit-scrollbar-track {
            background: transparent; 
        }
        #fc-card-front::-webkit-scrollbar-thumb, 
        #fc-card-back::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2); /* Cor suave da barra */
            border-radius: 10px;
        }

        #fc-card-front {
            background-color: #5c9dff; /* Azul de destaque (Frente) */
            color: #1e2230;
            border: 1px solid #3498db;
        }

        #fc-card-back {
            background-color: #2ecc71; /* Verde (Verso) */
            color: #1e2230;
            transform: rotateY(180deg); /* Inverte a parte de trás inicialmente */
            border: 1px solid #1abc9c;
        }

        #fc-study-controls {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        #fc-flip-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
            background-color: #f39c12; /* Laranja */
            color: #1e2230;
        }

        #fc-flip-btn:hover {
            background-color: #e67e22;
        }
        
        /* NOVO: Estilos para os botões SRS */
        #fc-srs-controls {
            display: flex;
            justify-content: center;
            gap: 10px; /* Espaçamento menor entre os botões SRS */
            margin-top: 30px;
        }
        #fc-srs-controls button {
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
            width: 120px; /* Largura para padronizar */
        }
        #fc-srs-easy-btn {
            background-color: #2ecc71; /* Verde */
            color: #1e2230;
        }
        #fc-srs-medium-btn {
            background-color: #3498db; /* Azul */
            color: #fff;
        }
        #fc-srs-hard-btn {
            background-color: #e74c3c; /* Vermelho */
            color: #fff;
        }
        #fc-srs-easy-btn:hover { background-color: #27ae60; }
        #fc-srs-medium-btn:hover { background-color: #2980b9; }
        #fc-srs-hard-btn:hover { background-color: #c0392b; }


        /* Estilos para a área de criação de cards */
        .flashcard-creator {
            /* Removido o max-width e margin auto para usar o flex-wrap */
            max-width: 500px;
            margin: 0;
            padding: 20px;
            background-color: #1e2230;
            border-radius: 12px;
            border: 1px solid #30363d;
            text-align: left;
        }

        .flashcard-creator label {
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
            color: #8b949e;
        }

        .flashcard-creator textarea {
            min-height: 80px;
            resize: vertical;
        }

        #fc-save-card-btn {
            margin-top: 20px;
            width: 100%;
            background-color: #2ecc71;
            color: #1e2230;
            font-size: 1.1em;
        }

        /* Estilos da lista de cards */
        #fc-list-container {
            max-width: 800px;
            margin: 20px auto;
        }
        /* Corrigir o Light Mode para os novos elementos de flashcards (Faltou na rodada anterior) */
        body.light-mode .flashcard-studier, body.light-mode .flashcard-creator {
            background-color: #ffffff;
            border-color: #dfe7e5;
        }
        body.light-mode #fc-card-front {
            background-color: #92b8f8;
            color: #1e2230;
        }
        body.light-mode #fc-card-back {
            background-color: #5cdb95;
            color: #1e2230;
        }
        body.light-mode #fc-flip-btn {
            background-color: #f9c784;
            color: #1e2230;
        }
        body.light-mode #fc-srs-easy-btn {
            background-color: #2ecc71;
            color: #1e2230;
        }
        body.light-mode #fc-srs-medium-btn {
            background-color: #3498db;
            color: #ffffff;
        }
        body.light-mode #fc-srs-hard-btn {
            background-color: #e74c3c;
            color: #ffffff;
        }
        
        /* Estilo para quebra de linha em Flashcards */
        .flashcard-studier p {
            margin: 0;
            padding: 0;
        }
        .flashcard-studier strong {
            font-weight: 900;
        }
        .flashcard-studier em {
            font-style: italic;
        }
        /* NOVO: Estilo para sublinhado */
        .flashcard-studier u {
            text-decoration: underline;
        }

        /* Estilo do botão de Ação na Tabela */
        #fc-list-table button {
            margin-left: 5px;
            padding: 5px 10px;
            font-size: 0.9em;
            font-weight: 500;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        /* Cor do botão de Edição na lista */
        .fc-edit-btn {
            background-color: #3498db; /* Azul de Edição */
            color: #fff;
        }
        .fc-edit-btn:hover {
            background-color: #2980b9;
        }
        
        /* Cor do botão de Excluir na lista */
        .fc-delete-btn {
            background-color: #e74c3c; /* Vermelho de Excluir */
            color: #fff;
        }
        .fc-delete-btn:hover {
            background-color: #c0392b;
        }


        
        /* NOVO ESTILO: Gerenciamento de Matérias (Biblioteca) */
        .subject-management-box {
            max-width: 600px; 
            margin: 0 auto 30px auto; 
            padding: 20px;
            background-color: #1e2230;
            border: 1px solid #30363d;
            border-radius: 12px;
            text-align: left;
        }
        body.light-mode .subject-management-box {
            background-color: #ffffff;
            border-color: #dfe7e5;
        }
        
        /* Estilos da barra de progresso */
        .progress-bar-container {
            width: 100%;
            height: 15px;
            background-color: #30363d;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-bar-fill {
            height: 100%;
            background-color: #2ecc71; /* Verde */
            width: 0%;
            transition: width 0.5s ease;
        }
        
        /* Estilo para tarefas (Reutiliza classes de review) */
        #task-list-ul {
            list-style: none;
            padding: 0;
        }
        #task-list-ul li.task-item {
            display: flex;
            align-items: center;
            background-color: #1e2230;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 10px 15px;
            margin-bottom: 8px;
            transition: all 0.2s;
        }
        body.light-mode #task-list-ul li.task-item {
            background-color: #ffffff;
            border-color: #dfe7e5;
            color: #1e2230;
        }
        #task-list-ul li.task-item label {
            flex-grow: 1;
            margin-left: 10px;
            font-size: 1em;
            cursor: pointer;
        }
        #task-list-ul li.task-item input[type="checkbox"] {
            min-width: 18px;
            min-height: 18px;
            cursor: pointer;
            accent-color: #5c9dff;
            margin: 0;
        }
        body.light-mode #task-list-ul li.task-item input[type="checkbox"] {
            accent-color: #0056b3;
        }
        #task-list-ul li.task-item.done {
            opacity: 0.6;
            text-decoration: line-through;
        }
        .delete-task-btn {
            background-color: #e74c3c;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .delete-task-btn:hover {
            background-color: #c0392b;
        }
        /* --- ESTILOS DE TAREFAS (ATUALIZADO COM PRAZOS) --- */

.task-adder {
    display: flex;
    gap: 10px;
    max-width: 700px; /* Aumentei um pouco para caber a data */
    margin: 0 auto 30px auto;
    flex-wrap: wrap; /* Permite quebrar linha no celular */
}

.task-adder input[type="text"] {
    flex: 2; /* O texto ocupa mais espaço */
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 8px;
    border: 1px solid #30363d;
    background-color: #161b22;
    color: #ecf0f1;
}

/* NOVO: Estilo do input de data */
.task-adder input[type="date"] {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #30363d;
    background-color: #161b22;
    color: #ecf0f1;
    color-scheme: dark; /* Garante ícone de calendário branco */
    min-width: 130px;
}

.task-adder button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    background-color: #5c9dff;
    color: #1e2230;
    cursor: pointer;
}
.task-adder button:hover {
    background-color: #4a8ed9;
}

/* NOVO: Etiquetas de Prazo na Lista */
.task-deadline-badge {
    font-size: 0.8em;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.deadline-late { background-color: #e74c3c; color: white; } /* Vermelho (Atrasado) */
.deadline-today { background-color: #e67e22; color: white; } /* Laranja (Hoje) */
.deadline-soon { background-color: #f1c40f; color: #1e2230; } /* Amarelo (Amanhã/Breve) */
.deadline-future { background-color: #3498db; color: white; } /* Azul (Futuro) */
.deadline-done { background-color: #2ecc71; color: #1e2230; } /* Verde (Concluído) */

/* Ajuste para inputs no modo claro */
body.light-mode .task-adder input[type="text"],
body.light-mode .task-adder input[type="date"] {
     background-color: #ffffff;
     color: #1e2230;
     border-color: #dfe7e5;
     color-scheme: light;
}

/* --- CALENDÁRIO DE TAREFAS --- */
.calendar-container {
    max-width: 700px;
    margin: 0 auto 30px auto;
    background-color: #1e2230;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-header h3 {
    margin: 0;
    color: #5c9dff;
    font-size: 1.3em;
    border: none;
    padding: 0;
}

.calendar-nav-btn {
    background-color: #30363d;
    color: #ecf0f1;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.calendar-nav-btn:hover { background-color: #5c9dff; color: #1e2230; }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 dias da semana */
    gap: 5px;
}

.calendar-day-name {
    text-align: center;
    font-weight: bold;
    color: #8b949e;
    font-size: 0.9em;
    padding-bottom: 10px;
}

.calendar-day {
    aspect-ratio: 1; /* Faz ficar quadrado */
    border: 1px solid #30363d;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 5px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s;
}

.calendar-day:hover { background-color: #252a35; }
.calendar-day.empty { border: none; background: transparent; cursor: default; }
.calendar-day.today { border-color: #5c9dff; background-color: rgba(92, 157, 255, 0.1); }

/* Bolinha de Contagem de Tarefas */
.task-count-badge {
    margin-top: 5px;
    background-color: #e67e22; /* Laranja */
    color: white;
    font-size: 0.75em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.task-count-badge.high-load { background-color: #e74c3c; } /* Vermelho se tiver muitas */

/* Modo Claro */
body.light-mode .calendar-container {
    background-color: #ffffff;
    border-color: #dfe7e5;
}
body.light-mode .calendar-day {
    border-color: #dfe7e5;
    color: #1e2230;
}
body.light-mode .calendar-day:hover { background-color: #f4f7f6; }
body.light-mode .calendar-nav-btn {
    background-color: #f4f7f6;
    color: #1e2230;
}

        .task-item-empty {
            color: #8b949e;
            text-align: center;
            padding: 20px;
        }
        
        /* Estilos do Nome do Plano */
        #plan-name-editor {
            max-width: 600px;
            margin: 0 auto 30px auto;
            padding: 20px;
            background-color: #1e2230;
            border-radius: 12px;
            border: 1px solid #30363d;
            text-align: center;
        }
        
        /* NOVO: Estilo para o modo de visualização (Título e Lápis) */
        #plan-name-view-mode {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        #current-plan-name {
            font-size: 1.8em;
            color: #2ecc71;
            margin: 0;
            font-weight: 700;
        }
        
        #edit-plan-name-btn {
            background: none;
            border: none;
            color: #5c9dff;
            cursor: pointer;
            font-size: 1.5em; /* Lápis grande */
            line-height: 1;
            padding: 5px;
            transition: color 0.2s;
        }
        #edit-plan-name-btn:hover {
            color: #3498db;
        }
        
        /* NOVO: Estilo para o modo de edição (Input e Botão Salvar) */
        #plan-name-edit-mode {
             display: none; /* Oculto por padrão */
             flex-direction: column;
             align-items: center;
        }

        #plan-name-editor .input-group {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            margin-top: 15px;
        }
        #plan-name-input {
            flex-grow: 1;
            padding: 10px 15px;
            font-size: 1.1em;
            border-radius: 8px;
            border: 1px solid #5c9dff;
            background-color: #161b22;
            color: #ecf0f1;
            max-width: 350px;
        }
        #save-plan-name-btn {
            padding: 10px 15px;
            font-size: 1em;
            font-weight: bold;
            border-radius: 8px;
            border: none;
            background-color: #f39c12;
            color: #1e2230;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        #save-plan-name-btn:hover {
            background-color: #e67e22;
        }

        /* Estilos Light Mode para o editor de nome */
        body.light-mode #plan-name-editor {
            background-color: #ffffff;
            border-color: #dfe7e5;
        }
        body.light-mode #plan-name-input {
            background-color: #f4f7f6;
            color: #1e2230;
            border-color: #0056b3;
        }
        body.light-mode #current-plan-name {
            color: #0056b3;
        }
        body.light-mode #edit-plan-name-btn {
            color: #0056b3;
        }
        body.light-mode #edit-plan-name-btn:hover {
            color: #3498db;
        }
        
        /* Estilos Light Mode para o bloco de exportação */
        body.light-mode #export-controls {
            background-color: #ffffff;
            border-color: #dfe7e5;
        }
        body.light-mode #export-controls h4 {
            color: #2ecc71 !important; /* Mantém o verde */
            border-bottom-color: #dfe7e5 !important;
        }
        body.light-mode #export-controls span {
            color: #1e2230 !important;
        }
        body.light-mode #export-logbook-csv-button {
            background-color: #f39c12;
        }
        body.light-mode #export-logbook-json-button {
            background-color: #3498db;
        }
        body.light-mode #export-active-chart-button {
            background-color: #1abc9c;
        }

        /* Garante que os inputs do modal também fiquem visíveis */
        .modal-field input, 
        .modal-field textarea, 
        .modal-field select {
            border-color: #5c9dff !important;
        }
        
        /* Ajuste para o Modo Claro (opcional, para manter contraste) */
        body.light-mode .container,
        body.light-mode .day-column,
        body.light-mode .button-group-vertical,
        body.light-mode .goal-container,
        body.light-mode .stats-box,
        body.light-mode #timer-setup-view {
            border-color: #0056b3 !important; /* Azul mais escuro para fundo branco */
        }

/* --- VISIBILIDADE DO MENU E TEMA NO MODO CLARO --- */
        body.light-mode #menu-toggle-btn,
        body.light-mode #theme-toggle-btn {
            color: #0056b3 !important; /* Azul escuro para contraste no fundo branco */
            /* Se preferir preto, use: color: #1e2230 !important; */
        }
        
        /* Efeito ao passar o mouse no modo claro */
        body.light-mode #menu-toggle-btn:hover,
        body.light-mode #theme-toggle-btn:hover {
            color: #3498db !important; /* Azul mais claro no hover */
            background-color: rgba(0,0,0,0.05); /* Fundo sutil ao passar o mouse */
            border-radius: 4px;
        }

/* --- RESPONSIVIDADE PARA CELULARES (MOBILE) - A FUSÃO PERFEITA --- */
@media (max-width: 768px) {
    
    /* 1. Ajustes Gerais (Baseado no código que você gostou) */
    body {
        padding: 10px;
    }
    .container {
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        /* Garante que o container centralize o conteúdo */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* --- 2. HEADER CORRIGIDO (Data em Cima, Logo Maior no Meio) --- */
    .header {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        gap: 10px;
        position: static; /* Solta os elementos presos */
        margin-bottom: 20px;
        border-bottom: 2px solid #30363d;
        padding-bottom: 20px;
        width: 100%;
    }

    /* Parte 1: Data e Botões (Forçados para o TOPO) */
    .header-right {
        position: static !important;
        order: 1; 
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
        justify-content: center !important;
    }
    .header-right #datetime {
        align-items: center !important;
        text-align: center !important;
        width: 100%;
    }
    .header-right .control-buttons {
        justify-content: center;
        margin-top: 5px;
    }

    /* Parte 2: Logo (No MEIO e tamanho bom) */
    .header-logo-container {
        order: 2; 
        width: 100%;
        min-height: auto !important; /* Remove altura fixa que quebrava */
        margin: 10px auto !important;
        display: flex;
        justify-content: center;
    }
    #main-logo {
        width: 150px !important; /* Tamanho calibrado */
        height: auto;
    }

    /* Parte 3: Título Esquerdo (Vai para baixo se existir) */
    .header-left {
        position: static !important;
        order: 3;
        width: 100%;
        justify-content: center;
        text-align: center;
    }


    /* --- 3. BLOCOS E CRONOGRAMA (Baseado no código que alinhou certo) --- */
    
    /* Transforma colunas em pilhas verticais */
    #cycle-view-content {
        flex-direction: column;
        width: 100%;
    }
    
    #dynamic-content-container {
        width: 100%;
        min-width: 100%;
        order: 1;
    }
    
    /* AQUI ESTÁ O SEGREDO DOS BLOCOS ALINHADOS */
    .schedule-grid {
        display: grid;
        grid-template-columns: 1fr; /* Força uma única coluna larga */
        width: 100%;
        gap: 15px;
        margin: 0;
    }
    
    /* Garante que o card ocupe 100% */
    .day-column {
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Menu Rápido vai para baixo */
    .button-group-vertical {
        width: 100%;
        order: 2; 
        margin-top: 20px;
    }

    /* CORREÇÃO DOS BOTÕES DE MODO (Dentro do Mobile) */
    #cycle-selector {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        padding: 0 5px;
        box-sizing: border-box;
    }

    #select-schedule-mode, 
    #select-cycle-mode {
        width: 100% !important;
        margin: 0 !important; /* Remove a margem teimosa */
        display: flex !important;
        justify-content: center;
        align-items: center;
        height: 50px !important;
    }
    
    /* Nome do Plano */
    #plan-name-editor {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- 4. OUTROS AJUSTES VISUAIS --- */

    /* Ciclo de Estudos */
    #cycle-mode-view > div[style*="display: flex"] {
        flex-direction: column;
        align-items: center;
    }
    
    /* Cronômetro (Círculo) */
    #timer-display-circle {
        width: 260px;
        height: 260px;
        margin: 20px auto;
    }
    #timer-display-running {
        font-size: 3em;
    }
    #timer-buttons-aligned {
        gap: 10px;
        justify-content: center;
    }
    #pause-timer-running, #stop-timer-running, #discard-timer-running {
        width: 60px;
        height: 60px;
        font-size: 1.8em;
        line-height: 60px;
    }

    /* Dashboard e Gráficos */
    .stats-container-single {
        flex-direction: column;
        align-items: center;
    }
    .stats-box {
        width: 100%;
        max-width: 100%;
    }
    
    /* Filtros empilhados */
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-buttons-quick {
        justify-content: space-between;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .filter-custom-range {
        flex-direction: column;
        width: 100%;
    }
    .filter-custom-range input {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Tabelas com Scroll */
    .logbook-container {
        overflow-x: auto;
        display: block;
        width: 100%;
    }
    #logbook-table {
        min-width: 600px;
    }

    /* --- CORREÇÃO FLASHCARDS MOBILE --- */
    .flashcard-main-content {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    /* Remove a largura mínima que quebrava a tela */
    .flashcard-studier, 
    .flashcard-creator,
    .flashcard-instructions {
        min-width: 0 !important; /* O segredo: permite encolher abaixo de 450px */
        width: 100% !important;  /* Ocupa a largura do celular */
        margin: 0 0 20px 0 !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
    }

    /* Ajusta a ordem: Estudo em cima, Instruções embaixo */
    .flashcard-studier { order: 1; }
    .flashcard-creator { order: 3; }
    .flashcard-instructions { order: 2; }

    /* Ajusta o tamanho do card 3D */
    #fc-card-container {
        height: 320px !important; /* Altura fixa confortável para mobile */
        width: 100% !important;
        margin: 10px 0 !important;
    }
    
    /* Ajusta o tamanho do texto dentro do card no celular */
    #fc-card-front, #fc-card-back {
        font-size: 1.1em !important; /* Fonte um pouco menor para caber mais texto */
        padding: 15px !important;
    }

    /* Organiza as abas de matérias (que ficam uma em cima da outra no mobile) */
    #fc-subject-tabs {
        justify-content: center !important;
    }
    .tab-button {
        flex-grow: 1 !important; /* Botões ocupam espaço igual */
        font-size: 0.9em !important;
    }
    
    /* Inputs de Tarefas */
    .task-adder {
        flex-direction: column;
    }
    .task-adder input, .task-adder button {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Menu Lateral */
    #sidebar-menu {
        width: 80%;
        height: 100vh; /* Garante que ocupe a tela inteira (viewport height) */
        overflow-y: auto; /* A regra MÁGICA para aparecer a barra de rolagem */
        padding-bottom: 70px; /* Adiciona espaço extra para não cortar o conteúdo no mobile */
    }
    
    /* Criação de Matéria */
    .subject-management-box {
        width: 100%;
        box-sizing: border-box;
    }
    #new-subject-input {
        margin-bottom: 10px;
        width: 100%;
    }
    #add-new-subject-btn {
        width: 100% !important;
    }
/* --- CORREÇÃO: CAMPO DE CRIAR MATÉRIA (MOBILE) --- */
    
    /* 1. Força os itens a ficarem um embaixo do outro */
    #subject-management-view div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important; /* Estica para ocupar a largura toda */
        gap: 10px !important;
    }

    /* 2. Garante que a caixa de texto tenha altura e largura corretas */
    #new-subject-input {
        width: 100% !important;
        min-height: 45px !important; /* Altura confortável para o dedo */
    }

    /* 3. Centraliza o conjunto "Texto Cor + Botão" */
    #subject-management-view div[style*="min-width: 60px"] {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* AQUI ESTÁ O SEGREDO: Centraliza tudo */
        align-items: center !important;
        gap: 10px !important; /* Espaço entre o texto e o botão */
        margin: 10px 0 !important;
    }
    
    /* 4. Deixa o botão de cor com tamanho fixo "normal" */
    #new-subject-color {
        flex: none !important; /* Impede de esticar */
        width: 100px !important; /* Largura fixa agradável */
        height: 40px !important; /* Altura boa para o dedo */
        border-radius: 8px !important;
        cursor: pointer !important;
        padding: 0 !important; /* Remove borda interna estranha */
    }
    /* 5. Botão Criar ocupa a largura toda */
    #add-new-subject-btn {
        width: 100% !important;
        margin-top: 5px !important;
    }

/* --- CORREÇÃO: ÁREA DE EDITAR COR (MOBILE) --- */

    /* 6. Centraliza o container do input "Nova Cor" */
    /* O seletor abaixo pega a div que estava alinhada à direita no desktop */
    #subject-management-view div[style*="text-align: right"] {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important; /* Centraliza o conjunto Label + Input */
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* 7. Padroniza o tamanho do botão de cor de edição */
    #edit-subject-color {
        width: 100px !important; /* Largura igual ao de criar */
        height: 40px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }

    /* 8. Botão "Salvar Cor" grande e fácil de clicar */
    #save-subject-color-btn {
        width: 100% !important;
        height: 45px !important;
        margin-top: 5px !important;
    }
    
    /* 9. Garante que o select de escolher a matéria ocupe tudo */
    #edit-subject-select {
        width: 100% !important;
        min-height: 45px !important;
    }

}

/* --- CORREÇÃO: MODO CICLO NO TEMA CLARO --- */
        body.light-mode #cycle-mode-view {
            background-color: #ffffff !important; /* Fundo branco */
            border-color: #0056b3 !important; /* Borda azul visível */
            color: #1e2230 !important; /* Texto escuro */
        }

        /* Garante que os títulos dentro do ciclo fiquem escuros/azuis */
        body.light-mode #cycle-mode-view h3 {
            color: #0056b3 !important;
            border-bottom-color: #0056b3 !important;
        }
        
        /* Garante que o texto descritivo (Duração Salva, etc) fique escuro */
        body.light-mode #cycle-goal-display,
        body.light-mode #cycle-chart-legend {
            color: #666666 !important;
        }

/* --- ESTILO ATUALIZADO: Inclui input de hora --- */

.editor-controls {
    display: flex;
    flex-direction: column; 
    gap: 10px; 
    margin-bottom: 15px;
    align-items: center; 
}

/* AQUI MUDOU: Adicionei ".editor-controls input" na lista */
.editor-controls select, 
.editor-controls button,
.editor-controls input { 
    width: 100%; 
    max-width: 400px; /* Trava em 400px no PC */
    
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #30363d;
    background-color: #161b22;
    color: #ecf0f1;
    box-sizing: border-box;
    font-family: inherit; /* Para a fonte do relógio ficar igual */
}

/* Estilo específico para o ícone de relógio dentro do input (Chrome/Edge) */
.editor-controls input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Deixa o ícone do relógio branco */
    cursor: pointer;
}

.editor-controls button {
    background-color: #2ecc71;
    color: #1e2230;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.editor-controls button:hover {
    background-color: #27ae60;
}

/* --- ESTILOS PARA TAGS DE FLASHCARDS --- */
.fc-tag-badge {
    display: inline-block;
    background-color: #3498db; /* Azul padrão */
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    margin-right: 5px;
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Cor diferente para tags no Light Mode */
body.light-mode .fc-tag-badge {
    background-color: #e1f5fe;
    color: #0277bd;
    border: 1px solid #b3e5fc;
}

/* Input de Filtro de Tags */
#fc-filter-tags {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #30363d;
    background-color: #161b22;
    color: #ecf0f1;
    margin-bottom: 10px;
}
body.light-mode #fc-filter-tags {
    background-color: #ffffff;
    color: #1e2230;
    border-color: #dfe7e5;
}

/* --- ESTILO DAS SUGESTÕES DE TAGS --- */
.tag-suggestion {
    display: inline-block;
    background-color: #2c3e50; /* Cinza escuro */
    color: #ecf0f1;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8em;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid #30363d;
    transition: all 0.2s;
}
.tag-suggestion:hover {
    background-color: #3498db; /* Azul ao passar o mouse */
    border-color: #3498db;
    color: white;
}
.tag-suggestion span {
    pointer-events: none; /* Garante que o clique pegue no botão */
}

/* Ajuste Light Mode */
body.light-mode .tag-suggestion {
    background-color: #f4f7f6;
    color: #1e2230;
    border-color: #dfe7e5;
}
body.light-mode .tag-suggestion:hover {
    background-color: #0056b3;
    color: white;
}

/* --- BOTÃO SNOOZE (ANTI-CULPA) --- */
#snooze-reviews-btn {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    padding: 12px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: #9b59b6; /* Roxo */
    color: white;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px 0 #8e44ad; /* Efeito 3D sutil */
}
#snooze-reviews-btn:hover {
    background-color: #8e44ad;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8e44ad;
}
#snooze-reviews-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* --- ESTILOS DO CALENDÁRIO DE REVISÕES --- */

/* Reutiliza a estrutura .calendar-grid e .calendar-day das Tarefas, 
   adicionando apenas as badges específicas de revisão */

.review-count-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 24px; 
    height: 24px;
    border-radius: 50%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Níveis de Intensidade (Heatmap) */
.review-load-low { background-color: #2ecc71; }      /* 1 a 2 revisões (Tranquilo) */
.review-load-medium { background-color: #f39c12; color: #1e2230; } /* 3 a 5 revisões (Moderado) */
.review-load-high { background-color: #e74c3c; }     /* 6+ revisões (Pesado) */

/* Efeito ao selecionar um dia */
.calendar-day.selected-day {
    border-color: #5c9dff;
    background-color: rgba(92, 157, 255, 0.2);
}

/* --- ESTILOS DO MANUAL DE INSTRUÇÕES --- */

.help-content {
    max-width: 600px;
    width: 90%;
    max-height: 85vh; /* Não ultrapassa a altura da tela */
    display: flex;
    flex-direction: column;
    padding: 0 !important; 
    background-color: #1e2230;
    border: 1px solid #5c9dff;
}

.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #252a35;
    border-bottom: 1px solid #30363d;
    border-radius: 10px 10px 0 0;
}
.help-header h3 { margin: 0; color: #5c9dff; }

.close-modal-btn {
    background: none;
    border: none;
    font-size: 2em;
    color: #ecf0f1;
    cursor: pointer;
    line-height: 0.5;
}
.close-modal-btn:hover { color: #e74c3c; }

.help-body {
    padding: 20px;
    overflow-y: auto; /* Barra de rolagem se o texto for grande */
    text-align: justify;
    line-height: 1.6;
}

/* Acordeão (Tópicos Expansíveis) */
details {
    margin-bottom: 10px;
    background-color: #161b22;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #30363d;
    transition: background-color 0.2s;
}
details[open] {
    border-color: #5c9dff; /* Destaca a borda quando aberto */
}
summary {
    cursor: pointer;
    font-weight: bold;
    color: #f39c12;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
}
summary::after { content: '+'; font-weight: bold; float: right; }
details[open] summary::after { content: '-'; }
details p, details ul, details ol { margin: 10px 0 0 0; color: #ecf0f1; font-size: 0.95em; }
details li { margin-bottom: 5px; }

/* Botão de Ajuda no Topo */
#help-toggle-btn {
    font-size: 1.4em;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 8px;
    color: #5c9dff;
    transition: transform 0.2s;
}
#help-toggle-btn:hover { transform: scale(1.2); color: #fff; }

/* Modo Claro */
body.light-mode .help-content { background-color: #ffffff; border-color: #0056b3; }
body.light-mode .help-header { background-color: #f4f7f6; border-bottom-color: #dfe7e5; }
body.light-mode .help-header h3 { color: #0056b3; }
body.light-mode .close-modal-btn { color: #1e2230; }
body.light-mode details { background-color: #f4f7f6; border-color: #dfe7e5; }
body.light-mode details p, body.light-mode details li { color: #1e2230; }
body.light-mode summary { color: #e67e22; }
body.light-mode #help-toggle-btn { color: #0056b3; }

/* --- ESTILO DA LISTA DETALHADA (DENTRO DO GRÁFICO) --- */
        .detailed-stats-container {
            margin-top: 20px;
            border-top: 1px solid #30363d;
            padding-top: 10px;
        }

        /* --- LISTAS DETALHADAS (MATÉRIA E ATIVIDADE) - CORRIGIDO --- */
        #detailed-subject-list, 
        #detailed-activity-list {
            list-style: none !important; /* O "important" remove a bolinha preta teimosa */
            padding: 0;
            margin: 0;
            max-height: 300px;
            overflow-y: auto;
        }

        #detailed-subject-list li, 
        #detailed-activity-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            color: #ecf0f1;
            font-size: 0.95em;
        }

        /* Estilo do nome da matéria/atividade */
        #detailed-subject-list li .subject-name,
        #detailed-activity-list li .subject-name {
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        /* Estilo do tempo */
        #detailed-subject-list li .subject-time,
        #detailed-activity-list li .subject-time {
            font-family: monospace;
            font-weight: bold;
            /* A cor específica (verde ou laranja) é definida no HTML gerado pelo JS */
        }

        .detailed-total-footer {
            margin-top: 15px;
            padding: 15px;
            background-color: rgba(92, 157, 255, 0.1); /* Fundo azul bem leve */
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            color: #5c9dff;
            font-size: 1.1em;
            border: 1px solid rgba(92, 157, 255, 0.2);
        }

        /* Ajuste para Light Mode (Modo Claro) */
        body.light-mode #detailed-subject-list li { 
            color: #1e2230; 
            border-bottom-color: rgba(0,0,0,0.1);
        }
        body.light-mode .detailed-total-footer {
            background-color: rgba(0, 86, 179, 0.1);
            color: #0056b3;
            border-color: rgba(0, 86, 179, 0.2);
        }

/* --- AJUSTE COMPACTO PARA AMBOS OS GRÁFICOS (MATÉRIA E ATIVIDADE) --- */
        #subject-chart-box .stats-chart-container,
        #activity-chart-box .stats-chart-container {
            max-width: 200px; /* Tamanho reduzido */
            margin: 0 auto 10px auto;
        }
        
        #subject-chart-box, 
        #activity-chart-box {
            padding: 15px;
        }

        /* Compactar listas */
        #detailed-subject-list li,
        #detailed-activity-list li {
            padding: 4px 0;
            font-size: 0.9em;
        }

        /* --- CORREÇÃO: MODO CLARO PARA OS DOIS CARTÕES --- */
        body.light-mode #subject-chart-box,
        body.light-mode #activity-chart-box {
            background-color: #ffffff !important;
            border-color: #dfe7e5 !important;
            color: #1e2230 !important;
            box-shadow: 0 6px 20px rgba(0,0,0,0.05) !important;
        }

        /* Títulos (Azul para Matéria, Laranja para Atividade) */
        body.light-mode #subject-chart-box h4 { color: #0056b3 !important; }
        body.light-mode #activity-chart-box h4 { color: #e67e22 !important; }

        /* Subtítulos e Linhas */
        body.light-mode #chart-date-range-display,
        body.light-mode #activity-date-range-display { color: #666666 !important; }
        
        body.light-mode #detailed-subject-list li,
        body.light-mode #detailed-activity-list li {
            border-bottom-color: #f0f0f0 !important;
            color: #1e2230 !important;
        }
        
        /* Rodapés de Total */
        body.light-mode .detailed-total-footer {
            background-color: #f0f8ff !important;
        }
        
        /* Linha da Logo */
        body.light-mode #subject-chart-box div[style*="border-top"],
        body.light-mode #activity-chart-box div[style*="border-top"] {
            border-top-color: #f0f0f0 !important;
        }

/* --- ESTILOS DA ÁRVORE DE QUESTÕES (TIPO TEC) --- */
.q-tree-item {
    margin-bottom: 8px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background-color: #161b22;
    overflow: hidden;
}

.q-tree-header {
    padding: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    background-color: #1e2230;
    transition: background-color 0.2s;
}
.q-tree-header:hover {
    background-color: #252a35;
}

.q-subject-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: #ecf0f1;
    flex: 1; 
}

/* Container das estatísticas */
.q-stats-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 200px; 
}

/* A Barra Visual (MUDANÇA DE COR AQUI) */
.q-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e74c3c; /* Fundo Vermelho (Erros) - Mantido */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
    position: relative;
}
.q-progress-fill {
    height: 100%;
    background-color: #3498db !important; /* MUDADO PARA AZUL (Acertos) */
    display: block;
}

/* Texto de Estatística */
.q-stats-text {
    font-size: 0.75em;
    color: #8b949e;
}
.text-green { color: #3498db !important; font-weight: bold; } /* MUDADO PARA AZUL (Acertos) */
.text-red { color: #e74c3c !important; font-weight: bold; } /* Vermelho (Erros) */

/* Área dos Assuntos (Filhos) */
.q-tree-children {
    display: none; 
    background-color: #0d1117;
    padding: 5px 0;
    border-top: 1px solid #30363d;
}
.q-tree-children.open {
    display: block;
}

.q-topic-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 30px; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.q-topic-row:last-child { border-bottom: none; }
.q-topic-name { font-size: 0.9em; color: #c9d1d9; flex: 1; }

/* Setinha de expandir */
.arrow-icon { transition: transform 0.2s; font-size: 0.8em; color: #8b949e; }
.arrow-icon.rotated { transform: rotate(90deg); }

/* Modo Claro */
body.light-mode .q-tree-item { background-color: #ffffff; border-color: #dfe7e5; }
body.light-mode .q-tree-header { background-color: #f4f7f6; }
body.light-mode .q-tree-header:hover { background-color: #eef2f1; }
body.light-mode .q-subject-info { color: #1e2230; }
body.light-mode .q-tree-children { background-color: #fafbfc; border-top-color: #dfe7e5; }
body.light-mode .q-topic-row { border-bottom-color: rgba(0,0,0,0.05); }
body.light-mode .q-topic-name { color: #555; }



/* --- CORREÇÃO: MODO CLARO PARA O PAINEL DE QUESTÕES --- */
    body.light-mode #questions-chart-box {
        background-color: #ffffff !important;
        border: 1px solid #dfe7e5 !important;
        color: #1e2230 !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.05) !important;
    }

    /* Título do box no modo claro */
    body.light-mode #questions-chart-box h4 {
        color: #27ae60 !important; /* Verde escuro para leitura */
    }

    /* Botões de alternância no modo claro */
    body.light-mode .q-switch-btn {
        border-color: #2ecc71 !important;
        color: #1e2230 !important;
    }
    body.light-mode .q-switch-btn.active {
        background-color: #2ecc71 !important;
        color: #ffffff !important;
    }

    /* Texto descritivo */
    body.light-mode #question-stats-display {
        color: #666666 !important;
    }
    
    /* Ajuste da borda dos itens da lista no modo claro */
    body.light-mode .q-tree-item {
        border-color: #dfe7e5 !important;
        background-color: #ffffff !important;
    }

/* --- FORÇAR VISIBILIDADE DOS TÍTULOS DO MODAL (CORREÇÃO FINAL) --- */
#save-modal-overlay label {
    color: #ffffff !important;       /* Branco Puro */
    display: block !important;       /* Ocupa a linha toda */
    opacity: 1 !important;           /* Totalmente visível */
    visibility: visible !important;
    font-size: 1em !important;
    margin-bottom: 5px !important;
    z-index: 9999 !important;        /* Garante que fique por cima de tudo */
    position: relative !important;   
    text-shadow: 0px 1px 2px rgba(0,0,0,0.8); /* Sombra leve para destacar do fundo */
    text-align: left !important;
}

/* Garante espaçamento entre os campos */
#save-modal-overlay .modal-field {
    display: block !important;
    margin-bottom: 15px !important;
}

/* Ajuste específico para Modo Claro */
body.light-mode #save-modal-overlay label {
    color: #1e2230 !important;       /* Escuro no modo claro */
    text-shadow: none !important;
}

/* --- FIX SUPREMO: MODAL CLARO E VISIBILIDADE --- */

    /* 1. Garante que a etiqueta ocupe espaço e seja visível */
    .modal-field label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        font-weight: bold !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* 2. MODO ESCURO (Padrão): Força texto BRANCO PURO */
    .modal-content {
        background-color: #1e2230 !important; /* Fundo Escuro */
    }
    .modal-content label {
        color: #ffffff !important; /* Texto Branco */
    }
    .modal-content h3 {
        color: #5c9dff !important; /* Título Azul Claro */
    }

    /* 3. MODO CLARO (Solicitado): Fundo Branco, Texto Escuro */
    body.light-mode .modal-content {
        background-color: #ffffff !important; /* Fundo Branco */
        border: 2px solid #0056b3 !important; /* Borda Azul Escura */
        box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    }

    /* Cor dos Textos no Modo Claro */
    body.light-mode .modal-content label {
        color: #1e2230 !important; /* Texto Preto/Azulão */
    }
    body.light-mode .modal-content h3 {
        color: #0056b3 !important; /* Título Azul Escuro */
    }
    
    /* Cor dos Inputs no Modo Claro (para não ficar tudo branco) */
    body.light-mode .modal-field input,
    body.light-mode .modal-field select,
    body.light-mode .modal-field textarea {
        background-color: #f4f7f6 !important; /* Cinza bem clarinho */
        border: 1px solid #ccc !important;
        color: #1e2230 !important;
    }

/* --- CORREÇÃO: EXPORTAÇÃO E BACKUP NO MODO CLARO --- */

/* 1. Fundo Branco e Borda Suave no Container Principal */
body.light-mode #export-controls {
    background-color: #ffffff !important;
    border: 1px solid #dfe7e5 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05) !important;
}

/* 2. Textos Descritivos (Spans) em cor escura para leitura */
body.light-mode #export-controls span {
    color: #555555 !important; /* Cinza escuro para bom contraste */
}

/* 3. Linha Divisória entre Exportação e Backup */
/* O seletor abaixo pega a div que tem a borda superior */
body.light-mode #export-controls div[style*="border-top"] {
    border-top-color: #dfe7e5 !important;
}

/* 4. Títulos (H4) - Mantém as cores (Verde/Roxo) mas ajusta a linha de baixo se houver */
body.light-mode #export-controls h4 {
    border-bottom-color: #dfe7e5 !important;
}

/* --- ESTILOS DO EDITAL VERTICALIZADO --- */

.syllabus-subject-card {
    background-color: #1e2230;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.syllabus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.syllabus-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #5c9dff;
}

.syllabus-topic-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.syllabus-topic-item {
    display: flex;
    align-items: flex-start; /* Alinha no topo caso o texto seja longo */
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
}

.syllabus-topic-item:hover {
    background-color: rgba(255,255,255,0.02);
}

.syllabus-checkbox {
    margin-right: 12px;
    margin-top: 4px; /* Ajuste fino para alinhar com texto */
    min-width: 18px;
    min-height: 18px;
    accent-color: #2ecc71;
    cursor: pointer;
}

.syllabus-topic-text {
    flex: 1;
    cursor: pointer;
    line-height: 1.4;
    color: #ecf0f1;
}

.syllabus-topic-item.completed .syllabus-topic-text {
    text-decoration: line-through;
    color: #8b949e;
    opacity: 0.7;
}

/* Botões de ação pequenos */
.syllabus-action-btn {
    font-size: 0.85em;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #30363d;
    background: #161b22;
    color: #ecf0f1;
    cursor: pointer;
    margin-left: 5px;
}
.syllabus-action-btn:hover { background: #30363d; color: #5c9dff; }

/* Ajuste Modo Claro */
body.light-mode .syllabus-subject-card {
    background-color: #ffffff;
    border-color: #dfe7e5;
}
body.light-mode .syllabus-topic-text { color: #1e2230; }
body.light-mode .syllabus-topic-item:hover { background-color: #f4f7f6; }
body.light-mode .syllabus-action-btn { background: #f4f7f6; color: #1e2230; border-color: #dfe7e5; }

/* Adicione ou atualize estas classes */

.syllabus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 0; /* Margem removida pois o espaçamento será no body */
    cursor: pointer; /* Indica que é clicável */
    user-select: none; /* Evita selecionar o texto ao clicar rápido */
}

.syllabus-header:hover {
    opacity: 0.9;
}

/* Área clicável do título */
.syllabus-title-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A setinha */
.syllabus-arrow {
    font-size: 0.8em;
    color: #8b949e;
    transition: transform 0.2s;
    display: inline-block;
}

.syllabus-arrow.open {
    transform: rotate(90deg); /* Gira a seta quando aberto */
}

/* --- ANIMAÇÃO SUAVE DO ACORDEÃO --- */
.syllabus-body {
    max-height: 0;           /* Começa fechado (altura 0) */
    opacity: 0;              /* Invisível */
    overflow: hidden;        /* Esconde o conteúdo que sobrar */
    margin-top: 0;           /* Sem margem quando fechado */
    
    /* A mágica da suavidade: */
    transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.3s;
}

.syllabus-body.expanded {
    max-height: 5000px;      /* Um valor alto para caber listas grandes */
    opacity: 1;              /* Fica visível */
    margin-top: 15px;        /* Devolve o espaço */
}

/* --- BOTÃO DE EXCLUIR SESSÃO --- */
.delete-session-btn {
    background: transparent; /* Fundo transparente */
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0 5px;
}

.delete-session-btn:hover {
    transform: scale(1.2); /* Aumenta um pouquinho ao passar o mouse */
    filter: drop-shadow(0 0 2px #e74c3c); /* Brilho vermelho */
}

/* Botão de Editar Sessão */
.edit-session-btn {
    background: transparent;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0 5px;
    margin-right: 5px; /* Espaço entre o lápis e a lixeira */
}

.edit-session-btn:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 2px #3498db); /* Brilho azul */
}

/* --- CORREÇÃO FINAL, LIMPEZA E CENTRALIZAÇÃO MOBILE (COLE NO FINAL) --- */
@media (max-width: 768px) {

    /* 1. AJUSTE GERAL E CENTRALIZAÇÃO DE TÍTULOS */
    .container {
        padding: 10px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* CENTRALIZA O TÍTULO "LOG DE SESSÕES" e outros H3 */
    #dashboard-view h3 {
        text-align: center !important;
        margin-top: 30px !important; /* Mais respiro */
    }

    /* 2. FILTROS: Um embaixo do outro (Empilhados) */
    .filter-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        height: auto !important;
    }
    
    .filter-buttons-quick {
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
        gap: 8px !important;
    }
    
    .filter-buttons-quick button {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        font-size: 1em !important;
    }

    .filter-custom-range {
        flex-direction: column !important;
        width: 100% !important;
    }
    .filter-custom-range input, .filter-custom-range button {
        width: 100% !important;
        margin: 5px 0 !important;
    }

    /* 3. BOTÕES DE GRÁFICO (Compactos) */
    .chart-switcher-controls {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 5px !important;
        width: 100% !important;
    }

    .chart-switch-btn {
        flex: 1 !important;
        padding: 8px 2px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        min-width: auto !important;
    }

    /* 4. CORREÇÃO DO GRÁFICO PRINCIPAL */
    .stats-chart-container {
        position: relative !important;
        height: 260px !important; 
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
    }
    .stats-chart-container canvas {
        max-height: 250px !important;
        max-width: 100% !important;
    }

    /* 5. REMOVER O GRÁFICO DE BARRAS (15 DIAS) */
    .stats-box-full:not(#medal-container) {
        display: none !important;
    }

    /* 6. LIMPEZA DO LOG DE SESSÕES (TABELA) */
    /* A tabela some, mas o título "Log de Sessões" fica centralizado acima do botão de ver histórico */
    .logbook-container {
        display: none !important;
    }
    
    /* Ajuste nos botões de exportação */
    #export-controls {
        margin-top: 20px !important;
        padding: 15px !important;
    }
    #export-controls div[style*="display: flex"] {
        flex-direction: column !important;
    }
    .export-btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* --- BARRA DE NAVEGAÇÃO INFERIOR (PASSO 2 COMPLETO) --- */

    /* 1. No Computador (Telas grandes): A barra fica oculta */
    .bottom-nav {
        display: none;
    }

    /* 2. Ajustes de cor para o Modo Claro */
    body.light-mode .bottom-nav {
        background-color: #ffffff;
        border-top-color: #dfe7e5;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    }
    body.light-mode .nav-item {
        color: #95a5a6;
    }
    body.light-mode .nav-item.active {
        color: #0056b3; /* Azul escuro quando ativo */
    }

    /* 3. Apenas no Celular: A mágica acontece aqui */
    @media (max-width: 768px) {
        
        /* Esconde o botão de menu antigo lá do topo (agora temos o de baixo) */
        #menu-toggle-btn {
            display: none !important;
        }

        /* Adiciona espaço no fim da página para o conteúdo não ficar escondido atrás da barra */
        body {
            padding-bottom: 80px !important;
        }

        /* Faz a barra aparecer e fixa ela no rodapé */
        .bottom-nav {
            display: flex !important;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 65px;
            background-color: #1e2230; /* Fundo escuro padrão */
            border-top: 1px solid #30363d;
            z-index: 9999; /* Garante que fique por cima de tudo */
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
            padding-bottom: env(safe-area-inset-bottom); /* Ajuste para iPhone X/11/12+ */
        }

        /* Estilo dos botões (Ícone + Texto) */
        .nav-item {
            background: transparent;
            border: none;
            color: #8b949e; /* Cinza (inativo) */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            cursor: pointer;
            flex: 1; /* Divide o espaço igualmente */
            transition: all 0.2s ease;
            padding: 5px 0;
        }

        .nav-item .nav-icon {
            font-size: 1.5em;
            margin-bottom: 3px;
            display: block;
        }

        /* Quando o botão está ativo (página atual) */
        .nav-item.active {
            color: #5c9dff; /* Azul Destaque */
        }
        
        /* Efeito de clique (diminui um pouquinho) */
        .nav-item:active {
            transform: scale(0.9);
        }
    }

/* --- NOVAS REGRAS PARA USAR POPPINS EM TÍTULOS E NÚMEROS --- */

/* Aplica Poppins nos títulos principais, números e display do cronômetro */
.header-left h1,
h2, h3, h4,
#timer-display-running,
#menu-streak-box .streak-value {
    font-family: 'Poppins', 'Inter', sans-serif !important;
}

/* Garante que o texto da meta e navegação mantenha a fonte Inter/Padrão */
.button-group-vertical button,
.goal-input-group label,
.goal-input-group button,
.filter-buttons-quick button,
.chart-switch-btn {
     font-family: 'Inter', sans-serif;
}

/* --- EFEITO DE TOQUE (MICRO-INTERAÇÃO) --- */

.button-group-vertical button:active,
#reset-button:active, 
#reset-cycle-progress-button:active,
#start-timer-setup:active,
#modal-save-btn:active, 
#modal-cancel-btn:active,
#filter-custom-button:active,
.chart-switch-btn:active,
.goal-input-group button:active,
#save-schedule-button:active,
#save-cycle-button:active,
#schedule-review-btn:active,
#fc-flip-btn:active,
#fc-srs-controls button:active,
#fc-save-card-btn:active,
#add-task-btn:active,
#syllabus-add-subject-btn:active,
.syllabus-action-btn:active,
.calendar-nav-btn:active {
    /* Diminui 4% ao ser pressionado, dando a sensação de "clicky" */
    transform: scale(0.96);
    /* Garante uma transição suave ao voltar ao tamanho normal */
    transition: transform 0.1s; 
}

/* Exceção: Os botões circulares do Cronômetro já têm um efeito :active */
/* #pause-timer-running, #stop-timer-running, #discard-timer-running */

/* --- 5. ESTILOS DOS CARDS DE RESUMO (KPI) --- */

#quick-kpis-mobile {
    display: none; /* Padrão: Oculto no desktop */
}

@media (max-width: 768px) {
    #quick-kpis-mobile {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 20px;
        width: 100%;
    }
    .kpi-card {
        flex: 1; /* Divide o espaço igualmente */
        padding: 10px;
        background-color: #252a35; /* Fundo escuro sutil */
        border-radius: 8px;
        border: 1px solid #5c9dff; /* Borda de destaque */
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 80px;
    }
    .kpi-title {
        font-size: 0.7em;
        font-weight: bold;
        color: #8b949e;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-family: 'Inter', sans-serif;
    }
    .kpi-value {
        font-size: 1.5em; /* Fonte maior para o valor */
        font-weight: 700;
        line-height: 1.1;
        color: #ecf0f1;
        font-family: 'Poppins', sans-serif !important;
    }
    .kpi-unit {
        font-size: 0.7em;
        color: #5c9dff;
        font-weight: 500;
    }
    
    /* Cores de Destaque */
    #kpi-streak .kpi-value { color: #f39c12; } /* Laranja para Streak */
    #kpi-today .kpi-value { color: #2ecc71; } /* Verde para Tempo Hoje */
    #kpi-review .kpi-value { font-size: 1.2em; line-height: 1.3; } /* Ajuste de fonte para "Nenhuma" / "Data" */
    
    /* Light Mode */
    body.light-mode .kpi-card {
        background-color: #ffffff;
        border-color: #0056b3;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    body.light-mode .kpi-unit {
        color: #0056b3;
    }
}

/* --- ESTILOS PARA OS ÍCONES FONT AWESOME --- */

/* Ajusta o tamanho e alinhamento do ícone no Menu Lateral/Rápido */
.menu-link i,
.button-group-vertical button i {
    font-size: 1.1em; /* Tamanho confortável para a lista */
    margin-right: 8px; /* Espaço entre ícone e texto */
    width: 20px; /* Largura fixa para alinhar o texto */
    text-align: center;
}

/* Garante que o ícone na barra inferior (nav-icon) use o estilo Font Awesome */
.nav-item .nav-icon i {
    font-size: 1.5em; 
    margin-bottom: 3px; 
    display: block;
}

/* Remove qualquer sombra ou cor indesejada de emojis herdados */
.nav-item .nav-icon {
    text-shadow: none !important;
}

/* Garante que os ícones do menu lateral/rápido sigam a cor do texto do link */
#sidebar-menu a i,
.button-group-vertical button i {
    color: inherit;
}

/* Ajustes Finos para o Ícone de Lápis (Font Awesome) */

/* 1. Define que o ícone não terá transform próprio, herdando apenas o transform do botão pai. */
#edit-plan-name-btn i {
    font-size: 1em; /* Garante que o ícone ocupe 100% do 'font-size' do botão (1.5em) */
    line-height: 1;
}

/* 2. Regra crucial: Anula o efeito de diminuição (:active) especificamente no ícone, 
      deixando-o apenas no botão (#edit-plan-name-btn:active) */
#edit-plan-name-btn:active i {
    transform: none; 
}

/* Container compacto para o gráfico de barras - Apenas Desktop */
.chart-wrapper-compact {
    position: relative;
    height: 300px;       /* Altura fixa reduzida */
    max-width: 900px;    /* Largura máxima para não esticar demais */
    width: 100%;
    margin: 0 auto;      /* Centraliza */
}

/* --- CORREÇÃO GERAL DE DESIGN E TEMAS (COLE NO FINAL DO CSS) --- */

/* 1. Reset do Fundo da Página (Base Dark) */
body {
    background-color: #0d1117; 
    background-image: radial-gradient(circle at 50% 0%, #1f2937 0%, #0d1117 60%);
    color: #c9d1d9; /* Texto cinza claro para leitura confortável */
}

/* 2. Design "Glass" (Vidro) para o MODO ESCURO */
.container, 
.day-column, 
.stats-box, 
.subject-management-box, 
.flashcard-studier, 
.flashcard-creator, 
.goal-container, 
.logo-placeholder-card, 
#timer-setup-view, 
#cycle-mode-view,
#plan-name-editor,
#export-controls,
.filter-controls,
.calendar-container,
.syllabus-subject-card {
    /* Fundo translúcido escuro */
    background-color: rgba(22, 27, 34, 0.7) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Borda fina e suave (substitui a borda azul grossa) */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* Sombra suave para profundidade */
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
    
    /* Arredondamento moderno */
    border-radius: 16px !important;
    
    /* Garante cor do texto */
    color: #e6edf3 !important;
}

/* 3. CORREÇÃO DO MODO CLARO (Reset total do Glass Escuro) */
body.light-mode {
    background-color: #f6f8fa !important; /* Fundo cinza gelo */
    background-image: none !important;
    color: #24292f !important;
}

body.light-mode .container, 
body.light-mode .day-column, 
body.light-mode .stats-box, 
body.light-mode .subject-management-box, 
body.light-mode .flashcard-studier, 
body.light-mode .flashcard-creator, 
body.light-mode .goal-container, 
body.light-mode .logo-placeholder-card, 
body.light-mode #timer-setup-view, 
body.light-mode #cycle-mode-view,
body.light-mode #plan-name-editor,
body.light-mode #export-controls,
body.light-mode .filter-controls,
body.light-mode .calendar-container,
body.light-mode .syllabus-subject-card {
    /* Fundo BRANCO quase sólido para legibilidade */
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    
    /* Borda cinza suave */
    border: 1px solid #d0d7de !important;
    
    /* Sombra suave clara */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    
    /* Texto escuro forçado */
    color: #1e2230 !important;
}

/* 4. Correção dos Títulos no Modo Claro */
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4,
body.light-mode strong {
    color: #0969da !important; /* Azul profissional para títulos */
}

/* 5. Inputs Modernos (Adapta para os dois temas) */
input, select, textarea {
    border-radius: 8px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    background-color: rgba(0,0,0,0.3) !important;
    color: #fff !important;
}

/* Inputs no Modo Claro */
body.light-mode input, 
body.light-mode select, 
body.light-mode textarea {
    background-color: #ffffff !important;
    border: 1px solid #d0d7de !important;
    color: #1e2230 !important;
}

/* 6. Botões Modernos (Gradient) */
button {
    border: none !important;
    transition: transform 0.2s, filter 0.2s;
}
button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Botão Verde (Start/Salvar) */
#start-timer-setup, #modal-save-btn, #add-new-subject-btn, #add-subject-to-cycle-btn, .q-switch-btn.active {
    background: linear-gradient(180deg, #2ea043 0%, #238636 100%) !important;
    box-shadow: 0 3px 5px rgba(46, 160, 67, 0.3);
    color: white !important;
    border-radius: 8px !important;
}

/* Botão Azul (Editar/Ações) */
#save-schedule-button, #save-cycle-button, #save-goal-button, #edit-cycle-button-inside {
    background: linear-gradient(180deg, #4493f8 0%, #2e7be5 100%) !important;
    color: white !important;
    box-shadow: 0 3px 5px rgba(68, 147, 248, 0.3);
    border-radius: 8px !important;
}

/* Botão Vermelho (Perigo) */
#stop-timer-running, #discard-timer-running, #reset-button {
    background: linear-gradient(180deg, #da3633 0%, #b62324 100%) !important;
    box-shadow: 0 3px 5px rgba(218, 54, 51, 0.3);
}

/* Correção do Cronômetro (Círculo) */
#timer-display-circle {
    background: radial-gradient(circle, rgba(22,27,34,1) 0%, rgba(13,17,23,1) 100%);
    border: 6px solid #30363d !important; /* Base apagada */
    border-top: 6px solid #5c9dff !important; /* Ativo */
    box-shadow: 0 0 20px rgba(92, 157, 255, 0.1);
}
body.light-mode #timer-display-circle {
    background: #ffffff;
    border-color: #e0e0e0 !important;
    border-top-color: #0969da !important;
}
body.light-mode #timer-display-running {
    color: #1e2230 !important;
}

/* --- BOTÕES MODERNOS --- */

button {
    border: none !important; /* Remove bordas padrão */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Botões de Ação Principal (Verde/Start) */
#start-timer-setup, #modal-save-btn, #add-new-subject-btn, #add-subject-to-cycle-btn {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    color: white !important;
}

/* Botões de Destaque (Azul/Salvar/Editar) */
#save-schedule-button, #save-cycle-button, #save-goal-button, .chart-switch-btn.active {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    color: white !important;
}

/* Botões de Perigo (Vermelho/Stop/Delete) */
#stop-timer-running, #discard-timer-running, #reset-button, .delete-session-btn:hover {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

/* Hover Genérico para Botões */
button:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
    transition: all 0.3s ease;
}

/* --- INPUTS E SELECTS ESTILO SAAS --- */

input, select, textarea {
    background-color: rgba(0, 0, 0, 0.2) !important; /* Fundo mais escuro */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    color: #ecf0f1 !important;
    transition: all 0.3s ease;
    outline: none;
}

/* Foco no Input (Glow Azul) */
input:focus, select:focus, textarea:focus {
    border-color: #5c9dff !important;
    box-shadow: 0 0 0 3px rgba(92, 157, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* --- MENU LATERAL MAIS LIMPO --- */
#sidebar-menu {
    background: rgba(22, 27, 34, 0.95);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255,255,255,0.05);
}

#sidebar-menu a {
    background-color: transparent; /* Remove fundo cinza dos itens */
    border: none;
    border-radius: 8px;
    margin-bottom: 5px;
    color: #8b949e; /* Cor texto inativo */
}

#sidebar-menu a:hover {
    background-color: rgba(92, 157, 255, 0.1); /* Azul bem suave */
    color: #5c9dff;
    padding-left: 20px; /* Animação de deslize */
}

/* --- BARRA INFERIOR MOBILE (FLOATING DOCK) --- */
@media (max-width: 768px) {
    .bottom-nav {
        background: rgba(22, 27, 34, 0.85) !important;
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(255,255,255,0.1);
        border-radius: 20px 20px 0 0; /* Arredonda o topo */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
        margin-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .nav-item.active {
        color: #5c9dff;
        position: relative;
    }
    
    /* Bolinha brilhante embaixo do ícone ativo */
    .nav-item.active::after {
        content: '';
        position: absolute;
        bottom: 5px;
        width: 4px;
        height: 4px;
        background-color: #5c9dff;
        border-radius: 50%;
        box-shadow: 0 0 10px #5c9dff;
    }
}

/* --- CRONÔMETRO NEON --- */
#timer-display-circle {
    border: 4px solid rgba(92, 157, 255, 0.1); /* Fundo do anel apagado */
    border-top: 4px solid #5c9dff; /* Parte ativa */
    border-right: 4px solid #5c9dff;
    box-shadow: 0 0 30px rgba(92, 157, 255, 0.15), inset 0 0 30px rgba(92, 157, 255, 0.05);
    background: radial-gradient(circle, rgba(20,24,30,1) 0%, rgba(13,17,23,1) 100%);
}

/* Texto do Timer Gigante e Fino */
#timer-display-running {
    font-weight: 300; /* Fonte mais fina fica mais elegante */
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(92, 157, 255, 0.4);
}

/* --- CÍRCULO DO CRONÔMETRO (LINHA FINA) --- */
#timer-display-circle {
    border: none !important; 
    
    /* MUDANÇA AQUI: Aumentei de 88% para 96% para afinar a linha */
    background: radial-gradient(closest-side, #1e2230 96%, transparent 97%),
                conic-gradient(var(--progress-color, #5c9dff) var(--progress-deg, 0deg), rgba(255,255,255,0.05) 0deg) !important;
    
    border-radius: 50% !important;
    
    /* Sombra ajustada para combinar com a linha fina */
    box-shadow: 0 0 20px rgba(92, 157, 255, 0.1) !important;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Ajuste para o Modo Claro (Linha Fina) */
body.light-mode #timer-display-circle {
    /* MUDANÇA AQUI TAMBÉM: 96% */
    background: radial-gradient(closest-side, #ffffff 96%, transparent 97%),
                conic-gradient(var(--progress-color, #0969da) var(--progress-deg, 0deg), #f0f0f0 0deg) !important;
    box-shadow: 0 0 15px rgba(9, 105, 218, 0.1) !important;
}

/* --- REVERTER MENU MOBILE PARA O ESTILO CLÁSSICO (SÓLIDO) --- */

@media (max-width: 768px) {
    .bottom-nav {
        /* Remove o efeito de vidro e transparência */
        background: #1e2230 !important; 
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        
        /* Remove o arredondamento "flutuante" */
        border-radius: 0 !important; 
        
        /* Restaura a borda simples no topo */
        border-top: 1px solid #30363d !important;
        
        /* Ajusta a sombra para algo mais simples */
        box-shadow: 0 -4px 10px rgba(0,0,0,0.2) !important;
    }

    /* Remove a "bolinha" brilhante que coloquei embaixo do ícone ativo */
    .nav-item.active::after {
        display: none !important;
    }
    
    /* Garante que o ícone ativo seja apenas azul simples */
    .nav-item.active {
        color: #5c9dff !important;
        text-shadow: none !important;
    }

    /* --- AJUSTE PARA O MODO CLARO --- */
    body.light-mode .bottom-nav {
        background: #ffffff !important; /* Fundo branco sólido */
        border-top: 1px solid #dfe7e5 !important;
        color: #1e2230 !important;
    }
}

/* --- CORES DE PRIORIDADE DAS TAREFAS --- */
.priority-Alta { border-left: 5px solid #e74c3c !important; }   /* Vermelho */
.priority-Normal { border-left: 5px solid #3498db !important; } /* Azul (Padrão) */
.priority-Baixa { border-left: 5px solid #2ecc71 !important; }  /* Verde */

/* Atualize esta regra para incluir o input[type="time"] */
.task-adder input[type="date"], 
.task-adder input[type="time"] { /* Adicionado time aqui */
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #30363d;
    background-color: #161b22;
    color: #ecf0f1;
    color-scheme: dark; 
    min-width: 130px;
}

/* Garante ícone branco no Chrome/Edge */
.task-adder input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Ajuste para o Modo Claro */
body.light-mode .task-adder input[type="text"],
body.light-mode .task-adder input[type="date"],
body.light-mode .task-adder input[type="time"] { /* Adicionado time aqui */
     background-color: #ffffff;
     color: #1e2230;
     border-color: #dfe7e5;
     color-scheme: light;
}

/* Ajuste do ícone no Modo Claro (fica preto) */
body.light-mode .task-adder input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Estilo do botão Home no cabeçalho */
#header-home-btn {
    background: transparent;
    border: none;
    color: #ecf0f1; /* Cor clara padrão */
    font-size: 1.4em; /* Tamanho do ícone */
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header-home-btn:hover {
    color: #5c9dff; /* Azul destaque ao passar o mouse */
    transform: scale(1.1); /* Leve aumento */
}

/* Ajuste para o Modo Claro */
body.light-mode #header-home-btn {
    color: #0056b3;
}
body.light-mode #header-home-btn:hover {
    color: #3498db;
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* RESPONSIVIDADE: Esconder no celular (pois já existe a barra inferior) */
@media (max-width: 768px) {
    #header-home-btn {
        display: none !important;
    }
}

/* --- NOVO LAYOUT DO CABEÇALHO (BARRA DE FERRAMENTAS) --- */

/* 1. Transforma o Header em uma linha horizontal */
.header {
    display: flex;
    flex-direction: row !important; /* Força linha no Desktop */
    justify-content: space-between;
    align-items: center !important;
    padding: 10px 20px;
    border-bottom: 2px solid #30363d;
    margin-bottom: 20px;
    position: relative;
    gap: 15px;
    min-height: 60px; /* Altura mais fina e elegante */
}

/* 2. Ajuste da Esquerda (Menu + Casa + Logo Pequena) */
.header-left {
    position: static !important; /* Remove o posicionamento absoluto antigo */
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1; /* Ocupa 1/3 do espaço */
    width: auto !important;
}

/* Estilo da nova Logo Pequena */
#header-small-logo {
    height: 40px; /* Altura discreta (como um ícone) */
    width: auto;
    border-radius: 4px;
    display: block;
    margin: 0;
}

/* 3. Ajuste do Centro (Nome do Plano) */
#plan-name-container-header {
    flex: 2; /* Ocupa o espaço central (maior) */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Resetamos o estilo do editor para ele caber no cabeçalho sem fundo */
.header-plan-editor {
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Estilo do Texto do Nome do Plano */
.header-plan-editor #current-plan-name {
    font-size: 1.3em !important; /* Fonte menor que o gigante de antes */
    margin: 0;
    color: #ecf0f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-align: center !important; /* <--- ADICIONE ISSO AQUI */
    width: 100%;
}

#plan-name-view-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Inputs dentro do cabeçalho */
.header-plan-editor input {
    padding: 6px 10px !important;
    font-size: 1em !important;
    width: 350px !important;
    border-radius: 6px !important;
    background-color: #0d1117 !important;
    color: #fff !important;
    border: 1px solid #30363d !important;
    text-align: center !important;
}

/* Botão OK de salvar nome */
.header-plan-editor button#save-plan-name-btn {
    padding: 6px 12px !important;
    font-size: 0.9em !important;
    margin: 0 !important;
    height: auto !important;
}

/* 4. Ajuste da Direita (Data e Controles) */
.header-right {
    position: static !important; /* Remove absoluto antigo */
    flex: 1; /* Ocupa 1/3 do espaço */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto !important;
    top: auto !important;
    right: auto !important;
}

/* --- AJUSTES PARA MODO CLARO --- */
body.light-mode .header-plan-editor #current-plan-name {
    color: #0056b3 !important;
}
body.light-mode .header-plan-editor input {
    background-color: #ffffff !important;
    color: #1e2230 !important;
    border-color: #dfe7e5 !important;
}

/* --- RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 768px) {
    .header {
        flex-direction: column !important; /* Empilha tudo */
        gap: 15px;
        height: auto;
        padding: 15px;
    }
    
    /* Linha 1: Menu, Casa e Logo */
    .header-left {
        width: 100% !important;
        justify-content: space-between; 
        order: 1;
    }
    
    /* Linha 2: Nome do Plano */
    #plan-name-container-header {
        width: 100%;
        order: 2;
        margin-bottom: 5px;
    }
    .header-plan-editor #current-plan-name {
        font-size: 1.1em !important; /* Um pouco menor no celular */
    }
    
    /* Linha 3: Data e Botões */
    .header-right {
        width: 100% !important;
        justify-content: center; /* Centraliza */
        order: 3;
        margin-top: 0 !important;
    }
    
    /* Esconde os controles antigos de logo grande se ainda existirem */
    .header-logo-container {
        display: none !important;
    }
}

/* --- CORREÇÃO DO MODO CLARO NO CABEÇALHO --- */

/* Força a pílula do nome a ficar branca/azul no modo claro */
body.light-mode #current-plan-name {
    background-color: #ffffff !important;
    border-color: #dfe7e5 !important;
    color: #0056b3 !important;
}

/* Ajusta o ícone do lápis no modo claro */
body.light-mode #edit-plan-name-btn {
    color: #0056b3 !important;
}
body.light-mode #edit-plan-name-btn:hover {
    color: #3498db !important;
}

/* Ajusta o input de edição no modo claro */
body.light-mode #plan-name-input {
    background-color: #ffffff !important;
    color: #1e2230 !important;
    border-color: #dfe7e5 !important;
}

/* --- CORREÇÃO DA DATA E HORA (CENTRALIZAR E COR) --- */

/* 1. Centraliza o texto da Data (Terça... 2025) */
.header-right #datetime > span:first-child {
    text-align: center !important; /* Centraliza o ano em relação ao dia */
    display: block !important;     /* Garante que ocupe a linha */
    width: 100% !important;
}

/* 2. Alinha todo o bloco da direita (Data + Hora/Botões) ao centro */
.header-right #datetime {
    align-items: center !important; /* Centraliza verticalmente */
    text-align: center !important;  /* Centraliza o texto geral */
}

/* 3. Garante alinhamento dos botões de controle (Ajuda/Tema) */
.header-right .control-buttons {
    justify-content: center !important;
}

/* 4. CORREÇÃO DE COR NO MODO CLARO (Para não ficar cinza sumido) */
body.light-mode .header-right #datetime {
    color: #1e2230 !important; /* Texto escuro para ler melhor */
}

body.light-mode .header-right #datetime span {
    color: #1e2230 !important;
}

/* --- AJUSTE FINAL: COR E BOTÕES NO MODO ESCURO --- */

/* 1. Deixa o texto da data BRANCO no modo escuro (estava cinza apagado) */
.header-right #datetime,
.header-right #datetime span {
    color: #ecf0f1 !important; /* Branco gelo para destacar no fundo preto */
}

/* 2. Remove o quadrado branco de fundo dos botões (Sol e Interrogação) */
.header-right .control-buttons button {
    background-color: transparent !important; /* Fundo transparente */
    border: none !important;
    box-shadow: none !important;
    padding: 5px !important;
}

/* 3. (Segurança) Garante que no Modo Claro o texto volte a ser escuro */
body.light-mode .header-right #datetime,
body.light-mode .header-right #datetime span {
    color: #1e2230 !important; /* Volta para preto/azul escuro no fundo branco */
}

/* --- ESTILOS DA BARRA DE STATUS NO CABEÇALHO (PASSO 2) --- */

#header-status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px; /* Espaço sutil abaixo do nome do plano */
    
    /* Design "Glass" (Vidro) Profissional */
    background-color: rgba(22, 27, 34, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    border-radius: 50px; /* Formato de Pílula */
    padding: 6px 25px;
    transition: all 0.3s ease;
}

/* Item individual (Ícone + Texto) */
.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.status-item i {
    font-size: 1.1em;
    /* Sombra suave no ícone para destaque */
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
}

/* Coluna de texto (Label + Valor) */
.status-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}

.status-label {
    font-size: 0.65em;
    text-transform: uppercase;
    color: #8b949e; /* Cinza discreto */
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.status-value {
    font-size: 0.9em;
    font-weight: 700;
    color: #ecf0f1; /* Branco destaque */
    font-family: 'Poppins', sans-serif; /* Mesma fonte dos títulos */
    white-space: nowrap;
}

/* --- MINI BARRA DE PROGRESSO (Dentro do cabeçalho) --- */
.mini-progress-bg {
    width: 50px; /* Largura fixa pequena */
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-left: 8px; /* Separa do texto */
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    width: 0%;
    background-color: #f1c40f; /* Amarelo padrão */
    transition: width 0.5s ease;
    border-radius: 2px;
}

/* Divisor Vertical Fino */
.status-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- AJUSTES PARA O MODO CLARO (Light Mode) --- */
body.light-mode #header-status-bar {
    background-color: rgba(255, 255, 255, 0.7); /* Branco translúcido */
    border-color: #dfe7e5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body.light-mode .status-value {
    color: #1e2230; /* Texto escuro */
}

body.light-mode .status-label {
    color: #666; /* Cinza mais escuro */
}

body.light-mode .mini-progress-bg {
    background-color: #e0e0e0;
}

body.light-mode .status-divider {
    background-color: #dfe7e5;
}

/* --- RESPONSIVIDADE (Ajuste fino para celular) --- */
@media (max-width: 768px) {
    #header-status-bar {
        width: auto !important;       
        display: inline-flex !important; 
        justify-content: center !important; 
        gap: 15px !important;         
        padding: 5px 15px !important; 
        margin: 10px auto !important; 
        max-width: 95%;               
    }
    
    .mini-progress-bg {
        display: none; /* Esconde a barrinha no celular para não apertar */
    }
    
    .status-label {
        font-size: 0.6em;
    }
    
    .status-value {
        font-size: 0.85em;
    }
}

/* --- ESTILO DO TUTORIAL GUIADO (TEXTO JUSTIFICADO) --- */
    .driver-popover-description {
        text-align: justify !important;
        line-height: 1.5 !important; /* Aumenta um pouco o espaço entre linhas para facilitar a leitura */
        color: #333 !important; /* Garante contraste no balão branco */
    }
    
    /* Opcional: Se quiser justificar o título também (geralmente não precisa) */
    .driver-popover-title {
        text-align: left !important; /* Títulos ficam melhores à esquerda ou centro */
        font-weight: 800 !important;
        color: #0056b3 !important; /* Azul destaque */
    }

/* --- ESTILO DA CAIXA DE IMPORTAÇÃO DO ANKI --- */
.anki-import-box {
    max-width: 800px;
    margin: 0 auto 20px auto;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed #30363d;
    
    /* Cor padrão (Modo Escuro) */
    background-color: rgba(22, 27, 34, 0.5); 
}

/* Ajustes para o MODO CLARO */
body.light-mode .anki-import-box {
    background-color: #ffffff !important; /* Fundo Branco */
    border-color: #dfe7e5 !important;     /* Borda Cinza Suave */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Ajuste do texto explicativo no Modo Claro */
body.light-mode .anki-import-box p {
    color: #555555 !important; /* Texto cinza escuro para leitura */
}

/* Ajuste do Select no Modo Claro dentro dessa caixa */
body.light-mode .anki-import-box select {
    background-color: #f4f7f6 !important;
    color: #1e2230 !important;
    border-color: #dfe7e5 !important;
}

/* Ajuste do botão de voltar no Modo Claro */
body.light-mode #fc-flip-back-btn {
    color: #1e2230 !important;
    border-color: #1e2230 !important;
}
body.light-mode #fc-flip-back-btn:hover {
    background-color: rgba(0,0,0,0.05) !important;
}
#fc-flip-back-btn:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* --- CORREÇÃO: EXIBIR LISTA DE FLASHCARDS NO MOBILE --- */
@media (max-width: 768px) {
    /* Força a exibição do container de flashcards */
    #fc-list-container {
        display: block !important;
        overflow-x: auto !important; 
    }
    
    /* Ajusta a largura da tabela */
    #fc-list-table {
        min-width: 100% !important; 
        width: 100% !important;
    }
}

/* --- CORREÇÃO: IMPEDIR QUE INPUTS DO FLASHCARD ESTOUREM A CAIXA --- */
.flashcard-creator input, 
.flashcard-creator select, 
.flashcard-creator textarea {
    box-sizing: border-box !important; /* O segredo: faz o padding contar dentro da largura */
    width: 100% !important;
    max-width: 100% !important;
}

/* --- CORES DO MENU LATERAL (BASEADAS NA NAVEGAÇÃO RÁPIDA) --- */

/* Estilo base */
#sidebar-menu a {
    border-left: 5px solid transparent;
    color: #ecf0f1; /* Texto claro padrão */
    display: flex;
    align-items: center;
}

/* 1. Cronômetro (Verde Água) */
#sidebar-menu a[data-view="timer-view"] { border-left-color: #1abc9c; }
#sidebar-menu a[data-view="timer-view"] i { color: #1abc9c; }

/* 2. Estatísticas (Cinza) */
#sidebar-menu a[data-view="stats-view"], 
#sidebar-menu a[data-view="dashboard-view"] { border-left-color: #95a5a6; }
#sidebar-menu a[data-view="stats-view"] i,
#sidebar-menu a[data-view="dashboard-view"] i { color: #95a5a6; }

/* 3. Revisões (Laranja) */
#sidebar-menu a[data-view="review-view"] { border-left-color: #f39c12; }
#sidebar-menu a[data-view="review-view"] i { color: #f39c12; }

/* 4. Flashcards (Roxo) */
#sidebar-menu a[data-view="flashcard-view"] { border-left-color: #8e44ad; }
#sidebar-menu a[data-view="flashcard-view"] i { color: #8e44ad; }

/* 5. Tarefas (Verde Escuro) */
#sidebar-menu a[data-view="tasks-view"] { border-left-color: #16a085; }
#sidebar-menu a[data-view="tasks-view"] i { color: #16a085; }

/* 6. Edital Verticalizado (Indigo) */
#sidebar-menu a[data-view="syllabus-view"] { border-left-color: #3f51b5; }
#sidebar-menu a[data-view="syllabus-view"] i { color: #3f51b5; }

/* 7. Editores (Azul Padrão) */
#sidebar-menu a[data-view="schedule-editor-view"],
#sidebar-menu a[data-view="cycle-editor-view"] { 
    border-left-color: #3498db; 
}
#sidebar-menu a[data-view="schedule-editor-view"] i,
#sidebar-menu a[data-view="cycle-editor-view"] i { 
    color: #3498db; 
}

/* 8. Início (Azul Destaque - Farol) */
#sidebar-menu a[data-view="cycle-view"] { border-left-color: #5c9dff; }
#sidebar-menu a[data-view="cycle-view"] i { color: #5c9dff; }
/* Efeito Hover para destacar ainda mais */
#sidebar-menu a:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Leve brilho ao passar o mouse */
    padding-left: 15px; /* Pequeno movimento para a direita */
}

/* --- ESTILOS DO LAYOUT DE CRIAÇÃO (FORMULÁRIO + BALÃO) --- */

.fc-creation-wrapper {
    display: flex;
    gap: 25px;
    align-items: flex-start; /* Alinha no topo */
    width: 100%;
    max-width: 900px; /* Largura máxima do conjunto */
    margin: 0 auto;
}

/* Ajuste na largura do formulário para dividir espaço */
.flashcard-creator {
    flex: 2; /* Ocupa 2/3 do espaço */
    min-width: 0; /* Evita estouro */
}

/* Estilo do Balão de Dicas */
.fc-tips-balloon {
    flex: 1; /* Ocupa 1/3 do espaço */
    background-color: #252a35; /* Cor um pouco mais clara que o fundo */
    border: 1px solid #5c9dff; /* Borda azul destaque */
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Triângulo do balão (setinha apontando para a esquerda) */
.fc-tips-balloon::before {
    content: "";
    position: absolute;
    top: 40px; /* Altura da setinha */
    left: -10px; /* Posiciona fora da caixa */
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right: 10px solid #5c9dff; /* Cor da setinha igual a borda */
}

.fc-tips-balloon h4 {
    color: #f1c40f; /* Amarelo */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.fc-tips-balloon ul {
    padding-left: 20px;
    margin: 0;
    list-style-type: none;
}

.fc-tips-balloon li {
    margin-bottom: 8px;
    color: #ecf0f1;
    font-size: 0.95em;
}

.fc-tips-balloon code {
    background-color: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #5c9dff;
}

/* Modo Claro para o Balão */
body.light-mode .fc-tips-balloon {
    background-color: #ffffff;
    border-color: #0056b3;
    color: #1e2230;
}
body.light-mode .fc-tips-balloon h4 { color: #0056b3; }
body.light-mode .fc-tips-balloon li { color: #1e2230; }
body.light-mode .fc-tips-balloon code { background-color: #f4f7f6; color: #e67e22; }

/* Responsividade: No celular, o balão vai para baixo */
@media (max-width: 768px) {
    .fc-creation-wrapper {
        flex-direction: column; /* Empilha */
    }
    
    .fc-tips-balloon {
        width: 100%;
        box-sizing: border-box;
        order: -1; /* (Opcional) Se quiser que o balão apareça ANTES do form, use -1. Se quiser DEPOIS, apague essa linha. */
        margin-bottom: 15px;
    }
    
    /* Esconde a setinha lateral no celular */
    .fc-tips-balloon::before {
        display: none;
    }
}

/* --- NOVO ESTILO: EDITOR DE CRONOGRAMA EM CARDS (IGUAL À HOME) --- */

/* 1. Transforma o container do editor em uma Grade (Grid) */
#schedule-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Cria colunas automáticas */
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

/* 2. Estiliza cada Dia como um Card (Cartão) */
.editor-day-column {
    background-color: rgba(30, 34, 48, 0.6); /* Fundo escuro translúcido */
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}

/* Efeito ao passar o mouse no card */
.editor-day-column:hover {
    border-color: #5c9dff;
    transform: translateY(-2px);
}

/* Título do Dia (Dia 1, Dia 2...) */
.editor-day-column h2 {
    color: #5c9dff;
    border-bottom: 1px solid #30363d;
    padding-bottom: 10px;
    margin-top: 0;
    text-align: center;
    font-size: 1.3em;
}

/* 3. Ajusta os Inputs e Botões para caberem dentro do Card */
.editor-controls {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre os inputs */
    margin-bottom: 15px;
    width: 100%;
}

.editor-controls select,
.editor-controls input,
.editor-controls button {
    width: 100% !important; /* Ocupa toda a largura do card */
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Destaque para o botão adicionar dentro do card */
.editor-controls button {
    background-color: #2ecc71;
    color: #1e2230;
    font-weight: bold;
    margin-top: 5px !important;
}

/* 4. Estilo da Lista de Matérias dentro do Card */
.editor-day-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Ocupa o espaço restante */
}

.editor-day-column li {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between; /* Separa texto do botão X */
    align-items: center;
    font-size: 0.95em;
}

/* Botão de remover (X) pequeno e discreto */
.editor-day-column .remove-subject-btn {
    background: rgba(231, 76, 60, 0.2) !important;
    color: #e74c3c !important;
    border: none !important;
    width: 25px !important;
    height: 25px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px !important;
}

/* Ajuste para Modo Claro */
body.light-mode .editor-day-column {
    background-color: #ffffff;
    border-color: #dfe7e5;
}
body.light-mode .editor-day-column h2 {
    color: #0056b3;
    border-color: #dfe7e5;
}
body.light-mode .editor-day-column li {
    border-color: #dfe7e5;
}

/* --- CORREÇÃO INTELIGENTE DOS BOTÕES DE COR --- */

/* 1. ESTILO PADRÃO (COMPUTADOR) */
#new-subject-color, 
#edit-subject-color {
    width: 60px !important;    /* Largura discreta no PC */
    height: 45px !important;   /* Altura alinhada com o input */
    padding: 2px !important;
    border-radius: 8px !important;
    cursor: pointer;
    flex: none !important;     /* Impede deformação */
    box-sizing: border-box !important;
    transition: all 0.2s ease; /* Animação suave se mudar de tamanho */
}

/* Ajuste do container que segura o botão (no PC) */
#subject-management-view div[style*="min-width: 60px"] {
    min-width: auto !important;
    width: 60px !important;
}

/* 2. ESTILO PARA CELULAR (MOBILE) */
@media (max-width: 768px) {
    
    /* No celular, queremos botões maiores para o dedo */
    #new-subject-color, 
    #edit-subject-color {
        width: 100px !important;  /* Mais largo e confortável para tocar */
        height: 50px !important;  /* Um pouco mais alto */
    }

    /* O container no celular precisa permitir esse tamanho maior */
    #subject-management-view div[style*="min-width: 60px"] {
        width: 100% !important;       /* Ocupa a largura disponível no flex */
        justify-content: center !important; /* Centraliza o botão */
        margin-top: 5px !important;
    }
}

/* Ajuste de cor da data no Header para Modo Claro */
body.light-mode #current-date {
    color: #1e2230 !important;
}
body.light-mode #help-toggle-btn,
body.light-mode #theme-toggle-btn {
    border-color: #dfe7e5 !important;
    color: #0056b3 !important;
}

/* --- ESTILOS DOS BADGES DO MAPA (Rank e Peixes) --- */

/* Estilo Padrão (Modo Escuro) - Fundo transparente para não tapar o mapa */
.map-badge {
    background: rgba(0,0,0,0.3);
    padding: 5px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    color: #fff;
    border: 1px solid transparent; /* Reserva espaço para borda */
}

/* Cores específicas dos ícones */
.badge-rank i { color: #5c9dff; }
.badge-fish i { color: #f39c12; }

/* --- AJUSTE PARA O MODO CLARO (A Mágica Acontece Aqui) --- */
body.light-mode .map-badge {
    background-color: #ffffff; /* Fundo Branco Sólido */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Sombra para destacar do mapa */
    color: #1e2230; /* Texto Escuro */
}

/* Rank no Modo Claro (Borda e Texto Azul) */
body.light-mode .badge-rank {
    border: 1px solid #0056b3;
    color: #0056b3;
}
body.light-mode .badge-rank span {
    color: #0056b3 !important;
}

/* Peixes no Modo Claro (Borda e Texto Laranja) */
body.light-mode .badge-fish {
    border: 1px solid #e67e22;
    color: #e67e22;
}
body.light-mode .badge-fish span {
    color: #e67e22 !important;
}

/* --- ESTILOS DO SISTEMA DE PATENTES --- */

.rank-system-box {
    margin-top: 25px;
    background-color: rgba(22, 27, 34, 0.6);
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 20px;
    /* Efeito de vidro */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.rank-grid {
    display: grid;
    /* Cria colunas automáticas que se ajustam (mínimo 100px) */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
    gap: 15px;
}

.rank-card {
    background-color: rgba(0,0,0,0.3);
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.4; /* Começa apagado/bloqueado */
    transition: all 0.3s ease;
    filter: grayscale(100%); /* Preto e branco se não tiver alcançado */
}

/* ESTILO DE QUANDO A PATENTE É CONQUISTADA */
.rank-card.achieved {
    opacity: 1; /* Fica totalmente visível */
    filter: grayscale(0%); /* Volta a ter cor */
    background-color: rgba(92, 157, 255, 0.15); /* Fundo azulado leve */
    border-color: #5c9dff; /* Borda azul brilhante */
    box-shadow: 0 4px 15px rgba(92, 157, 255, 0.2); /* Brilho */
    transform: translateY(-3px); /* Levanta um pouco */
}

.rank-icon {
    font-size: 1.8em;
    margin-bottom: 8px;
    color: #f39c12; /* Cor Dourada/Laranja para o ícone */
}

.rank-title {
    display: block;
    font-weight: bold;
    color: #ecf0f1;
    font-size: 0.9em;
    margin-bottom: 2px;
}

.rank-req {
    display: block;
    font-size: 0.75em;
    color: #8b949e;
}

/* --- AJUSTES PARA O MODO CLARO --- */
body.light-mode .rank-system-box {
    background-color: #ffffff;
    border-color: #dfe7e5;
}

body.light-mode .rank-card {
    background-color: #f4f7f6;
    border-color: #dfe7e5;
}

/* Conquistado no Modo Claro */
body.light-mode .rank-card.achieved {
    background-color: #e3f2fd; /* Azul bem clarinho */
    border-color: #0056b3;
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.2);
}

body.light-mode .rank-title {
    color: #1e2230;
}

body.light-mode .rank-req {
    color: #666;
}

/* Ajuste do Diário de Bordo (HUD) no Modo Claro */
body.light-mode #logbook-hud {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #0056b3 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
body.light-mode #map-next-dest { color: #0056b3 !important; }
body.light-mode #map-progress-km { color: #1e2230 !important; }

/* Estilo dos nomes dos continentes no mapa */
.map-continent-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #95a5a6; /* Cinza suave */
    text-transform: uppercase;
    letter-spacing: 2px; /* Espaçamento chique entre letras */
    text-align: center;
    font-size: 14px;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8); /* Borda branca para leitura fácil */
    white-space: nowrap;
}

/* Ajuste para o modo escuro do mapa (se necessário) */
body:not(.light-mode) .map-continent-label {
    color: #5c6bc0; /* Um tom azulado/cinza para combinar com o fundo escuro */
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* --- ESTILOS DA LOJA DE BORDO --- */

/* Estilo Padrão (Modo Escuro) */
.loja-de-bordo-container {
    background-color: rgba(22, 27, 34, 0.6);
    border: 1px solid #30363d;
    transition: all 0.3s ease;
}

.loja-de-bordo-container p {
    color: #8b949e; /* Cor do texto da descrição */
}

/* Estilo Específico para o MODO CLARO */
body.light-mode .loja-de-bordo-container {
    background-color: #ffffff !important; /* Fundo branco limpo */
    border: 1px solid #dfe7e5 !important; /* Borda cinza clara */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra suave */
}

body.light-mode .loja-de-bordo-container h3 {
    color: #6c3483 !important; /* Um roxo mais escuro e legível para o título */
}

body.light-mode .loja-de-bordo-container p {
    color: #57606f !important; /* Texto cinza escuro para fácil leitura */
}

/* Ajuste do botão no modo claro quando desabilitado (sem peixes) */
body.light-mode #buy-freeze-btn:disabled {
    background-color: #bdc3c7 !important; /* Cinza claro */
    color: #7f8c8d !important;
}

/* --- CENTRALIZAR A PATENTE LENDA --- */
.rank-grid .rank-card:last-child {
    grid-column: 1 / -1; /* Força o card a ocupar toda a largura da grade */
    width: 100%;         /* Garante o uso do espaço disponível */
    max-width: 220px;    /* Limita a largura para não ficar esticado demais */
    margin: 10px auto 0 auto; /* Centraliza e dá um espaço no topo */
    
    /* Opcional: Um destaque extra visual para a Lenda */
    border: 1px solid #f39c12; 
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.2); 
}

/* Ajuste para o modo claro */
body.light-mode .rank-grid .rank-card:last-child {
    border-color: #e67e22;
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.2);
}

/* Animação para o aviso de Zoom */
@keyframes pulseZoom {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); }
    50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 30px rgba(241, 196, 15, 0.7); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); }
}

/* --- ESTILO COMPACTO PARA METAS NO MENU LATERAL --- */

/* 1. Reduz o espaçamento dos containers principais */
#menu-goal-container, 
#menu-daily-goal-container {
    margin-bottom: 10px !important; /* Menos espaço entre os blocos */
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Linha mais fina */
}

/* 2. Reduz o tamanho dos Títulos (H3) */
#menu-goal-container h3, 
#menu-daily-goal-container h3 {
    font-size: 0.9em !important; /* Fonte menor */
    margin-bottom: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 10px !important;
}

/* 3. Reduz a altura dos Inputs e Botões (Ficam mais finos) */
#sidebar-menu .goal-input-group input,
#sidebar-menu .goal-input-group button {
    height: 30px !important; /* Altura fixa menor */
    padding: 2px 8px !important; /* Menos preenchimento interno */
    font-size: 0.85em !important; /* Texto menor */
    line-height: 1 !important;
}

/* 4. Ajusta a margem do grupo de input */
#sidebar-menu .goal-input-group {
    margin: 5px auto 8px auto !important;
    max-width: 180px !important; /* Um pouco mais estreito */
}

/* 5. Deixa a barra de progresso mais fina */
#sidebar-menu .progress-bar-container {
    height: 6px !important; /* Barra bem fininha */
    margin-top: 5px !important;
    background-color: rgba(0,0,0,0.3) !important; /* Fundo mais discreto */
}

/* 6. Reduz o texto de "0.0 / 20.0 horas" */
#goal-display-text-menu, 
#daily-goal-display-text-menu {
    font-size: 0.75em !important;
    margin-top: 3px !important;
    color: #8b949e !important; /* Cor mais suave */
}

/* 7. Ajuste para o texto "Defina sua meta..." não quebrar linha feio */
#sidebar-menu .goal-container {
    padding: 0 10px !important;
}

/* --- ESTILOS DO BLOCO DE INSTRUÇÕES DE VIAGEM --- */
.voyage-instructions-box ul {
    list-style: none;
    padding-left: 0;
    margin-top: 8px;
}
.voyage-instructions-box li {
    line-height: 1.4;
    padding-left: 0;
}
.voyage-instructions-box li i {
    margin-right: 5px;
}
.voyage-instructions-box p {
    color: #ecf0f1 !important;
}

/* Ajuste Light Mode */
body.light-mode .voyage-instructions-box {
    background: rgba(9, 105, 218, 0.1) !important;
    border-color: #0969da !important;
}
body.light-mode .voyage-instructions-box h4 {
    color: #0969da !important;
    border-bottom-color: #0969da !important;
}
body.light-mode .voyage-instructions-box p {
    color: #1e2230 !important;
}

/* --- ESTILOS PARA O BADGE DE NÍVEL --- */

/* Cor Padrão (Amarelo Estrela) */
.map-badge.badge-level i { 
    color: #ffd700; /* Dourado/Estrela */
}

/* Fundo no Modo Claro */
body.light-mode .map-badge.badge-level {
    border: 1px solid #e67e22; /* Borda Laranja para combinar com o ícone */
    color: #1e2230; /* Texto Escuro */
}

/* --- ESTILOS DO NÍVEL RÁPIDO (CINZA CLARO NO DARK MODE) --- */
#quick-level-box {
    /* Estilos de Estrutura (Mantidos) */
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 5px; 
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
    display: block;
    cursor: pointer;
    
    /* MODO ESCURO: Fundo Cinza Claro Suave (Melhor Contraste) */
    background-color: #ecf0f1 !important; /* Cinza claro suave */
    color: #1e2230 !important;           /* Texto Escuro */
    border: 1px solid #c0c0c0 !important; /* Borda cinza suave */
}

/* Ícone no MODO ESCURO */
#quick-level-box i {
    margin-right: 5px; 
    color: #f39c12 !important; /* Laranja/Farol para destaque */
}

/* Número no MODO ESCURO */
#quick-level-box #quick-level-display {
    color: #1e2230 !important; /* Número escuro */
}

/* Hover no MODO ESCURO (para dar um contraste) */
#quick-level-box:hover {
    background-color: #ffffff !important; /* Fica branco no hover */
}

/* --- OVERRIDE PARA MODO CLARO (Mantém a cor escura/dourada solicitada) --- */

body.light-mode #quick-level-box {
    background-color: #34495e !important; /* Mantém sua cor solicitada: Cinza-azulado escuro */
    color: #ffd700 !important; 
    border: 1px solid #2c3e50 !important;
}

body.light-mode #quick-level-box:hover {
    background-color: #2c3e50 !important;
    cursor: default;
}

body.light-mode #quick-level-box i,
body.light-mode #quick-level-box #quick-level-display {
    color: #ffd700 !important;
}

/* --- ESTILO DO AVISO DE INTEGRAÇÃO --- */
.integration-notice-box {
    background-color: rgba(52, 152, 219, 0.15);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-left: 5px solid #3498db;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-align: left;
    color: #ecf0f1; /* Cor padrão Dark Mode */
    transition: all 0.3s ease;
}

.integration-notice-box h4 {
    margin: 0 0 5px 0;
    color: #3498db;
    font-size: 1.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.integration-notice-box p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
    opacity: 0.9;
    text-align: justify; /* <--- ADICIONE ESTA LINHA */
}

/* Ajuste para Modo Claro */
body.light-mode .integration-notice-box {
    background-color: #e3f2fd; /* Azul bem clarinho */
    border-color: #90caf9;
    border-left-color: #1976d2;
    color: #0d47a1; /* Texto azul escuro */
}
body.light-mode .integration-notice-box h4 {
    color: #1565c0;
}

/* --- CORREÇÃO INTELIGENTE DOS POPUPS DO MAPA --- */

/* 1. Estilos Internos do Texto (Padrão Dark Mode) */
.locked-popup-content {
    text-align: center;
    width: 200px;
    padding: 5px;
}
.locked-title {
    display: block;
    margin-bottom: 5px;
    color: #ffffff; /* Branco no modo escuro */
}
.locked-desc {
    font-size: 0.9em;
    margin: 0;
    line-height: 1.4;
    color: #ecf0f1; /* Cinza claro no modo escuro */
}

/* 2. Adaptação para MODO CLARO (Inverte as cores do texto) */
body.light-mode .locked-title {
    color: #1e2230; /* Escuro no modo claro */
}
body.light-mode .locked-desc {
    color: #555555; /* Cinza escuro no modo claro */
}

/* 3. FUNDO DO BALÃO (A parte mais importante) */

/* No Modo Escuro (Padrão): Fundo Escuro Glass */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: rgba(30, 34, 48, 0.95) !important; /* Fundo Escuro */
    border: 1px solid #30363d;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    color: #ecf0f1;
}

/* No Modo Claro: Fundo Branco Limpo */
body.light-mode .leaflet-popup-content-wrapper, 
body.light-mode .leaflet-popup-tip {
    background-color: #ffffff !important; /* Fundo Branco */
    border: 1px solid #dfe7e5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    color: #1e2230;
}

/* --- CORREÇÃO DE COR DO TEXTO NOS CARTÕES --- */
        /* Força o texto em negrito a obedecer a cor calculada (branco/preto) em vez do azul do tema */
        .day-column li strong, 
        .day-column li span,
        .day-column li label {
            color: inherit !important;
        }

/* --- REDESIGN CLEAN: PAINEL DE NAVEGAÇÃO EM GRID --- */

/* 1. Transforma a coluna lateral em um Grid de 2 colunas */
.button-group-vertical {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* 2 Colunas iguais */
    gap: 12px !important; /* Espaço entre os botões */
    padding: 15px !important;
    background-color: transparent !important; /* Remove fundo do container */
    border: none !important; /* Remove borda do container */
    box-shadow: none !important;
}

/* 2. Estilo dos Botões (Quadrados e Minimalistas) */
.button-group-vertical button {
    display: flex !important;
    flex-direction: column !important; /* Ícone em cima, texto embaixo */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    height: 90px !important; /* Altura fixa menor */
    padding: 10px !important;
    margin: 0 !important;
    
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borda sutil */
    background-color: #1e2230 !important; /* Fundo escuro uniforme */
    
    /* Tipografia e Ícone */
    font-size: 0.85em !important; /* Fonte menor */
    font-weight: 500 !important;
    color: #8b949e !important; /* Texto cinza (menos agressivo) */
    
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    border-left: none !important; /* Remove a borda colorida grossa da esquerda */
}

/* 3. Ícones menores e centralizados */
.button-group-vertical button i {
    font-size: 1.6em !important; /* Ícone um pouco menor */
    margin-right: 0 !important; /* Remove margem lateral */
    margin-bottom: 8px !important; /* Espaço entre ícone e texto */
    display: block !important;
    width: auto !important;
}

/* 4. Hover: O botão "acende" com a cor dele */
.button-group-vertical button:hover {
    transform: translateY(-3px);
    background-color: #252a35 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Cores dos Ícones (Mantém a identidade, mas só no ícone) */
#timer-button i { color: #1abc9c; }
#dashboard-button i { color: #95a5a6; }
#review-button i { color: #f39c12; }
#flashcard-button i { color: #8e44ad; }
#tasks-button i { color: #16a085; }
#syllabus-button i { color: #3f51b5; }
#voyage-button i { color: #0984e3; }
#edit-schedule-button i, #edit-cycle-button-quick i { color: #3498db; }

/* Destaque especial para o Cronômetro (Botão Principal) */
#timer-button {
    grid-column: span 2; /* Ocupa as 2 colunas (largura total) */
    flex-direction: row !important; /* Ícone ao lado do texto */
    height: 60px !important;
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 1em !important;
}
#timer-button i {
    color: white !important;
    margin-bottom: 0 !important;
    margin-right: 10px !important;
}

/* Ajustes Mobile */
@media (max-width: 768px) {
    .button-group-vertical {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas no celular */
        gap: 8px !important;
    }
    .button-group-vertical button {
        height: 80px !important;
        font-size: 0.75em !important;
    }
}

/* --- REDESIGN CLEAN: PAINEL DE NAVEGAÇÃO EM GRID --- */

/* 1. Transforma a coluna lateral em um Grid de 2 colunas */
.button-group-vertical {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* 2 Colunas iguais */
    gap: 12px !important; /* Espaço entre os botões */
    padding: 15px !important;
    background-color: transparent !important; /* Remove fundo do container */
    border: none !important; /* Remove borda do container */
    box-shadow: none !important;
}

/* 2. Estilo dos Botões (Quadrados e Minimalistas) */
.button-group-vertical button {
    display: flex !important;
    flex-direction: column !important; /* Ícone em cima, texto embaixo */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    height: 90px !important; /* Altura fixa menor */
    padding: 10px !important;
    margin: 0 !important;
    
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borda sutil */
    background-color: #1e2230 !important; /* Fundo escuro uniforme */
    
    /* Tipografia e Ícone */
    font-size: 0.85em !important; /* Fonte menor */
    font-weight: 500 !important;
    color: #8b949e !important; /* Texto cinza (menos agressivo) */
    
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    border-left: none !important; /* Remove a borda colorida grossa da esquerda */
}

/* 3. Ícones menores e centralizados */
.button-group-vertical button i {
    font-size: 1.6em !important; /* Ícone um pouco menor */
    margin-right: 0 !important; /* Remove margem lateral */
    margin-bottom: 8px !important; /* Espaço entre ícone e texto */
    display: block !important;
    width: auto !important;
}

/* 4. Hover: O botão "acende" com a cor dele */
.button-group-vertical button:hover {
    transform: translateY(-3px);
    background-color: #252a35 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Cores dos Ícones (Mantém a identidade, mas só no ícone) */
#timer-button i { color: #1abc9c; }
#dashboard-button i { color: #95a5a6; }
#review-button i { color: #f39c12; }
#flashcard-button i { color: #8e44ad; }
#tasks-button i { color: #16a085; }
#syllabus-button i { color: #3f51b5; }
#voyage-button i { color: #0984e3; }
#edit-schedule-button i, #edit-cycle-button-quick i { color: #3498db; }

/* Destaque especial para o Cronômetro (Botão Principal) */
#timer-button {
    grid-column: span 2; /* Ocupa as 2 colunas (largura total) */
    flex-direction: row !important; /* Ícone ao lado do texto */
    height: 60px !important;
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 1em !important;
}
#timer-button i {
    color: white !important;
    margin-bottom: 0 !important;
    margin-right: 10px !important;
}

/* Ajustes Mobile */
@media (max-width: 768px) {
    .button-group-vertical {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas no celular */
        gap: 8px !important;
    }
    .button-group-vertical button {
        height: 80px !important;
        font-size: 0.75em !important;
    }
}


/* Cards do Cronograma mais limpos */
.day-column {
    background-color: transparent !important; /* Remove o fundo pesado */
    border: 1px solid rgba(255,255,255,0.1) !important; /* Borda muito fina */
    box-shadow: none !important;
}
.day-column h2 {
    font-size: 1em !important; /* Título do dia menor */
    opacity: 0.8;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.day-column li {
    padding: 6px 10px !important; /* Itens mais compactos */
    font-size: 0.9em !important;
    margin-bottom: 4px !important;
}


/* --- AJUSTE FINO: MENU LATERAL MAIS COMPACTO --- */

/* 1. Reduz o tamanho dos botões (Links) */
#sidebar-menu a {
    padding: 8px 10px !important; /* Menos "gordura" interna */
    font-size: 0.95em !important; /* Fonte levemente menor */
    min-height: auto !important;  /* Garante que não tenha altura mínima forçada */
    line-height: 1.2 !important;  /* Altura da linha mais justa */
}

/* 2. Reduz o espaço entre os itens da lista */
#sidebar-menu li {
    margin-bottom: 5px !important; /* Aproxima um botão do outro */
}

/* 3. Ajusta o tamanho dos ícones para acompanhar o texto */
#sidebar-menu a i {
    font-size: 1em !important; /* Ícone do mesmo tamanho da fonte */
    width: 18px !important;    /* Largura fixa menor para alinhar */
    margin-right: 6px !important;
}

/* 4. (Opcional) Títulos das seções do menu menores */
#sidebar-menu h2, 
#sidebar-menu h3 {
    font-size: 1.1em !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
}

/* --- AJUSTE: BLOCO DE STREAK MAIS COMPACTO NO MENU --- */

#menu-streak-box {
    padding: 8px 10px !important; /* Reduz a altura do box */
    font-size: 0.85em !important; /* Texto base menor */
    margin-bottom: 10px !important; /* Espaço para o próximo item */
    line-height: 1.2 !important; /* Texto mais junto */
    
    /* Opcional: Se quiser tirar a sombra para ficar mais "flat" */
    box-shadow: none !important; 
    border: 1px solid rgba(0,0,0,0.2) !important;
}

#menu-streak-box .streak-value {
    font-size: 1.2em !important; /* Número menor (era 1.4em) */
    margin-right: 4px !important;
}

/* --- LAYOUT HORIZONTAL: METAS (Semanal e Diária lado a lado) --- */

/* 1. O Container Pai (A "linha" que segura os dois) */
.goals-wrapper-horizontal {
    display: flex;             /* Ativa o modo Flexbox (lado a lado) */
    gap: 20px;                 /* Espaço entre as duas caixas */
    justify-content: center;   /* Centraliza o conjunto na tela */
    max-width: 1100px;         /* Largura máxima para não esticar demais em telas gigantes */
    margin: 0 auto 30px auto;  /* Centraliza horizontalmente e dá espaço embaixo */
    align-items: stretch;      /* Força as duas caixas a terem a mesma altura */
}

/* 2. Os Itens Filhos (As caixas de meta) */
.goals-wrapper-horizontal > div {
    flex: 1;                   /* Divide o espaço igualmente (50% / 50%) */
    width: 100%;               /* Garante que preencha o espaço alocado */
    min-width: 300px;          /* Garante que não fiquem espremidos demais */
}

/* 3. Ajuste para o conteúdo interno preencher a altura */
.goals-wrapper-horizontal .goal-container {
    height: 100%;              /* Ocupa toda a altura disponível */
    display: flex;
    flex-direction: column;
    justify-content: center;   /* Centraliza o conteúdo verticalmente */
    box-sizing: border-box;    /* Garante que o padding não aumente o tamanho */
}

/* --- RESPONSIVIDADE (CELULAR) --- */
/* Quando a tela for pequena (celular), volta a ficar um embaixo do outro */
@media (max-width: 768px) {
    .goals-wrapper-horizontal {
        flex-direction: column; /* Empilha verticalmente */
    }
    
    .goals-wrapper-horizontal > div {
        min-width: auto;        /* Remove a trava de largura mínima */
    }
}

/* --- REDESIGN: AGENDADOR DE REVISÃO HORIZONTAL --- */

/* 1. Transforma o container vertical em uma Linha Horizontal */
.review-scheduler {
    display: flex !important;
    gap: 15px !important;
    align-items: flex-end !important; /* Alinha o botão com a base dos inputs (ignora o label) */
    
    background-color: rgba(22, 27, 34, 0.6) !important; /* Fundo sutil para destacar a área */
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    margin-bottom: 20px !important;
}

/* 2. Faz os campos (Inputs) dividirem o espaço */
.review-scheduler .modal-field {
    margin-bottom: 0 !important; /* Remove o espaço de baixo que separava as linhas */
    flex: 1 !important;          /* Faz todos crescerem para ocupar a largura */
    min-width: 150px !important; /* Garante que não fiquem espremidos demais */
}

/* 3. Ajuste Específico para o Campo "Assunto" (Dar mais espaço pra ele) */
.review-scheduler .modal-field:nth-child(2) {
    flex: 2 !important; /* O Assunto ganha o dobro de espaço dos outros */
}

/* 4. O Botão "Agendar" (Ajuste para alinhar perfeitamente) */
#schedule-review-btn {
    height: 46px !important;     /* Altura forçada para igualar ao input + borda */
    margin: 0 !important;        /* Remove margens estranhas */
    min-width: 120px !important; /* Largura fixa para o botão */
    margin-bottom: 1px !important; /* Ajuste fino de pixel para alinhar com a linha do input */
}

/* 5. Ajuste para o MODO CLARO (Light Mode) */
body.light-mode .review-scheduler {
    background-color: #ffffff !important;
    border-color: #dfe7e5 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* --- RESPONSIVIDADE (CELULAR) --- */
/* No celular, volta a ser vertical para caber na tela */
@media (max-width: 768px) {
    .review-scheduler {
        flex-direction: column !important;
        align-items: stretch !important; /* Estica os itens */
        gap: 15px !important;
    }
    #schedule-review-btn {
        width: 100% !important;
        margin-top: 10px !important;
    }
}

/* --- REDESIGN: BARRA DE FERRAMENTAS DO EDITAL --- */

.syllabus-toolbar {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: rgba(22, 27, 34, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

/* Divisor vertical entre Progresso e Ações */
.toolbar-divider {
    width: 1px;
    height: 30px;
    background-color: rgba(255,255,255,0.1);
}

/* Grupo de Ações (Direita) */
.syllabus-actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1; /* Ocupa o resto do espaço */
}

/* Botões Compactos */
.compact-btn-purple {
    background-color: #9b59b6 !important;
    color: white !important;
    padding: 8px 15px !important;
    font-size: 0.9em !important;
    white-space: nowrap;
}
.compact-btn-blue {
    background-color: #5c9dff !important;
    color: #1e2230 !important;
    width: 40px !important; /* Botão quadrado pequeno */
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Input Compacto */
.compact-input {
    padding: 8px 12px !important;
    font-size: 0.9em !important;
    background-color: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    flex-grow: 1;
}

/* Ajuste Modo Claro */
body.light-mode .syllabus-toolbar {
    background-color: #ffffff !important;
    border-color: #dfe7e5 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
body.light-mode .compact-input {
    background-color: #f4f7f6 !important;
    border-color: #dfe7e5 !important;
    color: #1e2230 !important;
}
body.light-mode .toolbar-divider {
    background-color: #dfe7e5;
}

/* Responsividade Mobile (Empilha se faltar espaço) */
@media (max-width: 768px) {
    .syllabus-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .toolbar-divider { display: none; }
    .syllabus-stats-compact {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .desktop-text { display: none; } /* Esconde texto "Colar Edital" no celular, deixa só ícone */
}


/* --- ACABAMENTO PRO: TABELA DE DADOS --- */

#logbook-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    font-size: 0.9em;
}

/* Cabeçalho Fixo (Sticky Header) - Ótimo para PC */
#logbook-table thead th {
    position: sticky;
    top: 0;
    background-color: #1e2230; /* Fundo sólido para não ver o texto passando por trás */
    color: #5c9dff;
    padding: 15px 10px;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
    border-bottom: 2px solid #5c9dff;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Linhas da Tabela */
#logbook-table td {
    padding: 12px 10px;
    border: none !important; /* Remove as grades verticais chatas */
    border-bottom: 1px solid rgba(255,255,255,0.05) !important; /* Apenas linha horizontal fina */
    color: #ecf0f1;
}

/* Efeito Zebra (Linhas alternadas) */
#logbook-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Efeito Hover (Destaca a linha ao passar o mouse) */
#logbook-table tbody tr:hover {
    background-color: rgba(92, 157, 255, 0.1);
    transition: background-color 0.2s;
}

/* Ajuste Modo Claro */
body.light-mode #logbook-table thead th {
    background-color: #ffffff;
    color: #0056b3;
    border-bottom-color: #0056b3;
}
body.light-mode #logbook-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}
body.light-mode #logbook-table tbody tr:hover {
    background-color: rgba(0, 86, 179, 0.05);
}
body.light-mode #logbook-table td {
    color: #1e2230;
    border-bottom-color: rgba(0,0,0,0.1) !important;
}

/* --- ACABAMENTO PRO: EMPTY STATES (ESTADO VAZIO) --- */

/* Adiciona uma mensagem quando a lista do dia está vazia */
.day-column ul:empty::after {
    content: "Dia Livre"; /* O texto que aparece */
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.1); /* Bem apagadinho */
    font-style: italic;
    padding: 20px 0;
    font-size: 0.9em;
    pointer-events: none;
}

/* Modo Claro */
body.light-mode .day-column ul:empty::after {
    color: rgba(0,0,0,0.2);
}


.kpi-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
    flex-wrap: wrap;
}
.kpi-card {
    flex: 1;
    min-width: 200px;
    background: rgba(22, 27, 34, 0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(5px);
}
.kpi-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: rgba(92, 157, 255, 0.2);
    color: #5c9dff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}
.kpi-content { display: flex; flex-direction: column; }
.kpi-label { font-size: 0.8em; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 1.4em; font-weight: bold; color: #ecf0f1; font-family: 'Poppins', sans-serif; }

/* Light Mode */
body.light-mode .kpi-card { background: #fff; border-color: #dfe7e5; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
body.light-mode .kpi-value { color: #1e2230; }


/* Animação de Pulso para o Cronômetro */
@keyframes pulse-ring {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(92, 157, 255, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(92, 157, 255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(92, 157, 255, 0); }
}

/* Aplique isso ao ID do círculo quando estiver rodando (via JS ou fixo se quiser testar) */
/* No seu CSS atual, adicione isso ao #timer-display-circle */
#timer-display-circle {
    /* ... mantenha o resto ... */
    animation: pulse-ring 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Light mode pulse color */
body.light-mode #timer-display-circle {
    animation-name: pulse-ring-light;
}
@keyframes pulse-ring-light {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(9, 105, 218, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(9, 105, 218, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(9, 105, 218, 0); }
}

#fc-srs-controls {
    gap: 15px !important;
}
#fc-srs-controls button {
    flex: 1;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    position: relative;
    overflow: hidden;
}
/* Adiciona uma barrinha colorida no fundo do botão para estilo */
#fc-srs-easy-btn { border-bottom: 4px solid #2ecc71 !important; }
#fc-srs-medium-btn { border-bottom: 4px solid #3498db !important; }
#fc-srs-hard-btn { border-bottom: 4px solid #e74c3c !important; }


/* --- BADGES DE PRIORIDADE (Tarefas) --- */
.task-priority-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 10px;
    border: 1px solid transparent;
}

/* Cores específicas para cada nível */
.badge-Alta { 
    background-color: rgba(231, 76, 60, 0.15); 
    color: #e74c3c; 
    border-color: rgba(231, 76, 60, 0.3);
}

.badge-Normal { 
    background-color: rgba(52, 152, 219, 0.15); 
    color: #3498db; 
    border-color: rgba(52, 152, 219, 0.3);
}

.badge-Baixa { 
    background-color: rgba(46, 204, 113, 0.15); 
    color: #2ecc71; 
    border-color: rgba(46, 204, 113, 0.3);
}

/* Ajuste para Modo Claro */
body.light-mode .badge-Alta { background-color: #fdecea; }
body.light-mode .badge-Normal { background-color: #ebf5fb; }
body.light-mode .badge-Baixa { background-color: #eafaf1; }


/* --- WIDGET DE VIAGEM NA HOME --- */
#home-voyage-widget {
    background: linear-gradient(135deg, rgba(9, 132, 227, 0.15) 0%, rgba(9, 132, 227, 0.05) 100%);
    border: 1px solid rgba(9, 132, 227, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#home-voyage-widget:hover {
    transform: translateY(-2px);
    border-color: #0984e3;
    box-shadow: 0 4px 15px rgba(9, 132, 227, 0.15);
}

/* Lado Esquerdo: Ícone e Texto */
.voyage-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.voyage-icon-box {
    width: 40px;
    height: 40px;
    background-color: #0984e3;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    box-shadow: 0 0 10px rgba(9, 132, 227, 0.4);
}

.voyage-text {
    display: flex;
    flex-direction: column;
}

.voyage-label {
    font-size: 0.75em;
    text-transform: uppercase;
    color: #8b949e;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.voyage-dest {
    font-size: 1.1em;
    font-weight: 700;
    color: #5c9dff; /* Azul Claro */
    font-family: 'Poppins', sans-serif;
}

/* Lado Direito: Tempo e Barra */
.voyage-stats {
    text-align: right;
    min-width: 120px;
}

.voyage-timer {
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    color: #e67e22; /* Laranja para destaque */
    margin-bottom: 5px;
}

.voyage-mini-bar-bg {
    width: 100%;
    height: 6px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.voyage-mini-bar-fill {
    height: 100%;
    width: 0%;
    background-color: #0984e3;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* MODO CLARO */
body.light-mode #home-voyage-widget {
    background: #f0f8ff; /* AliceBlue */
    border-color: #b3e5fc;
}
body.light-mode .voyage-dest { color: #0056b3; }
body.light-mode .voyage-mini-bar-bg { background-color: #e0e0e0; }

/* MOBILE */
@media (max-width: 768px) {
    #home-voyage-widget {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .voyage-stats {
        width: 100%;
        text-align: left;
    }
    .voyage-timer {
        text-align: right; /* Mantém o tempo na direita da barra */
    }
}


/* --- REDESIGN: BIBLIOTECA DE MATÉRIAS (GRID) --- */

.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 3 colunas que se ajustam */
    gap: 15px;
    margin-bottom: 20px;
}

.lib-card {
    background-color: rgba(255, 255, 255, 0.03); /* Fundo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s;
}

.lib-card:hover {
    border-color: #5c9dff;
    transform: translateY(-2px);
}

.lib-card h4 {
    margin: 0;
    font-size: 1em;
    color: #5c9dff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Inputs e Botões dentro dos Cards */
.lib-card input[type="text"], 
.lib-card select {
    width: 100% !important;
    font-size: 0.9em !important;
    margin: 0 !important;
    background-color: rgba(0,0,0,0.2) !important;
}

.lib-row {
    display: flex;
    gap: 8px;
}

.lib-row input[type="color"] {
    width: 45px !important;
    height: 38px !important;
    padding: 2px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    cursor: pointer;
    flex: none; /* Não estica */
}

.lib-card button {
    flex: 1; /* Ocupa o resto do espaço */
    padding: 0 15px !important;
    height: 38px !important;
    font-size: 0.9em !important;
    font-weight: bold;
    border-radius: 6px !important;
    border: none;
    cursor: pointer;
}

/* MODO CLARO */
body.light-mode .lib-card {
    background-color: #ffffff;
    border-color: #dfe7e5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
body.light-mode .lib-card input[type="text"], 
body.light-mode .lib-card select {
    background-color: #f4f7f6 !important;
    color: #1e2230 !important;
}

/* --- CORREÇÕES FINAIS: BIBLIOTECA DE MATÉRIAS --- */

/* 1. Corrige o Input estourando o card */
.lib-card input[type="text"], 
.lib-card select {
    width: 100% !important;
    box-sizing: border-box !important; /* O SEGREDO: Faz o padding caber dentro da largura */
    max-width: 100% !important;        /* Garante que nunca ultrapasse o pai */
    padding: 10px !important;          /* Garante espaço interno confortável */
}

/* 2. Centraliza o conteúdo do Card de Excluir */
.delete-card {
    align-items: center !important; /* Centraliza os itens na vertical (Flex Column) */
    text-align: center !important;  /* Centraliza textos */
}

/* Centraliza o título "Excluir" e a linha abaixo dele */
.delete-card h4 {
    justify-content: center !important; /* Alinha o ícone e texto no centro */
    width: 100%;
    border-bottom-color: rgba(231,76,60,0.3) !important; /* Mantém a cor vermelha sutil */
}

/* O botão de excluir fica melhor se ocupar a largura toda, mas centralizado */
#delete-subject-btn {
    width: 100% !important;
    margin-top: 10px !important;
}

/* --- REGRA EXCLUSIVA PARA CENTRALIZAR O CARD DE EXCLUSÃO (SOLUÇÃO) --- */

.library-grid .delete-card {
    /* PASSO 1: Força o card a ir para a linha de baixo e ocupar a largura total do grid */
    grid-column: 1 / -1; 
    
    /* PASSO 2: Limita a largura do card para ele não se esticar demais */
    max-width: 250px !important; /* Use o tamanho que você acha ideal (ex: 250px) */
    
    /* PASSO 3: CENTRALIZA o bloco de 250px na largura total que ele ocupa (1 / -1) */
    margin: 15px auto 0 auto !important; 
    
    /* Garante que o conteúdo interno fique alinhado ao centro */
    align-items: center !important; 
    text-align: center !important;
}

/* Garante que o título 'Excluir' fique centralizado dentro do card */
.delete-card h4 {
    justify-content: center !important; 
}

/* Garante que o seletor ocupe a largura total do CARD de 250px */
.delete-card select {
    width: 100% !important;
}

/* Ajusta o botão 'Excluir Permanente' */
#delete-subject-btn {
    width: 100% !important;
    margin-top: 10px !important; /* Mais espaço para o botão */
}


/* --- COMPACTAÇÃO DA META SEMANAL NA TELA 'EDITAR CRONOGRAMA' --- */

/* 1. Reduz o padding e a margem externa do bloco */
#subject-management-view .goal-container {
    padding: 10px !important; /* Reduz o padding interno do card */
    margin: 0 auto 15px auto !important; /* Reduz a margem inferior */
}

/* 2. Reduz o tamanho do título H3 */
#subject-management-view .goal-container h3 {
    font-size: 1.1em !important; /* De 1.4em para 1.1em */
    margin-bottom: 5px !important;
    margin-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 3. Reduz a altura do input e do botão "Salvar" */
#subject-management-view .goal-input-group input,
#subject-management-view .goal-input-group button {
    height: 35px !important; /* Altura mais fina */
    padding: 5px 10px !important; /* Reduz o padding interno */
    font-size: 0.9em !important; /* Fonte menor */
}

/* 4. Reduz a barra de progresso */
#subject-management-view .progress-bar-container {
    height: 8px !important; /* Barra mais fina */
    margin-top: 5px !important;
}

/* 5. Reduz o texto de exibição (ex: 0.0 / 20.0 horas) */
#subject-management-view #goal-display-text-editor {
    font-size: 0.85em !important; 
    margin-top: 3px !important;
}

/* 6. Reduz o padding superior no container de Metas */
#subject-management-view > div[style*="margin-bottom: 30px"] {
    margin-bottom: 15px !important;
}

/* Correção do Input na Biblioteca de Matérias */
.lib-card input[type="text"], 
.lib-card select {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Mais claro */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important; /* Impede que saia do bloco */
    border-radius: 6px !important;
    padding: 10px !important;
}

/* Ajuste para o Modo Claro */
body.light-mode .lib-card input[type="text"], 
body.light-mode .lib-card select {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

/* --- CORREÇÃO FINAL PARA ROLAGEM LATERAL --- */
html, body {
    overflow-x: hidden; /* Corta o que passar da largura da tela */
    max-width: 100%;    /* Garante que o corpo não seja maior que a janela */
}


/* --- ESTILOS DA NOVA PÁGINA DE AJUDA --- */

/* 1. O Container Principal da Página */
#help-view {
    text-align: center;
    max-width: 800px; /* Largura ideal para leitura, igual a um livro */
    margin: 25px auto; /* Centraliza na tela */
    animation: fadeIn 0.3s ease; /* Efeito suave ao aparecer */
}

#help-view h2 {
    color: #5c9dff;
    margin-bottom: 20px;
    border-bottom: 2px solid #30363d;
    padding-bottom: 10px;
}

/* 2. O Bloco de Texto (Corpo) */
.help-body {
    text-align: justify !important;
    background-color: rgba(22, 27, 34, 0.6); /* Fundo escuro translúcido */
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #30363d;
    margin-bottom: 20px;
    backdrop-filter: blur(5px); /* Efeito vidro */
}

.help-body p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #ecf0f1;
}

/* 3. Os Itens Expansíveis (Acordeão) */
#help-view details {
    background-color: #161b22; /* Fundo mais escuro que o corpo */
    border: 1px solid #30363d;
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
}

#help-view details[open] {
    border-color: #5c9dff; /* Borda azul quando aberto */
    background-color: rgba(92, 157, 255, 0.05); /* Fundo azulado leve */
}

#help-view summary {
    font-weight: bold;
    color: #f39c12; /* Laranja para destaque */
    cursor: pointer;
    list-style: none; /* Remove a setinha padrão feia */
    outline: none;
    font-size: 1.05em;
}

/* Estilo para listas dentro da ajuda */
#help-view ul {
    padding-left: 20px;
    margin-top: 10px;
}
#help-view li {
    margin-bottom: 5px;
    color: #c9d1d9;
}

/* --- SUPORTE AO MODO CLARO (Light Mode) --- */
body.light-mode #help-view h2 {
    color: #0056b3;
    border-bottom-color: #dfe7e5;
}

body.light-mode .help-body {
    background-color: #ffffff;
    border-color: #dfe7e5;
    color: #1e2230;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

body.light-mode .help-body p,
body.light-mode #help-view li {
    color: #333333; /* Texto escuro */
}

body.light-mode #help-view details {
    background-color: #f4f7f6;
    border-color: #dfe7e5;
}

body.light-mode #help-view details[open] {
    border-color: #0056b3;
    background-color: #e3f2fd;
}

body.light-mode #help-view summary {
    color: #e67e22; /* Laranja mais escuro */
}

/* --- COR DA FRASE FINAL DO MANUAL --- */

/* Cor no Modo Escuro (Padrão) */
#help-final-msg {
    color: #f1c40f; /* Amarelo */
}

/* Cor no Modo Claro */
body.light-mode #help-final-msg {
    color: #e67e22; /* Laranja Escuro (Legível no fundo branco) */
    /* Se preferir Azul, troque por: #0056b3 */
}

/* --- CORREÇÃO: MODAL SOBREPOR O MENU INFERIOR --- */
.modal-overlay {
    /* Aumentamos para 10001 para vencer o 9999 do bottom-nav */
    z-index: 10001 !important; 
}

@media (max-width: 768px) {
    .modal-overlay .modal-content {
        /* Reduz um pouco a altura máxima para não ocupar 100% da tela e colar nas bordas */
        max-height: 85vh !important; 
        
        /* Adiciona um preenchimento extra no fundo para facilitar o scroll até o final */
        padding-bottom: 40px !important; 
    }
    
    /* Garante que os botões tenham espaço para respirar */
    .modal-buttons {
        margin-bottom: 20px !important;
    }
}


@media (max-width: 768px) {
    /* Reset do corpo para ocupar a tela toda */
    body {
        padding: 0 !important; /* Remove o padding de 10px que estava empurrando tudo */
        background-color: #161b22; /* Garante que o fundo cubra tudo */
    }

    /* O Container principal agora se ajusta sem vazar */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important; /* Remove bordas arredondadas nos cantos da tela */
        border: none !important; /* Remove borda lateral para ganhar espaço */
        padding: 15px 10px !important; /* Espaçamento interno seguro */
        box-sizing: border-box !important;
    }

    /* Ajuste dos Cards de KPI (Streak, Hoje, Revisão) para não estourarem */
    #quick-kpis-mobile {
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 5px !important; /* Reduz o espaço entre eles */
    }

    .kpi-card {
        min-width: 0 !important; /* Permite que o card encolha se precisar */
        padding: 8px 2px !important; /* Reduz o preenchimento interno */
        flex: 1 1 0px !important; /* Força todos a terem a mesma largura */
    }
    
    .kpi-title {
        font-size: 0.65em !important; /* Fonte menor para caber */
    }
    
    .kpi-value {
        font-size: 1.2em !important;
    }

    /* Ajuste dos botões de Seleção de Modo (Cronograma/Ciclo) */
    #cycle-selector {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #select-schedule-mode, 
    #select-cycle-mode {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Widget de Viagem (O barco azul) */
    #home-voyage-widget {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 15px !important;
    }
}

@media (max-width: 768px) {
    /* 1. Ajuste do Corpo da Página */
    body {
        /* Zera topo/esquerda/direita, mas adiciona 120px embaixo */
        padding: 0 0 120px 0 !important; 
        
        overflow-x: hidden; /* Mantém a proteção contra vazamento lateral */
        background-color: #161b22;
    }

}

/* --- RESPONSIVIDADE GERAL E MOBILE (CSS CONSOLIDADO) --- */
@media (max-width: 900px) {
    /* 1. Ajustes Estruturais Básicos */
    body {
        padding: 0 !important; /* Remove padding lateral do body para ganhar espaço */
        padding-bottom: 80px !important; /* Espaço para o menu inferior */
        overflow-x: hidden; /* Evita rolagem lateral indesejada */
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 15px 10px !important; /* Padding interno menor */
    }

    /* 2. Cabeçalho (O fim do Position Absolute) */
    .header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        height: auto !important;
        gap: 15px !important;
        padding-bottom: 20px;
    }

    .header-left, .header-right {
        position: static !important; /* Remove posicionamento absoluto */
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Esconde botões que já existem na barra inferior para limpar o topo */
    #header-home-btn, 
    #menu-toggle-btn {
        display: none !important;
    }

    /* Ajuste do container do nome do plano */
    #plan-name-container-header {
        order: -1; /* Joga o nome para o topo */
        width: 100%;
        margin-bottom: 10px;
    }
    
    .header-plan-editor input {
        width: 90% !important; /* Input responsivo */
    }

    /* Barra de status (Metas/Revisão) empilhada ou com scroll */
    #header-status-bar {
        flex-wrap: wrap;
        justify-content: center;
        width: 100% !important;
        padding: 10px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }
    .status-divider { display: none; } /* Remove divisores verticais no mobile */

    /* 3. Cronômetro (Círculo Responsivo) */
    #timer-display-circle {
        width: 260px !important; /* Tamanho fixo menor */
        height: 260px !important;
        margin: 20px auto !important;
    }
    #timer-display-running {
        font-size: 3.5em !important;
    }
    
    /* Botões de controle do timer */
    #timer-buttons-aligned {
        gap: 15px !important;
    }
    #pause-timer-running, #stop-timer-running, #discard-timer-running {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5em !important;
        line-height: 60px !important;
    }

    /* 4. Grids e Layouts (Transformar colunas em pilhas) */
    .goals-wrapper-horizontal, 
    .stats-container-single,
    .filter-controls,
    .fc-creation-wrapper,
    .library-grid,
    #cycle-view-content {
        flex-direction: column !important;
        display: flex !important;
        width: 100% !important;
    }

    /* Força itens a ocuparem 100% da largura */
    .goal-container, 
    .stats-box, 
    .flashcard-studier, 
    .flashcard-creator,
    .lib-card,
    #dynamic-content-container {
        width: 100% !important;
        min-width: 0 !important; /* Permite encolher */
        margin: 0 0 15px 0 !important;
    }

    /* 5. Tabelas (Permitir Scroll Lateral) */
    /* Isso é crucial para tabelas não quebrarem o layout */
    .logbook-container, 
    #fc-list-container,
    .calendar-container {
        width: 100% !important;
        overflow-x: auto !important; /* Adiciona scroll horizontal se estourar */
        display: block !important;
    }
    
    #logbook-table, #fc-list-table {
        min-width: 600px; /* Força a tabela a ter um tamanho mínimo legível */
    }

    /* 6. Filtros e Botões */
    .filter-buttons-quick {
        flex-wrap: wrap;
        justify-content: center;
    }
    .filter-buttons-quick button {
        flex: 1 1 45%; /* Botões ocupam aprox 50% cada */
        margin-bottom: 5px;
    }
    
    /* 7. Flashcards */
    #fc-card-container {
        height: 300px !important; /* Altura fixa segura */
    }
    #fc-study-controls, #fc-srs-controls {
        flex-wrap: wrap;
    }
    #fc-srs-controls button {
        width: 100% !important; /* Botões SRS empilhados ou largos */
        margin-bottom: 5px;
    }

    /* 8. Editor de Cronograma e Ciclo */
    #schedule-editor-grid {
        grid-template-columns: 1fr !important; /* Uma coluna só */
    }
    .schedule-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Inputs de criação de matéria */
    #subject-management-view div[style*="display: flex"] {
        flex-direction: column !important;
    }
    #new-subject-color, #edit-subject-color {
        width: 100% !important;
        height: 40px !important;
        margin-top: 5px;
    }

    /* 9. Menu Rápido (Home) */
    .button-group-vertical {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 botões por linha */
        gap: 10px !important;
        width: 100% !important;
    }
    .button-group-vertical button {
        height: auto !important;
        min-height: 80px !important;
        font-size: 0.8em !important;
        flex-direction: column !important; /* Ícone em cima do texto */
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .button-group-vertical button i {
        margin: 0 0 5px 0 !important;
        font-size: 1.5em !important;
    }
    /* Botão do Timer ocupa largura total */
    #timer-button {
        grid-column: span 2;
        background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important;
        color: white !important;
    }

    /* 10. Modais */
    .modal-content {
        width: 95% !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        margin: 10px !important;
        padding: 15px !important;
    }
    
    /* 11. Ajuste do Map Leaflet */
    #world-map-container {
        height: 50vh !important; /* Altura relativa à tela */
    }
    
    /* 12. Widget de Viagem */
    #home-voyage-widget {
        flex-direction: column;
        align-items: flex-start;
    }
    .voyage-stats {
        width: 100%;
        text-align: left;
        margin-top: 10px;
    }
    .voyage-timer {
        text-align: right;
    }
}

/* --- AJUSTE PARA TELAS MUITO PEQUENAS (iPhone SE, etc) --- */
@media (max-width: 380px) {
    #timer-display-circle {
        width: 220px !important;
        height: 220px !important;
    }
    #timer-display-running {
        font-size: 2.8em !important;
    }
    .button-group-vertical {
        grid-template-columns: 1fr !important; /* 1 botão por linha */
    }
    #timer-button {
        grid-column: span 1;
    }
}

/* --- CORREÇÃO DE RESPONSIVIDADE (MOBILE) - COLE NO FINAL DO CSS --- */

@media (max-width: 900px) {

    /* 1. RESET GERAL DO CONTAINER */
    body {
        padding: 0 !important;
        padding-bottom: 80px !important; /* Espaço para a barra de navegação inferior */
        overflow-x: hidden !important; /* Impede rolagem lateral */
    }

    .container {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 15px 10px !important;
        box-shadow: none !important;
    }

    /* 2. CORREÇÃO DO CABEÇALHO (HEADER) */
    .header {
        display: flex !important;
        flex-direction: column !important; /* Empilha um em cima do outro */
        align-items: center !important;
        position: relative !important;
        height: auto !important;
        gap: 15px !important;
        padding-bottom: 20px !important;
    }

    /* Remove o posicionamento absoluto que quebrava o layout */
    .header-left, .header-right {
        position: static !important; 
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Ajuste do container do nome do plano */
    #plan-name-container-header {
        width: 100% !important;
        margin-top: 10px;
    }
    
    .header-plan-editor input {
        width: 90% !important; 
        max-width: none !important;
    }

    /* Barra de progresso do header */
    #header-status-bar {
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 10px !important;
        gap: 10px !important;
        border-radius: 12px !important;
        display: flex !important;
        justify-content: center !important;
    }
    .status-divider { display: none !important; } 

    /* 3. TRANSFORMANDO LINHAS EM COLUNAS (STACKING) */
    /* Isso força áreas que estão lado a lado a ficarem uma embaixo da outra */
    #cycle-view-content,
    .goals-wrapper-horizontal,
    .stats-container-single,
    .filter-controls,
    .fc-creation-wrapper,
    .library-grid,
    #timer-buttons-aligned,
    .review-scheduler,
    #subject-management-view div[style*="display: flex"],
    .syllabus-toolbar {
        flex-direction: column !important;
        display: flex !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    /* 4. AJUSTE DE GRIDS E LARGURAS */
    .schedule-grid, 
    .rank-grid,
    .library-grid,
    #schedule-editor-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Uma única coluna */
        gap: 15px !important;
    }

    /* Força os cards a ocuparem a largura total */
    .day-column, .stats-box, .goal-container, .lib-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* 5. TABELAS COM SCROLL LATERAL (Para não quebrar a tela) */
    .logbook-container, 
    #fc-list-container, 
    #full-history-modal .modal-content > div {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important; /* Cria barra de rolagem apenas na tabela */
        white-space: nowrap; /* Mantém o conteúdo na linha */
    }

    /* 6. CRONÔMETRO RESPONSIVO */
    #timer-display-circle {
        width: 250px !important;
        height: 250px !important;
        margin: 20px auto !important;
    }
    #timer-display-running {
        font-size: 3.5em !important;
    }
    
    /* Botões de controle do timer */
    #pause-timer-running, #stop-timer-running, #discard-timer-running {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5em !important;
        line-height: 60px !important;
    }
    #timer-buttons-aligned {
        flex-direction: row !important; /* Mantém os botões em linha */
        justify-content: center !important;
    }

    /* 7. MODAIS E POPUPS */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        padding: 20px 15px !important;
        margin: 10px auto !important;
    }
    
    /* 8. WIDGET DE VIAGEM E HUD */
    #home-voyage-widget {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    .voyage-stats {
        width: 100% !important;
        text-align: left !important;
    }
    .voyage-timer {
        text-align: right !important; /* Mantém o tempo na direita da barra */
    }
    
    /* Corrige o HUD flutuante do mapa */
    #logbook-hud {
        position: static !important; /* Deixa de flutuar */
        width: 100% !important;
        margin-top: 10px !important;
    }
    #world-map-container {
        height: 50vh !important;
    }

    /* 9. FLASHCARDS E BOTOES */
    .flashcard-studier, .flashcard-creator {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    
    /* Ajuste dos botões de filtro no dashboard */
    .filter-buttons-quick {
        flex-wrap: wrap !important;
    }
    .filter-buttons-quick button {
        flex: 1 1 40% !important; /* Botões ocupam metade da tela cada */
    }
    
    /* Esconde o menu lateral antigo, já que usamos a barra inferior */
    #menu-toggle-btn {
        display: none !important;
    }
}

/* Ajuste específico para telas muito pequenas (iPhone SE, etc) */
@media (max-width: 380px) {
    #timer-display-circle {
        width: 210px !important;
        height: 210px !important;
    }
    #timer-display-running {
        font-size: 2.8em !important;
    }
}

/* --- CORREÇÃO DEFINITIVA DE RESPONSIVIDADE (COLE NO FINAL DO ARQUIVO) --- */

@media (max-width: 1024px) {
    /* 1. Remove a centralização que corta o conteúdo na esquerda */
    .container {
        display: block !important; /* Remove o flexbox que centralizava */
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px 15px !important; /* Espaçamento interno seguro */
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    /* 2. Garante que o corpo da página não force largura extra */
    body {
        padding: 0 !important;
        padding-bottom: 80px !important; /* Espaço para o menu de baixo */
        overflow-x: hidden !important; /* Evita rolagem horizontal branca */
        width: 100% !important;
    }

    /* 3. Ajusta o Cabeçalho para empilhar verticalmente */
    .header {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        position: relative !important;
        padding-bottom: 10px !important;
    }
    
    .header-left, .header-right {
        position: static !important;
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }

    /* 4. Força as grades a ficarem em uma única coluna */
    .schedule-grid, 
    #schedule-editor-grid,
    .library-grid,
    .button-group-vertical {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 1 Coluna única */
        gap: 10px !important;
        width: 100% !important;
    }

    /* 5. Garante que os cards não tenham largura mínima fixa */
    .day-column, 
    .stats-box, 
    .goal-container, 
    .lib-card,
    .kpi-card {
        width: 100% !important;
        min-width: 0 !important; /* Permite encolher */
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
    }

    /* 6. Corrige tabelas (Logbook) para permitir rolagem lateral interna */
    .logbook-container, 
    #fc-list-container, 
    .calendar-container {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important; /* Scroll apenas na tabela, não na página */
    }
    
    /* 7. Reduz o tamanho do Cronômetro para não vazar */
    #timer-display-circle {
        width: 240px !important;
        height: 240px !important;
        margin: 20px auto !important;
    }
    #timer-display-running {
        font-size: 3em !important;
    }
    
    /* 8. Ajusta os botões de controle do timer */
    #timer-buttons-aligned {
        flex-direction: row !important;
        gap: 15px !important;
    }
    #pause-timer-running, #stop-timer-running, #discard-timer-running {
        width: 55px !important;
        height: 55px !important;
        font-size: 1.4em !important;
        line-height: 55px !important;
    }
}


/* --- CORREÇÃO FINAL: ALINHAMENTO DO MENU MOBILE --- */
/* Cole isso no FINAL do seu arquivo style.css */

@media (max-width: 768px) {
    /* 1. Força o container a ser uma grade de 2 colunas iguais */
    .button-group-vertical {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colunas exatas */
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 2. Ajusta os botões para respeitarem a largura da coluna */
    .button-group-vertical button {
        width: 100% !important;
        min-width: 0 !important; /* O SEGREDO: Impede que textos longos deformem o botão */
        margin: 0 !important;
        height: auto !important;
        min-height: 80px !important; /* Altura padronizada */
        word-wrap: break-word !important; /* Quebra texto se for muito longo */
    }

    /* 3. Garante que o botão do Cronômetro (Verde) ocupe a largura total */
    #timer-button {
        grid-column: 1 / -1 !important; /* Ocupa de ponta a ponta (span 2) */
        width: 100% !important;
    }
}