/* ───────────────────────────────────────────
   O CADERNO DO APROVADO · diário do aluno OABeiros
   Mesa de madeira → papel creme texturizado com
   linhas de caderno + margem vermelha. Post-it
   manuscrito (Caveat), fichas com clip metálico,
   selos dourados, drop cap, número de página.
   Fontes: Fraunces (display) · Lora (corpo) · Caveat (manuscrito)
   Guardrails: legibilidade AA · mobile-first · prefers-reduced-motion
   ─────────────────────────────────────────── */

:root {
  --paper:        #FAF6EE;
  --paper-2:      #FFFDF7;
  --paper-soft:   #FFFCF4;
  --paper-warm:   #F2E9D5;
  --paper-deep:   #F1EAD9;
  --paper-edge:   #E4D9C1;

  --desk-1:       #6b5640;   /* madeira da mesa */
  --desk-2:       #4f3f2e;

  --ink:          #2A1F1A;
  --ink-soft:     #5A4A3F;
  --ink-faint:    #8B7E70;
  --line:         rgba(42, 31, 26, 0.13);
  --line-strong:  rgba(42, 31, 26, 0.30);
  --line-faint:   rgba(42, 31, 26, 0.045);

  --accent:       #8B2E1F;   /* bordeaux */
  --accent-d:     #6f2417;
  --accent-soft:  #B0533E;
  --margin-red:   rgba(176, 83, 62, 0.28);
  --gold:         #B8924A;
  --gold-d:       #8c6e34;
  --green:        #5B7A4B;

  --postit:       #FCE08A;
  --postit-edge:  #e9c95f;
  --tape:         rgba(214, 202, 170, 0.55);

  --r:            13px;
  --ease:         cubic-bezier(.2,.8,.2,1);
  --shadow-soft:  0 14px 30px -16px rgba(20, 12, 6, 0.4);
  --shadow-card:  0 10px 22px -12px rgba(42, 31, 26, 0.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

/* ===== MESA DE ESTUDOS: madeira escura sob o caderno ===== */
body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  line-height: 1.66;
  font-size: 17px;
  letter-spacing: 0.002em;
  font-feature-settings: "kern", "liga", "onum";
  min-height: 100vh;
  padding: 30px 12px 84px;
  background:
    radial-gradient(1400px 700px at 50% -5%, #7a6147 0%, var(--desk-1) 35%, var(--desk-2) 100%);
  position: relative;
}
/* grão sutil sobre tudo */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== A PÁGINA: papel creme texturizado + linhas + margem vermelha ===== */
.shell {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: linear-gradient(var(--paper-2), var(--paper));
  border-radius: var(--r);
  padding: 38px 40px 40px 64px;
  box-shadow:
    0 2px 0 #fff6 inset,
    0 30px 60px -20px rgba(20, 12, 6, 0.55),
    0 10px 24px rgba(20, 12, 6, 0.3);
  overflow: hidden;
}
/* textura de papel + linhas de caderno */
.shell::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, var(--line-faint) 33px 34px),
    radial-gradient(60% 50% at 50% 0%, #fff8 0, transparent 70%);
}
/* margem vermelha do caderno */
.shell::after {
  content: "";
  position: absolute;
  left: 54px; top: 0; bottom: 0;
  width: 2px;
  background: var(--margin-red);
  pointer-events: none;
  z-index: 0;
}
.shell > * { position: relative; z-index: 1; }
@media (max-width: 560px) {
  .shell { padding: 26px 20px 30px 40px; border-radius: 10px; }
  .shell::after { left: 30px; }
}

/* espaçamento entre blocos de conteúdo */
.shell > section,
.shell > .head,
.shell > .tioCard,
.shell > .webmailCard,
.shell > .foot { margin-bottom: 32px; }

/* ===== MOTION staggered ===== */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.shell > section,
.shell > .tioCard,
.shell > .webmailCard { animation: rise .7s var(--ease) both; }
.shell > *:nth-child(1)  { animation-delay: .04s; }
.shell > *:nth-child(2)  { animation-delay: .10s; }
.shell > *:nth-child(3)  { animation-delay: .16s; }
.shell > *:nth-child(4)  { animation-delay: .22s; }
.shell > *:nth-child(5)  { animation-delay: .28s; }
.shell > *:nth-child(6)  { animation-delay: .34s; }
.shell > *:nth-child(7)  { animation-delay: .40s; }
.shell > *:nth-child(8)  { animation-delay: .46s; }
.shell > *:nth-child(n+9){ animation-delay: .50s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== CAPA / HEADER ===== */
.head {
  margin-bottom: 36px;
  position: relative;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent);
  margin-bottom: 10px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1.5px;
  background: var(--gold);
  flex: 0 0 auto;
}
h1 {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 12px;
}
h1 .hi {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
  position: relative;
}
/* grifo marca-texto sob o nome */
h1 .hi::after {
  content: "";
  position: absolute;
  left: 0; right: -2px; bottom: 6px;
  height: 9px;
  background: rgba(255, 203, 5, 0.42);
  z-index: -1;
  transform: rotate(-0.6deg);
}
.lead {
  font-family: 'Lora', serif;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 54ch;
  margin: 14px 0 18px;
}
/* drop cap na primeira letra do lead */
.lead::first-letter {
  float: left;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 3.1rem;
  line-height: 0.8;
  padding: 6px 10px 0 0;
  color: var(--accent);
}
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 2px 6px rgba(42, 31, 26, 0.08);
  font-variant-numeric: oldstyle-nums;
}
.countdown::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(91, 122, 75, 0.2);
  flex: 0 0 auto;
}

