/* Aula Pronta — painel */
body { background: var(--paper); }
[hidden] { display: none !important; }

.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

/* SIDEBAR */
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px; background: var(--card); border-right: 1px solid var(--line);
}
.sidebar .logo { padding: 0 8px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .95rem;
}
.side-nav a svg { width: 19px; height: 19px; flex: none; }
.side-nav a:hover { background: var(--paper); color: var(--ink); }
.side-nav a.active { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.side-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 16px 12px 6px; }
.count { margin-left: auto; font-size: .75rem; background: var(--paper-2); color: var(--ink-2); padding: 1px 8px; border-radius: var(--radius-pill); font-weight: 600; }
.side-foot { margin-top: auto; display: grid; gap: 14px; }
.plan-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 6px; font-size: .85rem; }
.plan-box span { color: var(--ink-2); }
.bar { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--mark); }
.plan-box .btn { padding: 8px; margin-top: 4px; font-size: .85rem; }
.user { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mark); color: var(--ink); font-weight: 800; display: grid; place-items: center; flex: none; }
.user-info { display: grid; min-width: 0; line-height: 1.3; }
.user-info strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info small { font-size: .76rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { margin-left: auto; border: 0; background: none; width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--ink-3); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--paper); color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; }
.scrim { display: none; }

/* CONTEÚDO */
.content { min-width: 0; padding: 0 36px 96px; } /* espaço no fim para o botão "Dúvidas?" não cobrir o último botão */
.topbar { display: flex; align-items: center; gap: 12px; height: 68px; }
.menu-btn { display: none; margin: 0; }
.crumb { font-weight: 600; color: var(--ink-2); }
.demo-badge { margin-left: auto; font-size: .78rem; font-weight: 700; background: var(--mark-soft); color: #6b5200; padding: 5px 12px; border-radius: var(--radius-pill); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.panel h2 { font-size: 1.2rem; }
.panel-head a { color: var(--brand); font-weight: 600; font-size: .88rem; text-decoration: none; }

/* INÍCIO */
.welcome { margin: 12px 0 28px; }
.welcome h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.welcome p { color: var(--ink-2); font-size: 1.05rem; margin-top: 4px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.quick {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; text-decoration: none;
  display: flex; flex-direction: column; gap: 6px; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.quick:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: transparent; }
.q-icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: 10px; }
.q-icon svg { width: 23px; height: 23px; }
.q-plan .q-icon { background: var(--brand-soft); color: var(--brand); }
.q-class .q-icon { background: var(--mark-soft); color: #9a7400; }
.q-act .q-icon { background: var(--green-soft); color: var(--green); }
.quick h3 { font-size: 1.2rem; }
.quick p { color: var(--ink-2); font-size: .92rem; }
.q-go { margin-top: 10px; font-weight: 700; color: var(--brand); font-size: .9rem; }
.home-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.tip { background: var(--ink); color: #fff; border: 0; display: flex; flex-direction: column; gap: 12px; }
.tip p { color: rgba(255,255,255,.78); }
.tip blockquote { margin: 0; padding: 12px 16px; background: rgba(255,255,255,.08); border-radius: var(--radius-md); font-size: .94rem; }
.tip .btn { align-self: flex-start; color: #fff; border-color: rgba(255,255,255,.25); margin-top: auto; }
.tip .btn:hover { background: rgba(255,255,255,.08); }

/* LISTA DE DOCUMENTOS */
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-top: 1px solid var(--line); cursor: pointer; border-radius: var(--radius-sm); }
.doc-list li:first-child { border-top: 0; }
.doc-list li:hover { background: var(--paper); }
.doc-type { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; font-size: .7rem; font-weight: 800; }
.doc-type.plano { background: var(--brand-soft); color: var(--brand); }
.doc-type.aula { background: var(--mark-soft); color: #9a7400; }
.doc-type.atividade { background: var(--green-soft); color: var(--green); }
.doc-meta { min-width: 0; flex: 1; }
.doc-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta small { color: var(--ink-3); }
.doc-del { opacity: 0; }
.doc-list li:hover .doc-del, .doc-del:focus-visible { opacity: 1; }
.list-empty { color: var(--ink-3); padding: 18px 8px; cursor: default !important; }
.list-empty:hover { background: none !important; }

/* GERADOR */
.gen { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.gen-form { display: grid; gap: 16px; position: sticky; top: 16px; }
.type-tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--paper-2); border-radius: var(--radius-md); padding: 4px; }
.type-tabs button { border: 0; background: none; padding: 9px 6px; border-radius: var(--radius-md); font-weight: 600; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.type-tabs button.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.gen-form label { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; }
.opt { color: var(--ink-3); font-weight: 400; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gen-form input:not([type="checkbox"]), .gen-form select, .gen-form textarea {
  width: 100%; border: 1.5px solid var(--line); background: var(--paper); border-radius: var(--radius-md); padding: 10px 12px; font-size: .95rem; font-weight: 400;
}
.gen-form textarea { resize: vertical; }
.gen-form input:focus, .gen-form select:focus, .gen-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); background: var(--card); }
.act-only { display: grid; gap: 16px; }
.check { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; font-size: .92rem !important; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.gen-btn { width: 100%; padding: 14px; }
.gen-btn.loading svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.gen-output { min-height: 70vh; padding: 0; overflow: hidden; }
.out-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.out-status { font-size: .85rem; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.out-status .live { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulse 1s ease-in-out infinite; }
.out-status .done { color: var(--green); }
@keyframes pulse { 50% { opacity: .3; } }
.out-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.empty { display: grid; place-items: center; text-align: center; padding: 80px 32px; gap: 10px; }
.empty h3 { font-size: 1.3rem; margin-top: 12px; }
.empty p { color: var(--ink-2); max-width: 38ch; }
.empty-art { position: relative; width: 150px; height: 120px; }
.sheet { position: absolute; width: 90px; height: 112px; border-radius: var(--radius-md); background: var(--card); border: 1.5px solid var(--line); }
.s1 { left: 6px; top: 8px; transform: rotate(-9deg); background: var(--brand-soft); }
.s2 { right: 6px; top: 8px; transform: rotate(8deg); background: var(--mark-soft); }
.s3 { left: 30px; top: 0; padding: 18px 14px; display: grid; gap: 9px; align-content: start; box-shadow: var(--shadow); }
.s3 i { height: 7px; border-radius: 4px; background: var(--paper-2); }
.s3 i:first-child { width: 70%; background: var(--ink); opacity: .8; }

/* DOCUMENTO GERADO */
.doc { padding: 32px 40px 48px; font-size: 1rem; line-height: 1.7; max-width: 860px; }
.doc h1, .doc h2, .doc h3, .doc h4 { margin: 1.5em 0 .5em; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 1.9rem; }
.doc h2 { font-size: 1.45rem; padding-bottom: 6px; border-bottom: 2px solid var(--paper-2); }
.doc h3 { font-size: 1.15rem; }
.doc p, .doc ul, .doc ol, .doc table, .doc blockquote { margin: 0 0 1em; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li { margin: .25em 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: .94rem; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--paper); font-weight: 700; }
.doc blockquote { background: var(--mark-soft); padding: 10px 16px; border-radius: var(--radius-md); color: var(--ink-2); }
.doc blockquote p { margin: 0; }
.doc hr { border: 0; border-top: 2px dashed var(--line); margin: 2em 0; }
.doc code { background: var(--paper-2); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.doc strong { color: var(--ink); }
.doc.streaming > :last-child::after { content: ""; display: inline-block; width: 8px; height: 1.1em; background: var(--brand); margin-left: 3px; vertical-align: text-bottom; animation: pulse .8s infinite; }

/* HISTÓRICO */
.hist-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 12px 0 20px; flex-wrap: wrap; }
.hist-head h1 { font-size: 2rem; }
.hist-head input { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius-pill); padding: 10px 18px; width: min(340px, 100%); }
.hist-head input:focus { outline: none; border-color: var(--brand); }

/* TOAST */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 600; font-size: .9rem;
  transition: opacity .2s, transform .2s; z-index: 100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* RESPONSIVO */
@media (max-width: 1100px) {
  .gen { grid-template-columns: 1fr; }
  .gen-form { position: static; }
  .gen-output { min-height: 0; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 60; transform: translateX(-100%); transition: transform .25s var(--ease-out); }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(30,42,58,.35); z-index: 55; }
  .menu-btn { display: grid; }
  .content { padding: 0 16px 40px; }
  .quick-grid, .home-cols { grid-template-columns: 1fr; }
  .doc { padding: 24px 20px 36px; }
  .panel { padding: 18px; }
  .gen-output { padding: 0; }
  .doc-del { opacity: 1; }
}

/* IMPRESSÃO / PDF: só o documento */
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .gen-form, .out-toolbar, .toast, .scrim, .view:not(#view-gerar) { display: none !important; }
  .shell, .gen { display: block; }
  .content { padding: 0; }
  .panel { border: 0; padding: 0; }
  .doc { padding: 0; max-width: none; font-size: 11pt; }
  .doc h2 { break-after: avoid; }
  .doc table, .doc blockquote { break-inside: avoid; }
}

/* ANIMAÇÕES DE ENTRADA */
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.side-nav a { animation: slide-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.side-nav a:nth-of-type(2) { animation-delay: .05s; }
.side-nav a:nth-of-type(3) { animation-delay: .1s; }
.side-nav a:nth-of-type(4) { animation-delay: .15s; }
.side-nav a:nth-of-type(5) { animation-delay: .2s; }
.view:not([hidden]) > * { animation: entra var(--dur-slow) var(--ease-pop) both; }
.view:not([hidden]) > :nth-child(2) { animation-delay: .08s; }
.view:not([hidden]) > :nth-child(3) { animation-delay: .16s; }
.view:not([hidden]) .quick { animation: fade-up .55s cubic-bezier(.2, .7, .2, 1) both; }
.view:not([hidden]) .quick:nth-child(1) { animation-delay: .1s; }
.view:not([hidden]) .quick:nth-child(2) { animation-delay: .18s; }
.view:not([hidden]) .quick:nth-child(3) { animation-delay: .26s; }
.doc-list li { animation: fade-up .4s ease both; }

/* ---------- FOLHA ILUSTRADA (tamanhos em cqw: a folha escala como um papel A4) ---------- */
.folha-wrap { container-type: inline-size; padding: 24px; background: var(--paper-2); display: grid; gap: 24px; }
.f-page {
  background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif;
  padding: 3.2cqw; min-height: 141cqw; box-shadow: var(--shadow); border-radius: 4px;
}
.f-border { border: .35cqw dashed #222; padding: 3cqw 3.2cqw 4cqw; min-height: calc(141cqw - 6.4cqw); }
.f-head { width: 100%; border-collapse: collapse; font-size: 2.2cqw; margin-bottom: 2.4cqw; }
.f-head th, .f-head td { border: .18cqw solid #444; padding: .5cqw 1cqw; text-align: left; font-weight: 400; }
.f-head th { background: #e9e9e9; text-align: center; font-weight: 800; font-size: 2.4cqw; }
.f-head .f-w { width: 36%; }
.f-titulo { text-align: center; font-weight: 800; font-size: 3cqw; margin: 0 0 3cqw; }
.f-bloco { margin-bottom: 5.5cqw; break-inside: avoid; }
.f-enun { font-size: 2.4cqw; line-height: 1.45; margin: 0 0 2.6cqw; text-align: justify; }
.f-text { font-size: 2.4cqw; line-height: 1.5; }
.f-word, .f-bank span, .f-opts span, .f-caca td, .f-seq-box, .f-arm-n { font-family: "Andika", Arial, sans-serif; font-weight: 700; letter-spacing: .02em; }
.f-word { font-size: 4cqw; white-space: nowrap; display: inline-flex; align-items: flex-end; }
.f-word.sm { font-size: 2.8cqw; }
.f-word.xs { font-size: 2cqw; }
.f-blank { display: inline-block; width: 8cqw; border-bottom: .35cqw solid #111; height: 1em; margin: 0 .4cqw; vertical-align: baseline; }
.f-text .f-blank { width: 12cqw; height: .9em; }

.f-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw 3cqw; margin: 0 auto 4cqw; max-width: 64cqw; }
.f-bank span { min-width: 8.5cqw; border: .25cqw solid #222; box-shadow: .3cqw .3cqw 0 #bbb; text-align: center; font-size: 3cqw; padding: .5cqw 1cqw; display: inline-grid; place-items: center; }

.f-grid { display: grid; gap: 4cqw 3cqw; align-items: center; }
.f-grid.g1 { grid-template-columns: 1fr; }
.f-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f-grid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4cqw; }
.f-item { display: flex; align-items: center; gap: 1.5cqw; min-width: 0; }
.f-grid > * { min-width: 0; }
.f-text { overflow-wrap: anywhere; }
.f-grid.g3 .f-word { font-size: 3.4cqw; }
.f-grid.g3 .f-blank { width: 6.5cqw; }
.f-item.col { flex-direction: column; gap: .6cqw; }
.f-item.f-top { align-items: flex-start; }
.f-grow { flex: 1; min-width: 0; }

.f-fig { width: 12cqw; height: 12cqw; object-fit: contain; flex: none; display: inline-block; vertical-align: middle; }
.f-fig.md { width: 9.5cqw; height: 9.5cqw; }
.f-fig.sm { width: 6.5cqw; height: 6.5cqw; }
.f-fig.xs { width: 3.6cqw; height: 3.6cqw; }
.f-fig.cnt { width: 6cqw; height: 6cqw; }
.f-fig.cnt-sm { width: 4.2cqw; height: 4.2cqw; }
.f-fig.op { width: 5.2cqw; height: 5.2cqw; }
.f-fig.op-sm { width: 3.8cqw; height: 3.8cqw; }
.f-fig-txt { display: inline-grid; place-items: center; font-size: 9cqw; line-height: 1; }
.f-fig-txt.md { font-size: 7cqw; } .f-fig-txt.sm { font-size: 4.8cqw; } .f-fig-txt.xs { font-size: 2.6cqw; }
.f-fig-txt.cnt { font-size: 4.4cqw; } .f-fig-txt.cnt-sm { font-size: 3cqw; }
.f-fig-txt.op { font-size: 3.8cqw; } .f-fig-txt.op-sm { font-size: 2.8cqw; }

.f-ans { display: inline-block; width: 8cqw; height: 7cqw; border: .3cqw solid #222; border-radius: 1cqw; flex: none; background: #fff; }

/* contar */
.f-count { display: grid; gap: 1.4cqw; justify-items: center; }
.f-count-box { width: 100%; min-height: 20cqw; border: .25cqw solid #222; border-radius: 1.6cqw; padding: 1.4cqw; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: .6cqw; }

/* continhas com figuras */
.f-op { display: flex; align-items: center; gap: 1.4cqw; }
.f-grp { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .4cqw; padding: 1cqw; border: .2cqw dashed #999; border-radius: 1.4cqw; min-height: 9cqw; min-width: 9cqw; max-width: 17cqw; }
.f-num { font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 3.6cqw; }
.f-grupos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2cqw; flex: 1; min-width: 0; }
.f-grupos .f-grp { min-width: 6cqw; min-height: 6cqw; max-width: 14cqw; padding: .8cqw; }
.f-conta { font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 3.6cqw; white-space: nowrap; margin-left: 1cqw; }
.f-sign { font-size: 4cqw; font-weight: 800; }

/* conta armada */
.f-armada { display: grid; justify-items: end; width: 15cqw; margin: 0 auto; font-size: 4cqw; }
.f-arm-n { letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.f-arm-2 { width: 100%; display: flex; justify-content: space-between; border-bottom: .35cqw solid #111; padding-bottom: .4cqw; }
.f-arm-res { height: 6cqw; }

/* circular */
.f-circ { display: grid; gap: 1cqw; min-width: 0; }
.f-opts { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.f-opts span { font-size: 2.8cqw; border: .2cqw solid #999; border-radius: var(--radius-pill); padding: .4cqw 2.2cqw; text-align: center; }
.f-opts .f-opt-fig { padding: .6cqw; border-radius: 50%; display: inline-grid; place-items: center; }

/* ligar */
.f-ligar { display: grid; grid-template-columns: minmax(0, 34cqw) auto minmax(12cqw, 1fr) auto minmax(0, 34cqw); align-items: center; gap: 3cqw 2cqw; padding: 0 2cqw; }
.f-lig-c { display: flex; flex-wrap: wrap; align-items: center; gap: .6cqw; min-height: 8cqw; }
.f-ligar > .f-lig-c:nth-child(5n + 1) { justify-content: flex-end; text-align: right; }
.f-ligar .f-text { font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 2.8cqw; }
.f-dot { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #111; flex: none; }

/* verdadeiro ou falso */
.f-vf-list { display: grid; gap: 2.4cqw; }
.f-vf { display: flex; align-items: center; gap: 1.6cqw; }
.f-vf-box { width: 5.5cqw; height: 5cqw; border: .25cqw solid #222; border-radius: .8cqw; flex: none; }

/* sequência */
.f-seq-list { display: grid; gap: 2.4cqw; }
.f-seq { display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.f-seq-box { min-width: 9cqw; height: 8cqw; padding: 0 1cqw; border: .25cqw solid #222; border-radius: 1cqw; display: inline-grid; place-items: center; font-size: 3.4cqw; }
.f-seq-box.vazio { background: #f6f6f6; border-style: dashed; }

/* escrever */
.f-boxes { display: flex; flex-wrap: wrap; gap: .5cqw; }
.f-boxes i { width: 4.6cqw; height: 5.4cqw; border: .25cqw solid #222; }
.f-lines { display: grid; gap: 4.5cqw; margin-top: 3cqw; }
.f-lines i { display: block; border-bottom: .2cqw solid #555; }

/* caça-palavras */
.f-caca { border-collapse: collapse; margin: 0 auto 3cqw; }
.f-caca td { width: calc(72cqw / var(--n)); height: calc(72cqw / var(--n)); border: .15cqw solid #666; text-align: center; font-size: calc(38cqw / var(--n)); padding: 0; }
.f-caca.mini { margin: 1cqw 0 0; }
.f-caca.mini td { width: calc(40cqw / var(--n)); height: calc(40cqw / var(--n)); font-size: calc(22cqw / var(--n)); }
.f-caca td.on { background: #ffe066; }

/* pintar figuras */
.f-mark { display: grid; justify-items: center; gap: .6cqw; padding: 1.4cqw; border: .2cqw dashed #bbb; border-radius: 1.6cqw; }
.f-mark small { font-size: 1.9cqw; font-weight: 700; }

/* desenhar */
.f-draw { display: grid; gap: 1.2cqw; }
.f-draw-box { height: 30cqw; border: .25cqw solid #222; border-radius: 1.6cqw; }

/* gabarito */
.f-gab-title { font-family: Arial, sans-serif; font-size: 3cqw; text-align: center; margin: 0 0 3cqw; letter-spacing: 0; }
.f-gab-bloco { display: flex; gap: 1.6cqw; align-items: flex-start; font-size: 2.4cqw; padding: 1.6cqw 0; border-bottom: .15cqw solid #ddd; }
.f-gab-items { display: flex; flex-wrap: wrap; gap: .8cqw 2.8cqw; }
.f-gab-items span { display: inline-flex; align-items: center; gap: .6cqw; }
.f-gab-page .f-border { min-height: 0; }

/* formulário: estilo, tipos e sugestões de tema */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg button { border: 1.5px solid var(--line); background: var(--paper); border-radius: var(--radius-md); padding: 9px; font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--ink-2); }
.seg button.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
.group-label { font-weight: 600; font-size: .86rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex !important; align-items: center; gap: 5px !important; border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 5px 11px; cursor: pointer; font-weight: 600 !important; font-size: .8rem !important; background: var(--paper); color: var(--ink-2); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
.chip:has(input:focus-visible) { box-shadow: var(--focus); }
button.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.sugestoes { margin-top: -8px; }

@media (max-width: 860px) { .folha-wrap { padding: 10px; gap: 12px; } }

@media print {
  @page { size: A4; margin: 8mm; }
  .folha-wrap { padding: 0; background: none; display: block; }
  .f-page { box-shadow: none; border-radius: 0; padding: 0; min-height: 0; break-after: page; }
  .f-page:last-child { break-after: auto; }
  .f-border { min-height: 272mm; }
  .f-gab-page .f-border { min-height: 0; }
  .f-caca td.on, .f-seq-box.vazio, .f-head th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- CABEÇALHO DA ESCOLA (--u: 1cqw na folha; px no plano) ---------- */
.esc-head { --u: 7px; font-family: Arial, Helvetica, sans-serif; color: #111; margin: 0 0 calc(var(--u) * 3); line-height: 1.3; }
.f-page .esc-head { --u: 1cqw; margin-bottom: 2.4cqw; }
.esc-preview .esc-head { --u: 4.6px; margin: 0; }
.esc-box { border: calc(var(--u) * .2) solid #444; }
.esc-top { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); }
.esc-logo { width: calc(var(--u) * 10); height: calc(var(--u) * 10); object-fit: contain; flex: none; }
.esc-logo-par { width: calc(var(--u) * 10); flex: none; } /* equilibra a logo para o nome ficar centralizado */
.esc-nome { flex: 1; text-align: center; display: grid; gap: calc(var(--u) * .3); font-size: calc(var(--u) * 2.1); }
.esc-nome strong { font-weight: 800; }
.esc-nome span { font-size: calc(var(--u) * 1.8); color: #333; }
.esc-linha { display: flex; border-top: calc(var(--u) * .2) solid #444; }
.esc-top + .esc-linha { border-top-width: calc(var(--u) * .2); }
.esc-box > .esc-linha:first-child { border-top: 0; }
.esc-linha > div { flex: 1; padding: calc(var(--u) * .7) calc(var(--u) * 1.1); font-size: calc(var(--u) * 2); min-height: calc(var(--u) * 3.6); }
.esc-linha > div + div { border-left: calc(var(--u) * .2) solid #444; }
.esc-titulo { text-align: center; font-weight: 800; font-size: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 2); letter-spacing: .02em; }
.doc .esc-head { margin-bottom: 28px; }

/* ---------- TELA MINHAS ESCOLAS ---------- */
.esc-intro { color: var(--ink-2); max-width: 68ch; margin: -6px 0 20px; }
.esc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; }
.esc-card { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.esc-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.esc-card img, .esc-card-sem { width: 48px; height: 48px; object-fit: contain; flex: none; border-radius: var(--radius-md); background: var(--paper); display: grid; place-items: center; font-size: 1.5rem; }
.esc-card > span:nth-of-type(1), .esc-card > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.esc-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-card small { color: var(--ink-3); }
.esc-card-edit { color: var(--brand); font-weight: 600; font-size: .85rem; flex: none !important; }
.esc-vazio { grid-column: 1 / -1; padding: 22px; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); text-align: center; background: var(--card); }
.esc-editor { display: grid; gap: 16px; }
.esc-editor h2 { font-size: 1.3rem; }
.esc-drop { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 26px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; }
.esc-drop:hover, .esc-drop.over { border-color: var(--brand); background: var(--brand-soft); }
.esc-drop svg { width: 34px; height: 34px; color: var(--brand); }
.esc-drop span { color: var(--ink-3); font-size: .88rem; }
.esc-drop.cheio { opacity: .5; pointer-events: none; }
.esc-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.esc-files:empty { display: none; }
.esc-files li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.esc-file-ic { width: 34px; height: 34px; border-radius: var(--radius-sm); background: #2b579a; color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.esc-file-nome { flex: 1; min-width: 0; display: grid; font-weight: 600; overflow-wrap: anywhere; }
.esc-file-nome small { color: var(--ink-3); font-weight: 400; }
.esc-status { margin: 0; font-size: .9rem; color: var(--ink-2); }
.esc-status:empty { display: none; }
.esc-status.ok { color: var(--green); font-weight: 600; }
.esc-status.erro { color: var(--coral); font-weight: 600; }
.esc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.esc-form { display: grid; gap: 14px; }
.esc-form label { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; }
.esc-form input, .esc-form textarea { width: 100%; border: 1.5px solid var(--line); background: var(--paper); border-radius: var(--radius-md); padding: 10px 12px; font-size: .93rem; font-weight: 400; resize: vertical; }
.esc-form input:focus, .esc-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); background: var(--card); }
.esc-form > .btn { justify-self: start; }
.esc-logo-row { display: flex; align-items: center; gap: 14px; }
.esc-logo-box { width: 72px; height: 72px; border: 1.5px dashed var(--line); border-radius: var(--radius-md); display: grid; place-items: center; font-size: .75rem; color: var(--ink-3); background: var(--paper); flex: none; overflow: hidden; }
.esc-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.esc-logo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.esc-prev-wrap { display: grid; gap: 8px; position: sticky; top: 16px; }
.esc-preview { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow); }
.esc-hint { font-size: .82rem; color: var(--ink-3); margin: 0; }
.esc-actions { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.esc-excluir { margin-left: auto; color: var(--coral); }
@media (max-width: 900px) { .esc-grid { grid-template-columns: 1fr; } .esc-prev-wrap { position: static; } .esc-excluir { margin-left: 0; } }

/* ---------- SLIDES (16:9; tamanhos em cqw do próprio slide) ---------- */
.quick-grid { grid-template-columns: repeat(4, 1fr); }
.q-slides .q-icon { background: var(--coral-soft); color: var(--coral); }
@media (max-width: 1100px) { .quick-grid { grid-template-columns: repeat(2, 1fr); } }

.slides-wrap { padding: 24px; background: var(--paper-2); display: grid; gap: 22px; }
.sl-card { margin: 0; display: grid; gap: 8px; }
.sl { container-type: inline-size; aspect-ratio: 16 / 9; width: 100%; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow); position: relative; color: var(--ink); font-family: var(--font-body); }
.sl-in { position: absolute; inset: 0; padding: 5cqw 6cqw; display: flex; align-items: center; gap: 4cqw; }
.sl h2, .sl h3 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.sl h3 { font-size: 4.4cqw; margin-bottom: 2.4cqw; }
.sl p { margin: 0 0 2cqw; font-size: 2.3cqw; color: var(--ink-2); line-height: 1.4; }
.sl ul, .sl ol { margin: 0; padding-left: 3cqw; display: grid; gap: 1.4cqw; font-size: 2.6cqw; line-height: 1.35; }
.sl li::marker { color: var(--brand); font-weight: 800; }
.sl-main { flex: 1; min-width: 0; }
.sl-fig { width: 22cqw; height: 22cqw; object-fit: contain; flex: none; }
.sl-fig.xl { width: 26cqw; height: 26cqw; }
.sl-fig.md { width: 11cqw; height: 11cqw; }
.sl-fig-txt { display: inline-grid; place-items: center; font-size: 17cqw; line-height: 1; }
.sl-fig-txt.xl { font-size: 20cqw; } .sl-fig-txt.md { font-size: 8.5cqw; }
.sl-num { position: absolute; right: 3cqw; bottom: 2.2cqw; font-size: 1.5cqw; color: #9ca3af; font-weight: 600; }

.sl-top { border-left: 1.5cqw solid var(--brand); }
.sl-capa { background: var(--brand); color: #fff; border-bottom: 3cqw solid var(--mark); }
.sl-capa-txt { flex: 1; min-width: 0; }
.sl-capa h2 { font-size: 6.4cqw; color: #fff; }
.sl-capa p { color: #e0e7ff; font-size: 2.8cqw; margin-top: 2cqw; }
.sl-escola { display: flex; align-items: center; gap: 1.6cqw; margin-top: 5cqw; font-weight: 700; font-size: 2cqw; color: #fff; }
.sl-escola img { width: 7cqw; height: 7cqw; object-fit: contain; background: #fff; border-radius: 1.2cqw; padding: .5cqw; }
.sl-destaque { background: var(--mark-soft); flex-direction: column; justify-content: center; text-align: center; gap: 1.5cqw; }
.sl-destaque .sl-rot { font-size: 1.9cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b5200; }
.sl-destaque p { font-family: var(--font-display); font-weight: 800; font-size: 5cqw; color: var(--ink); max-width: 80%; line-height: 1.15; margin: 0; }
.sl-cols { flex-direction: column; align-items: stretch; justify-content: center; border-left: 1.5cqw solid var(--brand); gap: 0; }
.sl-cols-g { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.sl-col { border-radius: 2cqw; padding: 2.6cqw 3cqw; }
.sl-col.a { background: var(--brand-soft); } .sl-col.b { background: var(--mark-soft); }
.sl-col strong { display: block; font-family: var(--font-display); font-size: 3cqw; margin-bottom: 1.4cqw; }
.sl-col ul { font-size: 2.3cqw; }
.sl-badge { display: inline-block; background: var(--mark); color: var(--ink); font-weight: 800; font-size: 1.6cqw; letter-spacing: .06em; padding: .6cqw 1.8cqw; border-radius: var(--radius-pill); margin-bottom: 1.8cqw; }
.sl-fim { background: var(--green-soft); }
.sl-fim h3 { color: var(--green); font-size: 5cqw; }
.sl-fim ul.check { list-style: none; padding-left: 0; }
.sl-fim ul.check li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 1.4cqw; }
.sl-notas { font-size: .88rem; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; line-height: 1.5; }

/* modo apresentação */
.sl-show { position: fixed; inset: 0; z-index: 200; background: #0b0b14; display: grid; grid-template-rows: 1fr auto; cursor: pointer; }
.sl-show-stage { display: grid; place-items: center; padding: 2vh 2vw 0; min-height: 0; }
.sl-show .sl { width: min(96vw, calc((100vh - 70px) * 16 / 9)); border-radius: 0; box-shadow: none; }
.sl-show-bar { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 12px; color: #cbd5e1; font-weight: 600; }
.sl-show-bar button { background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 6px 16px; font-size: 1rem; cursor: pointer; }
.sl-show-bar button:hover { background: rgba(255,255,255,.2); }

@media (max-width: 860px) { .slides-wrap { padding: 10px; gap: 14px; } }
@media print {
  @page slides { size: A4 landscape; margin: 8mm; }
  .slides-wrap { padding: 0; background: none; display: block; }
  .sl-card { page: slides; break-after: page; display: block; }
  .sl-card:last-child { break-after: auto; }
  .sl { box-shadow: none; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sl * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sl-notas { display: none; }
}

/* ---------- DATAS COMEMORATIVAS ---------- */
.datas-filtro { margin-bottom: 18px; }
.chip.ativo { border-color: var(--brand); background: var(--brand); color: #fff; }
.datas-lista { display: grid; gap: 14px; }
.data-card { display: flex; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.data-dia { flex: none; width: 70px; height: 78px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-2); display: grid; place-items: center; align-content: center; line-height: 1; gap: 3px; }
.data-dia strong { font-family: var(--font-display); font-size: 1.9rem; }
.data-dia span { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
.data-dia small { font-size: .72rem; color: var(--ink-3); }
.data-info { flex: 1; min-width: 0; display: grid; gap: 6px; }
.data-info h3 { font-size: 1.15rem; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.data-info h3 img { width: 26px; height: 26px; }
.data-info > p { color: var(--ink-2); font-size: .94rem; }
.data-tag { font-family: var(--font-body); font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); letter-spacing: 0; }
.data-tag.feriado { background: var(--coral-soft); color: #9f2d1a; }
.data-tag.em { background: var(--mark-soft); color: #6b5200; }
.data-ideias-t { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-top: 4px; }
.data-ideias { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: .93rem; }
.data-ideias li::marker { color: var(--brand); }
.data-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.data-acoes > span { font-size: .82rem; font-weight: 600; color: var(--ink-3); margin-right: 2px; }

.prox-data { display: flex; align-items: center; gap: 14px; background: var(--mark-soft); border: 1px solid #f5e3a3; border-radius: var(--radius); padding: 12px 18px; margin: -10px 0 20px; text-decoration: none; transition: transform .15s; }
.prox-data:hover { transform: translateY(-1px); }
.prox-data img { width: 34px; height: 34px; flex: none; }
.prox-data span { display: grid; flex: 1; min-width: 0; }
.prox-data small { color: #6b5200; font-weight: 600; font-size: .78rem; }
.prox-data strong { font-size: 1rem; }
.prox-data em { font-style: normal; font-weight: 700; color: var(--brand); font-size: .9rem; white-space: nowrap; }
@media (max-width: 640px) { .data-card { flex-direction: column; } .data-dia { width: auto; height: auto; grid-auto-flow: column; justify-content: start; gap: 8px; padding: 8px 12px; } }

/* ditado por voz */
.ditado-wrap { position: relative; display: block; }
.ditado-wrap textarea { padding-right: 52px !important; }
.mic { position: absolute; right: 8px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.mic svg { width: 18px; height: 18px; }
.mic:hover { background: var(--brand); color: #fff; }
.mic.gravando { background: var(--coral); color: #fff; animation: mic-pulso 1.2s ease-in-out infinite; }
@keyframes mic-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 85, 61, .45); } 50% { box-shadow: 0 0 0 8px rgba(226, 85, 61, 0); } }
.mic-status { font-size: .8rem; color: var(--coral); font-weight: 600; }
.mic-status:empty { display: none; }

/* ---------- QUIZ E JOGOS ---------- */
.type-tabs button { font-size: .84rem; padding-left: 2px; padding-right: 2px; }
.modo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl { position: relative; display: flex !important; align-items: center; gap: 8px !important; border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 9px 10px; cursor: pointer; font-weight: 600 !important; font-size: .84rem !important; background: var(--paper); line-height: 1.25; }
.tpl input { position: absolute; opacity: 0; pointer-events: none; }
.tpl span:first-of-type { font-size: 1.15rem; }
.tpl:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
.tpl:has(input:focus-visible) { box-shadow: var(--focus); }

.jogos-wrap { display: grid; gap: 16px; padding: 20px; background: var(--paper-2); }
.jg-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 20px; }
.jg-topo h2 { font-size: 1.35rem; margin-top: 4px; }
.jg-modo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.jg-prev { display: grid; gap: 12px; }
.jg-dica-prof { font-size: .85rem; color: var(--ink-3); font-weight: 600; margin: 0; }
.jg-q-prev { border-top: 1px solid var(--line); padding-top: 10px; }
.jg-q-prev .jg-alts { margin-top: 6px; }
.jg-alts { margin: 0; padding-left: 0; list-style: none; counter-reset: alt; display: grid; gap: 4px; }
.jg-alts li { counter-increment: alt; }
.jg-alts li::before { content: counter(alt, lower-alpha) ") "; font-weight: 700; }
.jg-alts.maius li::before { content: "(" counter(alt, upper-alpha) ") "; }
.jg-alts li.certa { color: var(--green); font-weight: 700; }
.jg-pares { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.jg-pares div { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: var(--radius-md); padding: 8px 12px; font-weight: 600; }
.jg-emoji { width: 1.6em; height: 1.6em; vertical-align: middle; }
.jg-lista { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.so-print { display: none; }
.jogos-wrap .folha-wrap { padding: 0; background: none; }

/* prova (usa o papel das folhas: tamanhos em cqw) */
.jg-prova { display: grid; gap: 3.2cqw; }
.jg-q { break-inside: avoid; font-size: 2.3cqw; line-height: 1.45; }
.jg-q-n { margin: 0 0 1cqw; }
.jg-q-n small { font-size: 1.8cqw; color: #555; margin-left: 1cqw; }
.jg-base { border: .2cqw solid #999; border-radius: 1cqw; padding: 1.6cqw 2cqw; margin-bottom: 1.4cqw; background: #fafafa; text-align: justify; }
.jg-enun { margin: 0 0 1cqw; font-weight: 600; }
.jg-q .jg-alts { gap: .6cqw; padding-left: 1cqw; }
.jg-cartao { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6cqw 6cqw; font-size: 2.4cqw; margin-top: 2cqw; }
.jg-cart-l { display: flex; align-items: center; gap: 2cqw; }
.jg-cart-l b { width: 4cqw; }
.jg-cart-l span { width: 4.4cqw; height: 4.4cqw; border: .25cqw solid #222; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.8cqw; font-weight: 700; }
.jg-gab { font-size: 2.3cqw; padding: 1.2cqw 0; border-bottom: .15cqw solid #ddd; }
.jg-gab p { margin: .6cqw 0 0; color: #333; }
.jg-cartas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2cqw; }
.jg-carta { aspect-ratio: 3 / 4; border: .25cqw dashed #777; display: grid; place-items: center; text-align: center; padding: 1.6cqw; font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 2.6cqw; }
.jg-carta .jg-emoji.grande { width: 11cqw; height: 11cqw; }
.jg-cartelas { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.jg-cartela { border: .3cqw solid #222; border-radius: 1.6cqw; padding: 2cqw; break-inside: avoid; }
.jg-cartela-t { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 2.4cqw; margin-bottom: 1.4cqw; }
.jg-cartela-t small { font-size: 1.6cqw; color: #555; }
.jg-cartela-g { display: grid; grid-template-columns: repeat(var(--l), 1fr); border: .2cqw solid #222; }
.jg-cartela-g span { aspect-ratio: 1; border: .15cqw solid #444; display: grid; place-items: center; text-align: center; padding: .6cqw; font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 1.9cqw; overflow-wrap: anywhere; }
.jg-cartela p { font-size: 1.8cqw; margin: 1.4cqw 0 0; }
.f-page .jg-lista { font-size: 2.2cqw; gap: 1cqw; }
.jg-check { display: inline-block; width: 2.4cqw; height: 2.4cqw; border: .2cqw solid #222; border-radius: .4cqw; margin-right: 1cqw; vertical-align: middle; }

/* jogos na tela */
.jg-show { position: fixed; inset: 0; z-index: 200; background: #111128; color: #fff; overflow: auto; font-family: var(--font-body); }
.jg-show button { font: inherit; cursor: pointer; border: 0; border-radius: var(--radius-pill); padding: 10px 20px; background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.jg-show button:hover:not([disabled]) { background: rgba(255,255,255,.22); }
.jg-show button.prim { background: var(--mark); color: var(--ink); }
.jgq { min-height: 100%; display: flex; flex-direction: column; gap: 3vh; padding: 3vh 4vw; }
.jgq-top { display: flex; align-items: center; gap: 16px; font-weight: 600; color: #c7c9f5; }
.jgq-tempo { flex: 1; height: 10px; background: rgba(255,255,255,.12); border-radius: var(--radius-pill); overflow: hidden; }
.jgq-tempo i { display: block; height: 100%; width: 100%; background: var(--mark); transition: width 1s linear; }
.jgq-seg { font-family: var(--font-display); font-size: 1.6rem; min-width: 2ch; text-align: right; color: #fff; }
.jgq-base { background: rgba(255,255,255,.08); border-radius: var(--radius); padding: 2vh 2vw; font-size: clamp(1rem, 1.8vw, 1.4rem); line-height: 1.5; }
.jgq h2 { font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.15; text-align: center; }
.jgq-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 2vh 2vw; flex: 1; align-content: center; }
.jgq-alt { display: flex; align-items: center; gap: 18px; border-radius: var(--radius); padding: 3vh 2vw; font-size: clamp(1.1rem, 2.4vw, 2rem); font-weight: 700; transition: opacity .3s, transform .3s; }
.jgq-alt.c0 { background: #c0392b; } .jgq-alt.c1 { background: #1f5fbf; } .jgq-alt.c2 { background: #b7791f; } .jgq-alt.c3 { background: #2f855a; } .jgq-alt.c4 { background: #6b46c1; }
.jgq-l { width: 2em; height: 2em; border-radius: var(--radius-md); background: rgba(255,255,255,.25); display: grid; place-items: center; flex: none; }
.jgq-alt.apagada { opacity: .25; }
.jgq-alt.certa { transform: scale(1.03); box-shadow: 0 0 0 5px #fff; }
.jgq-exp { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 2vh 2vw; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 600; text-align: center; }
.jgq-bar, .jgf-bar { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.jgq-fim { align-items: center; justify-content: center; text-align: center; }
.jgq-fim p { font-size: 1.4rem; color: #c7c9f5; }
.jgm { min-height: 100%; display: flex; flex-direction: column; gap: 2vh; padding: 3vh 3vw; }
.jgm-top { display: flex; align-items: center; gap: 16px; }
.jgm-top h2 { flex: 1; text-align: center; font-size: clamp(1.2rem, 2.6vw, 2rem); }
.jgm-eq { background: rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 10px 18px; font-weight: 700; display: flex; gap: 12px; align-items: center; border: 3px solid transparent; }
.jgm-eq b { font-family: var(--font-display); font-size: 1.8rem; color: var(--mark); }
.jgm-eq.vez { border-color: var(--mark); }
.jgm-g { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 1.4vh 1.2vw; flex: 1; }
.jgm-c.jgm-c { border-radius: var(--radius); padding: 0; min-height: 13vh; background: var(--brand); position: relative; display: grid; place-items: center; }
.jgm-v { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.4rem); color: rgba(255,255,255,.55); }
.jgm-f { display: none; color: var(--ink); font-family: "Andika", var(--font-body); font-weight: 700; font-size: clamp(.9rem, 1.7vw, 1.4rem); padding: 8px; text-align: center; }
.jgm-f .jg-emoji.grande { width: 8vh; height: 8vh; }
.jgm-c.aberta { background: #fff; }
.jgm-c.aberta .jgm-v { display: none; }
.jgm-c.aberta .jgm-f { display: block; }
.jgm-c.feita { background: #dcfce7; box-shadow: inset 0 0 0 4px #16a34a; }
.jgm-vez { text-align: center; font-size: 1.3rem; }
.jgf { min-height: 100%; display: flex; flex-direction: column; gap: 3vh; padding: 3vh 4vw; }
.jgf-top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #c7c9f5; }
.jgf-meio { display: flex; align-items: center; justify-content: center; gap: 5vw; flex: 1; flex-wrap: wrap; }
.jgf-boneco { width: min(30vw, 260px); color: #fff; }
.jgf-jogo { display: grid; gap: 3vh; justify-items: center; }
.jgf-dica { font-size: clamp(1.1rem, 2.2vw, 1.7rem); background: rgba(255,255,255,.1); padding: 12px 20px; border-radius: var(--radius-md); margin: 0; }
.jgf-palavra { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.jgf-palavra span { width: clamp(34px, 5vw, 64px); height: clamp(44px, 6.5vw, 80px); border-bottom: 5px solid #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 3.2rem); }
.jgf-msg { font-size: 1.3rem; margin: 0; }
.jgf-teclado { display: grid; grid-template-columns: repeat(13, 1fr); gap: 8px; max-width: 900px; width: 100%; margin: 0 auto; }
.jg-show .jgf-teclado button { border-radius: var(--radius-md); padding: 12px 0; font-size: 1.2rem; font-weight: 800; }
.jgf-teclado button.ok { background: #16a34a; }
.jgf-teclado button.erro { background: #b91c1c; }
.jgf-teclado button[disabled] { opacity: .5; cursor: default; }
@media (max-width: 700px) { .jgq-alts { grid-template-columns: 1fr; } .jgf-teclado { grid-template-columns: repeat(7, 1fr); } }

@media print {
  .so-tela { display: none !important; }
  .so-print { display: block !important; }
  .jogos-wrap { padding: 0; background: none; display: block; }
}

/* ===================== NOVO PAINEL (catálogo, aulas, materiais) ===================== */
.ic { width: 28px; height: 28px; flex: none; }
.ic.grande { width: 48px; height: 48px; }

/* topo: busca, assinar, saldo */
.busca { position: relative; flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 0 14px; }
.busca > svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.busca input { border: 0; background: none; font: inherit; padding: 10px 0; width: 100%; outline: none; }
.busca:focus-within { border-color: var(--brand); box-shadow: var(--focus); }
.busca-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(30, 42, 58, .14); padding: 8px; z-index: 40; max-height: 70vh; overflow: auto; }
.busca-res small { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 8px 10px 4px; }
.busca-res a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 500; }
.busca-res a .ic { width: 22px; height: 22px; }
.busca-res a em { margin-left: auto; font-style: normal; font-size: .78rem; color: var(--ink-3); }
.busca-res a:hover { background: var(--paper); }
.busca-res p { padding: 10px; color: var(--ink-3); margin: 0; }
.topbar .demo-badge { margin-left: auto; }
.btn.premium { margin-left: auto; } /* contorno: o laranja da tela é do "Criar aula completa" */
.demo-badge:not([hidden]) + .btn.premium { margin-left: 0; }
.saldo-pill { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 7px 12px; text-decoration: none; color: #b45309; font-weight: 700; background: var(--card); }
.saldo-pill.baixo { color: var(--coral); border-color: var(--coral); }

/* faixas de boas-vindas */
.banner { position: relative; display: flex; align-items: center; gap: 22px; border-radius: var(--radius-lg); padding: 22px 28px; margin: 6px 0 26px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.banner::after { content: ""; position: absolute; right: -10px; top: -10px; width: 180px; height: 120px; pointer-events: none; background-image: radial-gradient(var(--verde) 1.2px, transparent 1.3px); background-size: 12px 12px; opacity: .18; -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 80%); mask-image: linear-gradient(225deg, #000 30%, transparent 80%); }
.banner .btn { position: relative; z-index: 1; flex: none; margin-left: auto; }
.banner-cta { white-space: nowrap; }
.banner h1 { font-size: 1.6rem; margin: 0 0 6px; color: var(--brand-2); }
.banner p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.banner-art { width: 72px; height: 72px; flex: none; display: grid; place-items: center; background: var(--brand-soft); border-radius: 20px; }
.banner-art img { width: 58px; }
.b-aulas { background: linear-gradient(90deg, #fdf3e7, var(--brand-soft)); }
.b-aval { background: linear-gradient(90deg, #fdf3e7, #fdeef4); }
.btn-cta { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ctl-lg); padding: 0 28px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; box-shadow: var(--shadow-accent); transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.btn-cta:hover { transform: translateY(-1px); }
.btn-cta:hover { background: var(--accent-2); box-shadow: 0 10px 24px -10px rgba(194, 65, 12, .6); }

.sec-t { font-size: 1rem; font-weight: 600; color: var(--ink-2); margin: 0 0 12px; font-family: "Instrument Sans", sans-serif; }
.sec-t small { color: var(--ink-3); font-weight: 400; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 30px; }
.sec-head a { color: var(--ink-3); font-size: .88rem; text-decoration: none; }
.sec-head a:hover { color: var(--brand); }

.tools-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 18px; }
.tool-mini { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 14px 6px; border-radius: var(--radius); text-decoration: none; color: var(--brand-2); font-weight: 600; font-size: .86rem; transition: background .15s, transform .15s; }
.tool-mini .ic { width: 36px; height: 36px; }
.tool-mini:hover { background: var(--card); transform: translateY(-2px); }
.tool-mini.mais { color: #db2777; }

/* cartões de aulas */
.aula-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.aula-cards .ap-vazio, .mat-cards .ap-vazio, .tool-grid .ap-vazio { grid-column: 1 / -1; }
.aula-card { display: grid; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.aula-card:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(13, 148, 136, .12); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags em { font-style: normal; font-size: .75rem; font-weight: 600; background: var(--brand-soft); color: var(--brand-2); padding: 3px 9px; border-radius: var(--radius-pill); }
.tags em.d { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); }
.aula-rod { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--ink-3); }
.aula-rod b:last-child { margin-left: auto; color: var(--ink-2); }
.aula-rod .gerando { color: #b45309; }

/* cartões de materiais */
.mat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mat { --tom: #f1f3f7; --ic: #e2e6ee; position: relative; display: flex; gap: 12px; align-items: center; background: var(--tom); border-radius: var(--radius); padding: 12px; cursor: pointer; min-width: 0; transition: transform .15s, box-shadow .15s; }
.mat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 42, 58, .08); }
.mat-ic { width: 60px; height: 60px; flex: none; border-radius: var(--radius-md); background: var(--ic); display: grid; place-items: center; font-size: 1.6rem; }
.mat-ic .ic { width: 32px; height: 32px; }
.mat-t { display: grid; gap: 2px; min-width: 0; }
.mat-t small { font-size: .74rem; color: var(--ink-3); }
.mat-t strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-t span { font-size: .74rem; color: var(--ink-3); }
.mat-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; opacity: 0; }
.mat:hover .mat-del, .mat:focus-within .mat-del { opacity: 1; }
/* um só tom para os materiais: cartão branco, ícone verde */
.g-plano, .g-slides, .g-atividade, .g-prova, .g-jogo, .g-outro { --tom: var(--card); --ic: var(--brand-soft); }
.mat { border: 1px solid var(--line); }
.mat-ic { color: var(--brand-2); }
.mat.carregando { cursor: default; opacity: .75; }
.mat.erro { --tom: #fdecea; --ic: #fbd5cf; cursor: default; }
.spin { width: 22px; height: 22px; border: 3px solid rgba(30, 42, 58, .15); border-top-color: var(--brand); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.link { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }
.link.perigo { color: var(--coral); }

.filtros { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
#mat-filtro, #aval-filtro { margin-bottom: 16px; }
.chip.ativo { border-color: var(--ink-2); background: var(--ink-2); color: #fff; }

/* uma aula */
.voltar-link { display: inline-flex; gap: 6px; color: var(--ink-2); text-decoration: none; font-size: .9rem; padding: 10px 14px; background: var(--card); border-radius: var(--radius-md); margin: 6px 0 12px; }
.voltar-link:hover { color: var(--brand); }
.aula-top { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; display: grid; gap: 10px; }
.aula-top h1 { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: 6px; }
.aula-top h1 .icon-btn { margin: 0; }
.aula-del { position: absolute; top: 16px; right: 16px; color: var(--coral); }
.bloco { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
.bloco h2 { font-size: 1rem; margin: 0; font-family: "Instrument Sans", sans-serif; }
.bloco > p { color: var(--ink-3); font-size: .86rem; margin: 4px 0 12px; }
.bloco-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.bloco-rod { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.add-mat { position: relative; display: inline-flex; align-items: center; background: var(--paper-2); border-radius: var(--radius-md); padding: 7px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.add-mat select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.add-bloco { width: 100%; border: 0; background: var(--paper-2); border-radius: var(--radius); padding: 14px; font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.add-bloco:hover { background: var(--line); }

/* Criar com IA */
#view-criar:not([hidden]) { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.cat-bar { position: sticky; top: 12px; }
.cat-bar h1 { font-size: 1.3rem; margin: 6px 0 14px; }
.criar-busca { width: 100%; font: inherit; border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 10px 16px; margin-bottom: 12px; background: var(--card); }
.criar-busca:focus { outline: none; border-color: var(--brand); }
.cat-lista { display: grid; gap: 2px; }
.cat { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--ink-2); text-align: left; padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer; }
.cat img { width: 18px; height: 18px; }
.cat:hover { background: var(--card); }
.cat.ativo { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.criar-main .sec-t { margin-top: 18px; }
.criar-main .sec-t:first-child { margin-top: 6px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tool-card { position: relative; display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 40px 14px 14px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.tool-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(15, 118, 110, .1); transform: translateY(-1px); }
.tool-ic { width: 54px; height: 54px; flex: none; display: grid; place-items: center; background: var(--paper); border-radius: var(--radius-md); }
.tool-ic .ic { width: 32px; height: 32px; }
.tool-txt { display: grid; gap: 3px; min-width: 0; }
.tool-txt strong { font-size: .95rem; }
.tool-txt small { color: var(--ink-3); font-size: .8rem; line-height: 1.35; }
.star { position: absolute; top: 8px; right: 8px; border: 0; background: none; font-size: 1.15rem; color: #d4d4dc; cursor: pointer; line-height: 1; padding: 4px; }
.star:hover { color: #f59e0b; }
.star.on { color: #f59e0b; }

/* cabeçalho da ferramenta no formulário */
.tool-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.tool-head h1 { font-size: 1.15rem; margin: 0; font-family: "Instrument Sans", sans-serif; }
.tool-head p { margin: 2px 0 0; color: var(--ink-3); font-size: .84rem; }
.tool-head .voltar-link { grid-column: 1 / -1; justify-self: start; padding: 4px 0; margin: 0; background: none; font-size: .82rem; }
.tool-head .aula-volta { color: var(--brand-2); font-weight: 600; }
#tool-campos { display: grid; gap: 16px; }
#tool-campos:empty { display: none; }
.gen-btn .custo { font-size: .78rem; opacity: .85; font-weight: 600; margin-left: 4px; }

/* BNCC, anexo, inclusão */
.extras { display: grid; gap: 12px; }
.bncc-box { border: 1px solid #cfe7e5; background: var(--brand-soft); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 8px; }
.bncc-t { font-weight: 600; font-size: .86rem; color: var(--brand-2); }
.hab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hab { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #cfe7e5; border-radius: var(--radius-sm); padding: 3px 4px 3px 9px; font-size: .8rem; font-weight: 600; }
.hab button { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 1rem; line-height: 1; padding: 0 4px; }
.hab-add { display: flex; gap: 6px; }
.hab-add input { flex: 1; min-width: 0; }
.gen-form .anexo { position: relative; display: grid; gap: 2px; border: 1.5px dashed var(--line); border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; background: var(--paper); font-weight: 400; }
.anexo small { color: var(--ink-3); font-size: .78rem; }
.anexo.tem { border-color: var(--green); background: var(--green-soft); }
.anexo.tem small { color: var(--green); font-weight: 600; }
.anexo.sobre { border-color: var(--brand); background: var(--brand-soft); }
.anexo-x { position: absolute; top: 8px; right: 8px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink-3); }
.incl { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; display: grid; gap: 10px; background: var(--paper); }
.incl[open] { gap: 10px; }
.incl summary { cursor: pointer; font-weight: 600; font-size: .86rem; }
.incl > * + * { margin-top: 8px; }

/* chips grandes (apresentação e configurações) */
.pchip { position: relative; display: inline-flex; cursor: pointer; }
.pchip input { position: absolute; opacity: 0; pointer-events: none; }
.pchip span { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 9px 16px; font-weight: 600; font-size: .92rem; background: var(--card); transition: border-color .12s, background .12s; }
.pchip span img { width: 18px; height: 18px; }
.pchip:hover span { border-color: var(--ink-3); }
.pchip input:checked + span { border-color: #f59e0b; background: #fff8eb; color: #b45309; }
.pchip input:focus-visible + span { box-shadow: var(--focus); }

/* configurações */
.conf-top .avatar.grande { width: 80px; height: 80px; font-size: 2rem; }
.conf { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 10px; }
.conf h2 { font-size: .92rem; font-family: "Instrument Sans", sans-serif; margin: 18px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.conf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.conf label { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; }
.conf input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.conf input:disabled { color: var(--ink-3); }
.chips-p { display: flex; flex-wrap: wrap; gap: 8px; }
.conf-acoes { margin-top: 12px; }
.conf-conta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conf-conta div { display: grid; margin-right: auto; }
.conf-conta span { color: var(--ink-3); font-size: .86rem; }

/* janela Criar aula completa */
.modal { border: 0; padding: 0; border-radius: var(--radius-lg); width: min(640px, calc(100% - 32px)); box-shadow: var(--shadow-modal); }
.modal::backdrop { background: var(--scrim); }
.modal-box { display: grid; max-height: 90vh; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #fff3e4; }
.modal-head h2 { font-size: 1.25rem; color: #d97706; margin: 0; }
.modal-body { padding: 18px 20px; display: grid; gap: 14px; overflow: auto; }
.modal-body label { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; }
.modal-body input:not([type=radio]):not([type=checkbox]), .modal-body select, .modal-body textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--paper); width: 100%; }
.modal-body .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.na-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.na-modo label { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; }
.na-modo label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.na-modo span { display: grid; }
.na-modo small { color: var(--ink-3); font-weight: 400; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-foot .opt { margin-right: auto; font-size: .85rem; }
.modal-foot .btn-primary { background: var(--accent); box-shadow: none; }

/* mapa mental */
.doc.doc-mapa { max-width: none; }
.mm { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 10px 0; }
.mm-lado { display: grid; gap: 16px; }
.mm-centro strong { display: block; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 18px 22px; font-family: var(--font-display); font-size: 1.25rem; text-align: center; max-width: 220px; }
.mm-ramo { border: 2px solid var(--cor); border-radius: var(--radius-md); background: color-mix(in srgb, var(--cor) 7%, #fff); padding: 10px 14px; position: relative; }
.mm-lado.esq .mm-ramo::after, .mm-lado.dir .mm-ramo::before { content: ""; position: absolute; top: 50%; width: 28px; border-top: 2px solid var(--cor); }
.mm-lado.esq .mm-ramo::after { right: -30px; }
.mm-lado.dir .mm-ramo::before { left: -30px; }
.mm-no { font-weight: 700; color: var(--cor); margin-bottom: 4px; }
.mm-ramo ul { margin: 0; padding-left: 18px; font-size: .9rem; }
.mm-ramo ul ul { font-size: .84rem; color: var(--ink-2); }
@media (max-width: 760px) { .mm { grid-template-columns: 1fr; } .mm-centro { order: -1; justify-self: center; } .mm-ramo::before, .mm-ramo::after { display: none; } }
@media print { .mm-ramo, .mm-centro strong { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; } }

/* palavra-cruzada */
.cz-grid { border-collapse: collapse; margin: 2cqw auto 3cqw; }
.cz-grid td { width: var(--cel); height: var(--cel); padding: 0; position: relative; text-align: center; vertical-align: middle; font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: calc(var(--cel) * .55); }
.cz-grid td.cz-on { border: .2cqw solid #222; background: #fff; }
.cz-grid sup { position: absolute; top: .2cqw; left: .4cqw; font-size: calc(var(--cel) * .3); font-weight: 700; line-height: 1; }
.cz-pistas { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; font-size: 2.1cqw; }
.cz-pistas h4 { margin: 0 0 1cqw; font-size: 2.3cqw; }
.cz-pistas ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .8cqw; }
.cz-pistas small { color: #666; }
/* caça-palavras */
.f-caca.gab td { font-size: calc(30cqw / var(--n)); }
.cc-lista { display: flex; flex-wrap: wrap; gap: 1.2cqw 3cqw; justify-content: center; font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 2.4cqw; }
/* caligrafia */
.cl-bloco { margin-bottom: 2.4cqw; }
.cl-linha { display: block; width: 100%; height: auto; }
.cl-g { stroke: #9aa7c7; stroke-width: 1.2; }
.cl-m { stroke-dasharray: 8 7; stroke: #c3cbe0; }
.cl-b { stroke: #e05b5b; stroke-width: 1.6; }
.cl-modelo { fill: #1b1b1b; }
.cl-tracejado { fill: none; stroke: #8a8a8a; stroke-width: 1.4; stroke-dasharray: 5 4; }
/* colorir */
.clr-nome { text-align: center; font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 4cqw; margin: 1cqw 0; letter-spacing: .1em; }
.clr-fig { width: 72cqw; aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; color: #999; font-size: 2cqw; }
.clr-fig.grande { width: 80cqw; margin-top: 6cqw; }
.clr-fig svg { width: 100%; height: 100%; }
.clr-inst { text-align: center; margin-top: 3cqw; }
/* flashcards */
.fc-lista { display: grid; gap: 0; }
.fc-par { display: grid; grid-template-columns: 1fr 1fr; border: .25cqw dashed #777; border-top-width: 0; }
.fc-par:first-child { border-top-width: .25cqw; }
.fc-par > div { min-height: 20cqw; display: grid; place-items: center; text-align: center; padding: 2cqw; font-size: 2.4cqw; position: relative; }
.fc-frente { border-right: .2cqw dotted #aaa; font-weight: 700; }
.fc-frente small { position: absolute; top: 1cqw; left: 1.4cqw; color: #999; font-weight: 400; }
/* jogo da velha */
.jv-tab { display: grid; grid-template-columns: repeat(3, 1fr); width: 70cqw; margin: 4cqw auto; }
.jv-tab span { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--font-display); font-size: 8cqw; color: #bbb; border: .6cqw solid #222; border-width: 0 .6cqw .6cqw 0; }
.jv-tab span:nth-child(3n) { border-right: 0; }
.jv-tab span:nth-child(n+7) { border-bottom: 0; }
.jv-perg { display: grid; gap: 2cqw; font-size: 2.2cqw; padding-left: 4cqw; }
.jv-resp { color: #166534; margin: .6cqw 0 0; }
/* sudoku */
.sd-grade { display: grid; gap: 5cqw; justify-items: center; margin-top: 2cqw; }
.sd-grade.n4, .sd-grade.n6 { grid-template-columns: 1fr 1fr; }
.sd-grade.gab { gap: 3cqw; grid-template-columns: repeat(auto-fill, minmax(26cqw, 1fr)); }
.sd { border-collapse: collapse; border: .5cqw solid #222; }
.sd td { width: calc(62cqw / 9); height: calc(62cqw / 9); border: .15cqw solid #999; text-align: center; font-family: "Andika", Arial, sans-serif; font-weight: 700; font-size: 3.6cqw; padding: 0; }
.sd-grade.n4 .sd td { width: 9cqw; height: 9cqw; font-size: 5cqw; }
.sd-grade.n6 .sd td { width: 6.2cqw; height: 6.2cqw; font-size: 3.4cqw; }
.sd-grade.gab .sd td { width: 2.7cqw; height: 2.7cqw; font-size: 1.6cqw; }
.sd-grade.gab.n4 .sd td { width: 5cqw; height: 5cqw; font-size: 2.6cqw; }
.sd td.bd { border-right: .5cqw solid #222; }
.sd td.bb { border-bottom: .5cqw solid #222; }
.sd td.resp { color: #2563eb; }
.sd-fig { width: 70%; height: 70%; vertical-align: middle; }
.sd-legenda { text-align: center; }
.sd-legenda .sd-fig { width: 6cqw; height: 6cqw; }

/* flashcards e jogo da velha na tela */
.jfc, .jv { width: min(1100px, 100%); height: 100%; display: flex; flex-direction: column; gap: 22px; }
.jfc-carta { flex: 1; border: 0; border-radius: var(--radius-lg); background: #fff; color: #1d1b3a; font: inherit; font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 700; cursor: pointer; padding: 40px; display: grid; place-items: center; text-align: center; transition: background .2s; }
.jfc-carta .jfc-v { display: none; color: var(--brand); }
.jfc-carta.virada { background: #ecfdf5; }
.jfc-carta.virada .jfc-f { display: none; }
.jfc-carta.virada .jfc-v { display: block; }
.jv-meio { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; }
.jv-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; aspect-ratio: 1; }
.jv-board button { border: 0; border-radius: var(--radius); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); font: inherit; font-size: clamp(1.8rem, 5vw, 4.4rem); font-weight: 800; cursor: pointer; }
.jv-board button:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.jv-board button.m { color: #fff; }
.jv-X { color: #60a5fa !important; }
.jv-O { color: #fbbf24 !important; }
.jv-board button.win { background: rgba(34, 197, 94, .35); }
.jv-q h2 { font-size: clamp(1.4rem, 2.8vw, 2.4rem); margin: 8px 0 20px; }
.jv-n { font-weight: 700; opacity: .7; }
@media (max-width: 800px) { .jv-meio { grid-template-columns: 1fr; } }

/* responsivo das telas novas */
@media (max-width: 1100px) { .tools-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) {
  #view-criar:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .cat-bar { position: static; }
  .cat-lista { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .cat { white-space: nowrap; background: var(--card); }
  .banner { flex-wrap: wrap; padding: 18px; }
  .banner-art { width: 64px; height: 64px; }
  .banner-art img { width: 40px; }
  .btn-cta { margin-left: 0; }
  .conf-grid { grid-template-columns: 1fr; }
  .btn.premium { display: none; }
  .tool-grid { grid-template-columns: 1fr; }
  .na-modo, .modal-body .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .tools-row { grid-template-columns: repeat(3, 1fr); } .busca { max-width: none; } }
@media print { .modal { display: none !important; } }

/* ===================== VISUAL ACOLHEDOR (verde-azulado + laranja) ===================== */
.content { background: var(--paper); }
.sidebar { background: #fff; }
.side-nav a.active { background: var(--brand-soft); color: var(--brand-2); }
.side-nav a.nav-criar { color: var(--accent-2); font-weight: 600; }
.side-nav a.nav-criar.active { background: var(--accent-soft); color: var(--accent-2); }
.side-label { color: var(--ink-3); }
.plan-box { background: linear-gradient(160deg, var(--brand-soft), #fdf1e3); border: 0; }
.bar i { background: var(--brand); }
.avatar { background: var(--mark); }

.banner { position: relative; min-height: 120px; }

.banner h1 { color: var(--brand-2); font-weight: 600; }
.b-inicio { background: var(--card); }

.tool-mini { color: var(--brand-2); }
.tool-mini .ic { width: 26px; height: 26px; padding: 13px; box-sizing: content-box; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--brand-2); transition: transform .2s, border-color .2s; }
.tool-mini:hover .ic { border-color: var(--brand); }
.tool-mini.mais .ic { background: var(--accent-soft); border-color: transparent; color: var(--accent-2); }
.tool-mini:hover { background: none; transform: none; }
.tool-mini:hover .ic { transform: translateY(-3px) rotate(-4deg); }
.tool-mini.mais { color: var(--accent-2); }

/* ícones das ferramentas: traço verde num quadrado claro, igual para todas (uma cor de destaque por tela) */
.tool-ic { background: var(--brand-soft); color: var(--brand-2); }
.tool-head .tool-ic { width: 60px; height: 60px; border-radius: var(--radius); display: grid; place-items: center; }
.tool-head .tool-ic .ic.grande { width: 36px; height: 36px; }
.tool-head { grid-template-columns: auto 1fr; gap: 6px 14px; }
.tool-head h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--brand-2); }
.tool-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(15, 118, 110, .12); }
.cat.ativo { background: var(--brand-soft); color: var(--brand-2); }
.cat-bar h1 { font-weight: 600; color: var(--brand-2); }

.empty-ic { width: 84px; height: 84px; margin: 0 auto 10px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--brand-soft), #fdf1e3); display: grid; place-items: center; animation: flutua-p 6s ease-in-out infinite; }
.empty-ic img { width: 44px; }
@keyframes flutua-p { 50% { translate: 0 -8px; } }
.gen-btn { font-size: 1rem; padding: 14px; }
.hist-head h1, .aula-top h1 { font-weight: 600; color: var(--brand-2); }
.sec-t { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.modal-head { background: var(--accent-soft); }
.modal-head h2 { color: var(--accent-2); font-weight: 600; }
.modal-foot .btn-primary { background: var(--accent); }
.pchip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .empty-ic, .loader-ic { animation: none; } }


/* ===================== TELA DE GERAR: pedido → resultado ===================== */
#view-gerar .gen { display: block; max-width: 760px; margin: 8px auto 0; }
#view-gerar[data-modo="resultado"] .gen { max-width: 1080px; }
#view-gerar[data-modo="form"] .gen-output { display: none; }
#view-gerar[data-modo="resultado"] .gen-form { display: none; }
#view-gerar .gen-form { position: static; padding: 28px 32px 22px; gap: 18px; }
.gen-form .gen-btn { position: sticky; bottom: 14px; z-index: 5; box-shadow: 0 10px 28px rgba(194, 65, 12, .3); }

/* Mais opções */
.mais-opcoes { border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--card); padding: 0; }
.mais-opcoes > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: .9rem; }
.mais-opcoes > summary::-webkit-details-marker { display: none; }
.mais-opcoes > summary small { color: var(--ink-3); font-weight: 500; font-size: .8rem; text-align: right; }
.mais-opcoes > summary::after { content: "▾"; color: var(--ink-3); transition: transform .2s; }
.mais-opcoes[open] > summary::after { transform: rotate(180deg); }
.mais-opcoes.tem > summary small { color: var(--green); font-weight: 700; }
.mais-corpo { display: grid; gap: 12px; padding: 0 16px 16px; }

/* Resultado */
#view-gerar .gen-output { padding: 0; overflow: visible; min-height: 0; }
.res-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.res-titulo { display: grid; gap: 4px; min-width: 0; flex: 1; }
.res-titulo small { color: var(--accent-2); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.res-titulo h2 { font-size: 1.35rem; color: var(--brand-2); font-weight: 600; overflow-wrap: anywhere; }
#view-gerar .out-toolbar { position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); padding: 10px 24px; border-bottom: 1px solid var(--line); margin: 0; border-radius: 0; }
.out-actions { flex-wrap: wrap; }
.add-aula { position: relative; }
.add-aula select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#view-gerar .doc, #view-gerar .folha-wrap, #view-gerar .slides-wrap, #view-gerar .jogos-wrap { margin: 0; }
#view-gerar .doc { padding: 32px 40px 40px; }
.doc.editando { outline: 2px dashed var(--accent); outline-offset: -10px; background: #fffdf8; cursor: text; }

/* Carregando */
.loader { display: grid; justify-items: center; gap: 12px; padding: 44px 24px 36px; text-align: center; }
.loader-ic { width: 88px; height: 88px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--brand-soft), #fdf1e3); display: grid; place-items: center; box-shadow: var(--shadow); animation: pula 1.1s ease-in-out infinite; }
.loader-ic img { width: 46px; animation: escreve 1.1s ease-in-out infinite; }
@keyframes escreve { 0%, 100% { rotate: -10deg; } 50% { rotate: 12deg; } }
@keyframes pula { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.loader p { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--brand-2); min-height: 1.5em; }
.loader-bar { width: min(320px, 80%); height: 8px; background: var(--paper-2); border-radius: var(--radius-pill); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: var(--radius-pill); animation: barra 1.4s ease-in-out infinite; }
@keyframes barra { 0% { translate: -110% 0; } 100% { translate: 260% 0; } }
.skel { width: min(620px, 100%); display: grid; gap: 12px; margin-top: 18px; }
.skel i { height: 12px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--paper-2), #f9f4ea, var(--paper-2)); background-size: 200% 100%; animation: brilho 1.4s linear infinite; }
.skel i:nth-child(1) { width: 60%; height: 18px; }
.skel i:nth-child(3) { width: 85%; } .skel i:nth-child(4) { width: 70%; } .skel i:nth-child(5) { width: 40%; }
@keyframes brilho { to { background-position: -200% 0; } }

/* Ajustar com IA */
.ajuste { display: grid; gap: 10px; margin: 0; padding: 18px 24px 22px; border-top: 1px solid var(--line); background: linear-gradient(160deg, #f3faf8, #fff8ef); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ajuste-t { font-weight: 600; font-size: .9rem; color: var(--brand-2); }
.ajuste-row { display: flex; gap: 8px; }
.ajuste-row input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.ajuste-row input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.ajuste .chips { gap: 6px; }

@media (max-width: 860px) {
  #view-gerar .gen-form { padding: 20px 16px; }
  #view-gerar .doc { padding: 22px 18px 30px; }
  .res-head, #view-gerar .out-toolbar, .ajuste { padding-left: 14px; padding-right: 14px; }
  .ajuste { position: static; }
  .ajuste-row { flex-direction: column; }
}
@media print {
  .res-head, .ajuste, .loader { display: none !important; }
  #view-gerar .gen { max-width: none; }
  #view-gerar .doc { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .loader img, .loader-bar i, .skel i { animation: none; } }

.conf label.conf-optin { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-top: 14px; }
.conf-optin input { width: 18px; height: 18px; accent-color: var(--brand); }

.loader .loader-dica { font-family: var(--font-body); font-weight: 400; min-height: 0; max-width: 46ch; margin-top: 14px; padding: 10px 16px; border-radius: var(--radius-md); background: var(--mark-soft); color: var(--ink-2); font-size: .88rem; }
.loader-dica b { color: var(--ink); }

/* busca de habilidades da BNCC */
.hab-busca { position: relative; }
.hab-res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; }
.hab-res small { display: block; padding: 6px 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.hab-res p { padding: 10px; margin: 0; color: var(--ink-3); font-size: .86rem; font-weight: 400; }
.hab-res button { display: grid; grid-template-columns: 92px 1fr; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 400; color: var(--ink-2); line-height: 1.35; }
.hab-res button b { color: var(--brand-2); font-weight: 700; }
.hab-res button:hover { background: var(--brand-soft); }
.hab-res button.ja { opacity: .45; cursor: default; }
.doc abbr.bncc-ok { text-decoration: underline dotted var(--brand); cursor: help; }
.doc mark.bncc-bad { background: var(--coral-soft); color: #9f2d1a; border-radius: 4px; padding: 0 3px; cursor: help; }
@media print { .doc mark.bncc-bad { background: none; color: inherit; } .doc abbr.bncc-ok { text-decoration: none; } }

.conf-nuvem { display: block; margin-top: 6px; font-size: .84rem; color: var(--coral); }
.conf-nuvem.ok { color: var(--green); }

.jg-versao { position: absolute; top: 1.6cqw; right: 2cqw; font-family: var(--font-display); font-weight: 700; font-size: 2.2cqw; color: #fff; background: #1e2a3a; padding: .4cqw 1.6cqw; border-radius: var(--radius-pill); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.f-border { position: relative; }
.jg-gab-tab { border-collapse: collapse; margin: 2cqw auto; font-size: 2.2cqw; }
.jg-gab-tab th, .jg-gab-tab td { border: .15cqw solid #777; padding: .8cqw 2.4cqw; text-align: center; }
.jg-gab-tab th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.ver-todas { grid-column: 1 / -1; justify-self: center; margin-top: 6px; border: 1.5px dashed var(--line); background: none; border-radius: var(--radius-md); padding: 10px 18px; font: inherit; font-weight: 600; color: var(--brand-2); cursor: pointer; }
.ver-todas:hover { border-color: var(--brand); background: var(--brand-soft); }

/* Primeiros passos */
.passos { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; margin: 0 0 22px; box-shadow: var(--shadow); }
.passos-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.passos h2 { font-size: 1.15rem; color: var(--brand-2); font-weight: 600; }
.passos-top p { color: var(--ink-3); font-size: .88rem; }
.passos-bar { height: 8px; border-radius: var(--radius-pill); background: var(--paper-2); margin: 12px 0 10px; overflow: hidden; }
.passos-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--brand), #22c55e); transition: width .6s; }
.passos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.passos li { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--radius-md); }
.passos li > div { display: grid; flex: 1; min-width: 0; }
.passos li b { font-size: .94rem; }
.passos li small { color: var(--ink-3); font-size: .8rem; }
.passos li.ok b { color: var(--ink-3); text-decoration: line-through; }
.passo-ck { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff; }
.passos li.ok .passo-ck { background: var(--green); border-color: var(--green); }

/* Menu de baixo no celular */
.bottom-nav { display: none; }
@media (max-width: 860px) {
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottom-nav a, .bottom-nav button { display: grid; justify-items: center; gap: 2px; border: 0; background: none; font: inherit; font-size: .7rem; font-weight: 600; color: var(--ink-3); text-decoration: none; padding: 4px 0; cursor: pointer; }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav a.active { color: var(--brand-2); }
  .bottom-nav .bn-criar i { width: 46px; height: 46px; margin-top: -20px; border-radius: var(--radius); background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(194, 65, 12, .35); }
  .bottom-nav .bn-criar.active { color: var(--accent-2); }
  .content { padding-bottom: 96px; }
  .gen-form .gen-btn { bottom: 82px; }
  .toast { bottom: 86px !important; }
}
@media print { .bottom-nav, .passos { display: none !important; } }

/* ===================== ACABAMENTO DO PAINEL ===================== */

/* Barra do topo gruda e ganha vidro ao rolar */
.topbar { position: sticky; top: 0; z-index: 30; margin: 0 -36px; padding: 0 36px; transition: background .25s, box-shadow .25s; }
.topbar.rolou { background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 var(--line); }
@media (max-width: 860px) { .topbar { margin: 0 -16px; padding: 0 16px; } }
.busca { transition: border-color .2s, box-shadow .25s; box-shadow: var(--shadow-sm); }
.busca-res { animation: surge .2s var(--ease-out); transform-origin: top; }
@keyframes surge { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.saldo-pill { transition: transform .2s var(--ease-pop), box-shadow .2s; }
.saldo-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn.premium { background: linear-gradient(180deg, #fffaf0, #fff1d6); }

/* Menu lateral: marcador animado no item atual */
.sidebar { box-shadow: 1px 0 0 var(--line); border-right: 0; }
.side-nav a { position: relative; transition: background .2s, color .2s, padding .2s var(--ease-out); }
.side-nav a::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); transform: scaleY(0); transition: transform .3s var(--ease-pop); }
.side-nav a.active::before { transform: scaleY(1); }
.side-nav a:hover:not(.active) { padding-left: 16px; }
.side-nav a svg { transition: transform .3s var(--ease-pop); }
.side-nav a:hover svg { transform: scale(1.12) rotate(-6deg); }
.side-nav a.nav-criar { background: linear-gradient(90deg, var(--accent-soft), transparent); }
.side-nav a.nav-criar::before { background: var(--accent); }
.side-nav a.nav-criar svg { color: var(--accent); }
.plan-box { position: relative; overflow: hidden; }
.plan-box::after { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background-image: radial-gradient(rgba(15, 118, 110, .18) 1.5px, transparent 1.6px); background-size: 10px 10px; }
.bar i { transition: width .8s var(--ease-out); }
.avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px color-mix(in srgb, var(--mark) 55%, transparent); }

/* Faixas de boas-vindas com textura e ilustração flutuando */
.banner { isolation: isolate; box-shadow: var(--shadow-sm); }
.banner::after {
  content: ""; position: absolute; z-index: -1; right: -40px; top: -40px; width: 240px; height: 240px; border-radius: 50%;
  background-image: radial-gradient(rgba(194, 65, 12, .16) 1.8px, transparent 2px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%);
}
.b-aulas::after, .b-aval::after { background-image: radial-gradient(rgba(15, 118, 110, .18) 1.8px, transparent 2px); }
.banner-art { animation: flutua-p 6s ease-in-out infinite; }
.banner-art img { transition: transform .4s var(--ease-pop); }
.banner:hover .banner-art img { transform: rotate(-8deg) scale(1.08); }

/* Ferramentas e cartões: levantam com mola */
.tool-mini .ic { transition: transform .35s var(--ease-pop), box-shadow .3s; }
.tool-mini:hover .ic { transform: translateY(-3px) rotate(-6deg) scale(1.05); box-shadow: var(--shadow); }
.tool-mini span { transition: color .2s; }
.tool-mini:hover span { color: var(--accent-2); }
.aula-card, .mat, .tool-card, .esc-card, .quick { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.aula-card:hover, .esc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mat-ic { transition: transform .35s var(--ease-pop); }
.mat:hover .mat-ic { transform: rotate(-5deg) scale(1.05); }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tool-card .tool-ic, .tool-card .ic { transition: transform .35s var(--ease-pop); }
.tool-card:hover .tool-ic { transform: rotate(-6deg) scale(1.06); }
.mat-cards > *, .aula-cards > *, .tool-grid > * { animation: fade-up .45s var(--ease-out) both; }
.mat-cards > :nth-child(2), .aula-cards > :nth-child(2), .tool-grid > :nth-child(2) { animation-delay: .04s; }
.mat-cards > :nth-child(3), .aula-cards > :nth-child(3), .tool-grid > :nth-child(3) { animation-delay: .08s; }
.mat-cards > :nth-child(4), .aula-cards > :nth-child(4), .tool-grid > :nth-child(4) { animation-delay: .12s; }
.mat-cards > :nth-child(n+5), .aula-cards > :nth-child(n+5), .tool-grid > :nth-child(n+5) { animation-delay: .16s; }

/* Chips e abas */
.chip { transition: border-color .15s, background .15s, color .15s, transform .2s var(--ease-pop); }
.chip:active { transform: scale(.95); }
.pchip span { transition: border-color .15s, background .15s, transform .2s var(--ease-pop); }
.pchip input:checked + span { animation: marca .35s var(--ease-pop); }
@keyframes marca { 50% { transform: scale(1.07); } }
.type-tabs button, .seg button { transition: background .2s, color .2s, box-shadow .2s, border-color .2s; }

/* Primeiros passos: barra com brilho e check que "estala" */
.passos-bar i { position: relative; overflow: hidden; }
.passos-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); translate: -100% 0; animation: brilho-barra 2.4s 1s ease-in-out infinite; }
@keyframes brilho-barra { 60%, 100% { translate: 100% 0; } }
.passos li { transition: background .2s; }
.passos li:not(.ok):hover { background: var(--paper); }
.passos li.ok .passo-ck { animation: pop-ck .5s var(--ease-pop) both; }
@keyframes pop-ck { from { transform: scale(.4); } }

/* Janelas: surgem com mola */
.modal[open] { animation: janela-entra var(--dur-slow) var(--ease-pop); }
.modal[open]::backdrop { animation: fundo .3s ease; backdrop-filter: blur(3px); }
@keyframes janela { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes fundo { from { opacity: 0; } }

/* Aviso rápido (toast) */
.toast { display: flex; align-items: center; gap: 8px; padding: 12px 22px; box-shadow: 0 16px 36px -10px rgba(30, 42, 58, .5); transition: opacity .25s, transform .4s var(--ease-pop); transform: translate(-50%, 24px) scale(.94); }
.toast.show { transform: translate(-50%, 0) scale(1); }

/* Resultado: aparece com leve subida quando fica pronto */
#view-gerar .gen-output .doc:not(.streaming), #view-gerar .folha-wrap, #view-gerar .slides-wrap, #view-gerar .jogos-wrap { animation: fade-up .5s var(--ease-out) both; }
.gen-form { box-shadow: var(--shadow-sm); }
.gen-form input:not([type="checkbox"]):hover, .gen-form select:hover, .gen-form textarea:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.loader-ic { box-shadow: 0 18px 40px -16px rgba(15, 118, 110, .45); }

/* Menu de baixo (celular) */
@media (max-width: 860px) {
  .bottom-nav a svg { transition: transform .3s var(--ease-pop); }
  .bottom-nav a.active svg { transform: translateY(-2px) scale(1.1); }
  .bottom-nav .bn-criar i { background: linear-gradient(180deg, #d4541a, var(--accent)); transition: transform .3s var(--ease-pop); }
  .bottom-nav .bn-criar:active i { transform: scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .banner-art, .passos-bar i::after { animation: none; }
  .mat-cards > *, .aula-cards > *, .tool-grid > * { animation: none; }
}
@media print { .topbar { position: static; } }

/* Escolher plano (Mercado Pago) */
.modal-planos { width: min(620px, calc(100% - 32px)); }
.pl-periodo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: var(--radius-pill); }
.pl-periodo label { display: block !important; cursor: pointer; }
.pl-periodo input, .pl-card input { position: absolute; opacity: 0; pointer-events: none; }
.pl-periodo span { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 9px; border-radius: var(--radius-pill); font-weight: 600; color: var(--ink-2); transition: background .2s, box-shadow .2s, color .2s; }
.pl-periodo em { font-style: normal; font-size: .72rem; font-weight: 700; background: var(--green-soft); color: var(--green); padding: 2px 8px; border-radius: var(--radius-pill); }
.pl-periodo input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.pl-periodo input:focus-visible + span, .pl-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-card { position: relative; display: grid !important; gap: 6px !important; align-content: start; border: 2px solid var(--line); border-radius: var(--radius); padding: 18px 16px 16px; cursor: pointer; background: var(--card); transition: border-color .2s, box-shadow .25s, transform .25s var(--ease-out); }
.pl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pl-card:has(input:checked) { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--card) 60%); box-shadow: 0 14px 30px -16px rgba(194, 65, 12, .45); }
.pl-card:has(input:checked)::after { content: "✓"; position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 800; animation: pop-ck .35s var(--ease-pop); }
.pl-selo { position: absolute; top: -11px; left: 14px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); }
.pl-nome { font-family: var(--font-display); font-size: 1.2rem; color: var(--brand-2); }
.pl-preco { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.pl-preco small { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.pl-itens { font-size: .84rem; font-weight: 400; color: var(--ink-2); line-height: 1.5; }
.pl-itens b { display: block; color: var(--ink); }
.pl-nota { font-size: .84rem; font-weight: 400; color: var(--ink-3); margin: 0; }
.pl-erro { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--coral-soft); color: #9f2d1a; font-size: .88rem; font-weight: 600; }
@media (max-width: 520px) { .pl-grid { grid-template-columns: 1fr; } }
.pl-auto { display: flex !important; align-items: center; gap: 12px !important; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-md); cursor: pointer; background: var(--paper); transition: border-color .2s, background .2s; }
.pl-auto:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pl-auto input { position: absolute; opacity: 0; pointer-events: none; }
.pl-auto > span:last-child { display: grid; font-weight: 400; }
.pl-auto small { color: var(--ink-3); font-size: .8rem; }
.pl-auto-chave { position: relative; width: 42px; height: 24px; flex: none; border-radius: var(--radius-pill); background: #cfd5dd; transition: background .2s; }
.pl-auto-chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease-pop); }
.pl-auto input:checked + .pl-auto-chave { background: var(--brand); }
.pl-auto input:checked + .pl-auto-chave::after { transform: translateX(18px); }
.pl-auto:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }

/* início: saudação mais enxuta, para as ferramentas aparecerem logo */
.banner.b-inicio { min-height: 0; padding: 14px 22px; margin: 4px 0 18px; gap: 16px; }
.b-inicio .banner-art { width: 62px; height: 62px; }
.b-inicio .banner-art img { width: 40px; }
.b-inicio h1 { font-size: 1.4rem; margin: 0 0 2px; }
.b-inicio p { font-size: .94rem; }
.cat-bar, .criar-main { min-width: 0; }

/* celular: áreas de toque com pelo menos 40 px (filtros, estrela de favorito, "Esconder") */
@media (max-width: 860px) {
  button.chip { min-height: 40px; }
  .star { top: 2px; right: 2px; min-width: 40px; min-height: 40px; display: grid; place-items: center; }
  .passos button.link { min-height: 40px; padding: 0 6px; }
}
/* datas comemorativas: nada abaixo de 12 px */
#view-datas small, #view-datas .data-tag, #view-datas .data-ideias-t { font-size: max(12px, .75rem); }

/* ===== Ícones de traço (sóbrios, uma cor): substituem os emojis coloridos da interface ===== */
.ic { stroke-width: 1.7; }
.ei-svg { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.14em; margin-right: .2em; color: currentColor; }
.busca-res a .ic { width: 20px; height: 20px; }
.cat .ic { width: 18px; height: 18px; flex: none; }
.prox-data .ic { width: 34px; height: 34px; padding: 6px; box-sizing: content-box; border-radius: var(--radius-md); background: var(--card); color: var(--accent); }
.data-card h3 .ic, .datas h3 .ic { width: 22px; height: 22px; margin-right: 6px; vertical-align: -4px; color: var(--accent); }
.btn.premium .ei-svg, .saldo-pill .ei-svg { color: var(--accent); }
.banner-art .ei-svg { width: 34px; height: 34px; margin: 0; color: var(--brand-2); }
.banner-art { display: grid; place-items: center; }
.empty-ic .ei-svg, .loader-ic .ei-svg { width: 40px; height: 40px; margin: 0; color: var(--brand); }

/* ---------- Tutorial do primeiro acesso ---------- */
.tour { position: fixed; inset: 0; z-index: 2000; animation: fundo-entra .3s var(--ease-out); }
.tour.sai { opacity: 0; transition: opacity .25s var(--ease-out); }
.tour-veu { position: absolute; inset: 0; background: rgba(30, 42, 58, .38); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tour-anel { position: absolute; cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand); transition: left .4s var(--ease-out), top .4s var(--ease-out), width .4s var(--ease-out), height .4s var(--ease-out); }
.tour-anel::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 3px solid var(--brand); animation: tour-pulso 1.6s var(--ease-out) infinite; pointer-events: none; }
@keyframes tour-pulso { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } }
.tour-card { position: absolute; width: min(340px, calc(100vw - 32px)); padding: 20px 20px 16px; background: #fff; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-modal); transition: left .4s var(--ease-out), top .4s var(--ease-out); }
.tour-card.entra { animation: janela-entra .35s var(--ease-out); }
.tour-card h2 { font-size: 1.3rem; margin: 10px 0 6px; }
.tour-card p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.tour-pontos { display: flex; gap: 5px; }
.tour-pontos i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width .3s var(--ease-out), background .3s; }
.tour-pontos i.on { width: 18px; background: var(--brand); }
.tour-acoes { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.tour-nav { display: flex; gap: 6px; }
.tour-pular { border: 0; background: none; font: inherit; font-size: .85rem; color: var(--ink-3); cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.tour-pular:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tour-anel::after { animation: none; } .tour-anel, .tour-card { transition: none; } }

/* Avatar ilustrado (professora / professor) saindo do banner, em 3D */
.banner.b-inicio.tem-foto { overflow: visible; margin-top: 58px; }
.b-inicio .banner-art.com-foto { width: 150px; height: 150px; margin: -58px 0 -18px; background: none; box-shadow: none; border-radius: 0; overflow: visible; animation: none; align-self: flex-start; }
.b-inicio .banner-art.com-foto img { width: 100%; height: 100%; max-width: none; object-fit: contain; transform-origin: 50% 100%; filter: drop-shadow(0 14px 12px rgba(30, 42, 58, .28)); transition: transform .45s var(--ease-pop); }
.banner.b-inicio:hover .banner-art.com-foto img { transform: translateY(-4px) scale(1.04) rotate(-2deg); }
@media (max-width: 760px) { .b-inicio .banner-art.com-foto { width: 104px; height: 104px; margin: -42px 0 -10px; } .banner.b-inicio.tem-foto { margin-top: 44px; } }

/* Tutorial falado pelo Tico: balão de fala com o mascote saindo pelo canto */
.tour-card { margin-top: 0; padding: 22px 22px 16px 22px; border: 2px solid var(--brand); }
.tour-tico { position: absolute; left: -18px; top: -86px; width: 108px; height: auto; filter: drop-shadow(0 10px 10px rgba(30, 42, 58, .3)); animation: tico-balanca 3.2s ease-in-out infinite; transform-origin: 50% 100%; pointer-events: none; }
@keyframes tico-balanca { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-3px); } }
.tour-card::before { content: ""; position: absolute; left: 58px; top: -9px; width: 16px; height: 16px; background: #fff; border-left: 2px solid var(--brand); border-top: 2px solid var(--brand); transform: rotate(45deg); }
.tour-pontos { margin-left: 92px; min-height: 10px; }
.tour-card h2 { font-size: 1.2rem; }
.tour-card p { min-height: 3.2em; }
@media (prefers-reduced-motion: reduce) { .tour-tico { animation: none; } }

/* ---------- Botão flutuante "Dúvidas?" ---------- */
.duvidas { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; display: grid; justify-items: end; gap: 12px; }
.duvidas-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--brand); color: #fff; font: 700 .92rem var(--font-body); cursor: pointer; box-shadow: var(--shadow-brand, 0 10px 24px -10px rgba(15, 118, 110, .6)); transition: transform .3s var(--ease-pop), background .2s;  }
.duvidas-btn:hover { transform: translateY(-3px) scale(1.04); background: var(--brand-2); }
.duvidas-btn svg { width: 22px; height: 22px; flex: none; }
@keyframes duvidas-pulso { 0%, 100% { box-shadow: 0 10px 24px -10px rgba(15, 118, 110, .6), 0 0 0 0 rgba(15, 118, 110, .35); } 50% { box-shadow: 0 10px 24px -10px rgba(15, 118, 110, .6), 0 0 0 10px rgba(15, 118, 110, 0); } }
.duvidas-menu { position: relative; width: 250px; margin-top: 44px; padding: 40px 14px 14px; background: #fff; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-modal); border: 2px solid var(--brand); display: grid; gap: 8px; animation: janela-entra .3s var(--ease-out); transform-origin: 100% 100%; }
.duvidas-menu[hidden] { display: none; }
.duvidas-tico { position: absolute; right: 14px; top: -52px; width: 64px; height: auto; filter: drop-shadow(0 8px 8px rgba(30, 42, 58, .25)); pointer-events: none; }
.duvidas-menu p { margin: 0 0 4px; font-size: .9rem; color: var(--ink-2); }
.duvidas-menu button, .duvidas-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 600 .88rem var(--font-body); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease-pop); }
.duvidas-menu button:hover, .duvidas-menu a:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateX(-2px); }
@media (max-width: 760px) { .duvidas { bottom: calc(84px + env(safe-area-inset-bottom)); right: 14px; } .duvidas-btn span { display: none; } .duvidas-btn { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .duvidas-btn { animation: none; } }
@media print { .duvidas { display: none !important; } }