<style>
       
        /* Previne o "flash" de conteúdo antes do JS carregar */
        body.is-loading .app-container,
        body.is-loading .app-footer {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }
    
    :root {
        --bg: #fdfdf6; --card: #ffffff; --text: #212529;
        --muted: #6c757d; --line: #e5e7eb; --primary-estudante: #0d9488;
        --primary: var(--primary-estudante); --primary-2: #0f766e;
    } 




    * { box-sizing: border-box; }
    html {
  overflow-y: scroll;
}
    
    .app-container { max-width: 1440px; margin: 0 auto; padding: 0 24px 24px 24px; }
    header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; margin-bottom: 24px; border-bottom: 1px solid var(--line); width: 100%; }
    .logo-area { display: flex; align-items: center; gap: 14px; }
    .logo-icon { width: 52px; height: 52px; }
    .logo-text h1 { font-size: 24px; margin: 0; color: var(--text); }
    .logo-text p { font-size: 15px; margin: 0; color: var(--muted); }
   .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* Regra principal do botão - SELETOR ATUALIZADO */
.header-actions button[id*="Tab"],
.header-actions #helpBtn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 12px;
    background-color: var(--card);
    border: 2px solid var(--line);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}
/* Regra do hover - SELETOR ATUALIZADO */
.header-actions button[id*="Tab"]:hover,
.header-actions #helpBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: var(--primary);
}
/* Regra do SVG (não precisa de mudança) */
.header-actions button svg {
    width: 100%;
    height: 100%;
}
    #logoutBtn { position: static; background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 10px 14px; font-size: 15px; font-weight: 500; border-radius: 6px; }
    #logoutBtn:hover { background: var(--bg); border-color: var(--muted); }
    .tabs-container { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
    .tabs-l1 { border-bottom: 2px solid var(--line); }
    .tab-l1, .tab-l2, .tab { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); transition: all 0.2s ease; }
    .tab-l1 { font-size: 18px; font-weight: 600; background: var(--card); }
    .tab-l2 { font-size: 16px; font-weight: 500; background: #e9eefb; }
    .tab { font-size: 15px; font-weight: 500; background: #e7e5e4; color: var(--muted); border-radius: 8px 8px 0 0; margin-bottom: -1px; }
    .tab-l1.active, .tab-l2.active { background: var(--primary); color: white; border-color: var(--primary-2); box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .tab.active { background: var(--card); color: var(--primary); border-color: var(--line); position: relative; z-index: 2; border-bottom-color: var(--card); }
    .panel { display: none; background: var(--card); border: 1px solid var(--line); border-radius: 0 8px 8px 8px; padding: 32px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); overflow-x: auto; width: 100%; }
    .panel.active { display: block; }
    table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    th, td { border:1px solid var(--line); padding:12px; vertical-align: top; word-wrap: break-word; }
    th { background:#f3f4f6; text-align: left; font-weight: 600; }
    button.primary { background: var(--primary); color:#fff; border-color: var(--primary); }
    button.primary:hover { background: var(--primary-2); }
    #loginContainer { text-align:center; margin-top:100px; display: none; }
    .add-btn { width: 40px; height: 40px; border-radius: 8px; font-size: 24px; font-weight: bold; background-color: transparent; border: 2px dashed var(--muted); color: var(--muted); padding: 0; flex-shrink: 0; }
    .add-btn:hover { border-color: var(--primary); color: var(--primary); }
    .delete-btn { background: transparent; border: none; cursor: pointer; padding: 0 2px; opacity: 0.4; transition: all 0.2s; }
    .delete-btn:hover { opacity: 1; color: #ef4444; transform: scale(1.2); }
    .tab > span, .tab-l1 > span, .tab-l2 > span { flex-grow: 1; text-align: center; }
    .tab .delete-btn, .tab-l1 .delete-btn, .tab-l2 .delete-btn { background-color: rgba(255,255,255,0.2); color: white; border-radius: 50%; width: 20px; height: 20px; padding: 0; font-size: 12px; line-height: 20px; flex-shrink: 0; }
    .tab .delete-btn:hover, .tab-l1 .delete-btn:hover, .tab-l2 .delete-btn:hover { background-color: rgba(239, 68, 68, 0.8); }
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000; }
    .modal-content { background: var(--card); padding: 24px; border-radius: 12px; width: 90%; max-width: 500px; }
    .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
    .modal-header h3 { margin: 0; }
    .modal-close-btn { font-size: 24px; font-weight: bold; border: none; background: transparent; cursor: pointer; }
    .modal-input { width: 100%; padding: 10px; font-size: 16px; border: 1px solid var(--line); border-radius: 6px; }
    .empty-state { text-align: center; padding: 40px; margin-top: 20px; background-color: var(--card); border-radius: 12px; border: 2px dashed var(--line); }
    .empty-state h3 { margin-top: 0; }
    .add-topic-form { display: flex; gap: 8px; padding: 16px; background: var(--bg); border-top: 1px solid var(--line); }
    .add-topic-form input { flex-grow: 1; border: 1px solid var(--line); padding: 8px; border-radius: 6px; }
    .status-container { display: flex; flex-direction: column; gap: 8px; }
    .status-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
    .link-item { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
    .guide-text { text-align: left; color: var(--muted); font-style: italic; font-size: 14px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
    .review-counter { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background-color: var(--line); color: var(--muted); vertical-align: middle; }
    .topic-cell { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .topic-info-container { display: flex; align-items: center; gap: 8px; }
    .gamification-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; background-color: var(--line); color: var(--muted); cursor: help; flex-shrink: 0; }
    .review-alert { background-color: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
    .progress-bar-container { width: 100%; background-color: var(--line); border-radius: 4px; margin: 4px 0 8px 0; height: 8px; }
    .progress-bar { height: 100%; width: 0%; background-color: var(--primary); border-radius: 4px; transition: width 0.5s ease; }
    .materia-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .materia-header h3 { margin: 0; }
    .materia-progress-summary { font-size: 13px; color: var(--muted); font-weight: 500; }
    .topic-info-container { flex-shrink: 0; }
    .gamification-badge { white-space: nowrap; }
    .progress-bar-container { width: 100px; overflow: hidden; }
    .materia-progress-summary { text-align: right; }
    .notes-actions { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
    .notes-buttons { display: flex; gap: 8px; }
    .review-alert-container { flex-grow: 1; }

/* ========================================================== */
/* ===== ESTILOS PARA DISPOSITIVOS MÓVEIS (VERSÃO FINAL) ===== */
/* ========================================================== */

@media (max-width: 768px) {
    /* --- Layout Geral --- */
    .app-container {
        padding: 0 12px 12px 12px;
    }

    /* --- Cabeçalho --- */
    header {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 12px 0;
        margin-bottom: 16px;
    }
    
    .logo-area {
        width: 100%;
        justify-content: center;
    }

    .logo-text h1 {
        font-size: 20px;
    }

    .logo-text p {
        font-size: 13px;
    }

    /* Estrutura de ações do cabeçalho com Grid */
    .header-actions {
        display: grid;
        grid-template-columns: 1fr; /* Apenas uma coluna */
        gap: 16px;                  /* Espaço entre as linhas */
        justify-items: center;      /* Centraliza os grupos */
        width: 100%;
    }

    /* Grupos internos (linha do perfil e linha de botões) */
    .profile-actions,
    .app-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    /* Estilo dos botões de Ícone (Pensamento, FlowRead, Ajuda) */
    .header-actions button[id*="Tab"],
    .header-actions #helpBtn {
        width: 50px;
        height: 50px;
        padding: 8px;
        flex-shrink: 0; 
    }
    
    .header-actions .app-actions button svg {
        width: 100%;
        height: 100%;
    }
    
    /* Estilo do perfil e status */
    .user-profile, 
    .subscription-notice {
        font-size: 13px;
        padding: 4px 10px;
        height: fit-content;
    }

    /* --- Abas e Painéis --- */
    .tabs-container { 
        margin-bottom: 16px; 
        justify-content: center; 
    }
    .tab-l1 { font-size: 16px; padding: 12px 18px; }
    .tab-l2 { font-size: 14px; padding: 8px 12px; }
    .tab, #tabs .tab-l3 { font-size: 14px; padding: 10px 14px; } /* Unificando a regra .tab com a nova .tab-l3 */
    .panel { padding: 16px; }

    /* --- Estrutura da Tabela Responsiva --- */
    table, thead, tbody, th, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 16px;
        background: var(--card);
        padding: 8px;
    }
    td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border: none;
        border-bottom: 1px solid var(--line);
        padding: 12px 8px;
        text-align: left;
    }
    td:last-child {
        border-bottom: 0;
    }
    td:before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        color: var(--text);
        margin-bottom: 6px;
        text-transform: uppercase;
    }
    .topic-cell, .status-container, .link-container, .notes-actions, textarea {
        width: 100%;
    }
    .status-container {
        flex-direction: row;
        justify-content: flex-start;
    }
    .notes-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}










/* 1. Alinha o modal no topo e adiciona um espaçamento */
#notesModal.modal-overlay {
    align-items: flex-start; /* Em vez de 'center' */
    padding-top: 5vh;        /* Um respiro para não colar no topo da tela */
}

/* 2. Define uma altura máxima e prepara o conteúdo para ser rolável */
#notesModal .modal-content {
    max-height: 85vh; /* Altura máxima de 85% da tela */
    display: flex;
    flex-direction: column; /* Empilha o cabeçalho e o corpo */
}

/* 3. Torna o corpo (a lista de notas) a única parte rolável */
#notesModal #notesModalBody {
    overflow-y: auto;  /* Adiciona a barra de rolagem SÓ AQUI quando necessário */
    padding-right: 15px; /* Evita que a barra de rolagem cole no texto */
}

/* 4. Deixa o cabeçalho (com o botão de fechar) sempre visível */
#notesModal .modal-header {
    position: sticky;  /* Fica "grudado" no topo do modal */
    top: 0;
    background: var(--card); /* Fundo para não ficar transparente durante a rolagem */
    z-index: 10;
}