/* ===== SEÇÕES ===== */
section { margin-bottom: 32px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
}
.section-head h2 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.section-head .tag {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.84rem;
  color: var(--ink-faint);
  margin-left: auto;
  position: relative;
  padding-left: 10px;
}
/* linha decorativa entre título e tag */
.section-head::after {
  content: none;
}

/* ===== POST-IT do Tio Valdir (tioCard) ===== */
.tioCard {
  position: relative;
  width: min(460px, 100%);
  margin: 0 auto 36px;
  padding: 32px 30px 30px;
  background: linear-gradient(160deg, #fde79a, var(--postit) 45%, #f6d878);
  border-radius: 2px;
  color: #3b3318;
  transform: rotate(-1.5deg);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    14px 18px 30px -12px rgba(20, 12, 6, 0.5);
  transition: transform .35s var(--ease);
}
.tioCard:hover { transform: rotate(0deg) scale(1.012); }
/* washi tape */
.tioCard::before {
  content: "";
  position: absolute;
  left: 50%; top: -13px;
  transform: translateX(-50%) rotate(-2.5deg);
  width: 130px; height: 30px;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  backdrop-filter: saturate(.6);
  z-index: 2;
}
/* dobra do canto */
.tioCard::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  border-width: 0 0 26px 26px;
  border-style: solid;
  border-color: transparent transparent #e6c659 transparent;
  filter: brightness(.92);
}
.tioCard .tioMark {
  position: absolute;
  right: 18px; top: 14px;
  font-size: 1.4rem;
  color: var(--accent);
  opacity: 0.5;
  transform: rotate(8deg);
}
.tioCard .tioKicker {
  font-family: 'Caveat', 'Lora', cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 1.18rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-bottom: 8px;
}
.tioCard .tioBody {
  font-family: 'Caveat', 'Lora', cursive;
  font-size: 1.5rem;
  line-height: 1.36;
  color: #3b3318;
  white-space: pre-wrap;
}
/* análises (isHtml) usam corpo serifado legível dentro do post-it claro */
.tioCard.analise,
.tioCard:has(.tioBody p),
.tioCard:has(.tioBody ul),
.tioCard:has(.tioBody h3) {
  /* análises longas: vira ficha clara, não post-it */
}
.tioCard .tioBody p,
.tioCard .tioBody li {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.7;
}

/* Quando o conteúdo é HTML estruturado (análises do Opus), o post-it
   fica longo demais; suavizamos a rotação para manter legível. */
