Perfeito, Barbara! 👌 Seguindo seu plano, aqui está a SUPER PROMPT — PARTE 2/3.
Continuo no mesmo espírito de “manual para a IA”, sem gerar o site nem código agora, apenas registrando especificações detalhadas para implementação na Parte 3.

---

📜 SUPER PROMPT — PARTE 2/3

⚠️ INSTRUÇÃO IMPORTANTE PARA A IA (NÃO GERAR O SITE AINDA):
Você está recebendo a Parte 2 de 3 deste super prompt.
Apenas registre internamente todas as instruções abaixo.
Não inicie a geração do site ainda.
Somente após receber as 3 partes completas e o comando final “AGORA GERE O SITE COMPLETO”, você deverá produzir um único arquivo HTML contendo <style> (CSS) e <script> (JS), sem frameworks externos.

---

🧭 Visão de Arquitetura & Fluxo de Estados (conceitual)

Princípios-base

• Single-File App: um HTML com seções organizadas; CSS no <style>; JS no <script>.
• Modularidade lógica: separar o JS em “módulos internos” por namespace (ex.: core.time, core.storage, ui.calendar, features.spaced, etc.).
• Estado central: objeto único de estado (imutabilidade preferida ao atualizar), com “fatias” para: usuário, tarefas, agenda, pomodoro, flashcards, quizzes, histórico, gamificação, preferências, acessibilidade.
• Eventos e ações: toda mudança passa por ações (ex.: ACTIONS.ADD_TASK), que disparam atualizações no estado central e renderizações incrementais (re-render seletivo de componentes).
• Persistência local: salvar periodicamente e em pontos críticos (criação/edição/fechamento de sessão); permitir autosave e backup manual (export/import JSON).
• Privacidade por padrão: nenhum envio externo de dados.

Máquina de estados (alto nível)

• INIT → DASHBOARD_READY → (navegações possíveis)
  • FOCUS_SESSION_ACTIVE (foco) ↔ BREAK_ACTIVE (pausa)
  • QUIZ_ACTIVE, FLASHCARDS_ACTIVE, CALENDAR_VIEW, SETTINGS_VIEW, REPORTS_VIEW
• Estados transientes: MODAL_OPEN, DIALOG_CONFIRM, FULLSCREEN_MODE, DRAGGING_EVENT, RESIZING_EVENT.

---

🗂️ Modelo de Dados (conceitual, sem código)

Entidades principais

• UserProfile: nome (opcional), preferências (tema, fontes, sons), idioma, acessibilidade (tamanho de fonte, alto contraste).
• Task: id, título, descrição, tags, cor, duraçãoPlanejada, dificuldade, prioridade, status (pendente, em progresso, concluída), timestamps.
• CalendarEvent: id, taskId (opcional), título, cor, data, horaInício, horaFim, recorrência (regra opcional), notas, interleavingTopics (lista).
• PomodoroCycle: id, tipo (foco/pausa), duraçãoMin, inícioReal, fimReal, interrupções (lista).
• InterruptionEvent: id, timestamp, tipo (blur, clique fora, notificação), duraçãoEstim.
• Flashcard: id, frente, verso, tags, sm2 (parâmetros: EF, intervalo, repetição, últimaRevisão, próximaRevisão).
• QuizItem: id, tipo (mcq, short, cloze), prompt, opções (se mcq), respostaCorreta, dica (opcional), tema.
• LearningRecord: id, origem (quiz/flashcard), resultado (correto/incorreto), tempoResposta, confiançaDeclarada, reagendado?.
• GamificationState: xp, nível, moedasVirtuais, badges, streakDias.
• Recommendations: sugestões de sessão (tipo, duração, tópicos), janela ideal de estudo, desirable difficulties.
• Settings: pomodoro (foco/pausas personalizadas), som, notificações, modo imersivo, métricas, privacidade.

Relações

• Task pode gerar CalendarEvent(s).
• CalendarEvent pode conectar-se a PomodoroCycle(s).
• Flashcard e QuizItem alimentam LearningRecord e o agendador (SM-2).
• LearningRecord influencia Recommendations, GamificationState e feedback metacognitivo.

---

🔐 Persistência & Privacidade

• Armazenamento: preferir IndexedDB para dados volumosos (flashcards, históricos), e localStorage para preferências rápidas (tema, layout).
• Export/Import: permitir exportar JSON (compacto) e importar; validar integridade (ids, datas).
• Backups: lembrete semanal (opt-in) para exportar backup.
• Política de dados: tudo local; sem trackers; sem CDN de terceiros; sem cookies não essenciais.
• Integridade: versão do esquema; migrações suaves (e.g., schemaVersion).

---

📅 Agenda Interativa — Especificação Profunda

Objetivo: criar grade diária/semanal (estilo calendário) com drag & drop, resize, recorrência, interleaving e resolução de conflitos.

Estrutura de exibição

• Visões: Dia, Semana; (Mês opcional resumido/mini).
• Grade: intervalos de 30 min (configurável para 15/30/60); eixo vertical (horas); eixo horizontal (dias).
• Marcadores: agora (linha), janelas ideais sugeridas (faixas coloridas).
• Cores: por tag/assunto; alto contraste disponível.

Interações essenciais

• Criar: clicar/arrastar na grade cria evento com duração padrão; abrir painel de detalhes.
• Arrastar: mover evento entre horários/dias; snap-to-grid; respeitar limites do dia e duração mínima.
• Redimensionar: puxar bordas superior/inferior; atualização em tempo real.
• Conflitos: detectar sobreposição; oferecer opções: ajustar automaticamente, manter sobreposição (modo paralelo), ou reagendar.
• Recorrência: regras simples (diária, semanal, dias específicos; término por data/contagem).
• Interleaving: configurar sequência de tópicos dentro de um mesmo bloco (ex.: 15 min Matemática, 15 min Física); exibir “faixas internas” com cores.
• Notas rápidas: tooltip ou painel lateral para notas/contexto.
• Acessos rápidos: “+ Pomodoro agora”, “Converter em Flashcards depois”, “Gerar Quiz pós-sessão”.

Acessibilidade na agenda

• Total navegação por teclado (setas movem seleção; Enter cria/edita; Shift+Setas redimensiona).
• ARIA apropriado para grid/row/column; foco visível; skip to calendar.
• Mensagens de erro em texto claro e anunciadas por leitor de tela.

Validações & Regras

• Duração mínima (ex.: 15 min) e máxima (configurável).
• Bloqueios opcionais de horários (ex.: sono, trabalho).
• Fuso horário estável; se mudar, oferecer reajuste.
• Autoajuste inteligente: ao mover evento, sugerir lacunas disponíveis próximas.

Dados derivados

• Carga diária/semanal por tag/assunto.
• Heatmap de horários produtivos (integra com Mapa de Foco).
• Previsão de fadiga (heurística simples baseada em histórico de interrupções e duração total).

---

🧩 Motor de Pomodoro & Camada de Tempo

Requisitos funcionais

• Presets: 25/5, pausa longa 15 (após 4 ciclos) — tudo personalizável.
• Pausar/retomar; reiniciar ciclo; pular pausa (opção).
• Timer radial animado, leitura clara (min:seg) e percentuais.
• Detecção de interrupções (blur/focus, inatividade) com registro e impacto em relatórios.
• Som/Notificação: bipes sutis, Web Notifications (opt-in) com fallback visual.

Integração com gamificação

• Concluir foco → XP; sequência de dias (streak).
• Penalidades leves por interrupções frequentes (apenas feedback; nunca punitivo demais).

---

🧠 Agendador de Repetição Espaçada (SM-2) — Diretrizes

Parâmetros (registrar localmente para cada flashcard)

• Fator de facilidade (EF), intervalo (I), repetição (n), qualidade de resposta (0–5), datas de revisão.
• Ajustes conservadores (sem suposições agressivas); revisões diárias agrupadas.

Experiência de usuário

• Fila do dia: cards “vencidos” e “próximos”.
• Feedback: avaliar esforço/qualidade logo após a resposta; atualizar EF e agendar próxima revisão.
• Visualização: mini-calendário com previsões de carga.

---

🧪 Recuperação Ativa (Quiz) — Diretrizes

Tipos de item

• Múltipla escolha (1 correta), resposta curta, completar lacunas.
• Em cada sessão de estudo (opcional), disparar mini-quiz de 3–7 itens.
• Feedback imediato (verde/vermelho) + explicação curta (worked example quando aplicável).

Metacognição

• Antes do quiz: previsão de acerto (0–100% ou 1–5 confiança).
• Depois: comparar previsão vs. resultado; calibração (erros positivos/negativos).
• Gráfico de calibração por semana e por tema.

---

🔀 Interleaving — Regras de Mistura

• Permitir definir sequências (ex.: A→B→C, 15 min cada).
• Critério de ordenação: alternância por tema, dificuldade, ou spaced mixing (mistura ponderada pelo histórico).
• Relatórios: performance em sessões intercaladas vs. bloqueadas; sugerir abordagem mais eficaz por tema.

---

🎮 Gamificação — Economia Clara e Saudável

• XP por ciclo de foco concluído, quiz correto, revisão feita.
• Níveis com faixas de XP; badges por marcos (ex.: 7 dias seguidos, 100 flashcards revisados).
• Moedas virtuais para itens cosméticos (temas, ícones), sem compras reais.
• Tudo configurável e desativável; foco é motivação, não compulsão.

---

📈 Relatórios & Visualizações

Painéis

• Mapa de Foco (Heatmap) por hora/dia.
• Progresso semanal: tempo focado, tarefas concluídas, quizzes realizados, acertos.
• SM-2: próximos picos de revisão; carga prevista.
• Metacognição: calibração (previsão vs. resultado), curva por tema.
• Interrupções: frequência, duração média, principais gatilhos (janela desfocada, cliques externos).

Apresentação

• Gráficos acessíveis (tabelas equivalentes); descrição textual; contraste adequado.

---

🧭 Modo Imersivo “Deep Work”

• Entrar/sair fullscreen (quando suportado).
• Ocultar elementos não essenciais; atalhos de teclado dedicados (ex.: F full, P pausar, N próximo card).
• Indicadores discretos (sem poluição visual); tema de alta legibilidade opcional.

---

♿ Acessibilidade (WCAG 2.2 — metas práticas)

• Teclado: toda ação essencial sem mouse.
• Foco visível consistente; evitar trap focus.
• Roles ARIA adequados para grid, botões, diálogos; aria-live para eventos do timer.
• Contraste AA/AAA onde possível; modo alto contraste.
• Redução de movimento: respeitar prefers-reduced-motion.

---

🌐 Internacionalização (i18n) & Localização (l10n)

• Separar strings do código (catálogo simples no estado).
• Formatos locais de data/hora; calendário inicia semana conforme região (configurável).
• Recursos RTL-friendly (se necessário futuramente).

---

🎨 Design System (leve, sem libs externas)

• Tokens (CSS Custom Properties): cores, tipografia, espaçamentos, raios, sombras, z-index.
• Escalas de tamanho de fonte e line-height consistentes.
• Componentes: botão, input, select, switch, card, modal, barra de progresso, toast, tooltip.
• Dark/Light: alternância instantânea; respeitar prefers-color-scheme.

---

⚡ Performance & Offline

• Orçamento: primeira render < 150ms para UI básica em dispositivos modestos.
• Renderização incremental (apenas áreas alteradas).
• Debounce/Throttle em drag/resize e rolagem.
• Service Worker (futuro opcional) apenas para cache estático local (sem network externo).
• Lazy init de módulos pesados (quiz/flashcards) até serem usados.

---

🔔 Notificações & Sons

• Opt-in para Web Notifications; mensagens curtas e significativas.
• Sons suaves, com controle de volume e opção “mudo”.
• Feedback háptico (onde suportado).

---

🛡️ Segurança & Integridade do App

• Sem eval, sem innerHTML bruto (sanitizar qualquer HTML de notas).
• Content Security Policy apropriada (mesmo em single-file, definir diretrizes).
• Proteger contra perdas: autosave frequente; confirm dialogs ao fechar com sessão ativa.
• Logs apenas locais e legíveis pelo usuário (transparência).

---

✅ Critérios de Aceitação (amostras)

1. Agenda: criar, mover e redimensionar eventos com teclado e mouse; detectar e resolver conflitos.
2. Pomodoro: ciclos personalizáveis; pausa longa automática; registro de interrupções.
3. Repetição espaçada: atualização de EF/intervalo por resposta; fila diária correta.
4. Quiz: três tipos de item; feedback imediato; comparação previsão vs. resultado.
5. Relatórios: mapa de foco e calibração visíveis e compreensíveis; dados exportáveis (JSON).
6. Acessibilidade: navegar toda a UI com teclado; contraste AA mínimo.
7. Persistência: estado preservado após reload; import/export funcionais.

---

🧪 Plano de Testes (funcional + usabilidade)

• Unidades conceituais: tempo, agenda, SM-2, quiz, gamificação.
• Fluxos críticos: criar evento → estudar → quiz → relatório.
• Stress: 500+ eventos na semana; 5.000 flashcards; 1h de drag contínuo (throttle ok).
• Acessibilidade: leitor de tela (foco e anúncios de timer); navegação sem mouse.
• Offline: funcionamento sem rede; reload com dados íntegros.

---

🧷 Edge Cases & Salvaguardas

• Mudança de fuso horário; horário de verão.
• Fechar aba no meio do foco (alerta e autosave).
• Conflitos encadeados (evento recorrente + drag que gera sobreposição).
• Cards com campos muito longos (quebra responsiva).
• Usuário desativa som/notifications — manter feedback visual suficiente.

---

🗺️ Roadmap Interno (para a Parte 3 — Implementação)