/* Bônus: Estilos para melhorar a aparência da lista de anotações */
.note-item {
    border-bottom: 1px solid var(--line);
    padding: 12px 4px;
    margin-bottom: 8px;
}
.note-item:last-child {
    border-bottom: none;
}
.note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}
.note-meta button {
    background: transparent; border: 1px solid var(--line); color: var(--muted);
    padding: 4px 8px; font-size: 12px; border-radius: 4px; cursor: pointer;
}
.note-meta button:hover { background: #fef2f2; border-color: #fecaca; color: #ef4444; }
/* Estilo padrão da aba (efeito transparente) */
#tabs .tab-l3 {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(229, 231, 235, 0.6); /* Efeito semitransparente */
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0; /* Garante que não tenha margens indesejadas */
}

/* Efeito ao passar o mouse sobre abas inativas */
#tabs .tab-l3:not(.active):hover {
    background-color: rgba(229, 231, 235, 1); /* Fundo 100% opaco */
    border-color: #d1d5db;
}

/* Estilo da aba ativa (selecionada) */
#tabs .tab-l3.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary-2);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Ajuste do botão 'x' na aba ativa para melhor visibilidade */
#tabs .tab-l3.active .delete-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Container para os links (tanto o input quanto a lista) */
.link-container .link-item {
    display: flex;         /* Alinha os itens lado a lado */
    gap: 8px;              /* Espaço entre os itens */
    width: 100%;           /* Ocupa toda a largura da célula */
    margin-bottom: 8px; 
    align-items: center; /* Alinha tudo verticalmente */
    flex-wrap: nowrap;	/* Espaço abaixo de cada item de link */
	/* 1. Impede que o texto "Link 1" quebre a linha */
    white-space: nowrap;

    
    flex-shrink: 0;
}
/* Faz os inputs de texto (tanto o de colar quanto o de comentário) crescerem */
.link-container .link-item input[type="text"] {
    flex-grow: 1; /* A mágica acontece aqui: o input ocupa o espaço que sobrar */
    min-width: 50px; /* Largura mínima para evitar que ele desapareça */
}