.tioCard:has(.tioBody p),
.tioCard:has(.tioBody ul),
.tioCard:has(.tioBody ol),
.tioCard:has(.tioBody h3),
.tioCard:has(.tioBody h4) {
  width: 100%;
  transform: rotate(0deg);
  background: linear-gradient(135deg, #FFF6E0 0%, #F2E9D5 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}
.tioCard:has(.tioBody p) .tioBody,
.tioCard:has(.tioBody ul) .tioBody,
.tioCard:has(.tioBody h3) .tioBody {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--ink);
}
.tioCard:has(.tioBody p) .tioKicker,
.tioCard:has(.tioBody ul) .tioKicker,
.tioCard:has(.tioBody h3) .tioKicker {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tioCard:has(.tioBody p)::before,
.tioCard:has(.tioBody ul)::before,
.tioCard:has(.tioBody h3)::before { content: none; }
.tioCard:has(.tioBody p)::after,
.tioCard:has(.tioBody ul)::after,
.tioCard:has(.tioBody h3)::after { content: none; }
.tioCard:has(.tioBody p) .tioMark,
.tioCard:has(.tioBody ul) .tioMark,
.tioCard:has(.tioBody h3) .tioMark {
  top: -16px; right: 28px;
  background: var(--paper-warm);
  padding: 0 8px;
  font-size: 1.6rem;
  opacity: 1;
  transform: none;
}

/* ===== WEBMAIL CARD — ficha-bônus com clip ===== */
.webmailCard {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 32px;
  padding: 20px 22px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.webmailCard::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(184, 146, 74, 0.12), transparent 55%);
  pointer-events: none;
}
.webmailCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -14px rgba(42, 31, 26, 0.42);
  border-left-color: var(--gold-d);
}
.webmailMark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-d);
  color: var(--paper-2);
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 rgba(42, 31, 26, 0.14);
}
.webmailBody { flex: 1; min-width: 0; }
.webmailKicker {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold-d);
  font-weight: 500;
}
.webmailTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 3px;
  color: var(--ink);
}
.webmailSub {
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
}
.webmailArrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  color: var(--gold-d);
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.webmailCard:hover .webmailArrow { transform: translateX(3px); }

/* ===== MATERIAIS ===== */
/* VIDEO EMBED (YouTube) — ficha de vídeo */
.videoEmbed {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 20px 10px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.videoTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 3px;
}
.videoSub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.videoFrame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}
.videoFrame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* PDF CARD (e-book inline) — ficha com selo de livro */
.pdfCard {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pdfCard:hover {
  transform: translateY(-3px) rotate(0.15deg);
  box-shadow: 0 18px 38px -14px rgba(42, 31, 26, 0.42);
}
.pdfThumb {
  flex: 0 0 64px; height: 80px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--paper-2);
  border-radius: 4px 6px 6px 4px;
  font-size: 2rem;
  box-shadow: 2px 2px 0 rgba(42, 31, 26, 0.18);
  transform: rotate(-2deg);
  position: relative;
}
/* lombada do "livrinho" */
.pdfThumb::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent);
  border-radius: 4px 0 0 4px;
}
.pdfBody { flex: 1; min-width: 0; }
.pdfTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
}
.pdfSub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.pdfActions { display: flex; gap: 10px; flex-wrap: wrap; }
.pdfRead, .pdfDownload {
  padding: 9px 18px;
  border-radius: 999px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: all .2s var(--ease);
}
.pdfRead {
  background: var(--accent);
  color: var(--paper-2);
  box-shadow: 0 4px 12px -3px rgba(139, 46, 31, 0.5);
}
.pdfRead:hover { background: var(--accent-d); border-color: var(--accent-d); transform: translateY(-1px); }
.pdfDownload { background: transparent; color: var(--accent); }
.pdfDownload:hover { background: var(--paper-warm); }

/* LINK ROW — anexo preso por clip */
.linkRow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.linkRow::before {
  content: "";
  position: absolute;
  right: -3px; top: 16px;
  width: 16px; height: 38px;
  border: 3px solid #b9b2a0;
  border-left: none;
  border-radius: 0 8px 8px 0;
  opacity: 0.7;
  pointer-events: none;
}
.linkRow:hover {
  transform: translateY(-3px) rotate(0.15deg);
  box-shadow: 0 18px 38px -14px rgba(42, 31, 26, 0.42);
}
.linkRow .icon {
  flex: 0 0 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  color: var(--accent);
}
.linkRow .lbl { flex: 1; min-width: 0; }
.linkRow .lbl .title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 2px;
}
.linkRow .lbl .sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.linkRow .arr {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink-faint);
  font-size: 1.2rem;
}
.linkRow:hover .arr { color: var(--accent); }

