Commit inicialHEADmain

1 files changed, 1560 insertions, 0 deletions

diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..d4257a4
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,1560 @@
+/* ── VARIÁVEIS E RESET ── */
+:root {
+  --serif: 'Lora', serif;
+  --mono: 'JetBrains Mono', monospace;
+  --text: #dedad4;
+  --text-2: #a8a8a8;
+  --muted: #6a6a75;
+  --surface: #1a1a1f;
+  --border: #2a2a30;
+  --border-2: #3a3a40;
+  --amber: #c9a961;
+  --t: 150ms ease;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  background: #0f0f13;
+  color: var(--text);
+  font-family: var(--serif);
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+body {
+  background: #0f0f13;
+  color: var(--text);
+  font-family: var(--serif);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* ── HEADER ── */
+header {
+  padding: 1.2rem 2rem;
+  border-bottom: 1px solid var(--border);
+  background: rgba(15, 15, 19, 0.95);
+  backdrop-filter: blur(4px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.site-name {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--text);
+  text-decoration: none;
+  transition: color var(--t);
+}
+
+.site-name:hover {
+  color: var(--amber);
+}
+
+.header-sep {
+  color: var(--border-2);
+  margin: 0 0.5rem;
+}
+
+.breadcrumb {
+  color: var(--text-2);
+  font-size: 0.9rem;
+}
+
+.breadcrumb-link {
+  color: var(--text-2);
+  text-decoration: none;
+  transition: color var(--t);
+}
+
+.breadcrumb-link:hover {
+  color: var(--text);
+}
+
+/* ── MAIN ── */
+main {
+  flex: 1;
+  padding: 2rem;
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* ── FADE ANIMATION ── */
+.fade {
+  animation: fadeIn 200ms ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-out {
+  animation: fadeOut 100ms ease;
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* ── GRID DE DISCIPLINAS ── */
+.disc-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+.disc-card {
+  display: flex;
+  flex-direction: column;
+  padding: 1.2rem;
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  text-decoration: none;
+  color: var(--text);
+  transition: all var(--t);
+  cursor: pointer;
+}
+
+.disc-card:hover {
+  border-color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 3%, transparent);
+  transform: translateY(-2px);
+}
+
+.disc-card-name {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+}
+
+.disc-card-meta {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* ── BOTÃO VOLTAR ── */
+.disc-back {
+  margin-bottom: 1.2rem;
+}
+
+.disc-back a {
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--muted);
+  text-decoration: none;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  transition: color var(--t);
+}
+
+.disc-back a:hover {
+  color: var(--text-2);
+}
+
+/* ── DISCIPLINA ── */
+.discipline {
+  margin-bottom: 2.5rem;
+}
+
+.discipline-name {
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.65rem;
+  padding-bottom: 0.45rem;
+  border-bottom: 1px solid var(--border);
+}
+
+/* ── INTRO/NOTAS DA DISCIPLINA ── */
+.disc-intro {
+  margin: 1.2rem 0 1.8rem;
+  padding: 1rem 1.2rem;
+  border-left: 2px solid var(--amber);
+  background: color-mix(in srgb, var(--amber) 5%, transparent);
+  border-radius: 0 4px 4px 0;
+}
+
+.disc-intro-prose {
+  font-size: 0.9rem;
+  color: var(--text-2);
+  margin: 0;
+}
+
+.disc-intro-prose p:first-child {
+  margin-top: 0;
+}
+
+.disc-intro-prose p:last-child {
+  margin-bottom: 0;
+}
+
+.disc-intro-refs {
+  margin-top: 0.75rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border);
+}
+
+/* ── TÓPICOS (SUBPASTAS) ── */
+.topic-section {
+  margin-bottom: 0.5rem;
+}
+
+.topic-head {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 1.4rem 0 0.3rem;
+  padding-bottom: 0.3rem;
+  border-bottom: 1px dashed var(--border);
+}
+
+.subject-group {
+  padding: 0.85rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.subject-group:last-child {
+  border-bottom: none;
+}
+
+.subject-head {
+  font-size: 0.95rem;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+
+.item-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0.35rem 0;
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--text-2);
+  transition: opacity var(--t);
+  gap: 1rem;
+}
+
+.item-row:hover {
+  opacity: 0.55;
+  color: var(--text);
+}
+
+.item-kind {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  min-width: 3.2rem;
+  flex-shrink: 0;
+}
+
+.item-kind.txt {
+  color: var(--amber);
+}
+
+.item-kind.qz {
+  color: var(--text-2);
+}
+
+.item-title {
+  flex: 1;
+  font-size: 0.9rem;
+}
+
+.item-meta {
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  color: var(--muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── LEITOR DE TEXTOS & PROSE ── */
+.text-meta {
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--muted);
+  margin-bottom: 1.4rem;
+  letter-spacing: 0.02em;
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.text-meta .dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--border-2);
+}
+
+.text-title {
+  font-size: 1.4rem;
+  line-height: 1.35;
+  margin-bottom: 1.6rem;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.prose {
+  font-size: 1rem;
+  line-height: 1.8;
+  color: var(--text);
+}
+
+.prose p {
+  margin-bottom: 1.1rem;
+}
+
+.prose h2 {
+  font-family: var(--serif);
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 1.8rem 0 0.8rem;
+  color: var(--text);
+}
+
+.prose h3 {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 1.6rem 0 0.6rem;
+}
+
+.prose blockquote {
+  border-left: 2px solid var(--border-2);
+  padding: 0.2rem 0 0.2rem 1rem;
+  margin: 1rem 0;
+  color: var(--text-2);
+  font-style: italic;
+}
+
+.prose em {
+  color: var(--text-2);
+}
+
+.prose strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.prose code {
+  font-family: var(--mono);
+  font-size: 0.85em;
+  background: var(--surface);
+  padding: 0.05em 0.35em;
+  border-radius: 2px;
+  color: var(--text-2);
+}
+
+/* ── TABELAS ── */
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.8rem 0;
+  font-size: 0.9rem;
+  color: var(--text-2);
+}
+
+.prose th {
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border-2);
+  padding: 0.5rem 0.6rem;
+  text-align: left;
+}
+
+.prose td {
+  padding: 0.6rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+.prose tr:hover td {
+  color: var(--text);
+}
+
+@media (max-width: 480px) {
+  .prose table {
+    overflow-x: auto;
+    display: block;
+  }
+}
+
+/* ── NOTAS DE RODAPÉ ── */
+a[href^="#fn:"] {
+  text-decoration: none;
+  color: var(--amber);
+  cursor: pointer;
+  transition: opacity var(--t);
+}
+
+a[href^="#fn:"]:hover {
+  opacity: 0.7;
+}
+
+a[href^="#fn:"].active {
+  font-weight: 600;
+}
+
+.footnotes {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.9rem;
+}
+
+.footnote-backref {
+  text-decoration: none;
+  color: var(--amber);
+}
+
+/* ── FLOATER (POPUP DE NOTAS) ── */
+.floater {
+  position: fixed;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1rem;
+  max-width: 320px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  animation: slideUp 150ms ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.f-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.f-close {
+  cursor: pointer;
+  font-size: 1.2rem;
+  color: var(--text-2);
+  transition: color var(--t);
+}
+
+.f-close:hover {
+  color: var(--text);
+}
+
+.f-quote {
+  font-size: 0.85rem;
+  color: var(--text-2);
+  font-style: italic;
+  margin-bottom: 0.5rem;
+}
+
+/* ── SUMÁRIO (TOC) ── */
+.toc {
+  margin: 1.5rem 0 2rem;
+  padding: 1rem;
+  background: color-mix(in srgb, var(--amber) 3%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.toc-label {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.75rem;
+}
+
+#toc-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-h2 {
+  margin-bottom: 0.5rem;
+}
+
+.toc-h2 a {
+  font-size: 0.95rem;
+  color: var(--text);
+  text-decoration: none;
+  transition: color var(--t);
+}
+
+.toc-h2 a:hover {
+  color: var(--amber);
+}
+
+.toc-h3 {
+  margin-left: 1.2rem;
+  margin-bottom: 0.3rem;
+}
+
+.toc-h3 a {
+  font-size: 0.85rem;
+  color: var(--text-2);
+  text-decoration: none;
+  transition: color var(--t);
+}
+
+.toc-h3 a:hover {
+  color: var(--text);
+}
+
+/* ── REFERÊNCIAS ── */
+.references {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
+}
+
+.ref-head {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+}
+
+.ref-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ref-list p {
+  font-size: 0.9rem;
+  color: var(--text-2);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── QUIZ: LAYOUT GERAL ── */
+.progress-wrap {
+  width: 100%;
+  height: 3px;
+  background: var(--border);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--amber);
+  width: 0%;
+  transition: width 300ms ease;
+}
+
+.q-meta {
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--muted);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 1.2rem;
+}
+
+#quiz-body {
+  margin-bottom: 1.5rem;
+}
+
+/* ── QUIZ: MÚLTIPLA ESCOLHA ── */
+.q-text {
+  font-size: 1rem;
+  line-height: 1.8;
+  color: var(--text);
+  margin-bottom: 1.5rem;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.opt {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all var(--t);
+  font-family: var(--serif);
+  font-size: 0.95rem;
+  color: var(--text);
+  text-align: left;
+  min-height: 3rem;
+}
+
+.opt:hover:not(:disabled) {
+  border-color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 5%, transparent);
+}
+
+.opt:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.opt.correct {
+  border-color: #4ade80;
+  background: color-mix(in srgb, #4ade80 15%, transparent);
+}
+
+.opt.wrong {
+  border-color: #ef4444;
+  background: color-mix(in srgb, #ef4444 15%, transparent);
+}
+
+.opt.revealed {
+  opacity: 0.5;
+}
+
+.opt-letter {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted);
+  min-width: 1.5rem;
+  flex-shrink: 0;
+}
+
+/* ── QUIZ: RESPOSTA ABERTA ── */
+.open-area {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+textarea {
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--serif);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  resize: vertical;
+  min-height: 120px;
+  transition: border-color var(--t);
+}
+
+textarea:focus {
+  outline: none;
+  border-color: var(--amber);
+}
+
+textarea::placeholder {
+  color: var(--muted);
+}
+
+/* ── QUIZ: FEEDBACK ── */
+.feedback-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-2);
+  opacity: 0;
+  transition: opacity var(--t);
+}
+
+.feedback-line.show {
+  opacity: 1;
+}
+
+.feedback-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-2);
+}
+
+.feedback-line.ok .feedback-dot {
+  background: #4ade80;
+}
+
+.feedback-line.bad .feedback-dot {
+  background: #ef4444;
+}
+
+/* ── QUIZ: COMENTÁRIO ── */
+.comment-block {
+  padding: 1rem;
+  background: color-mix(in srgb, var(--amber) 5%, transparent);
+  border-left: 2px solid var(--amber);
+  border-radius: 0 4px 4px 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--t);
+}
+
+.comment-block.show {
+  max-height: 500px;
+}
+
+.comment-label {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.comment-block > div:last-child {
+  font-size: 0.9rem;
+  color: var(--text-2);
+  line-height: 1.6;
+}
+
+/* ── QUIZ: REFERÊNCIA (RESPOSTA ABERTA) ── */
+.ref-block {
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--t));
+}
+
+.ref-block.show {
+  max-height: 500px;
+}
+
+.ref-label {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.ref-block > div:last-child {
+  font-size: 0.9rem;
+  color: var(--text-2);
+  line-height: 1.6;
+}
+
+/* ── QUIZ: BOTÕES ── */
+.next-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+.open-btns {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.btn {
+  padding: 0.6rem 1.2rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--serif);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all var(--t);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn:hover:not(:disabled) {
+  border-color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 10%, transparent);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-ok {
+  border-color: #4ade80;
+  color: #4ade80;
+}
+
+.btn-ok:hover:not(:disabled) {
+  background: color-mix(in srgb, #4ade80 15%, transparent);
+}
+
+.btn-bad {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+.btn-bad:hover:not(:disabled) {
+  background: color-mix(in srgb, #ef4444 15%, transparent);
+}
+
+/* ── QUIZ: RESULTADO ── */
+.res-score {
+  font-size: 3rem;
+  font-weight: 600;
+  color: var(--amber);
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.res-subtitle {
+  font-size: 1rem;
+  color: var(--text-2);
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.res-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 1.5rem 0;
+}
+
+.res-stats {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+  margin-bottom: 1.5rem;
+}
+
+.rs-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.rs-num {
+  font-size: 1.8rem;
+  font-weight: 600;
+}
+
+.rs-num.g {
+  color: #4ade80;
+}
+
+.rs-num.r {
+  color: #ef4444;
+}
+
+.rs-label {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.res-msg {
+  padding: 1rem;
+  background: color-mix(in srgb, var(--amber) 5%, transparent);
+  border-left: 2px solid var(--amber);
+  border-radius: 0 4px 4px 0;
+  margin-bottom: 1.5rem;
+}
+
+.res-msg-label {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.res-msg-body {
+  font-size: 0.95rem;
+  color: var(--text-2);
+  line-height: 1.6;
+}
+
+.res-btns {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* ── EXTRAS DE DISCIPLINA (COLAPSÁVEIS) ── */
+.disc-extras-wrap {
+  margin: 1.5rem 0 2rem;
+}
+
+.disc-extra {
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.disc-extra-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: var(--surface);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--t);
+}
+
+.disc-extra-summary:hover {
+  background: color-mix(in srgb, var(--amber) 5%, transparent);
+}
+
+.disc-extra-label {
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.disc-extra-count {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--text-2);
+  letter-spacing: 0.05em;
+}
+
+.disc-extra-chevron {
+  color: var(--text-2);
+  transition: transform var(--t);
+}
+
+.disc-extra[open] .disc-extra-chevron {
+  transform: rotate(180deg);
+}
+
+.disc-extra-body {
+  padding: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.disc-extra-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  color: var(--text-2);
+  transition: color var(--t);
+}
+
+.disc-extra-row:hover {
+  color: var(--text);
+}
+
+.disc-extra-icon {
+  font-size: 0.8rem;
+  color: var(--muted);
+  min-width: 1.2rem;
+}
+
+.disc-extra-name {
+  flex: 1;
+  font-size: 0.9rem;
+}
+
+.disc-extra-meta {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.disc-extra-prose {
+  font-size: 0.9rem;
+  color: var(--text-2);
+}
+
+.disc-extra-prose p {
+  margin-bottom: 0.75rem;
+}
+
+.disc-extra-prose p:last-child {
+  margin-bottom: 0;
+}
+
+.disc-extra-kind-label {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin: 1rem 0 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px dashed var(--border);
+}
+
+.disc-extra-kind-label:first-child {
+  margin-top: 0;
+}
+
+/* ── SUBJECT QUIZZES (LINKS PARA EXERCÍCIOS) ── */
+.subject-quizzes {
+  margin: 1.5rem 0 2rem;
+  padding: 1rem;
+  background: color-mix(in srgb, var(--amber) 3%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.sq-label {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.75rem;
+}
+
+.sq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sq-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0.75rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  text-decoration: none;
+  color: var(--text);
+  transition: all var(--t);
+}
+
+.sq-item:hover {
+  border-color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, transparent);
+}
+
+.sq-name {
+  font-size: 0.9rem;
+  flex: 1;
+}
+
+.sq-meta {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+/* ── SUBJECT LIST ── */
+.subject-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.subject-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border);
+  text-decoration: none;
+  color: var(--text);
+  transition: all var(--t);
+}
+
+.subject-row:last-child {
+  border-bottom: none;
+}
+
+.subject-row:hover {
+  color: var(--amber);
+  padding-left: 0.5rem;
+}
+
+.subject-row-name {
+  font-size: 0.95rem;
+  flex: 1;
+}
+
+.subject-row-meta {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.empty-note {
+  font-size: 0.9rem;
+  color: var(--muted);
+  font-style: italic;
+  padding: 1rem 0;
+}
+
+/* ── RESPONSIVIDADE ── */
+@media (max-width: 768px) {
+  main {
+    padding: 1.5rem;
+  }
+
+  .disc-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .res-stats {
+    gap: 2rem;
+  }
+
+  header {
+    padding: 1rem 1.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  main {
+    padding: 1rem;
+  }
+
+  .text-title {
+    font-size: 1.2rem;
+  }
+
+  .prose {
+    font-size: 0.95rem;
+  }
+
+  .options {
+    gap: 0.5rem;
+  }
+
+  .opt {
+    padding: 0.6rem 0.75rem;
+    min-height: 2.5rem;
+  }
+
+  .floater {
+    max-width: 280px;
+  }
+
+  .res-score {
+    font-size: 2.5rem;
+  }
+
+  .res-stats {
+    gap: 1.5rem;
+  }
+}
+
+/* ── FLASHCARD ── */
+.flashcard-area {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.flashcard {
+  perspective: 1000px;
+  cursor: pointer;
+  height: 300px;
+  position: relative;
+}
+
+.flashcard-front,
+.flashcard-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--amber);
+  border-radius: 4px;
+  padding: 2rem;
+  text-align: center;
+  transition: transform 0.6s;
+}
+
+.flashcard-front {
+  background: var(--surface);
+  color: var(--text);
+  transform: rotateY(0deg);
+}
+
+.flashcard-back {
+  background: var(--amber);
+  color: #0f0f13;
+  transform: rotateY(180deg);
+}
+
+.flashcard.flipped .flashcard-front {
+  transform: rotateY(180deg);
+}
+
+.flashcard.flipped .flashcard-back {
+  transform: rotateY(0deg);
+}
+
+.flashcard-hint {
+  font-size: 1.2rem;
+  opacity: 0.7;
+}
+
+.flashcard-btns {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+/* ── FILTRO NA HOME ── */
+.filter-container {
+  margin-bottom: 2rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.filter-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 1rem;
+  font-family: var(--serif);
+}
+
+.filter-input:focus {
+  outline: none;
+  border-color: var(--amber);
+}
+
+.filter-count {
+  color: var(--amber);
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+
+/* ── DASHBOARD ── */
+.dashboard-container {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+}
+
+.dashboard-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+.stat-card {
+  background: #0f0f13;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  color: var(--muted);
+  margin-bottom: 0.5rem;
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--amber);
+}
+
+.dashboard-disciplines {
+  margin-top: 2rem;
+}
+
+.disc-stat {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.disc-name {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.disc-bar {
+  height: 8px;
+  background: #0f0f13;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.disc-progress {
+  height: 100%;
+  background: #4ade80;
+  transition: width 0.3s;
+}
+
+.disc-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.dashboard-actions {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+/* ── MODO ESCURO TOGGLE ── */
+#dark-mode-toggle {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  margin-left: auto;
+  padding: 0.5rem;
+  border-radius: 4px;
+  transition: background-color var(--t);
+}
+
+#dark-mode-toggle:hover {
+  background-color: var(--border);
+}
+
+/* ── PRINT-FRIENDLY ── */
+@media print {
+  header,
+  .filter-container,
+  .dashboard-container,
+  .btn,
+  .next-row,
+  #dark-mode-toggle,
+  .flashcard-btns,
+  .open-btns {
+    display: none;
+  }
+
+  body {
+    background: white;
+    color: black;
+    padding: 0;
+  }
+
+  main {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .q-text,
+  .flashcard-back {
+    page-break-inside: avoid;
+  }
+
+  .flashcard {
+    border: 1px solid black;
+    background: white;
+    color: black;
+  }
+
+  .flashcard-front,
+  .flashcard-back {
+    position: static;
+    transform: none;
+    border: none;
+    background: white;
+    color: black;
+  }
+}
+
+/* ── RESPONSIVIDADE MOBILE ── */
+@media (max-width: 768px) {
+  .dashboard-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .flashcard {
+    height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .flashcard {
+    height: 200px;
+  }
+
+  .filter-container {
+    flex-direction: column;
+  }
+
+  .filter-input {
+    width: 100%;
+  }
+}
+
+/* ── QUIZ INLINE (dentro do assunto) ── */
+.inline-quiz-wrap {
+  margin: 2.5rem 0 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.inline-quiz-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.9rem 1.2rem;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.inline-quiz-head .sq-label {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.inline-quiz-link {
+  font-family: var(--mono);
+  font-size: 0.65rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  text-decoration: none;
+  transition: color var(--t);
+}
+
+.inline-quiz-link:hover {
+  color: var(--amber);
+}
+
+#inline-quiz-body,
+#inline-quiz-player,
+#inline-quiz-result {
+  padding: 1.2rem;
+}
+
+.btn-start-quiz {
+  width: 100%;
+  padding: 0.85rem;
+  justify-content: center;
+  background: color-mix(in srgb, var(--amber) 8%, transparent);
+  border-color: var(--amber);
+  color: var(--amber);
+}
+
+.btn-start-quiz:hover {
+  background: color-mix(in srgb, var(--amber) 15%, transparent);
+}
+
+/* ── TABELA NA PROSE ── */
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.88rem;
+  margin: 1.5rem 0;
+}
+
+.prose th {
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid var(--border-2);
+  text-align: left;
+}
+
+.prose td {
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-2);
+  vertical-align: top;
+}
+
+.prose tr:last-child td {
+  border-bottom: none;
+}
+
+.prose tr:hover td {
+  background: color-mix(in srgb, var(--amber) 3%, transparent);
+}