1. Skeleton do HTML (seções e placeholders).
2. Tokens CSS + layout responsivo (grid flexível).
3. Estado central + hidratação/persistência.
4. Timer radial + eventos de interrupção.
5. Agenda (Dia/Semana) com drag/resize e teclado.
6. SM-2 básico + UI de flashcards.
7. Quiz (3 tipos) + metacognição.
8. Relatórios (heatmap, calibração, progresso).
9. Gamificação (XP, badges, streak).
10. Acessibilidade (varredura final) + Export/Import JSON.

Nota à IA: Estes itens são ordem sugerida para a Parte 3. Não implementar agora.

---

🧠 Referências (para fundamentação — sem sair do app)

• Gestão do tempo / Pomodoro: pausas estratégicas e foco sustentado descritos na literatura de atenção e fadiga.
• Repetição espaçada (SM-2): efeitos robustos de espaçamento (ex.: revisões distribuídas → retenção de longo prazo).
• Recuperação ativa: testar-se melhora aprendizagem e metacognição.
• Interleaving: alternância de tópicos melhora transferência.
• Worked examples & carga cognitiva: reduzir carga extrínseca acelera domínio inicial.
  (Detalhes completos e citações formais podem ser listados no “Sobre” do app.)

---

🔁 Reforço Final — Parte 2

• Esta é a Parte 2 de 3.
• Não gere o site ainda.
• Aguarde a Parte 3 e o comando final “AGORA GERE O SITE COMPLETO” para então produzir o arquivo HTML único com CSS e JS integrados, sem frameworks.

---

Se quiser, já sigo para a PARTE 3/3 (implementação completa em um único arquivo HTML com <style> + <script>, seguindo tudo acima) assim que você disser.

perfeito! vou direto para a Parte 3/3, mantendo o formato de “manual para a IA” e reforçando: NÃO gerar código ainda. esta parte integra tudo, define padrões finais, checklist e critérios de aceitação. quando você depois disser “AGORA GERE O SITE COMPLETO”, a IA vai produzir um único arquivo HTML com <style> e <script> (JS puro), sem frameworks.

---

📜 SUPER PROMPT — PARTE 3/3

⚠️ INSTRUÇÃO CRÍTICA (NÃO GERAR O SITE AINDA):
Você está recebendo a Parte 3 de 3.
Apenas registre internamente todas as especificações abaixo.
Não gere o site nem qualquer trecho de código nesta etapa.
Somente após o comando final “AGORA GERE O SITE COMPLETO”, produza um único arquivo HTML contendo CSS (em <style>) e JS (em <script>), sem frameworks externos.

---

🧩 Integração Geral e Convenções Finais

Arquitetura single-file

• Um único arquivo: index.html com três blocos: Head (metadados/estilos), Body (estrutura semântica), Script (lógica).
• Sem dependências externas (nada de CDN, libs, fontes remotas que exijam rede). Ícones e assets opcionais em SVG inline.

Namespaces JS internos (organização lógica)

• core.state (estado central + imutabilidade superficial).
• core.storage (IndexedDB/localStorage, export/import).
• core.time (timer, relógio, agenda, recorrências).
• core.scheduling (conflitos, distribuição espaçada, SM-2).
• core.analytics (métricas, heatmaps, relatórios).
• ui.dom (query helpers, diff/render incremental).
• ui.components (cards, modals, toasts, tooltips, gráfico Canvas).
• ui.calendar (grade dia/semana, drag/resize, interleaving).
• features.pomodoro, features.flashcards, features.quiz, features.gamification, features.reports, features.immersive.
• access.a11y (foco, ARIA, prefers-reduced-motion).

Padrões de nomenclatura

• IDs: app-… para root/containers (ex.: app-header, app-dashboard).
• Classes: BEM simplificado: block__element--modifier.
• Datasets: data-role, data-id, data-type para ligação UI↔estado.
• Constantes: SCHEMA_VERSION, POMODORO_PRESETS, COLOR_TOKENS.

Ciclo de atualização

1. Ação do usuário → 2. Validação → 3. Atualização do estado (cópia) →
2. Persistência leve → 5. Render seletivo do(s) componente(s) afetado(s) → 6. Emissão de eventos (analytics/gamificação).

---

🧱 Esqueleto Semântico (descrição, sem código)

Header

• Logo minimalista (texto), seletor de visão: Dashboard, Agenda, Estudo, Relatórios, Configurações.
• Botões rápidos: Pomodoro Agora, Adicionar Bloco, Exportar/Importar.

Main

• Dashboard: timer radial, resumo do dia, atalhos de revisões (SM-2), progresso rápido (bars/lines via Canvas).
• Agenda (Dia/Semana): grade de 30 min (configurável), linha do “agora”, lista lateral de pendências arrastáveis, painel detalhado do evento.
• Estudo: guias Pomodoro, Flashcards, Quiz, Simulados.
• Relatórios: heatmap, evolução, calibração metacognitiva, comparador de estratégias.
• Configurações: pomodoro, gamificação, acessibilidade, idioma, backup.

Footer

• Atalhos de teclado, status (streak, nível), link “Sobre/Referências científicas”.

---

🧠 Modelo de Dados Final (campos consolidados)

• UserProfile: id, nome?, idioma, tema, altoContraste, fontScale, sons, notif.
• Task: id, titulo, descricao?, tags[], cor, prioridade, dificuldade, estimativaMin, status, createdAt, updatedAt.
• CalendarEvent: id, taskId?, titulo, cor, dataISO, startMin, endMin, recorrencia?, interleaving[], notas?, done?.
• PomodoroCycle: id, kind(focus|break|long), plannedMin, startTs?, endTs?, interruptions[].
• InterruptionEvent: id, ts, tipo(blur|idle|external), duracaoSeg.
• Flashcard: id, frente, verso, midia?, tags[], sm2:{EF,interval,n,lastReview,nextReview}.
• QuizItem: id, tipo(mcq|short|cloze), prompt, opcoes?[], correta, dica?, tema.
• LearningRecord: id, fonte(quiz|flashcard), itemId, acertou(bool), tempoSeg, confianca, ts.
• Gamification: xp, nivel, badges[], moedas, streak, ultimoAcessoDiaISO.
• Recommendations: janelas ideais, distribuição espaçada, dificuldade desejável.
• Settings: pomodoro:{focusMin,shortMin,longMin,cycles}, i18n, acess, privacy, backup.
• Schema: schemaVersion, lastBackupTs.

---

⏱️ Motor de Tempo & Pomodoro (regras operacionais)

• Preset default: 25/5, longa de 15 após 4 focos. Tudo ajustável.
• Timer radial animado + contador MM:SS + porcentagem.
• Eventos: startFocus, pause, resume, skipBreak, endCycle.
• Interrupções: registrar onblur, inatividade (cronômetro ocioso), e retomadas.
• Integração com Agenda: iniciar foco a partir de um CalendarEvent e marcar done ao concluir; se interrompido, sugerir reagendamento.

---

📅 Agenda Interativa (integração e regras finais)

Grade e interações

• Intervalo mínimo: 15 min; snap-to-grid.
• Criar: clicar/arrastar → modal de detalhes.
• Drag & Drop: mover entre dias/horas; resize pelas bordas.
• Conflitos: detecção em tempo real; opções: ajustar, sobrepor (paralelo), reagendar.
• Recorrência: simples (diária, semanal, dias específicos); término por data/ocorrências.
• Interleaving: subfaixas internas com cores/legendas.
• Lista de Pendências: arraste Task → cria CalendarEvent.

Acessibilidade na agenda

• Teclado: setas navegam células; Enter cria/edita; Shift+Setas redimensiona; Del remove.
• ARIA roles de grid/row/col adequados; foco sempre visível; feedback textual de conflitos.

---

🧮 Algoritmos (descrição, sem código)

SM-2 (repetição espaçada)

1. Após resposta, usuário avalia de 0–5.
2. Atualizar EF (mín. 1.3), intervalo (1→1d; 2→6d; n≥3 → I = I_prev * EF).
3. Registrar lastReview e calcular nextReview.
4. Priorizar itens vencidos; limitar carga diária.

Distribuição espaçada na agenda

• Heurística: espalhar tópicos iguais em ≥2 dias na semana; ajustar conforme histórico de acertos e energia (heatmap).

Comparador de estratégias

• Coletar acurácia/tempo sob interleaving vs bloqueado; exibir diferença percentual e recomendação.

---

🎮 Gamificação (política saudável)

• XP por foco concluído, revisões feitas, quizzes ≥80%.
• Níveis com curvas suaves (evitar grind).
• Badges: marcos (1º Pomodoro; 7 dias; 100 cards).
• Streak diário com lembretes gentis (opt-in).
• Totalmente desativável nas Configurações.

---

📈 Relatórios & Visualizações (Canvas API)

• Heatmap (hora×dia) de foco;
• Linha: horas focadas/dia;
• Pizza: tempo por tag;
• Barra: acertos em quizzes;
• Calibração: previsão vs resultado (dispersão + métricas).
• Sempre com alternativa em tabela acessível.

---

🔔 Notificações, Sons e Modo Imersivo

• Web Notifications (opt-in) ao finalizar ciclos; fallback visual.
• Sons sutis com controle de volume/mudo.
• Deep Work: fullscreen, UI enxuta, atalhos (F: fullscreen; P: pausar; N: próximo card; T: novo bloco).

---

♿ Acessibilidade (WCAG 2.2 — checklist final)

• Navegação 100% por teclado.
• Foco visível consistente.
• Contraste AA/AAA quando possível; modo Alto Contraste.
• Respeitar prefers-reduced-motion.
• Anúncios via aria-live para eventos de timer e validações.
• Labels e aria-describedby em inputs/modals.

---

🎨 Design System (tokens e escalas)

• Cores (tokens semânticos):
  --bg, --text, --muted, --primary, --success, --warn, --danger, --grid-line, --focus.
• Tipografia: escala modular, --font-size-…, --line-height-….
• Espaços: --space-1..6; Raios: --radius-…; Sombras: suaves para feedback.
• Dark/Light: toggle instantâneo + prefers-color-scheme.

---

🛡️ Segurança, Privacidade e Offline

• Sem eval/innerHTML inseguro; sanitizar notas.
• CSP restritiva; zero trackers.
• Tudo local (IndexedDB/localStorage).
• Export/Import: JSON/CSV; validação e versão de esquema.
• Autosave frequente; aviso ao fechar com sessão ativa.
• Service Worker (opcional) apenas para cache estático local.

---

⌨️ Atalhos de Teclado (resumo)

• Global: ? ajuda, G ir para Agenda, D Dashboard, R Relatórios, S Configurações.
• Pomodoro: Space iniciar/pausar, L pular pausa longa, E encerrar ciclo.
• Agenda: setas mover seleção, Enter criar/editar, Shift+Setas redimensionar, Del remover.
• Estudo: N próximo card/questão, 1..5 avaliação/confiança.

---

✅ Critérios de Aceitação (final)

1. Single-file entregue, sem dependências externas.
2. Agenda: criar/arrastar/redimensionar com mouse e teclado; resolução de conflitos funcional.
3. Pomodoro: presets editáveis; pausa longa automática; interrupções registradas; integração com eventos.
4. SM-2: fila diária correta; atualização de EF/intervalos; mini-calendário de revisões.
5. Quiz: 3 tipos; feedback imediato; metacognição (previsão vs real).
6. Relatórios: heatmap + gráficos Canvas com tabelas alternativas.
7. Gamificação: XP, níveis, badges, streak; opção de desativar.
8. Persistência: dados mantidos após reload; export/import JSON/CSV funcionais.
9. Acessibilidade: navegação completa por teclado; foco visível; contrastes adequados.
10. Performance: render seletivo; UI básica interativa em <150ms em dispositivos modestos (meta).

---

🧪 Plano de Testes (sumário)

• Unidades: tempo, agenda, SM-2, quiz, gráficos, storage.
• Fluxos: pendência → agenda → pomodoro → quiz → relatório → export.
• Stress: 500+ eventos/semana, 5.000 flashcards; drag contínuo (throttle).
• A11y: leitor de tela, sem trap focus, aria-live funcional.
• Offline: abrir/usar sem rede; export/import locais.

---

🚫 Restrições e Proibições

• Não usar frameworks (React/Vue/etc.) nem libs de gráficos; Canvas API apenas.
• Não fazer chamadas de rede externas.
• Não gerar o site agora.

---

🧭 Instruções de Geração (para quando receber o comando final)

Quando (e somente quando) receber “AGORA GERE O SITE COMPLETO”:

1. Criar um arquivo único com <style> e <script>.
2. Implementar exatamente as seções e módulos descritos nas Partes 1–3.
3. Incluir comentários claros e funções reutilizáveis (módulos internos).
4. Garantir responsividade, acessibilidade e persistência local.
5. Fornecer export/import e gráficos Canvas.
6. Validar critérios de aceitação e checklist A11y/Performance.

---

🔁 Lembrete Final — Parte 3 concluída

• Esta foi a Parte 3 de 3.
• Não gere o site ainda.
• Aguarde o comando explícito: “AGORA GERE O SITE COMPLETO”.

---

se quiser, já dou o próximo passo: é só dizer “AGORA GERE O SITE COMPLETO” que eu produzo o arquivo único (HTML + CSS + JS) seguindo tudo que definimos.

Perfeito! Integrei tudo em um super prompt consolidado (Partes 1–3), com reforços e checklists — ficou com 1349 linhas e inclui repetições estratégicas + instrução explícita de NÃO gerar o site ainda até receber “AGORA GERE O SITE COMPLETO”.

👉 Baixe aqui a versão completa (Markdown):
SUPER_PROMPT_P1-P3_CONSOLIDADO_ptBR_v1.md

Se quiser, também posso gerar uma versão .txt ou .docx, ou adaptar para inglês — é só me dizer.