/* ===== DIÁRIO DE HOJE — ficha de escrita ===== */
.diaryCard {
  padding: 28px 30px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  position: relative;
}
textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-soft);
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 28px,
      rgba(184, 146, 74, 0.12) 28px,
      rgba(184, 146, 74, 0.12) 29px
    );
  outline: none;
  resize: vertical;
  min-height: 180px;
}
textarea:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(176, 83, 62, 0.1);
}
.formActions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.formActions input[type="file"] { display: none; }
.attachLabel {
  padding: 10px 18px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.94rem;
  cursor: pointer;
  transition: all .18s ease;
}
.attachLabel:hover { border-color: var(--accent-soft); color: var(--accent); }

/* botão escuro — virou CTA bordeaux com profundidade (ficha cta) */
.darkButton {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 9px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 12px -3px rgba(139, 46, 31, 0.5);
  transition: background .2s, transform .2s, gap .2s;
}
.darkButton:hover { background: var(--accent-d); border-color: var(--accent-d); transform: translateY(-1px); gap: 11px; }
.darkButton:disabled { opacity: 0.5; cursor: not-allowed; }

.attachedList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.attachedFile {
  padding: 8px 12px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.attachedFile button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.84rem;
  color: var(--accent);
}

/* DIÁRIO FECHADO — folha guardada */
.closedNotice {
  padding: 28px 30px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.closedNotice::before {
  content: "❦";
  display: block;
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 8px;
}
.closedNotice strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 8px;
}
.closedNotice .sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.todayRead {
  margin-top: 16px;
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  text-align: left;
}
.todayRead .meta {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.84rem;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.todayRead p {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ===== HISTÓRICO — mural de fichas com washi tape ===== */
.history {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 26px 18px 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(139, 46, 31, 0.04) 22px 23px),
    linear-gradient(180deg, rgba(232, 220, 192, 0.18), rgba(184, 146, 74, 0.06));
  border-radius: var(--r);
  border: 1px dashed rgba(42, 31, 26, 0.16);
  position: relative;
}
.history::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 110px; height: 18px;
  background: var(--tape);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(42, 31, 26, 0.16);
}
.entry {
  padding: 22px 26px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(42, 31, 26, 0.07), 0 1px 0 rgba(42, 31, 26, 0.04);
  position: relative;
  transform: rotate(-0.4deg);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.entry:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 6px 18px rgba(42, 31, 26, 0.14); }