/* Garante que os botões não encolham */
.link-container .link-item button {
    flex-shrink: 0;
}
/* Faz a área de anotações ocupar 100% da largura da célula */
td[data-label="Anotações"] textarea.editable {
    width: 100%;
    min-height: 80px;  /* Altura inicial maior, ajuste se desejar */
    margin-bottom: 8px; /* Espaço entre a caixa de texto e os botões abaixo */
    display: block;    /* Garante o comportamento de bloco correto */
    resize: vertical;  /* Permite que o usuário redimensione apenas na vertical */
}
/* Perfil do Usuário no Header */
.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    background-color: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px; /* Borda arredondada para um visual de "pílula" */
}
.user-profile img {
    width: 28px;
    height: 28px;
    border-radius: 50%; /* Foto circular */
    object-fit: cover;
}
.user-profile span {
    font-weight: 500;
    font-size: 15px;
}


/* Estilos padrão para o body, sem centralização */

html, body {
    height: 100%;
}

/* O body agora organiza na vertical */
body {
    display: flex;
    flex-direction: column; /* Empilha os filhos (wrapper e footer) na VERTICAL */
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* O wrapper do conteúdo principal deve crescer para ocupar o espaço */
.main-wrapper {
    flex-grow: 1; /* Faz este container crescer, empurrando o footer para baixo */
}

/* Na tela de login, é o WRAPPER quem centraliza o card, não mais o body */
body.login-view .main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Card de Login */
.login-card {
    max-width: 400px;
    margin: 0; /* Essencial para a centralização com Flexbox */
    padding: 32px;
    background-color: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    text-align: center;
}
.login-card h2 {
    margin-top: 0;
    font-size: 28px;
}
.login-card p {
    color: var(--muted);
    margin-bottom: 24px;
}

/* Inputs e Botão Primário */
.login-card input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 16px;
}
.login-card button.primary {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
}