Aqui está o site completo em um único arquivo (HTML + CSS + JS).
Basta salvar como index.html e abrir no navegador. Sem frameworks externos. ✅

Dica: pressione ? para ver os atalhos de teclado.
Se quiser, posso gerar também um .zip com este arquivo e uma versão minificada.

html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Focus+ — Estudo, Pomodoro, Agenda & Repetição Espaçada</title>
<meta name="description" content="App single-file para foco, estudo e gestão do tempo: Pomodoro, Agenda arrastável, Repetição Espaçada (SM-2), Quizzes, Relatórios e Gamificação.">

<style>
/* ============================================================================
   Focus+  —  SINGLE FILE APP
   - HTML, CSS e JS neste arquivo.
   - Sem frameworks externos.
   - Responsivo, acessível e com persistência local.
   ==========================================================================*/

/* ---------------------- Design Tokens (CSS Custom Properties) ------------- */
:root {
  --bg: #0f1320;
  --panel: #13172b;
  --panel-2: #171b33;
  --text: #e6e9f5;
  --muted: #9aa3b2;
  --primary: #6ee7ff;
  --primary-2: #48c6f8;
  --success: #7df7b7;
  --warn: #ffd166;
  --danger: #ff6b6b;
  --focus: #fff;
  --grid-line: #202746;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
  --space-1: .375rem;
  --space-2: .625rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.25rem;
  --font-regular: clamp(.95rem, .28vw + .8rem, 1.05rem);
  --font-small: clamp(.85rem, .2vw + .7rem, .95rem);
  --font-h1: clamp(1.3rem, 1.8vw + .8rem, 2rem);
  --font-h2: clamp(1.15rem, 1.2vw + .8rem, 1.4rem);
  --ring: 0 0 0 3px rgba(110,231,255,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% -20%, #1b2248 0%, var(--bg) 55%) fixed;
  color: var(--text);
  line-height: 1.45;
  overflow-y: scroll;
}

/* ---------------------- Layout ------------------------------------------- */
.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.brand__logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: conic-gradient(from 180deg, var(--primary), #8ce8ff, #69a9ff 60%, #6ee7ff);
  box-shadow: inset 0 -6px 20px rgba(0,0,0,.2);
}
.brand__title {
  font-weight: 700;
  font-size: var(--font-h1);
  letter-spacing: .2px;
}

.nav {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.nav button {
  appearance: none;
  border: 1px solid #2a315e;
  background: linear-gradient(180deg, #1a1f3b, #141936);
  color: var(--text);
  padding: .65rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--font-small);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.nav button[aria-current="page"]{
  border-color: #4e5ca8;
  background: linear-gradient(180deg, #283169, #1a2150);
  outline: none;
}

main { display: grid; gap: var(--space-4); }

/* ---------------------- Panels & Cards ----------------------------------- */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid #232a51;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}

.section-title {
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  margin: .25rem 0 var(--space-3);
}
.section-title h2 { margin: 0; font-size: var(--font-h2); }
.section-actions { display:flex; gap:.5rem; flex-wrap: wrap; }

.btn {
  appearance: none; border: 1px solid #2a315e;
  background: #1a1f3b; color: var(--text);
  padding: .55rem .8rem; border-radius: 10px;
  font-weight: 600; font-size: var(--font-small); cursor: pointer;
}
.btn--primary{ background: linear-gradient(180deg,#2a8df1,#2167e9); border-color:#2b6fe0; }
.btn--ghost{ background: transparent; }
.btn--success{ background: linear-gradient(180deg,#30d083,#0fb673); border-color:#0ba36a; }
.btn--warn{ background: linear-gradient(180deg,#f8b84f,#f39b2d); border-color:#f39b2d; color:#1b1305; }
.btn--danger{ background: linear-gradient(180deg,#ff7f91,#ff5a5a); border-color:#ff6b6b; }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }

/* ---------------------- Grids -------------------------------------------- */
.grid-2 { display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-4); }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } }

/* ---------------------- Dashboard ---------------------------------------- */
.dashboard__summary {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.dashboard__card {
  display:flex; flex-direction:column; gap:.35rem;
  background: linear-gradient(180deg, #171c39, #141935);
  border: 1px solid #232a51; border-radius: 14px; padding: var(--space-3);
}
.dashboard__label { color: var(--muted); font-size: var(--font-small); }
.dashboard__value { font-weight: 800; font-size: 1.35rem; }

/* ---------------------- Pomodoro ----------------------------------------- */
.pomodoro {
  display:grid; grid-template-columns: 260px 1fr; gap: var(--space-4);
}
@media (max-width: 720px) { .pomodoro { grid-template-columns: 1fr; } }
.timer-wrap {
  display:grid; place-items:center; gap: 1rem;
}
.timer {
  width: 240px; height: 240px; border-radius: 999px;
  display:grid; place-items:center;
  background:
    radial-gradient(closest-side, #0f1226 84%, transparent 85% 100%),
    conic-gradient(var(--primary) calc(var(--progress, 0) * 1%), #24305a 0);
  position: relative;
  box-shadow: inset 0 0 0 6px #101533, 0 12px 50px rgba(0,0,0,.35);
}
.timer__inner{
  width: 180px; height: 180px; border-radius: 999px;
  background: linear-gradient(180deg,#0f1227,#14193b);
  border: 1px solid #28306a;
  display:grid; place-items:center;
}
.timer__clock{ font-size: 2.1rem; font-weight: 800; letter-spacing:.5px;}
.timer__phase{ font-size: var(--font-small); color: var(--muted); margin-top: .15rem; }

.timer-actions { display:flex; gap:.5rem; flex-wrap: wrap; justify-content:center; }

.prefs {
  display:grid; gap:.6rem;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.prefs label { font-size: var(--font-small); color: var(--muted); }
.prefs input {
  width: 100%; padding:.55rem .6rem; border-radius: 10px;
  border: 1px solid #2a315e; background:#141936; color:var(--text);
}

/* ---------------------- Agenda (Dia/Semana) ------------------------------- */
.calendar {
  display:grid; grid-template-columns: 240px 1fr; gap: var(--space-3);
}
@media (max-width: 900px){ .calendar { grid-template-columns: 1fr; } }

.tasks {
  background: linear-gradient(180deg, #171c39, #141935);
  border: 1px solid #232a51; border-radius: 14px; padding: var(--space-3);
}
.tasks h3{ margin:0 0 .8rem 0; font-size: 1.05rem; }
.task-item{
  background: #141a38; border: 1px solid #273060; border-radius: 10px;
  padding:.55rem .7rem; margin-bottom:.5rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem;
}
.task-item .tag{ font-size:.72rem; color:#b7c4e2; background:#202656; padding:.2rem .45rem; border-radius:6px; }

.calendar__wrap {
  background: linear-gradient(180deg, #171c39, #141935);
  border: 1px solid #232a51; border-radius: 14px; padding: var(--space-2) var(--space-2) var(--space-3);
}
.calendar__toolbar{
  display:flex; gap:.5rem; align-items:center; justify-content:space-between; padding: .3rem .6rem .7rem;
}
.calendar__grid{
  --hourHeight: 48px;
  --colGap: 6px;
  display:grid; position:relative;
  grid-template-columns: 60px repeat(7, minmax(0,1fr));
  gap: var(--colGap);
  border-top: 1px solid #242a4d;
  padding-top: .5rem;
}
.calendar__grid .col-head{
  text-align:center; color: var(--muted); font-size: var(--font-small); padding-bottom:.25rem;
}
.calendar__grid .hours{
  display:grid; grid-template-rows: repeat(24, var(--hourHeight));
  color: var(--muted); font-size:.75rem; gap: 1px;
}
.calendar__grid .hours div{
  border-bottom: 1px dashed #263058; display:flex; justify-content:flex-end; padding-right:.35rem; align-items:flex-start;
}
.calendar__grid .day{
  position:relative; display:grid; grid-template-rows: repeat(24, var(--hourHeight)); gap: 1px;
}
.calendar__grid .day .row{ border-bottom: 1px dashed #263058; }
.event{
  position:absolute; left: 6px; right:6px; border-radius:12px;
  background: linear-gradient(180deg,#2a3567,#202a5b); border:1px solid #3a4690;
  color:#dce7ff; padding:.45rem .55rem; font-size:.9rem; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  user-select:none;
}
.event[data-selected="true"]{ outline: 3px solid rgba(110,231,255,.35); }
.event .resize-handle{ position:absolute; left:0; right:0; height:8px; cursor: ns-resize; }
.event .resize-top{ top:-4px; }
.event .resize-bottom{ bottom:-4px; }
.nowline{
  position:absolute; left: 60px; right:0; height: 2px; background: linear-gradient(90deg, transparent, #ff8a8a, transparent);
  box-shadow: 0 0 12px #ff8a8a; pointer-events:none;
}

/* ---------------------- Flashcards / Quiz -------------------------------- */
.tabbar { display:flex; gap:.4rem; margin-bottom: .8rem; flex-wrap: wrap; }
.tabbar button{ border-radius: 9px; }
.fc-form, .quiz-form {
  display:grid; gap:.6rem; grid-template-columns: 1fr 1fr; align-items:start;
}
.fc-form textarea, .quiz-form textarea,
.fc-form input, .quiz-form input, .quiz-form select {
  width: 100%; padding:.6rem .7rem; border-radius: 10px;
  border: 1px solid #2a315e; background:#141936; color:var(--text);
}
.fc-list { display:grid; gap:.5rem; margin-top:.75rem; }
.fc-item { border:1px solid #2a315e; background:#141a38; padding:.6rem .7rem; border-radius: 10px; }
.fc-item small{ color: var(--muted); }

.study-card {
  border:1px solid #2b3a7a; background: linear-gradient(180deg,#151a3d,#131738); border-radius: 14px; padding: 1rem;
  display:grid; gap:.7rem;
}
.study-card .q { font-weight: 700; }
.sm2-buttons { display:flex; gap:.4rem; flex-wrap: wrap; }
.sm2-buttons button { min-width: 40px; }

/* ---------------------- Reports (Canvas) --------------------------------- */
.canvas-grid { display:grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 980px){ .canvas-grid { grid-template-columns: 1fr; } }
.chart {
  background: linear-gradient(180deg, #171c39, #141935);
  border: 1px solid #232a51; border-radius: 14px; padding: var(--space-3);
}
.chart canvas { width: 100%; height: 280px; display:block; }

/* ---------------------- Toasts, Modals, Help ------------------------------ */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #13172b; border: 1px solid #2b3263; padding:.65rem .9rem; border-radius: 10px;
  box-shadow: var(--shadow); z-index: 50; display:none;
}
.toast[data-open="true"]{ display:block; }

.modal {
  position: fixed; inset:0; display:none;
  align-items:center; justify-content:center; z-index: 60;
  background: rgba(7,10,22,.6);
}
.modal[data-open="true"] { display:flex; }
.modal__dialog{
  background: linear-gradient(180deg, #171c39, #141935);
  border: 1px solid #2b3263; border-radius: 16px; width:min(680px, 92vw); padding: 1rem;
}
.modal header{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.modal h3{ margin:.25rem 0; }
.modal .row{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; margin:.5rem 0; }
.modal input, .modal textarea, .modal select{
  width: 100%; padding:.6rem .7rem; border-radius: 10px; border: 1px solid #2a315e; background:#141936; color:var(--text);
}
.modal .actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.8rem; flex-wrap: wrap; }

.help {
  position: fixed; inset: 0; display:none; z-index: 70; background: rgba(5,7,16,.7);
  align-items: center; justify-content: center; padding: 2rem;
}
.help[data-open="true"]{ display:flex; }
.help__content{
  width:min(860px, 96vw);
  background: linear-gradient(180deg,#151a3d,#131738);
  border: 1px solid #32408a; border-radius: 16px; padding:1rem 1.25rem;
}
kbd { background:#10163a; border:1px solid #2a356f; border-bottom-width:3px; padding:.1rem .35rem; border-radius:6px; font-weight:700; }

/* ---------------------- Tables & Misc ------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { border-bottom: 1px solid #263058; padding:.55rem .45rem; text-align:left; }
.muted { color: var(--muted); }
.small { font-size: var(--font-small); }
.center { text-align:center; }
hr.sep { border: none; border-top: 1px solid #283060; margin: .75rem 0; }

.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus { left: 10px; top: 10px; z-index: 99; width:auto; height:auto; padding:.4rem .6rem; background:#10163a; border:1px solid #2a356f; border-radius:6px; }
</style>
</head>
<body>
<a href="#conteudo" class="skip-link">Pular para o conteúdo</a>

<div class="app" id="app">
  <header class="header" role="banner">
    <div class="brand" aria-label="Focus+">
      <div class="brand__logo" aria-hidden="true"></div>
      <div>
        <div class="brand__title">Focus+</div>
        <div class="small muted">Foco, Estudo, Agenda & Repetição Espaçada</div>
      </div>
    </div>

    <nav class="nav" aria-label="Principal">
      <button class="navbtn" data-view="dashboard" aria-current="page" title="Dashboard (D)">Dashboard</button>
      <button class="navbtn" data-view="agenda" title="Agenda (G)">Agenda</button>
      <button class="navbtn" data-view="estudo" title="Estudo (E)">Estudo</button>
      <button class="navbtn" data-view="relatorios" title="Relatórios (R)">Relatórios</button>
      <button class="navbtn" data-view="config" title="Configurações (S)">Configurações</button>
      <button class="btn btn--ghost" id="helpBtn" title="Ajuda ( ? )">Ajuda</button>
    </nav>
  </header>

  <main id="conteudo" tabindex="-1">
    <!-- ========================= DASHBOARD =============================== -->
    <section id="view-dashboard" class="panel" role="region" aria-labelledby="dash-title">
      <div class="section-title">
        <h2 id="dash-title">Dashboard</h2>
        <div class="section-actions">
          <button class="btn btn--primary" id="quickPomodoro">Pomodoro Agora</button>
          <button class="btn" id="exportBtn">Exportar JSON</button>
          <label class="btn"><input type="file" id="importInput" accept=".json" hidden>Importar JSON</label>
        </div>
      </div>

      <div class="grid-2">
        <div class="panel">
          <div class="pomodoro" aria-label="Pomodoro Timer">
            <div class="timer-wrap">
              <div class="timer" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Progresso do ciclo" id="timer">
                <div class="timer__inner">
                  <div class="timer__clock" id="timerClock">25:00</div>
                  <div class="timer__phase" id="timerPhase">Foco #1</div>
                </div>
              </div>
              <div class="timer-actions">
                <button class="btn btn--success" id="startBtn">Iniciar (Space)</button>
                <button class="btn" id="pauseBtn">Pausar</button>
                <button class="btn btn--warn" id="skipBtn">Pular Pausa</button>
                <button class="btn btn--danger" id="resetBtn">Reiniciar</button>
              </div>
            </div>

            <div>
              <div class="prefs">
                <div><label>Foco (min)
                  <input id="prefFocus" type="number" min="5" max="120" step="1" value="25" aria-label="Minutos de foco"></label></div>
                <div><label>Pausa Curta (min)
                  <input id="prefShort" type="number" min="1" max="30" step="1" value="5" aria-label="Minutos de pausa curta"></label></div>
                <div><label>Pausa Longa (min)
                  <input id="prefLong" type="number" min="5" max="60" step="1" value="15" aria-label="Minutos de pausa longa"></label></div>
                <div><label>Ciclos até longa
                  <input id="prefCycles" type="number" min="2" max="8" step="1" value="4" aria-label="Ciclos de foco até pausa longa"></label></div>
              </div>
              <hr class="sep">
              <div class="small muted">
                Interrupções são registradas automaticamente ao alternar de aba/janela.
                Ative notificações em <strong>Configurações</strong> para alertas no fim do ciclo.
              </div>
            </div>
          </div>
        </div>

        <div class="panel">
          <div class="dashboard__summary" role="list">
            <div class="dashboard__card" role="listitem">
              <div class="dashboard__label">Tempo focado hoje</div>
              <div class="dashboard__value" id="dashFocused">0m</div>
              <div class="small muted" id="dashSessions">0 ciclos concluídos</div>
            </div>
            <div class="dashboard__card" role="listitem">
              <div class="dashboard__label">Revisões (SM-2) para hoje</div>
              <div class="dashboard__value" id="dashDue">0 cards</div>
              <div class="small muted">Fila de revisão diária</div>
            </div>
            <div class="dashboard__card" role="listitem">
              <div class="dashboard__label">Nível & XP</div>
              <div class="dashboard__value"><span id="lvl">1</span> • <span id="xp">0</span> XP</div>
              <div class="small muted" id="streak">Streak: 0 dia(s)</div>
            </div>
          </div>
          <hr class="sep">
          <div class="small muted">
            Dica: arraste tarefas da lista de pendências para a <strong>Agenda</strong> e inicie o Pomodoro a partir do bloco agendado.
          </div>
        </div>
      </div>
    </section>

    <!-- ========================= AGENDA ================================== -->
    <section id="view-agenda" class="panel" hidden role="region" aria-labelledby="agenda-title">
      <div class="section-title">
        <h2 id="agenda-title">Agenda (Dia/Semana)</h2>
        <div class="section-actions">
          <button class="btn btn--primary" id="newTaskBtn">Nova Tarefa</button>
          <button class="btn" id="addEventNowBtn">Bloco Rápido</button>
          <select class="btn" id="viewMode">
            <option value="week">Semana</option>
            <option value="day">Dia</option>
          </select>
        </div>
      </div>

      <div class="calendar">
        <aside class="tasks" aria-label="Pendências">
          <h3>Pendências</h3>
          <div class="small muted">Arraste para a grade da agenda</div>
          <div id="tasksList"></div>
        </aside>

        <div class="calendar__wrap">
          <div class="calendar__toolbar">
            <div>
              <button class="btn" id="prevWeekBtn" title="Semana anterior">◀</button>
              <button class="btn" id="todayBtn">Hoje</button>
              <button class="btn" id="nextWeekBtn" title="Próxima semana">▶</button>
            </div>
            <div class="small muted" id="weekLabel"></div>
            <div><button class="btn btn--success" id="startFromSelectionBtn">Pomodoro do bloco</button></div>
          </div>

          <div class="calendar__grid" id="calendarGrid" role="grid" aria-label="Grade da agenda">
            <!-- Cabeçalhos e colunas são renderizados via JS -->
          </div>
        </div>
      </div>
      <div class="small muted" style="margin-top:.6rem">
        Teclado: setas movem seleção, <kbd>Enter</kbd> edita, <kbd>Shift</kbd>+setas redimensiona, <kbd>Del</kbd> remove.
      </div>
    </section>

    <!-- ========================= ESTUDO ================================== -->
    <section id="view-estudo" class="panel" hidden role="region" aria-labelledby="study-title">
      <div class="section-title">
        <h2 id="study-title">Estudo</h2>
        <div class="section-actions">
          <button class="btn btn--ghost" id="enterImmersive">Modo Imersivo</button>
        </div>
      </div>

      <div class="tabbar" role="tablist" aria-label="Modos de estudo">
        <button class="btn btn--primary" data-tab="pomodoro">Pomodoro</button>
        <button class="btn" data-tab="flashcards">Flashcards (SM-2)</button>
        <button class="btn" data-tab="quiz">Quiz</button>
        <button class="btn" data-tab="simulado">Simulado</button>
      </div>

      <div id="tab-pomodoro">
        <div class="small muted">Use o painel do Dashboard para controlar o Pomodoro. Aqui você encontra dicas de estudo, pausas ativas e atalhos.</div>
        <hr class="sep">
        <div class="grid-3">
          <div class="study-card">
            <div class="q">Pausa ativa: respiração 4-4-4-4</div>
            <div class="muted small">Inspire 4s, segure 4s, expire 4s, segure 4s (repetir 4x).</div>
            <button class="btn" id="breathBtn">Iniciar 60s</button>
          </div>
          <div class="study-card">
            <div class="q">Dual Coding</div>
            <div class="muted small">Associe um esboço/diagrama à sua nota — use a Ferramenta de Dual Coding (na área de flashcards).</div>
          </div>
          <div class="study-card">
            <div class="q">Interleaving</div>
            <div class="muted small">Alterne tópicos quando notar queda de rendimento; use blocos de 15–25min por tema.</div>
          </div>
        </div>
      </div>

      <div id="tab-flashcards" hidden>
        <div class="section-title">
          <h3>Gerenciar Flashcards</h3>
          <div class="section-actions">
            <button class="btn" id="importCsvCards">Importar CSV</button>
            <input type="file" id="csvInput" accept=".csv" hidden>
          </div>
        </div>
        <form class="fc-form" id="fcForm">
          <label>Frente (pergunta)
            <textarea id="fcFront" rows="3" required></textarea></label>
          <label>Verso (resposta)
            <textarea id="fcBack" rows="3" required></textarea></label>
          <label>Tags (separadas por vírgula)
            <input id="fcTags" placeholder="ex.: biologia, ciclo celular"></label>
          <label>Mídia (URL opcional — será sanitizada)
            <input id="fcMedia" placeholder="ex.: data:image/svg+xml;base64,... ou https://"></label>
          <div style="grid-column:1/-1; display:flex; gap:.5rem; flex-wrap:wrap">
            <button class="btn btn--primary" type="submit">Adicionar</button>
            <button class="btn" type="button" id="rebuildQueueBtn">Recalcular Fila do Dia</button>
          </div>
        </form>

        <div class="grid-2" style="margin-top:.75rem">
          <div>
            <h3 class="small muted" style="margin:0 0 .5rem 0">Cards</h3>
            <div class="fc-list" id="fcList"></div>
          </div>
          <div>
            <h3 class="small muted" style="margin:0 0 .5rem 0">Estudar — Fila de Hoje</h3>
            <div id="studyArea">
              <div class="muted small">Pressione <kbd>N</kbd> para próximo, avalie com <kbd>0..5</kbd>.</div>
              <div class="study-card" id="studyCard" hidden>
                <div class="q" id="studyQ"></div>
                <div class="a" id="studyA" hidden></div>
                <img id="studyMedia" alt="" style="max-width:100%; border-radius:10px; display:none">
                <div style="display:flex; gap:.5rem; flex-wrap:wrap">
                  <button class="btn" id="revealBtn">Mostrar resposta</button>
                  <button class="btn" id="nextBtn">Próximo</button>
                </div>
                <div class="sm2-buttons" aria-label="Qualidade 0 a 5">
                  <button class="btn" data-q="0">0</button>
                  <button class="btn" data-q="1">1</button>
                  <button class="btn" data-q="2">2</button>
                  <button class="btn" data-q="3">3</button>
                  <button class="btn" data-q="4">4</button>
                  <button class="btn" data-q="5">5</button>
                </div>
              </div>
              <div id="studyEmpty" class="muted small">Nenhum card devido agora.</div>
            </div>
          </div>
        </div>
      </div>

      <div id="tab-quiz" hidden>
        <form class="quiz-form" id="quizForm">
          <label>Tipo
            <select id="qType">
              <option value="mcq">Múltipla Escolha</option>
              <option value="short">Resposta Curta</option>
              <option value="cloze">Lacuna (use ___ para marcar)</option>
            </select></label>
          <label>Tema
            <input id="qTheme" placeholder="ex.: matemática, história"></label>
          <label>Enunciado
            <textarea id="qPrompt" rows="3"></textarea></label>
          <label>Opções (MCQ — separe por |, primeira é a correta)
            <input id="qOptions" placeholder="Correta | Distrator 1 | Distrator 2"></label>
          <label>Resposta Correta (short/cloze)
            <input id="qAnswer" placeholder="Texto exato"></label>
          <label>Dica (opcional)
            <input id="qHint" placeholder="Uma pista ou explicação curta"></label>
          <div style="grid-column:1/-1; display:flex; gap:.5rem; flex-wrap:wrap">
            <button class="btn btn--primary" type="submit">Adicionar Questão</button>
            <button class="btn" type="button" id="startQuizBtn">Iniciar Mini-Quiz (5)</button>
          </div>
        </form>

        <div id="quizArea" style="margin-top:.75rem"></div>
      </div>

      <div id="tab-simulado" hidden>
        <div class="small muted">Simulado cronometrado: escolha um tema e tempo. (Versão básica — usa o banco de questões.)</div>
        <div style="display:flex; gap:.5rem; margin:.5rem 0; flex-wrap: wrap;">
          <input class="btn" id="simTheme" placeholder="Tema (opcional)" style="min-width:220px">
          <input class="btn" id="simMinutes" type="number" min="5" max="180" value="20" style="min-width:140px">
          <button class="btn btn--primary" id="startSimBtn">Iniciar Simulado</button>
        </div>
        <div id="simArea"></div>
      </div>
    </section>

    <!-- ========================= RELATÓRIOS =============================== -->
    <section id="view-relatorios" class="panel" hidden role="region" aria-labelledby="reports-title">
      <div class="section-title">
        <h2 id="reports-title">Relatórios & Heatmap</h2>
        <div class="section-actions">
          <button class="btn" id="rebuildChartsBtn">Atualizar</button>
          <button class="btn" id="exportCsvBtn">Exportar CSV</button>
        </div>
      </div>

      <div class="canvas-grid">
        <div class="chart"><h3 class="small muted">Horas focadas (últimos 7 dias)</h3><canvas id="chartFocus"></canvas></div>
        <div class="chart"><h3 class="small muted">Tempo por tag (agenda)</h3><canvas id="chartTags"></canvas></div>
        <div class="chart"><h3 class="small muted">Acurácia de quizzes</h3><canvas id="chartQuiz"></canvas></div>
        <div class="chart"><h3 class="small muted">Calibração (previsão × resultado)</h3><canvas id="chartCalib"></canvas></div>
      </div>

      <hr class="sep">
      <h3 class="small muted">Heatmap (7 × 24)</h3>
      <div class="chart"><canvas id="heatmap" height="240"></canvas></div>
    </section>

    <!-- ========================= CONFIGURAÇÕES ============================ -->
    <section id="view-config" class="panel" hidden role="region" aria-labelledby="config-title">
      <div class="section-title">
        <h2 id="config-title">Configurações</h2>
      </div>
      <div class="grid-2">
        <div>
          <h3>Preferências</h3>
          <div style="display:grid; gap:.6rem">
            <label class="small">Notificações do navegador
              <button class="btn" id="notifBtn">Permitir</button>
            </label>
            <label class="small">Sons
              <select class="btn" id="soundSel">
                <option value="on">Ativado</option>
                <option value="off">Desativado</option>
              </select>
            </label>
            <label class="small">Tema alto contraste
              <select class="btn" id="contrastSel">
                <option value="off">Desativado</option>
                <option value="on">Ativado</option>
              </select>
            </label>
            <label class="small">Tamanho da fonte
              <select class="btn" id="fontSel">
                <option value="1">Normal</option>
                <option value="1.1">+10%</option>
                <option value="1.2">+20%</option>
              </select>
            </label>
          </div>
        </div>
        <div>
          <h3>Backup & Dados</h3>
          <div style="display:flex; gap:.5rem; flex-wrap: wrap;">
            <button class="btn" id="exportBtn2">Exportar JSON</button>
            <label class="btn"><input type="file" id="importInput2" accept=".json" hidden>Importar JSON</label>
            <button class="btn btn--danger" id="wipeBtn">Apagar Tudo</button>
          </div>
          <div class="small muted" style="margin-top:.5rem">
            Seus dados ficam <strong>apenas</strong> no dispositivo (localStorage). Exporte periodicamente.
          </div>
        </div>
      </div>
    </section>
  </main>
</div>

<!-- ========================= TOAST, MODALS & HELP ========================== -->
<div class="toast" role="status" aria-live="polite" id="toast"></div>

<div class="modal" id="eventModal" aria-hidden="true" aria-modal="true" role="dialog">
  <div class="modal__dialog">
    <header>
      <h3>Editar Bloco</h3>
      <button class="btn" id="closeEventModal" aria-label="Fechar">✕</button>
    </header>
    <div class="row">
      <label>Título <input id="evTitle"></label>
      <label>Cor <input id="evColor" type="color" value="#4aa3ff"></label>
    </div>
    <div class="row">
      <label>Data <input id="evDate" type="date"></label>
      <label>Início <input id="evStart" type="time" step="900"></label>
    </div>
    <div class="row">
      <label>Fim <input id="evEnd" type="time" step="900"></label>
      <label>Tags <input id="evTags" placeholder="ex.: matemática, revisão"></label>
    </div>
    <label>Notas
      <textarea id="evNotes" rows="3"></textarea>
    </label>
    <div class="actions">
      <button class="btn btn--danger" id="deleteEventBtn">Remover</button>
      <div style="flex:1"></div>
      <button class="btn" id="startPomodoroFromEvent">Pomodoro</button>
      <button class="btn btn--primary" id="saveEventBtn">Salvar</button>
    </div>
  </div>
</div>

<div class="modal" id="taskModal" aria-hidden="true" aria-modal="true" role="dialog">
  <div class="modal__dialog">
    <header>
      <h3>Nova Tarefa</h3>
      <button class="btn" id="closeTaskModal" aria-label="Fechar">✕</button>
    </header>
    <div class="row">
      <label>Título <input id="tkTitle"></label>
      <label>Cor <input id="tkColor" type="color" value="#6ee7ff"></label>
    </div>
    <div class="row">
      <label>Estimativa (min) <input id="tkEst" type="number" min="15" step="15" value="30"></label>
      <label>Tags <input id="tkTags" placeholder="ex.: leitura, cálculo"></label>
    </div>
    <label>Descrição
      <textarea id="tkDesc" rows="3"></textarea>
    </label>
    <div class="actions">
      <button class="btn btn--primary" id="saveTaskBtn">Adicionar</button>
    </div>
  </div>
</div>

<div class="help" id="help" aria-hidden="true" role="dialog" aria-modal="true">
  <div class="help__content">
    <header style="display:flex;justify-content:space-between;align-items:center">
      <h3>Ajuda & Atalhos</h3>
      <button class="btn" id="closeHelp">Fechar</button>
    </header>
    <div class="grid-3">
      <div>
        <h4>Global</h4>
        <p><kbd>?</kbd> ajuda • <kbd>D</kbd> dashboard • <kbd>G</kbd> agenda • <kbd>E</kbd> estudo • <kbd>R</kbd> relatórios • <kbd>S</kbd> configurações</p>
      </div>
      <div>
        <h4>Pomodoro</h4>
        <p><kbd>Espaço</kbd> iniciar/pausar • <kbd>L</kbd> pular pausa longa • <kbd>E</kbd> encerrar ciclo</p>
      </div>
      <div>
        <h4>Agenda</h4>
        <p>Setas movem seleção • <kbd>Enter</kbd> edita • <kbd>Shift</kbd>+setas redimensiona • <kbd>Del</kbd> remove</p>
      </div>
    </div>
  </div>
</div>

<script>
/* ============================================================================
   Focus+ — JavaScript
   Estrutura modular simples usando namespaces internos.
   ==========================================================================*/

/* ---------------------- Utilidades --------------------------------------- */
const U = {
  id: () => 'id-' + Math.random().toString(36).slice(2, 10),
  clamp: (v, min, max) => Math.min(max, Math.max(min, v)),
  fmtMin: m => `${Math.floor(m)}m`,
  fmtTime: (s) => {
    const m = Math.floor(s / 60), r = s % 60;
    return `${String(m).padStart(2,'0')}:${String(r).padStart(2,'0')}`;
  },
  todayISO: () => new Date().toISOString().slice(0,10),
  ymd: (d) => d.toISOString().slice(0,10),
  toMin: (hhmm) => { const [h,m]=hhmm.split(':').map(Number); return h*60+m; },
  minToHHMM: (m) => `${String(Math.floor(m/60)).padStart(2,'0')}:${String(m%60).padStart(2,'0')}`,
  between: (x,a,b) => x>=a && x<=b,
  toast(msg){ const t = document.getElementById('toast'); t.textContent = msg; t.dataset.open = 'true'; setTimeout(()=>{ t.dataset.open='false' }, 2100); },
  download(filename, text) {
    const blob = new Blob([text], {type: 'application/json'});
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename;
    document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(a.href), 500);
  },
  sanitizeURL(url) {
    if(!url || typeof url !== 'string') return '';
    const safe = url.trim();
    if (safe.startsWith('data:image/') || safe.startsWith('https://') || safe.startsWith('http://')) return safe;
    return '';
  }
};

/* ---------------------- Estado & Persistência ---------------------------- */
const STATE_VER = 1;
const defaultState = () => ({
  schema: STATE_VER,
  user: { name: '', lang: 'pt-BR', themeContrast: 'off', fontScale: 1, sound: 'on', notif: 'off' },
  settings: { pomodoro: { focusMin: 25, shortMin: 5, longMin: 15, cycles: 4 } },
  gamification: { xp: 0, level: 1, badges: [], streak: 0, lastDay: null },
  tasks: [],
  events: [],               // CalendarEvent {id, titulo, dataISO, startMin, endMin, cor, tags, notas, done?}
  pomodoros: [],            // PomodoroCycle {id, kind, plannedMin, startTs, endTs, interruptions[]}
  interruptions: [],        // InterruptionEvent
  flashcards: [],           // Flashcard {id, frente, verso, midia, tags[], sm2}
  quizbank: [],             // QuizItem {id, tipo, prompt, opcoes[], correta, dica, tema}
  records: [],              // LearningRecord {id, fonte, itemId, acertou, tempoSeg, confianca, ts}
});
const Store = {
  key: 'focusplus.v1',
  load() {
    try {
      const raw = localStorage.getItem(this.key);
      if(!raw) return defaultState();
      const obj = JSON.parse(raw);
      if(!obj.schema || obj.schema !== STATE_VER) return defaultState();
      return obj;
    } catch(e){ console.warn('Load failed', e); return defaultState(); }
  },
  save(state) { try { localStorage.setItem(this.key, JSON.stringify(state)); } catch(e){} },
  export(){ U.download('focusplus_backup.json', JSON.stringify(state, null, 2)); },
  import(obj){
    if(!obj || typeof obj !== 'object') return;
    state = Object.assign(defaultState(), obj);
    Store.save(state);
    UI.refreshAll();
    U.toast('Dados importados.');
  }
};
let state = Store.load();

/* ---------------------- Navegação ---------------------------------------- */
const UI = {
  currentView: 'dashboard',
  initNav(){
    document.querySelectorAll('.navbtn').forEach(btn=>{
      btn.addEventListener('click', ()=>{
        UI.goto(btn.dataset.view);
      });
    });
    document.getElementById('helpBtn').addEventListener('click', ()=>UI.help(true));
    document.getElementById('closeHelp').addEventListener('click', ()=>UI.help(false));
  },
  goto(view){
    UI.currentView = view;
    document.querySelectorAll('[id^="view-"]').forEach(sec=>{
      sec.hidden = !sec.id.endsWith(view);
    });
    document.querySelectorAll('.navbtn').forEach(b=>b.setAttribute('aria-current', b.dataset.view===view ? 'page':'false'));
    if(view==='relatorios') Charts.renderAll();
    if(view==='agenda') Calendar.render();
    if(view==='dashboard') Dashboard.refresh();
    window.location.hash = view;
    document.getElementById('conteudo').focus();
  },
  help(open){ document.getElementById('help').dataset.open = open ? 'true' : 'false'; },
  toast: U.toast,
  refreshAll(){
    Dashboard.refresh();
    Calendar.render();
    Flashcards.refresh();
    Quizzes.refreshList();
    Charts.renderAll();
    Config.syncUI();
  }
};

/* ---------------------- Gamificação -------------------------------------- */
const Game = {
  addXP(n){
    state.gamification.xp += n;
    // level up: curva suave
    while(state.gamification.xp >= Game.nextLevelXP()){
      state.gamification.level++;
    }
    Store.save(state);
    Dashboard.refreshGamification();
  },
  nextLevelXP(){
    const L = state.gamification.level;
    return Math.floor(50 + (L * L * 15));
  },
  tickStreak(){
    const today = U.todayISO();
    const last = state.gamification.lastDay;
    if(last === today) return;
    const yesterday = new Date(); yesterday.setDate(yesterday.getDate()-1);
    if(last && last === U.ymd(yesterday)) state.gamification.streak++;
    else state.gamification.streak = 1;
    state.gamification.lastDay = today;
    Store.save(state);
  }
};

/* ---------------------- Pomodoro ----------------------------------------- */
const Pomodoro = {
  phase: 'focus', // focus | short | long
  cycleIndex: 1,
  remainingSec: 25*60,
  timerId: null,
  startedFromEventId: null,

  readPrefs(){
    const p = state.settings.pomodoro;
    document.getElementById('prefFocus').value = p.focusMin;
    document.getElementById('prefShort').value = p.shortMin;
    document.getElementById('prefLong').value  = p.longMin;
    document.getElementById('prefCycles').value= p.cycles;
  },
  writePrefs(){
    const p = state.settings.pomodoro;
    p.focusMin = Number(document.getElementById('prefFocus').value || 25);
    p.shortMin = Number(document.getElementById('prefShort').value || 5);
    p.longMin  = Number(document.getElementById('prefLong').value || 15);
    p.cycles   = Number(document.getElementById('prefCycles').value || 4);
    Store.save(state);
    if(Pomodoro.phase==='focus') Pomodoro.setTimer(p.focusMin*60);
  },
  setTimer(sec){
    Pomodoro.remainingSec = sec;
    UI.timerClock.textContent = U.fmtTime(sec);
    UI.timer.setAttribute('aria-valuenow', 0);
    UI.timer.style.setProperty('--progress', 0);
  },
  start(kind=null){
    if(kind) Pomodoro.phase = kind;
    if(Pomodoro.timerId) return;
    const p = state.settings.pomodoro;
    let total = (Pomodoro.phase==='focus' ? p.focusMin : Pomodoro.phase==='short' ? p.shortMin : p.longMin) * 60;
    if(Pomodoro.remainingSec <= 0 || Pomodoro.remainingSec > total) Pomodoro.remainingSec = total;

    const startTs = Date.now();
    let cycle = { id: U.id(), kind: Pomodoro.phase, plannedMin: total/60, startTs, endTs: null, interruptions: [] };
    state.pomodoros.push(cycle); Store.save(state);

    Pomodoro.timerId = setInterval(()=>{
      Pomodoro.remainingSec -= 1;
      const passed = total - Pomodoro.remainingSec;
      const progress = Math.max(0, Math.min(1, passed/total))*100;
      UI.timerClock.textContent = U.fmtTime(Pomodoro.remainingSec);
      UI.timer.style.setProperty('--progress', progress);
      UI.timer.setAttribute('aria-valuenow', Math.round(progress));
      UI.timerPhase.textContent = Pomodoro.phaseLabel();

      if(Pomodoro.remainingSec <= 0){
        clearInterval(Pomodoro.timerId); Pomodoro.timerId = null;
        cycle.endTs = Date.now();
        Store.save(state);
        Pomodoro.onEndCycle(cycle);
      }
    }, 1000);
  },
  pause(){
    if(Pomodoro.timerId){ clearInterval(Pomodoro.timerId); Pomodoro.timerId = null; }
  },
  reset(){
    Pomodoro.pause();
    Pomodoro.phase = 'focus';
    Pomodoro.cycleIndex = 1;
    Pomodoro.startedFromEventId = null;
    Pomodoro.setTimer(state.settings.pomodoro.focusMin*60);
    UI.timerPhase.textContent = Pomodoro.phaseLabel();
  },
  skipBreak(){
    if(Pomodoro.phase!=='short' && Pomodoro.phase!=='long') return;
    Pomodoro.pause();
    Pomodoro.phase = 'focus';
    Pomodoro.setTimer(state.settings.pomodoro.focusMin*60);
    UI.timerPhase.textContent = Pomodoro.phaseLabel();
  },
  phaseLabel(){
    return Pomodoro.phase==='focus' ? `Foco #${Pomodoro.cycleIndex}` :
           Pomodoro.phase==='short'  ? 'Pausa Curta' : 'Pausa Longa';
  },
  onEndCycle(cycle){
    // XP e streak
    if(cycle.kind==='focus'){
      Game.addXP(Math.round(cycle.plannedMin/5)*5);
      Game.tickStreak();
      if(Pomodoro.startedFromEventId){
        const ev = state.events.find(e=>e.id===Pomodoro.startedFromEventId);
        if(ev) { ev.done = true; Store.save(state); Calendar.render(); }
      }
    }
    // Notificação
    Notifications.notify(`Fim de ${cycle.kind==='focus'?'foco':'pausa'}`, 'Hora de trocar de fase!');
    // Próxima fase
    const p = state.settings.pomodoro;
    if(cycle.kind==='focus'){
      if(Pomodoro.cycleIndex % p.cycles === 0){
        Pomodoro.phase='long'; Pomodoro.setTimer(p.longMin*60); Pomodoro.cycleIndex=1;
      } else {
        Pomodoro.phase='short'; Pomodoro.setTimer(p.shortMin*60); Pomodoro.cycleIndex++;
      }
    } else {
      Pomodoro.phase='focus'; Pomodoro.setTimer(p.focusMin*60);
    }
    UI.timerPhase.textContent = Pomodoro.phaseLabel();
    // Recomendação pós-foco: quizzes/flashcards
    if(cycle.kind==='focus'){
      const due = Flashcards.dueToday().length;
      if(due>0) U.toast(`Revisões SM-2 disponíveis: ${due}`);
    }
  }
};

/* ---------------------- Notifications & Sounds ---------------------------- */
const Notifications = {
  async request(){ try{ const perm = await Notification.requestPermission(); if(perm==='granted'){ state.user.notif='on'; Store.save(state); U.toast('Notificações ativadas.'); } }catch(e){} },
  notify(title, body){ if(state.user.notif==='on' && 'Notification' in window && Notification.permission==='granted'){ new Notification(title, { body }); } else { U.toast(`${title}: ${body}`); } }
};

/* ---------------------- Dashboard ---------------------------------------- */
const Dashboard = {
  elFocused: document.getElementById('dashFocused'),
  elSessions: document.getElementById('dashSessions'),
  elDue: document.getElementById('dashDue'),
  lv: document.getElementById('lvl'),
  xp: document.getElementById('xp'),
  streak: document.getElementById('streak'),

  refresh(){
    const day = U.todayISO();
    const todayPomodoros = state.pomodoros.filter(p=> new Date(p.startTs).toISOString().slice(0,10)===day && p.endTs);
    const focusedMin = todayPomodoros.filter(p=>p.kind==='focus').reduce((a,b)=>a + b.plannedMin, 0);
    this.elFocused.textContent = U.fmtMin(focusedMin);
    this.elSessions.textContent = `${todayPomodoros.length} ciclos concluídos`;
    this.elDue.textContent = Flashcards.dueToday().length + ' cards';
    this.refreshGamification();
  },
  refreshGamification(){
    this.lv.textContent = state.gamification.level;
    this.xp.textContent = state.gamification.xp;
    this.streak.textContent = `Streak: ${state.gamification.streak} dia(s)`;
  }
};

/* ---------------------- Agenda / Calendar -------------------------------- */
const Calendar = {
  grid: document.getElementById('calendarGrid'),
  weekLabel: document.getElementById('weekLabel'),
  modeSel: document.getElementById('viewMode'),
  currentMonday: (()=>{
    const d = new Date(); const day = d.getDay(); // 0..6 (Sun..Sat)
    const diff = (day === 0 ? -6 : 1 - day); // go to Monday
    d.setDate(d.getDate() + diff);
    d.setHours(0,0,0,0);
    return d;
  })(),
  selectedEventId: null,

  render(){
    const mode = Calendar.modeSel.value;
    // Header row
    Calendar.grid.innerHTML = '';
    const headRow = document.createElement('div'); headRow.className='col-head';
    Calendar.grid.append(headRow);
    const days = [];
    for(let i=0;i<7;i++){
      const d = new Date(Calendar.currentMonday); d.setDate(d.getDate()+i);
      days.push(d);
      const h = document.createElement('div'); h.className='col-head';
      h.textContent = d.toLocaleDateString('pt-BR', { weekday:'short', day:'2-digit', month:'2-digit' });
      Calendar.grid.append(h);
    }
    // Left hours
    const hoursCol = document.createElement('div'); hoursCol.className='hours';
    for(let h=0; h<24; h++){ const div = document.createElement('div'); div.textContent = String(h).padStart(2,'0')+':00'; hoursCol.append(div); }
    Calendar.grid.append(hoursCol);
    // Day columns
    for(let i=0;i<7;i++){
      const dayCol = document.createElement('div'); dayCol.className='day'; dayCol.dataset.col = i;
      for(let r=0; r<24; r++){ const row = document.createElement('div'); row.className='row'; row.dataset.row = r; dayCol.append(row); }
      // Events
      const dayISO = U.ymd(days[i]);
      const dayEvents = state.events.filter(e => e.dataISO === dayISO);
      dayEvents.forEach(ev=>Calendar.addEventDOM(dayCol, ev));
      Calendar.grid.append(dayCol);
    }
    // Now line
    const now = new Date();
    if(now >= Calendar.currentMonday && now < new Date(+Calendar.currentMonday + 7*864e5)){
      const y = (now.getHours()*60 + now.getMinutes) * (48/60);
      const nl = document.createElement('div'); nl.className='nowline';
      nl.style.top = `${(now.getHours()*48) + Math.round(now.getMinutes()/60*48)}px`;
      Calendar.grid.append(nl);
    }
    // Week label
    const end = new Date(Calendar.currentMonday); end.setDate(end.getDate()+6);
    Calendar.weekLabel.textContent = `${Calendar.currentMonday.toLocaleDateString()} — ${end.toLocaleDateString()}`;
  },

  addEventDOM(dayCol, ev){
    const top = ev.startMin * (48/60);
    const height = Math.max(12, (ev.endMin-ev.startMin) * (48/60));
    const div = document.createElement('div');
    div.className = 'event';
    div.style.top = `${top}px`; div.style.height = `${height}px`;
    div.style.background = `linear-gradient(180deg, ${ev.cor || '#2a3567'}, #202a5b)`;
    div.textContent = ev.titulo || 'Bloco';
    div.tabIndex = 0;
    div.dataset.id = ev.id;
    // resize
    const rt = document.createElement('div'); rt.className='resize-handle resize-top'; div.append(rt);
    const rb = document.createElement('div'); rb.className='resize-handle resize-bottom'; div.append(rb);
    // select
    div.addEventListener('click', ()=>Calendar.select(ev.id, div));
    div.addEventListener('keydown', (e)=>{
      if(!Calendar.selectedEventId || Calendar.selectedEventId!==ev.id) return;
      // Keyboard move/resize
      const step = e.shiftKey ? 15 : 15;
      if(['ArrowUp','ArrowDown','Delete','Enter'].includes(e.key)) e.preventDefault();
      if(e.key==='ArrowUp'){ ev.startMin = Math.max(0, ev.startMin - step); ev.endMin = Math.max(ev.startMin+15, ev.endMin - step); }
      if(e.key==='ArrowDown'){ ev.startMin = Math.min(24*60-15, ev.startMin + step); ev.endMin = Math.min(24*60, ev.endMin + step); }
      if(e.key==='Delete'){ Calendar.deleteEvent(ev.id); return; }
      if(e.key==='Enter'){ Calendar.openModal(ev.id); return; }
      Store.save(state); Calendar.render();
    });
    // drag move
    let dragging = false, resizing = null, startY=0, startStart=0, startEnd=0;
    const onPointerDown = (e)=>{
      const target = e.target;
      dragging = true;
      resizing = target.classList.contains('resize-top') ? 'top' : target.classList.contains('resize-bottom') ? 'bottom' : null;
      startY = e.clientY;
      startStart = ev.startMin; startEnd = ev.endMin;
      div.setPointerCapture(e.pointerId);
    };
    const onPointerMove = (e)=>{
      if(!dragging) return;
      const dy = e.clientY - startY;
      const minutes = Math.round(dy / (48/60) / 15) * 15; // snap 15
      if(resizing==='top'){
        ev.startMin = U.clamp(startStart + minutes, 0, ev.endMin-15);
      } else if(resizing==='bottom'){
        ev.endMin = U.clamp(startEnd + minutes, ev.startMin+15, 24*60);
      } else {
        ev.startMin = U.clamp(startStart + minutes, 0, 24*60 - (ev.endMin-ev.startMin));
        ev.endMin = ev.startMin + (startEnd-startStart);
      }
      Store.save(state);
      Calendar.render();
    };
    const onPointerUp = (e)=>{ dragging=false; resizing=null; div.releasePointerCapture?.(e.pointerId); };
    div.addEventListener('pointerdown', onPointerDown);
    div.addEventListener('pointermove', onPointerMove);
    div.addEventListener('pointerup', onPointerUp);
    dayCol.append(div);
  },

  select(id, el){
    Calendar.selectedEventId = id;
    document.querySelectorAll('.event').forEach(e=>e.dataset.selected='false');
    if(el) el.dataset.selected = 'true';
  },

  createFromTask(task, targetDateISO=''){
    const dISO = targetDateISO || U.todayISO();
    const startMin = 9*60, endMin = startMin + (task.estimativaMin || 30);
    const ev = { id: U.id(), titulo: task.titulo, dataISO: dISO, startMin, endMin, cor: task.cor, tags: task.tags, notas: task.descricao, done:false };
    state.events.push(ev); Store.save(state); Calendar.render();
  },

  openModal(id){
    const ev = state.events.find(e=>e.id===id);
    if(!ev) return;
    const m = document.getElementById('eventModal');
    m.dataset.open = 'true'; m.setAttribute('aria-hidden','false');
    m.querySelector('#evTitle').value = ev.titulo || '';
    m.querySelector('#evColor').value = ev.cor || '#4aa3ff';
    m.querySelector('#evDate').value = ev.dataISO;
    m.querySelector('#evStart').value = U.minToHHMM(ev.startMin);
    m.querySelector('#evEnd').value = U.minToHHMM(ev.endMin);
    m.querySelector('#evTags').value = (ev.tags||[]).join(', ');
    m.querySelector('#evNotes').value = ev.notas||'';
    m.querySelector('#saveEventBtn').onclick = ()=>{
      ev.titulo = m.querySelector('#evTitle').value.trim() || 'Bloco';
      ev.cor    = m.querySelector('#evColor').value;
      ev.dataISO= m.querySelector('#evDate').value || ev.dataISO;
      ev.startMin = U.toMin(m.querySelector('#evStart').value);
      ev.endMin   = U.toMin(m.querySelector('#evEnd').value);
      ev.tags  = m.querySelector('#evTags').value.split(',').map(s=>s.trim()).filter(Boolean);
      ev.notas = m.querySelector('#evNotes').value.trim();
      Store.save(state); Calendar.render(); UI.toast('Bloco atualizado.'); close();
    };
    m.querySelector('#deleteEventBtn').onclick = ()=>{ Calendar.deleteEvent(ev.id); close(); };
    m.querySelector('#startPomodoroFromEvent').onclick = ()=>{
      Pomodoro.startedFromEventId = ev.id;
      UI.goto('dashboard');
      Pomodoro.phase='focus'; Pomodoro.setTimer(state.settings.pomodoro.focusMin*60); Pomodoro.start('focus');
      close();
    };
    function close(){ m.dataset.open='false'; m.setAttribute('aria-hidden','true'); }
    document.getElementById('closeEventModal').onclick = close;
  },

  deleteEvent(id){
    state.events = state.events.filter(e=>e.id!==id);
    Store.save(state); Calendar.render(); UI.toast('Bloco removido.');
  }
};

/* ---------------------- Tasks (Pendências) -------------------------------- */
function renderTasks(){
  const box = document.getElementById('tasksList'); box.innerHTML='';
  state.tasks.forEach(t=>{
    const div = document.createElement('div'); div.className='task-item'; div.draggable = true;
    div.innerHTML = `<span>${t.titulo}</span><span class="tag">${(t.tags||[])[0]||'geral'}</span>`;
    div.addEventListener('dragstart', (e)=>{ e.dataTransfer.setData('text/plain', t.id); });
    box.append(div);
  });
  // Drop em dias
  document.querySelectorAll('.day').forEach(col=>{
    col.addEventListener('dragover', e=>e.preventDefault());
    col.addEventListener('drop', e=>{
      const id = e.dataTransfer.getData('text/plain');
      const task = state.tasks.find(x=>x.id===id);
      if(!task) return;
      const dayIndex = Number(col.dataset.col);
      const dropDate = new Date(Calendar.currentMonday); dropDate.setDate(dropDate.getDate()+dayIndex);
      Calendar.createFromTask(task, U.ymd(dropDate));
    });
  });
}

/* ---------------------- Flashcards (SM-2) -------------------------------- */
const Flashcards = {
  dueToday(){
    const today = new Date();
    return state.flashcards.filter(c => !c.sm2 || !c.sm2.nextReview || new Date(c.sm2.nextReview) <= today);
  },
  add({ frente, verso, tags, midia }){
    const c = { id: U.id(), frente, verso, tags, midia, sm2: { EF: 2.5, interval: 0, n:0, lastReview:null, nextReview: new Date().toISOString() } };
    state.flashcards.push(c); Store.save(state); Flashcards.refresh();
  },
  refresh(){
    const list = document.getElementById('fcList'); list.innerHTML = '';
    state.flashcards.forEach(c=>{
      const div = document.createElement('div'); div.className='fc-item';
      div.innerHTML = `<strong>${c.frente}</strong><div class="small muted">${(c.tags||[]).join(', ')||'sem tags'}</div>`;
      list.append(div);
    });
    const due = Flashcards.dueToday();
    document.getElementById('dashDue').textContent = `${due.length} cards`;
    StudyQueue.rebuild();
  },
  sm2Update(card, quality){
    const now = new Date();
    const sm = card.sm2 || { EF: 2.5, interval: 0, n: 0 };
    const q = U.clamp(quality, 0, 5);
    if(q < 3) {
      sm.n = 0; sm.interval = 1;
    } else {
      if(sm.n === 0){ sm.interval = 1; }
      else if(sm.n === 1){ sm.interval = 6; }
      else { sm.interval = Math.round(sm.interval * sm.EF); }
      sm.n += 1;
      sm.EF = sm.EF + (0.1 - (5 - q) * (0.08 + (5 - q) * 0.02));
      if(sm.EF < 1.3) sm.EF = 1.3;
    }
    sm.lastReview = now.toISOString();
    const next = new Date(now); next.setDate(now.getDate() + sm.interval);
    sm.nextReview = next.toISOString();
    card.sm2 = sm;
    Store.save(state);
  }
};

const StudyQueue = {
  queue: [],
  idx: -1,
  current(){ return this.queue[this.idx]; },
  rebuild(){
    this.queue = Flashcards.dueToday().slice(0, 30); // limite segurança
    this.idx = this.queue.length? 0 : -1;
    StudyUI.update();
  },
  next(){ if(this.idx < this.queue.length-1) { this.idx++; StudyUI.update(); } else { U.toast('Fila concluída!'); StudyUI.empty(); } }
};

const StudyUI = {
  q: document.getElementById('studyQ'),
  a: document.getElementById('studyA'),
  m: document.getElementById('studyMedia'),
  card: document.getElementById('studyCard'),
  empty: ()=>{ document.getElementById('studyEmpty').style.display='block'; StudyUI.card.hidden=true; },
  update(){
    const c = StudyQueue.current();
    if(!c){ StudyUI.empty(); return; }
    document.getElementById('studyEmpty').style.display='none';
    StudyUI.card.hidden=false;
    StudyUI.q.textContent = c.frente;
    StudyUI.a.textContent = c.verso; StudyUI.a.hidden=true;
    const src = U.sanitizeURL(c.midia); if(src){ StudyUI.m.src = src; StudyUI.m.style.display='block'; } else { StudyUI.m.style.display='none'; }
  }
};

/* ---------------------- Quizzes ------------------------------------------ */
const Quizzes = {
  add(item){
    state.quizbank.push(item); Store.save(state); Quizzes.refreshList();
  },
  refreshList(){
    const qa = document.getElementById('quizArea'); qa.innerHTML = '';
    if(!state.quizbank.length){ qa.innerHTML = `<div class="muted small">Nenhuma questão cadastrada.</div>`; return; }
    const table = document.createElement('table'); table.className='table small';
    table.innerHTML = `<thead><tr><th>Tema</th><th>Tipo</th><th>Enunciado</th></tr></thead>`;
    const tb = document.createElement('tbody');
    state.quizbank.forEach(q=>{
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${q.tema||'-'}</td><td>${q.tipo}</td><td>${q.prompt.slice(0,120)}</td>`;
      tb.append(tr);
    });
    table.append(tb); qa.append(table);
  },
  startMini(count=5){
    const qa = document.getElementById('quizArea'); qa.innerHTML='';
    if(state.quizbank.length===0){ qa.innerHTML = `<div class="muted small">Adicione questões primeiro.</div>`; return; }
    const items = [...state.quizbank].sort(()=>Math.random()-.5).slice(0, count);
    let idx = 0, correct = 0, start = Date.now(), preds=[], results=[];
    const wrap = document.createElement('div'); qa.append(wrap);

    const render = ()=>{
      if(idx >= items.length){
        const dur = Math.round((Date.now()-start)/1000);
        const score = Math.round(correct/items.length*100);
        state.records.push({ id: U.id(), fonte:'quiz', itemId:'mini', acertou: score, tempoSeg: dur, confianca: Math.round(preds.reduce((a,b)=>a+b,0)/preds.length)||0, ts: Date.now() });
        Store.save(state);
        Game.addXP(Math.round(score/10)*5);
        U.toast(`Quiz: ${score}% em ${dur}s`);
        Charts.renderAll();
        Quizzes.refreshList();
        qa.innerHTML = `<div class="study-card"><div class="q">Resultado: ${score}%</div><div class="muted small">Tempo: ${dur}s • Confiança média: ${Math.round(preds.reduce((a,b)=>a+b,0)/preds.length)||0}%</div></div>`;
        return;
      }
      const q = items[idx];
      wrap.innerHTML = '';
      const card = document.createElement('div'); card.className='study-card';
      const conf = document.createElement('input'); conf.type='range'; conf.min=0; conf.max=100; conf.value=60; conf.style.width='180px';
      card.innerHTML = `<div class="q">${q.prompt}</div>`;
      const confWrap = document.createElement('div'); confWrap.className='small muted'; confWrap.innerHTML = `Sua previsão de acerto: `;
      confWrap.append(conf);
      card.append(confWrap);

      if(q.tipo==='mcq'){
        const opts = q.opcoes || [];
        opts.forEach((opt,i)=>{
          const b = document.createElement('button'); b.className='btn'; b.textContent = opt;
          b.onclick = ()=>submit(opt.trim().toLowerCase() === (opts[0]||'').trim().toLowerCase());
          card.append(b);
        });
      } else {
        const ans = document.createElement('input'); ans.className='btn'; ans.placeholder='Sua resposta'; ans.style.minWidth='260px';
        const ok = document.createElement('button'); ok.className='btn btn--primary'; ok.textContent='Responder';
        ok.onclick = ()=>submit((ans.value||'').trim().toLowerCase() === (q.correta||'').trim().toLowerCase());
        card.append(ans, ok);
      }
      if(q.dica){ const d = document.createElement('div'); d.className='small muted'; d.textContent = 'Dica: '+q.dica; card.append(d); }
      wrap.append(card);

      function submit(isRight){
        preds.push(Number(conf.value));
        results.push(isRight?1:0);
        correct += isRight?1:0;
        idx++;
        render();
      }
    };
    render();
  }
};

/* ---------------------- Charts (Canvas API) ------------------------------- */
const Charts = {
  ctx(id){ return document.getElementById(id).getContext('2d'); },
  drawLine(ctx, series){
    const W = ctx.canvas.clientWidth, H = ctx.canvas.clientHeight;
    ctx.canvas.width = W * devicePixelRatio; ctx.canvas.height = H * devicePixelRatio; ctx.scale(devicePixelRatio, devicePixelRatio);
    ctx.clearRect(0,0,W,H);
    const pad = 28;
    const xs = series.map((_,i)=>pad + i*((W-pad*2)/(series.length-1||1)));
    const max = Math.max(1, ...series);
    ctx.strokeStyle = '#6ee7ff'; ctx.lineWidth = 2;
    ctx.beginPath();
    series.forEach((v,i)=>{
      const y = H - pad - (v/max)*(H-pad*2);
      if(i===0) ctx.moveTo(xs[i], y); else ctx.lineTo(xs[i], y);
    });
    ctx.stroke();
    ctx.fillStyle = '#9aa3b2'; ctx.font = '12px system-ui';
    ctx.fillText('0', 6, H-pad+12); ctx.fillText(String(max), 6, pad+4);
  },
  drawBar(ctx, labels, series){
    const W = ctx.canvas.clientWidth, H = ctx.canvas.clientHeight;
    ctx.canvas.width = W * devicePixelRatio; ctx.canvas.height = H * devicePixelRatio; ctx.scale(devicePixelRatio, devicePixelRatio);
    ctx.clearRect(0,0,W,H);
    const pad = 28; const bw = (W-pad*2)/labels.length - 10;
    const max = Math.max(1, ...series);
    labels.forEach((lab,i)=>{
      const x = pad + i*(bw+10);
      const h = (series[i]/max)*(H-pad*2);
      ctx.fillStyle = '#48c6f8';
      ctx.fillRect(x, H-pad-h, bw, h);
      ctx.fillStyle = '#9aa3b2'; ctx.font = '12px system-ui'; ctx.fillText(lab, x, H-8);
    });
  },
  drawPie(ctx, values){
    const W = ctx.canvas.clientWidth, H = ctx.canvas.clientHeight;
    ctx.canvas.width = W * devicePixelRatio; ctx.canvas.height = H * devicePixelRatio; ctx.scale(devicePixelRatio, devicePixelRatio);
    ctx.clearRect(0,0,W,H);
    const cx=W/2, cy=H/2, r=Math.min(W,H)/3;
    const sum = values.reduce((a,b)=>a+b,0)||1;
    let ang= -Math.PI/2;
    values.forEach((v,i)=>{
      const a = (v/sum)*Math.PI*2;
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.arc(cx,cy,r,ang,ang+a); ctx.closePath();
      // cores diferentes por fatia (sem especificar paleta fixa)
      ctx.fillStyle = `hsl(${(i*50)%360} 80% 60%)`;
      ctx.fill();
      ang+=a;
    });
  },
  drawScatter(ctx, points){
    const W = ctx.canvas.clientWidth, H = ctx.canvas.clientHeight;
    ctx.canvas.width = W * devicePixelRatio; ctx.canvas.height = H * devicePixelRatio; ctx.scale(devicePixelRatio, devicePixelRatio);
    ctx.clearRect(0,0,W,H);
    const pad = 28;
    const xs = points.map(p=>p[0]); const ys = points.map(p=>p[1]);
    const maxX = Math.max(100, ...xs), maxY = Math.max(100, ...ys);
    points.forEach(([x,y])=>{
      const px = pad + (x/maxX)*(W-pad*2);
      const py = H - pad - (y/maxY)*(H-pad*2);
      ctx.beginPath(); ctx.arc(px, py, 4, 0, Math.PI*2); ctx.fillStyle = '#6ee7ff'; ctx.fill();
    });
    ctx.fillStyle='#9aa3b2'; ctx.font='12px system-ui';
    ctx.fillText('Previsão', W/2-20, H-6); ctx.save(); ctx.rotate(-Math.PI/2); ctx.fillText('Acerto', -H/2-10, 12); ctx.restore();
  },
  heatmap(ctx, matrix){ // 7x24
    const W = ctx.canvas.clientWidth, H = ctx.canvas.clientHeight;
    ctx.canvas.width = W * devicePixelRatio; ctx.canvas.height = H * devicePixelRatio; ctx.scale(devicePixelRatio, devicePixelRatio);
    ctx.clearRect(0,0,W,H);
    const cols = 24, rows = 7, cw = W/cols, ch = H/rows;
    let max = 1;
    for(let r=0;r<rows;r++) for(let c=0;c<cols;c++) max = Math.max(max, matrix[r][c]);
    for(let r=0;r<rows;r++){
      for(let c=0;c<cols;c++){
        const v = matrix[r][c]/max;
        ctx.fillStyle = `rgba(110,231,255,${v*.85})`;
        ctx.fillRect(c*cw, r*ch, cw-2, ch-2);
      }
    }
  },
  renderAll(){
    // Focus last 7 days
    const days = [...Array(7)].map((_,i)=>{ const d=new Date(); d.setDate(d.getDate()- (6-i)); return d; });
    const series = days.map(d=>{
      const iso = d.toISOString().slice(0,10);
      return state.pomodoros.filter(p=> new Date(p.startTs).toISOString().slice(0,10)===iso && p.kind==='focus' && p.endTs).reduce((a,b)=>a+b.plannedMin,0);
    });
    Charts.drawLine(Charts.ctx('chartFocus'), series);

    // Tags time (agenda)
    const tagsMap = {};
    state.events.forEach(e=>{
      const dur = (e.endMin-e.startMin)/60;
      (e.tags||['geral']).forEach(t=> tagsMap[t]=(tagsMap[t]||0)+dur );
    });
    const tagVals = Object.values(tagsMap);
    Charts.drawPie(Charts.ctx('chartTags'), tagVals.length?tagVals:[1]);

    // Quiz accuracy bars (by theme)
    const rec = state.records.filter(r=>r.fonte==='quiz');
    const groups = {};
    rec.forEach(r=> { groups['quiz'] = groups['quiz'] || []; groups['quiz'].push(r.acertou); });
    const labels = Object.keys(groups);
    const accs = labels.map(k => Math.round(groups[k].reduce((a,b)=>a+b,0)/groups[k].length));
    Charts.drawBar(Charts.ctx('chartQuiz'), labels.length?labels:['quiz'], accs.length?accs:[0]);

    // Calibration scatter: previsão vs resultado em %
    const points = state.records.filter(r=>r.fonte==='quiz').map(r=> [r.confianca||0, r.acertou||0]);
    Charts.drawScatter(Charts.ctx('chartCalib'), points.length?points:[[0,0]]);

    // Heatmap (7x24) com minutos focados provenientes de eventos "done" + pomodoros
    const mat = [...Array(7)].map(()=>Array(24).fill(0));
    state.events.forEach(e=>{
      const d = new Date(e.dataISO); const idx = (d.getDay()+6)%7; // segunda=0
      for(let h=Math.floor(e.startMin/60); h<Math.ceil(e.endMin/60); h++){ mat[idx][h] += 15; }
    });
    state.pomodoros.filter(p=>p.kind==='focus' && p.endTs).forEach(p=>{
      const d = new Date(p.startTs); const idx = (d.getDay()+6)%7; const h = d.getHours(); mat[idx][h] += p.plannedMin;
    });
    Charts.heatmap(Charts.ctx('heatmap'), mat);
  }
};

/* ---------------------- Config ------------------------------------------- */
const Config = {
  syncUI(){
    document.getElementById('soundSel').value = state.user.sound;
    document.getElementById('contrastSel').value = state.user.themeContrast;
    document.getElementById('fontSel').value = state.user.fontScale || 1;
  },
  apply(){
    document.documentElement.style.setProperty('--text', state.user.themeContrast==='on' ? '#ffffff' : '#e6e9f5');
    document.body.style.fontSize = (state.user.fontScale||1)+'em';
  }
};

/* ---------------------- Export / Import / CSV ----------------------------- */
function exportCSV(){
  const rows = [['tipo','data','titulo','duracao_min','tags']];
  state.events.forEach(e=>{
    rows.push(['evento', e.dataISO, e.titulo, (e.endMin-e.startMin)/60, (e.tags||[]).join('|')]);
  });
  const txt = rows.map(r=>r.map(x=>String(x).replaceAll('"','""')).map(x=>`"${x}"`).join(',')).join('\n');
  const blob = new Blob([txt], {type:'text/csv'});
  const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download='focusplus_export.csv';
  document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(a.href), 500);
}

/* ---------------------- UI References & Wiring --------------------------- */
const UIRefs = {
  timer: document.getElementById('timer'),
  timerClock: document.getElementById('timerClock'),
  timerPhase: document.getElementById('timerPhase'),
};
window.UI = Object.assign(window.UI||{}, UIRefs); // for Pomodoro

/* Events: Navigation by hash */
window.addEventListener('hashchange', ()=>{
  const hash = location.hash.replace('#','');
  if(['dashboard','agenda','estudo','relatorios','config'].includes(hash)) UI.goto(hash);
});

/* ---------- DOM Ready ---------------------------------------------------- */
document.addEventListener('DOMContentLoaded', ()=>{
  // Init Nav
  UI.initNav();
  // Pomodoro Prefs
  Pomodoro.readPrefs();
  ['prefFocus','prefShort','prefLong','prefCycles'].forEach(id=> document.getElementById(id).addEventListener('change', ()=>Pomodoro.writePrefs()));
  // Timer actions
  document.getElementById('startBtn').onclick = ()=>Pomodoro.start('focus');
  document.getElementById('pauseBtn').onclick = ()=>Pomodoro.pause();
  document.getElementById('resetBtn').onclick = ()=>Pomodoro.reset();
  document.getElementById('skipBtn').onclick = ()=>Pomodoro.skipBreak();
  document.getElementById('quickPomodoro').onclick = ()=>{ UI.goto('dashboard'); Pomodoro.start('focus'); };

  // Agenda controls
  document.getElementById('prevWeekBtn').onclick = ()=>{ Calendar.currentMonday.setDate(Calendar.currentMonday.getDate()-7); Calendar.render(); renderTasks(); };
  document.getElementById('nextWeekBtn').onclick = ()=>{ Calendar.currentMonday.setDate(Calendar.currentMonday.getDate()+7); Calendar.render(); renderTasks(); };
  document.getElementById('todayBtn').onclick = ()=>{ const d=new Date(); const day=d.getDay(); const diff=(day===0?-6:1-day); Calendar.currentMonday = new Date(d); Calendar.currentMonday.setDate(d.getDate()+diff); Calendar.currentMonday.setHours(0,0,0,0); Calendar.render(); renderTasks(); };
  document.getElementById('viewMode').onchange = ()=>Calendar.render();
  document.getElementById('startFromSelectionBtn').onclick = ()=>{
    const id = Calendar.selectedEventId;
    const ev = state.events.find(e=>e.id===id);
    if(!ev){ U.toast('Selecione um bloco.'); return; }
    Pomodoro.startedFromEventId = ev.id;
    UI.goto('dashboard'); Pomodoro.phase='focus'; Pomodoro.setTimer(state.settings.pomodoro.focusMin*60); Pomodoro.start('focus');
  };

  // Task modal
  document.getElementById('newTaskBtn').onclick = ()=>{ document.getElementById('taskModal').dataset.open='true'; };
  document.getElementById('closeTaskModal').onclick = ()=>{ document.getElementById('taskModal').dataset.open='false'; };
  document.getElementById('saveTaskBtn').onclick = ()=>{
    const t = {
      id: U.id(),
      titulo: document.getElementById('tkTitle').value.trim()||'Nova tarefa',
      cor: document.getElementById('tkColor').value,
      estimativaMin: Number(document.getElementById('tkEst').value||30),
      tags: document.getElementById('tkTags').value.split(',').map(s=>s.trim()).filter(Boolean),
      descricao: document.getElementById('tkDesc').value.trim()
    };
    state.tasks.push(t); Store.save(state);
    document.getElementById('taskModal').dataset.open='false';
    renderTasks();
  };

  // Event modal close global
  document.getElementById('closeEventModal').onclick = ()=>{ document.getElementById('eventModal').dataset.open='false'; };

  // Calendar initial render
  Calendar.render();
  renderTasks();

  // Flashcards form
  document.getElementById('fcForm').addEventListener('submit', (e)=>{
    e.preventDefault();
    Flashcards.add({
      frente: document.getElementById('fcFront').value.trim(),
      verso: document.getElementById('fcBack').value.trim(),
      tags: document.getElementById('fcTags').value.split(',').map(s=>s.trim()).filter(Boolean),
      midia: U.sanitizeURL(document.getElementById('fcMedia').value)
    });
    e.target.reset();
  });
  document.getElementById('revealBtn').onclick = ()=>{ document.getElementById('studyA').hidden = false; };
  document.getElementById('nextBtn').onclick = ()=>StudyQueue.next();
  document.querySelectorAll('.sm2-buttons button').forEach(b=>{
    b.onclick = ()=>{
      const c = StudyQueue.current(); if(!c) return;
      Flashcards.sm2Update(c, Number(b.dataset.q)); StudyQueue.next(); Game.addXP(2);
    };
  });
  document.getElementById('rebuildQueueBtn').onclick = ()=>StudyQueue.rebuild();

  // Import CSV flashcards
  document.getElementById('importCsvCards').onclick = ()=>document.getElementById('csvInput').click();
  document.getElementById('csvInput').addEventListener('change', (e)=>{
    const f = e.target.files[0]; if(!f) return;
    const r = new FileReader(); r.onload = ()=>{
      const lines = (r.result||'').split(/\r?\n/).filter(Boolean);
      lines.forEach(line=>{
        const [frente, verso, tags] = line.split(',').map(s=>s.trim());
        if(frente && verso) Flashcards.add({ frente, verso, tags: (tags||'').split('|').filter(Boolean), midia:'' });
      });
      U.toast('CSV importado.');
    };
    r.readAsText(f);
  });

  // Quiz form
  document.getElementById('quizForm').addEventListener('submit', (e)=>{
    e.preventDefault();
    const item = {
      id: U.id(),
      tipo: document.getElementById('qType').value,
      tema: document.getElementById('qTheme').value.trim(),
      prompt: document.getElementById('qPrompt').value.trim(),
      opcoes: (document.getElementById('qOptions').value||'').split('|').map(s=>s.trim()).filter(Boolean),
      correta: document.getElementById('qAnswer').value.trim(),
      dica: document.getElementById('qHint').value.trim(),
    };
    Quizzes.add(item); e.target.reset(); U.toast('Questão adicionada.');
  });
  document.getElementById('startQuizBtn').onclick = ()=>Quizzes.startMini(5);

  // Simulado
  document.getElementById('startSimBtn').onclick = ()=>{
    const theme = document.getElementById('simTheme').value.trim().toLowerCase();
    const minutes = Number(document.getElementById('simMinutes').value||20);
    const pool = theme ? state.quizbank.filter(q=>(q.tema||'').toLowerCase().includes(theme)) : state.quizbank;
    if(pool.length<5) { U.toast('Poucas questões nesse tema.'); return; }
    let left = minutes*60; const area = document.getElementById('simArea');
    let timer = setInterval(()=>{ left--; if(left<=0){ clearInterval(timer); area.innerHTML='<div class="muted small">Fim do tempo!</div>'; } else { badge.textContent = U.fmtTime(left); } }, 1000);
    area.innerHTML = '';
    const badge = document.createElement('div'); badge.className='small muted'; badge.textContent = U.fmtTime(left); area.append(badge);
    const qs = [...pool].sort(()=>Math.random()-.5).slice(0, Math.min(20, pool.length));
    const tbl = document.createElement('table'); tbl.className='table'; const tb=document.createElement('tbody');
    qs.forEach((q,i)=>{
      const tr = document.createElement('tr'); const td=document.createElement('td');
      td.innerHTML = `<strong>${i+1}.</strong> ${q.prompt}`;
      if(q.tipo==='mcq'){
        (q.opcoes||[]).forEach(opt=>{
          const b = document.createElement('button'); b.className='btn'; b.textContent=opt; b.onclick = (ev)=>{ ev.target.disabled=true; };
          td.append(document.createElement('br'), b);
        });
      } else {
        const inp = document.createElement('input'); inp.className='btn'; inp.placeholder='Resposta'; td.append(document.createElement('br'), inp);
      }
      tr.append(td); tb.append(tr);
    });
    tbl.append(tb); area.append(tbl);
  };

  // Reports
  document.getElementById('rebuildChartsBtn').onclick = ()=>Charts.renderAll();

  // Export/Import
  document.getElementById('exportBtn').onclick = ()=>Store.export();
  document.getElementById('exportBtn2').onclick = ()=>Store.export();
  document.getElementById('importInput').addEventListener('change', handleImport);
  document.getElementById('importInput2').addEventListener('change', handleImport);
  function handleImport(e){
    const f = e.target.files[0]; if(!f) return;
    const r = new FileReader(); r.onload = ()=>{ try{ const obj=JSON.parse(r.result); Store.import(obj); }catch(e){ U.toast('Arquivo inválido.'); } };
    r.readAsText(f);
  }
  document.getElementById('exportCsvBtn').onclick = exportCSV;

  // Config
  document.getElementById('notifBtn').onclick = ()=>Notifications.request();
  document.getElementById('soundSel').onchange = (e)=>{ state.user.sound=e.target.value; Store.save(state); };
  document.getElementById('contrastSel').onchange = (e)=>{ state.user.themeContrast=e.target.value; Store.save(state); Config.apply(); };
  document.getElementById('fontSel').onchange = (e)=>{ state.user.fontScale=Number(e.target.value); Store.save(state); Config.apply(); };

  // Wipe
  document.getElementById('wipeBtn').onclick = ()=>{
    if(confirm('Tem certeza que deseja apagar todos os dados?')) { localStorage.removeItem(Store.key); state = defaultState(); UI.refreshAll(); U.toast('Dados apagados.'); }
  };

  // Event modal open by dblclick
  document.getElementById('calendarGrid').addEventListener('dblclick', (e)=>{
    // Create quick event at clicked time
    const dayColEl = e.target.closest('.day'); if(!dayColEl) return;
    const rect = dayColEl.getBoundingClientRect();
    const y = e.clientY - rect.top;
    const minute = Math.round((y / 48) * 60 / 15) * 15; // snap
    const dayIndex = Number(dayColEl.dataset.col);
    const d = new Date(Calendar.currentMonday); d.setDate(d.getDate()+dayIndex);
    const ev = { id: U.id(), titulo: 'Bloco', dataISO: U.ymd(d), startMin: minute, endMin: Math.min(24*60, minute+30), cor:'#4aa3ff', tags:[], notas:'', done:false };
    state.events.push(ev); Store.save(state); Calendar.render();
    Calendar.openModal(ev.id);
  });

  // Open event modal on Enter
  document.getElementById('calendarGrid').addEventListener('keydown', (e)=>{
    if(e.key==='Enter'){
      const id = Calendar.selectedEventId; if(id) Calendar.openModal(id);
    }
  });

  // Modals ESC close
  document.addEventListener('keydown', (e)=>{
    if(e.key==='Escape'){
      document.querySelectorAll('.modal[data-open="true"]').forEach(m=> m.dataset.open='false');
      UI.help(false);
    }
  });

  // Help
  document.getElementById('helpBtn').onclick = ()=>UI.help(true);

  // Keyboard shortcuts
  document.addEventListener('keydown', (e)=>{
    if(e.key==='?' || (e.shiftKey && e.key==='/')){ e.preventDefault(); UI.help(true); }
    if(['d','D'].includes(e.key)) UI.goto('dashboard');
    if(['g','G'].includes(e.key)) UI.goto('agenda');
    if(['e','E'].includes(e.key)) UI.goto('estudo');
    if(['r','R'].includes(e.key)) UI.goto('relatorios');
    if(['s','S'].includes(e.key) && !e.metaKey && !e.ctrlKey) UI.goto('config');
    // Pomodoro keys
    if(e.code==='Space'){ e.preventDefault(); if(Pomodoro.timerId) Pomodoro.pause(); else Pomodoro.start('focus'); }
    if(['l','L'].includes(e.key)) Pomodoro.skipBreak();
    if(['E'].includes(e.key) && e.shiftKey) Pomodoro.reset();
    // Study keys
    if(['n','N'].includes(e.key)) StudyQueue.next();
    if(['0','1','2','3','4','5'].includes(e.key)){
      const c = StudyQueue.current(); if(c){ Flashcards.sm2Update(c, Number(e.key)); StudyQueue.next(); Game.addXP(2); }
    }
  });

  // Immersive
  document.getElementById('enterImmersive').onclick = ()=>{
    const elem = document.documentElement; if(!document.fullscreenElement){ elem.requestFullscreen?.(); } else { document.exitFullscreen?.(); }
  };

  // Prevent data loss on unload
  window.addEventListener('beforeunload', (e)=>{
    // se pomodoro em andamento, alerta
    if(Pomodoro.timerId){ e.preventDefault(); e.returnValue = 'Sessão em andamento. Tem certeza que deseja sair?'; }
  });

  // Blur/focus interruptions
  window.addEventListener('blur', ()=>{ if(Pomodoro.timerId){ state.interruptions.push({ id: U.id(), ts: Date.now(), tipo:'blur', duracaoSeg:0 }); Store.save(state); }});
  window.addEventListener('focus', ()=>{ /* poderia fechar interrupção com duracao */ });

  // Initial
  Config.apply();
  UI.goto((location.hash||'#dashboard').replace('#',''));
  UI.refreshAll();
});

/* ---------------------- DOM Helpers (for Pomodoro refs) ------------------ */
const UI_timer = document.getElementById('timer');
const UI_timerClock = document.getElementById('timerClock');
const UI_timerPhase = document.getElementById('timerPhase');
UI.timer = UI_timer; UI.timerClock = UI_timerClock; UI.timerPhase = UI_timerPhase;
</script>
</body>
</html>