.entry:nth-child(2n) { transform: rotate(0.5deg); background: #FAF6EA; }
.entry:nth-child(3n) { transform: rotate(-0.7deg); background: #FFF8E4; }
.entry:nth-child(4n) { transform: rotate(0.3deg); background: #FAF6EA; }
.entry::before {
  content: "";
  position: absolute;
  top: -9px; left: 28px;
  width: 68px; height: 16px;
  background: var(--tape);
  border-radius: 1px;
  transform: rotate(-2deg);
  box-shadow: 0 1px 3px rgba(42, 31, 26, 0.12);
  z-index: 2;
}
.entry:nth-child(3n)::before { background: rgba(139, 46, 31, 0.22); transform: rotate(2deg); left: auto; right: 32px; }
.entry:nth-child(3n+2)::before { background: rgba(91, 122, 75, 0.28); transform: rotate(-1deg); left: 58%; }
.entry:nth-child(5n)::before { background: rgba(176, 83, 62, 0.28); transform: rotate(3deg); left: 40%; }
.entry .date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.entry .date::before {
  content: "—";
  color: var(--accent);
  font-style: normal;
}
.entry .body {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
}
/* bilhete antigo no histórico */
.entry.tioPast {
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
}
.entry.tioPast .date { color: var(--accent); font-weight: 500; }
/* upload — anexo discreto preso por clip */
.entry.upload {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 6px 0 6px 18px;
  border-left: 2px dotted var(--line-strong);
  border-radius: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  transform: none !important;
}
.entry.upload:hover { transform: none !important; box-shadow: none; }
.entry.upload::before { content: none; }
.entry.upload .date {
  margin: 0; padding: 0; border: 0;
  font-family: 'Caveat', 'Lora', cursive;
  font-style: normal;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.entry.upload .date::before { content: "🖇"; font-size: 0.95rem; }
.entry.upload .file {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  font-family: 'Caveat', 'Lora', cursive;
  font-size: 1.12rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  word-break: break-word;
}
.entry.upload .file:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ===== QUIZ — caderno de exercícios (fichas) ===== */
.quizIntro {
  padding: 24px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.quizLegend {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--paper-warm);
  border-radius: 6px;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.95rem; line-height: 1.5;
}
.quizLegend strong { color: var(--accent); font-weight: 700; margin-right: 4px; font-style: normal; }
.quizInstructions {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.02rem; line-height: 1.7;
  color: var(--ink); margin: 0 0 14px;
}
.quizNote {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 0.94rem; color: var(--ink-soft);
  margin: 0 0 18px; padding-left: 14px;
  border-left: 2px solid var(--line-strong);
}
.quizCard {
  padding: 24px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  position: relative;
}
.quizProgress {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 0.86rem; color: var(--ink-faint);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.quizCaseText {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.06rem; line-height: 1.7;
  color: var(--ink); margin-bottom: 22px;
}
.quizButtons {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 540px) { .quizButtons { grid-template-columns: repeat(4, 1fr); } }
.quizBtn {
  padding: 16px 12px;
  background: var(--paper-soft); color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 1.4rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.quizBtn:hover {
  background: var(--accent); color: var(--paper-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -3px rgba(139, 46, 31, 0.5);
}
.quizJustifyHint {
  margin-top: 14px; padding: 10px 14px;
  background: var(--paper-warm);
  border-radius: 6px;
  font-family: 'Lora', serif; font-style: italic;
  font-size: 0.9rem; color: var(--ink-soft);
}
.autosaveHint {
  margin-top: 6px;
  font-family: 'Lora', serif; font-style: italic;
  font-size: 0.84rem; color: var(--ink-faint);
  text-align: right;
}
.justifyCounter {
  margin-top: 6px; padding: 10px 14px;
  background: var(--paper-warm);
  border-radius: 6px;
  font-family: 'Lora', serif; font-style: italic;
  font-size: 0.92rem; color: var(--accent);
}
.pendingList {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.pendingItem {
  text-align: left;
  padding: 12px 16px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.94rem;
  color: var(--ink);
  cursor: pointer;
  transition: all .18s ease;
}
.pendingItem:hover { border-color: var(--accent); background: var(--paper-warm); }
.quizSelected {
  margin-bottom: 12px;
  font-family: 'Lora', serif;
  font-size: 0.94rem;
  color: var(--accent);
  font-weight: 600;
}

/* ===== QUIZ FINAL — selo dourado em relevo (conquista) ===== */
.quizFinal {
  padding: 40px 32px 36px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.quizFinalMark {
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2.4rem;
  color: var(--accent);
  position: relative;
  background: radial-gradient(circle at 34% 28%, #f7e7bb 0, #e7c878 38%, var(--gold) 72%, #9c7a38 100%);
  border: 3px solid #fff8;
  box-shadow:
    0 8px 18px -4px rgba(140, 110, 52, 0.6),
    inset 0 -4px 10px rgba(110, 82, 28, 0.5),
    inset 0 3px 6px #fff7;
  animation: pop .5s var(--ease) both;
}
.quizFinalMark::after {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
}
.quizFinal h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-style: italic;
  font-size: 1.6rem;
  margin: 0 0 14px;
  color: var(--ink);
}
.quizFinal p {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.04rem; line-height: 1.65;
  color: var(--ink); margin: 0 0 8px;
}
.quizFinal .quizThanks {
  margin: 18px auto 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 50ch;
}

/* ===== SENHA / FAZ AS CONTAS — fichas (o inline do app.js só monta a
   estrutura; estes seletores garantem o fallback do tema caderno) ===== */
.senhaCard, .fcCard {
  position: relative;
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

/* ===== SIMULADOS — fichas com clip ===== */
.simGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 520px) { .simGrid { grid-template-columns: 1fr 1fr; } }
.simCard {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.simCard:hover { transform: translateY(-3px) rotate(0.15deg); box-shadow: 0 18px 38px -14px rgba(42, 31, 26, 0.42); }
.simCard::before {
  content: "";
  position: absolute;
  right: -3px; top: 16px;
  width: 16px; height: 38px;
  border: 3px solid #b9b2a0;
  border-left: none;
  border-radius: 0 8px 8px 0;
  opacity: 0.6;
  pointer-events: none;
}
.simCard.sim-corrigido { border-left: 4px solid var(--green); background: linear-gradient(180deg, var(--paper-2), #F0EEDA); }
.simCard.sim-pending, .simCard.sim-corrigindo { border-left: 4px solid var(--gold); }
.simCard.sim-disponivel { border-left: 4px solid var(--accent); }
.simCard.sim-bloqueado_por_pendente, .simCard.sim-aguardando_liberacao { opacity: 0.6; }
.simCard.sim-bloqueado_por_pendente::before, .simCard.sim-aguardando_liberacao::before { opacity: 0.3; }
.simNum {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-d);
  font-weight: 500;
}
.simTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.12;
  color: var(--ink);
  font-weight: 600;
}
.simPeca {
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
}
.simStatus {
  margin-top: 6px;
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.sim-corrigido .simStatus { color: var(--green); font-weight: 600; font-family: 'Fraunces', Georgia, serif; }
.simHint {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 2px;
}
.simBtn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 17px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  align-self: flex-start;
  box-shadow: 0 4px 12px -3px rgba(139, 46, 31, 0.5);
  transition: background .2s, transform .2s, gap .2s;
}
.simBtn:hover { background: var(--accent-d); transform: translateY(-1px); gap: 10px; }
.simBtn.outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
.simBtn.outline:hover { background: var(--paper-warm); }

/* ===== JOGUINHOS — fichas coloridas ===== */
.jogosSec { margin-top: 32px; }
.jogosGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 520px) { .jogosGrid { grid-template-columns: 1fr 1fr; } }
.jogoCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  position: relative;
  overflow: hidden;
}
.jogoCard::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, var(--tint, transparent), transparent 60%);
  opacity: 0.4;
  pointer-events: none;
}
.jogoCard:hover {
  transform: translateY(-3px) rotate(-0.3deg);
  box-shadow: 0 18px 38px -14px rgba(42, 31, 26, 0.42);
}
.jogo-amber { --tint: rgba(184, 146, 74, 0.35); border-left: 4px solid var(--gold); }
.jogo-green { --tint: rgba(91, 122, 75, 0.30); border-left: 4px solid var(--green); }
.jogoIcon {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--paper-warm);
  color: var(--accent);
  flex-shrink: 0;
}
.jogo-amber .jogoIcon { color: var(--gold-d); }
.jogo-green .jogoIcon { color: var(--green); }
.jogoBody { flex: 1; min-width: 0; }
.jogoTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.jogoSub {
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.jogoArrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.jogoCard:hover .jogoArrow { color: var(--accent); transform: translate(2px, -2px); }

/* ===== MODAL genérico (simulados) ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(42, 31, 26, 0.5);
  z-index: 99;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 28px 26px;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(20, 12, 6, 0.45);
}
.modal h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.modal p {
  font-family: 'Lora', serif;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}
.modal-actions {
  display: flex; gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}
.btn-primary, .btn-secondary {
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--paper-2);
  box-shadow: 0 4px 12px -3px rgba(139, 46, 31, 0.5);
}
.btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
.btn-primary:disabled { opacity: 0.4; cursor: wait; }
.btn-secondary {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.simModal input[type="file"] {
  display: block;
  margin: 14px 0;
  font-family: 'Lora', serif;
}
.simUploadStatus {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: 6px;
  min-height: 18px;
}
.correcaoModal .notaFinal {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  color: var(--accent);
  margin: 6px 0 16px;
  font-weight: 600;
}
.criterios { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.criterioItem {
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  background: var(--paper-warm);
  border-radius: 6px;
}
.critTop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.critItem { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.critPts { font-family: 'Fraunces', Georgia, serif; color: var(--accent); font-size: 0.86rem; font-weight: 600; }
.critComment { font-family: 'Lora', serif; font-size: 0.88rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
.critGeral, .critPadrao { font-family: 'Lora', serif; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.6; }
.correcaoModal h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.98rem;
  color: var(--accent);
  margin: 14px 0 6px;
}

/* ===== CONFIRM DIALOG ===== */
.confirmBack {
  position: fixed; inset: 0;
  background: rgba(42, 31, 26, 0.55);
  display: grid; place-items: center;
  z-index: 1000;
  padding: 20px;
}
.confirmDialog {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(20, 12, 6, 0.45);
  padding: 28px 30px 22px;
  max-width: 460px;
  width: 100%;
}
.confirmTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 12px;
}
.confirmBody {
  font-family: 'Lora', serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.confirmActions {
  display: flex; gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.confirmActions button {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
}
.confirmCancel { background: transparent; color: var(--ink-soft); }
.confirmCancel:hover { border-color: var(--ink); color: var(--ink); }
.confirmOk {
  background: var(--accent);
  color: var(--paper-2);
  border-color: var(--accent);
  box-shadow: 0 4px 12px -3px rgba(139, 46, 31, 0.5);
}
.confirmOk:hover { background: var(--accent-d); border-color: var(--accent-d); }

/* ===== REPORT ERROR — barra sticky (chamado) ===== */
.reportErrorBar {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  margin: -30px -12px 26px;
  background: repeating-linear-gradient(45deg, #8B2E1F, #8B2E1F 10px, #7c2819 10px, #7c2819 20px);
  color: #FFFCF4;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.94rem;
  box-shadow: 0 2px 12px rgba(139, 46, 31, 0.25);
  flex-wrap: wrap;
  text-align: center;
}
.reportErrorBar::before {
  content: "❦";
  font-size: 1.05rem;
  color: var(--gold);
}
.reportErrorLabel { font-style: italic; font-weight: 500; }
.reportErrorBtn {
  padding: 7px 16px;
  background: var(--gold);
  color: #2A1F1A;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
  white-space: nowrap;
}
.reportErrorBtn:hover { background: #cda85c; transform: translateY(-1px); }

.reportBack {
  position: fixed; inset: 0;
  background: rgba(42, 31, 26, 0.62);
  display: grid; place-items: center;
  z-index: 1100;
  padding: 20px;
}
.reportDialog {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(20, 12, 6, 0.45);
  padding: 28px 32px 24px;
  max-width: 500px;
  width: 100%;
}
.reportTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.reportSub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
#reportDesc {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: 'Lora', serif;
  font-size: 1rem;
  background: #fff;
  resize: vertical;
  outline: none;
}
#reportDesc:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(176, 83, 62, 0.12); }
.reportHint {
  margin-top: 8px;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.reportActions {
  display: flex; gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}
.reportCancel, .reportSend {
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
}
.reportCancel { background: transparent; color: var(--ink-soft); }
.reportCancel:hover { border-color: var(--ink); color: var(--ink); }
.reportSend {
  background: var(--accent);
  color: var(--paper-2);
  border-color: var(--accent);
  box-shadow: 0 4px 12px -3px rgba(139, 46, 31, 0.5);
}
.reportSend:hover { background: var(--accent-d); border-color: var(--accent-d); }
.reportSend:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper-soft);
  padding: 12px 22px;
  border-radius: 8px;
  font-family: 'Lora', serif;
  font-size: 0.94rem;
  opacity: 0;
  transition: opacity 240ms;
  pointer-events: none;
  z-index: 1300;
  box-shadow: var(--shadow-soft);
}
.toast.show { opacity: 1; }

/* ===== Recadinho pro Tio — avaliação no Bilhete (touchpoint nota_tio) ===== */
.notaRate, .recadoBox {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}
.rateQ {
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.rateRow { display: flex; gap: 12px; }
.faceBtn {
  font-size: 26px;
  line-height: 1;
  width: 48px; height: 48px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.faceBtn:hover { transform: translateY(-2px) scale(1.08); background: var(--paper-warm); box-shadow: 0 4px 10px rgba(42,31,26,.12); }
.faceBtn:active { transform: scale(.96); }
.faceBtn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.rateThanks { font-family: 'Lora', serif; font-size: 0.92rem; color: var(--accent); font-weight: 600; }
.recadoTa {
  width: 100%;
  min-height: 72px;
  margin: 10px 0 8px;
  padding: 10px 12px;
  font-family: 'Lora', serif; font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  resize: vertical; outline: none;
}
.recadoTa:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(176,83,62,.12); }
.recadoConsent { display: flex; align-items: center; gap: 8px; font-family: 'Lora', serif; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }
.recadoConsent input { width: 16px; height: 16px; accent-color: var(--accent); }
.recadoSig {
  display: block; margin: 8px 0; padding: 7px 10px;
  font-family: 'Lora', serif; font-size: 0.85rem; color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.recadoSend {
  margin-top: 8px; padding: 9px 18px;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 0.92rem;
  color: var(--paper-2);
  background: var(--accent);
  border: 1px solid var(--accent); border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px -3px rgba(139,46,31,.5);
  transition: background .12s ease;
}
.recadoSend:hover { background: var(--accent-d); border-color: var(--accent-d); }
.recadoSend:disabled { opacity: .6; cursor: default; }

/* ===== Faixa de Conquistas (selos) ===== */
.selosSec { margin-top: 8px; }
.selosHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.selosKicker { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.05rem; color: var(--accent); }
.selosCount { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: .85rem; color: var(--ink-faint); background: var(--paper-warm); padding: 2px 10px; border-radius: 999px; }
.selosRow { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.selo { flex: 0 0 auto; width: 84px; text-align: center; }
.seloImg { width: 66px; height: 66px; object-fit: contain; filter: grayscale(1) opacity(.4); transition: filter .25s; }
.selo.on .seloImg { filter: none; }
.seloNome { font-size: 11px; font-weight: 700; color: var(--ink); margin-top: 4px; line-height: 1.2; }
.selo:not(.on) .seloNome { color: var(--ink-faint); }
.seloDica { font-size: 9.5px; color: var(--ink-faint); line-height: 1.25; margin-top: 2px; }
.selo.on .seloDica { color: var(--accent); font-weight: 600; }

/* ===== PDF READER (fullscreen Kindle-style) ===== */
.pdfReaderBack {
  position: fixed; inset: 0;
  background: #2A1F1A;
  z-index: 1200;
  display: flex;
  flex-direction: column;
}
.pdfReaderHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  background: #1A130F;
  color: #FFFCF4;
  border-bottom: 1px solid rgba(255, 252, 244, 0.1);
}
.pdfReaderTitle {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdfReaderActions { display: flex; gap: 8px; flex-shrink: 0; }
.pdfReaderDl, .pdfReaderClose {
  padding: 7px 16px;
  border-radius: 999px;
  font-family: 'Lora', serif;
  font-size: 0.86rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255, 252, 244, 0.3);
  background: transparent;
  color: var(--paper);
}
.pdfReaderDl:hover { background: rgba(255, 252, 244, 0.08); }
.pdfReaderClose:hover { background: var(--accent); border-color: var(--accent); }
.pdfReaderFrame {
  flex: 1;
  width: 100%; height: 100%;
  border: 0;
  background: var(--paper);
}

/* ===== ESTADOS GERAIS ===== */
.denied {
  padding: 80px 20px;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--accent);
}
.denied .meta {
  font-family: 'Lora', serif;
  font-size: 0.94rem;
  color: var(--ink-faint);
  margin-top: 12px;
  font-style: italic;
}
.empty {
  padding: 40px 24px;
  text-align: center;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.0rem;
  color: var(--ink-faint);
  background: var(--paper-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}
.loading {
  padding: 80px 20px;
  text-align: center;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.04rem;
  color: var(--ink-faint);
}

/* ===== FOOT — número de página + assinatura ===== */
.foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.foot::before {
  content: "❦";
  display: block;
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 10px;
  font-style: normal;
}

/* ===== PRINT (vira o livro do aluno) ===== */
@media print {
  body { background: white; color: black; font-size: 11pt; padding: 0; }
  body::after { display: none; }
  .shell { max-width: 100%; padding: 0; box-shadow: none; background: white; }
  .shell::before, .shell::after { display: none; }
  .formActions, .darkButton, .attachLabel, .toast, button, .reportErrorBar { display: none !important; }
  textarea { display: none; }
  .diaryCard { display: none; }
  .head { page-break-after: avoid; }
  .entry, .linkRow, .closedNotice, .tioCard { page-break-inside: avoid; box-shadow: none; transform: none !important; }
  .entry { border-left: 2px solid black; }
  a { color: black; text-decoration: underline; }
}