/* Divisor "ou" */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--muted);
    margin: 24px 0;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--line);
}
.separator:not(:empty)::before { margin-right: .25em; }
.separator:not(:empty)::after { margin-left: .25em; }

/* Botão Padrão Google */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 24px;
    background-color: #fff;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.google-btn:hover {
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.google-btn svg {
    width: 20px;
    height: 20px;
}
/* Adicione este código ao final do seu CSS */

/* Container do spinner, fica por cima do formulário */
#loginForm .spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: none; /* Começa escondido */
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Para acompanhar o card */
}

/* O spinner em si (círculo que gira) */
#loginForm .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--primary);
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Quando o formulário estiver em estado de "loading"... */
#loginForm.loading .spinner-overlay {
    display: flex; /* Mostra o spinner */
}

#loginForm.loading input,
#loginForm.loading button.primary {
    visibility: hidden; /* Esconde os inputs e o botão */
}
/* Estilos para o Rodapé */
.app-footer {
    width: 100%;
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    border-top: 1px solid var(--line);
    margin-top: 48px; /* Empurra o rodapé para baixo do conteúdo */
}

.app-footer p {
    margin: 0 0 8px 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--primary);
}


/* Torna o modal de ajuda um pouco maior que os outros */
.modal-lg {
    max-width: 700px;
}

.help-content h4 {
    color: var(--primary);
    margin-top: 24px;
    margin-bottom: 8px;
}

.help-content ul {
    padding-left: 20px;
}

.help-content li {
    margin-bottom: 8px;
}
/* --- EFEITOS DE INTERAÇÃO (HOVER) --- */

/* Efeito de "levantar" para as abas de Projeto, Item e Disciplina */
.tab-l1:not(.active):hover,
.tab-l2:not(.active):hover,
#tabs .tab-l3:not(.active):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #d1d5db; /* Uma borda um pouco mais escura */
}

/* Efeito para o botão de adicionar '+' */
.add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: #f0fdfa; /* Um fundo verde bem claro */
}

/* Efeito para botões secundários (como Ver Histórico) */
button:not(.primary):hover {
    background-color: var(--bg);
}
.empty-state.with-arrow {
    position: relative;
    margin-right: 60px;
    text-align: left; /* Alinha o texto à esquerda para um visual mais limpo */
}

.onboarding-arrow {
    position: absolute;
    top: 50%;
    right: -85px; /* Posição da seta */
    transform: translateY(-50%);
    animation: float 2.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

.onboarding-arrow span {
    position: absolute;
    top: -25px;
    right: 40px;
    font-weight: 500;
    color: var(--muted);
    font-size: 14px;
}

@keyframes float {
    0% { transform: translateY(-50%) rotate(15deg); }
    50% { transform: translateY(-55%) rotate(15deg); }
    100% { transform: translateY(-50%) rotate(15deg); }
}
/* --- REFINAMENTOS DE TIPOGRAFIA E ESPAÇAMENTO --- */

/* Título principal dentro de um painel */
.panel > .materia-header {
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

/* Espaçamento entre as linhas da tabela */
table tr {
    border-bottom: 1px solid var(--line);
}
table tr:last-child {
    border-bottom: none;
}
table td {
    padding: 16px 12px; /* Aumenta o espaçamento vertical na tabela */
}
/* ======================================== */
/* ===== ONBOARDING - SETA FLUTUANTE ===== */
/* ======================================== */

.empty-state.with-arrow {
    position: relative; /* Essencial para o posicionamento da seta */
    margin-right: 60px; /* Cria espaço para o botão '+' não ficar por cima */
    text-align: left;
    border-style: solid; /* Deixa a borda sólida em vez de pontilhada */
    border-color: var(--primary);
}

.onboarding-arrow {
    position: absolute;
    top: 50%;
    right: -85px; /* Posição horizontal da seta */
    transform: translateY(-50%);
    animation: float 2.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    z-index: 10; /* Garante que a seta fique por cima de outros elementos */
}

.onboarding-arrow span {
    position: absolute;
    top: -25px;
    right: 40px;
    font-weight: 500;
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap; /* Impede que "Clique aqui" quebre a linha */
}

/* Animação de flutuação */
@keyframes float {
    0% { transform: translateY(-50%) rotate(15deg); }
    50% { transform: translateY(-55%) rotate(15deg); }
    100% { transform: translateY(-50%) rotate(15deg); }
}
</style>