/*! Sérgio Novais### · © 2026 Sérgio Novais. Todos os direitos reservados. Proibida a cópia, reprodução ou distribuição sem autorização (Lei 9.609/1998 e Lei 9.610/1998). */
/* Paleta institucional Centro Paula Souza (ETEC): vermelho #B20000 + cinza #32373C + branco */
:root {
  --primaria: #b20000;
  --primaria-escura: #7d0000;
  --primaria-clara: #fbeaea;
  --grafite: #32373c;
  --cinza: #5b6472;
  --cinza-claro: #f2f4f7;
  --borda: #d9dee6;
  --fundo: #f5f7fa;
  --branco: #ffffff;
  --texto: #1f2733;
  --verde: #15803d;
  --vermelho: #b91c1c;
  --amarelo: #fff7e0;
  --codigo-fundo: #1e2226;
  --superficie: #ffffff;
  --superficie-2: #fbfcfd;
  color-scheme: light;
  --raio: 10px;
  --topo: 60px;
  font-size: 16px;
}

/* ---------- modo escuro ---------- */
/* Segue o sistema (prefers-color-scheme) ou a escolha do botão 🌙/☀️ (data-tema) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --primaria: #d46a6a; --primaria-escura: #8c3030; --primaria-clara: #3d2f33; --grafite: #bfc4ca;
    --cinza: #979fa9; --cinza-claro: #353b44; --borda: #3f4650; --fundo: #252a31; --texto: #d3d7dc;
    --verde: #6cc48b; --amarelo: #3d3625; --superficie: #2b3038; --superficie-2: #30363e;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --primaria: #d46a6a; --primaria-escura: #8c3030; --primaria-clara: #3d2f33; --grafite: #bfc4ca;
  --cinza: #979fa9; --cinza-claro: #353b44; --borda: #3f4650; --fundo: #252a31; --texto: #d3d7dc;
  --verde: #6cc48b; --amarelo: #3d3625; --superficie: #2b3038; --superficie-2: #30363e;
  color-scheme: dark;
}
/* no escuro, as faixas vermelhas (topo, banners) continuam no vermelho institucional */
:root[data-tema="escuro"] .topo, :root[data-tema="escuro"] .boas-vindas, :root[data-tema="escuro"] .cap-cab,
:root[data-tema="escuro"] .entrada-hero { --primaria: #8e2626; --primaria-escura: #5e1a1a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .topo, :root:not([data-tema="claro"]) .boas-vindas,
  :root:not([data-tema="claro"]) .cap-cab, :root:not([data-tema="claro"]) .entrada-hero { --primaria: #8e2626; --primaria-escura: #5e1a1a; }
}
.btn-tema { background: rgba(255,255,255,.14); border: 0; color: #fff; border-radius: 99px; padding: 6px 10px; cursor: pointer; font-size: 1rem; }
.btn-tema:hover { background: rgba(255,255,255,.25); }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topo) + 12px); }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.55;
}
code, pre, textarea.editor { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; }
a { color: var(--primaria); }
button { font: inherit; }
h1, h2, h3 { line-height: 1.25; }
:focus-visible { outline: 3px solid #f5b301; outline-offset: 2px; }
:not(pre) > code { background: var(--cinza-claro); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

.pular { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: 8px; z-index: 100; }
.pular:focus { left: 8px; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--topo);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 8px 20px;
  background: var(--primaria); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.modo-professor .topo { background: #32373c; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.marca-icone { font-size: 1.6rem; }
.marca strong { display: block; font-size: 1.05rem; }
.marca small { display: block; opacity: .8; font-size: .78rem; }
.nav-topo { display: flex; gap: 4px; }
.nav-topo a { color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 99px; font-weight: 600; font-size: .92rem; opacity: .85; }
.nav-topo a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.nav-topo a.ativo { background: #fff; color: var(--primaria); opacity: 1; }
.modo-professor .nav-topo a.ativo { color: #32373c; }
.progresso { margin-left: auto; font-size: .82rem; opacity: .9; white-space: nowrap; }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; outline: none; }

/* ---------- comuns ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primaria); color: #fff; border: 1px solid var(--primaria);
  padding: 9px 16px; border-radius: 8px;
  cursor: pointer; text-decoration: none; font-weight: 600; font-size: .92rem;
}
.btn:hover { background: var(--primaria-escura); }
.btn-sec { background: var(--superficie); color: var(--primaria); }
.btn-sec:hover { background: var(--primaria-clara); }
.btn-peq { padding: 6px 11px; font-size: .84rem; }

.selo-ano { display: inline-block; background: var(--primaria); color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; vertical-align: middle; }
.lang { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 5px; vertical-align: middle; }
.l-python { background: #e6f0fb; color: #1d5a99; }
.l-javascript { background: #fdf3c4; color: #6e5300; }
.l-csharp { background: #efe7fb; color: #5b2b9e; }
.l-html { background: #fde9e1; color: #a2401b; }
.nivel { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; vertical-align: middle; white-space: nowrap; }
.n-facil { background: #dcf3e4; color: #166534; }
.n-medio { background: #fdf0d2; color: #8a5a00; }
.n-dificil { background: #fbe1e1; color: #9b1c1c; }
.codigo-id { font-family: Consolas, monospace; font-weight: 700; font-size: .8rem; color: var(--grafite); background: var(--cinza-claro); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.codigo-id.grande { font-size: .95rem; padding: 3px 10px; }

/* ---------- início ---------- */
.hero {
  background: linear-gradient(135deg, var(--primaria) 0%, var(--primaria-escura) 100%);
  color: #fff; border-radius: 16px; padding: 44px 36px; text-align: center; margin-bottom: 28px;
}
.modo-professor .hero { background: linear-gradient(135deg, #3d4248, #1f2327); }
.hero h1 { font-size: 2.2rem; margin: 6px 0 10px; }
.hero p { margin: 0 auto 10px; max-width: 640px; opacity: .92; }
.hero-escola { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; opacity: .8 !important; }
.busca-hero { display: flex; gap: 8px; max-width: 620px; margin: 22px auto 10px; }
.busca-hero input { flex: 1; min-width: 0; padding: 13px 16px; border-radius: 10px; border: 0; font: inherit; font-size: 1rem; }
.busca-hero .btn { background: var(--grafite); border-color: var(--grafite); color: #fff; padding: 0 22px; }
.hero-stats { font-size: .88rem; opacity: .8 !important; }

.grade-anos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.card-ano { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; }
.card-ano h2 { margin: 8px 0 2px; font-size: 1.25rem; color: var(--primaria); }
.card-ano header p { margin: 0 0 14px; color: var(--cinza); font-size: .9rem; }
.card-ano-langs { display: grid; gap: 10px; flex: 1; }
.tile-lang { display: block; text-decoration: none; color: var(--texto); border: 1px solid var(--borda); border-left: 5px solid; border-radius: 10px; padding: 11px 14px; transition: .15s; }
.tile-lang:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(50,55,60,.15); }
.tl-javascript { border-left-color: #e2b400; }
.tl-python { border-left-color: #2f74c0; }
.tl-csharp { border-left-color: #7a3fc8; }
.tile-lang strong { display: block; font-size: 1rem; }
.tile-desc { display: block; font-size: .8rem; color: var(--cinza); margin: 2px 0 6px; }
.tile-cont { font-size: .78rem; font-weight: 700; color: var(--primaria); }
.ver-tudo { margin-top: 14px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.como { margin-top: 30px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 24px; }
.como h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--primaria); }
.como li { margin-bottom: 4px; }

/* ---------- explorar ---------- */
.explorar-cab h1 { margin: 0 0 14px; color: var(--primaria); font-size: 1.7rem; }
.filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; margin-bottom: 16px; }
#filtro-q { width: 100%; padding: 11px 14px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--cinza-claro); border: 1px solid var(--borda); color: var(--texto); padding: 5px 13px; border-radius: 99px; cursor: pointer; font-size: .86rem; }
.chip:hover { border-color: var(--primaria); }
.chip[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: #fff; font-weight: 600; }
.contagem { color: var(--cinza); font-size: .88rem; margin: 0 0 8px; }
.vazio { background: var(--superficie); padding: 30px; text-align: center; border-radius: 14px; border: 1px dashed var(--borda); }

.grupo-tema { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.grupo-tema h2 { margin: 0 0 6px; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grupo-desc { font-weight: 400; color: var(--cinza); font-size: .88rem; }
.subtitulo { font-size: .95rem; margin: 16px 0 8px; color: var(--primaria); }
.grade-exemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card-exemplo { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; background: var(--superficie-2); }
.card-exemplo:hover { border-color: var(--primaria); background: var(--primaria-clara); }
.card-exemplo .codigo-id { align-self: flex-start; }
.card-exemplo strong { font-size: .93rem; line-height: 1.3; }
.card-meta { font-size: .78rem; color: var(--cinza); }
.card-exemplo .ok { position: absolute; top: 10px; right: 12px; }
.ok { color: var(--verde); font-weight: 700; }
.lista-exercicios { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.lista-exercicios li + li { border-top: 1px solid var(--borda); }
.lista-exercicios a { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(0, 190px) 70px 20px; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none; color: var(--texto); }
.lista-exercicios a:hover { background: var(--primaria-clara); }
.ex-titulo { font-weight: 600; font-size: .93rem; }
.ex-topico { color: var(--cinza); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-exercicios .nivel { justify-self: start; }

/* ---------- item ---------- */
.trilha { font-size: .86rem; color: var(--cinza); margin-bottom: 12px; }
.trilha a { text-decoration: none; }
.folha { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 28px 34px; }
.item-cab { border-bottom: 2px solid var(--primaria-clara); padding-bottom: 14px; margin-bottom: 6px; }
.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topico { color: var(--cinza); font-size: .86rem; }
.item-cab h1 { color: var(--primaria); font-size: 1.6rem; margin: 10px 0; }
.bloco { margin: 22px 0; }
.bloco h2 { font-size: 1.08rem; color: var(--primaria); margin: 0 0 8px; }
.bloco p { margin: 0 0 8px; }
.enunciado > p:first-of-type { font-size: 1.05rem; }
.rotulo-ex { font-weight: 600; font-size: .88rem; color: var(--cinza); }
.exemplo-saida { background: var(--cinza-claro); border-left: 4px solid var(--primaria); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: .88rem; overflow-x: auto; margin: 0 0 10px; }
.dica-exemplos { font-size: .88rem; color: var(--cinza); }
.como-executar { font-size: .86rem; color: var(--cinza); margin-top: 8px !important; }
.salvar-como { font-weight: 600; }
.dica { background: var(--primaria-clara); border-left: 4px solid var(--primaria); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: .92rem; margin: 18px 0; }
.tarefa { background: var(--amarelo); border: 1px dashed #e0b84a; border-radius: var(--raio); padding: 14px 18px; }
.tarefa ol { margin: 0 0 8px; padding-left: 22px; }
.tarefa li { margin-bottom: 5px; }
.gabarito { margin: 22px 0; border: 2px solid #7a3fc8; border-radius: var(--raio); padding: 10px 14px; background: #faf6ff; }
.gabarito summary { cursor: pointer; font-weight: 700; color: #5b2b9e; }
.gabarito[open] summary { margin-bottom: 10px; }

/* código */
.codigo { border-radius: var(--raio); overflow: hidden; background: var(--codigo-fundo); }
.codigo-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: #15181b; color: #b8bec5; font-size: .82rem; flex-wrap: wrap; }
.codigo-arq { font-family: Consolas, monospace; }
.codigo-botoes { display: flex; gap: 6px; }
.btn-cod { background: #353b41; color: #e6edf7; border: 0; padding: 4px 10px; border-radius: 5px; font-size: .8rem; cursor: pointer; }
.btn-cod:hover { background: #474e55; }
.btn-run { background: #1c7a45; }
.btn-run:hover { background: #239155; }
.codigo pre { margin: 0; padding: 14px 16px; overflow-x: auto; max-height: 560px; color: #e6edf7; font-size: .86rem; line-height: 1.5; tab-size: 4; }
.hljs-comment, .hljs-quote { color: #7f93b0; font-style: italic; }
.hljs-keyword, .hljs-selector-tag { color: #ff9ac1; }
.hljs-string, .hljs-template-string { color: #a8e19b; }
.hljs-number, .hljs-literal { color: #ffc27a; }
.hljs-title, .hljs-title.function_, .hljs-title.class_ { color: #8fd3ff; }
.hljs-built_in, .hljs-type { color: #ffd479; }
.hljs-attr, .hljs-attribute, .hljs-property { color: #9ecbff; }
.hljs-tag, .hljs-name { color: #ff9ac1; }
.hljs-meta, .hljs-subst, .hljs-params { color: #e6edf7; }
.hljs-variable, .hljs-template-variable { color: #ffb38a; }

.saida { margin-top: 10px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie); }
.saida-barra { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--cinza-claro); font-size: .82rem; font-weight: 600; color: var(--cinza); }
.saida-barra span { margin-right: auto; }
.saida-barra .btn-cod { background: var(--superficie); color: var(--primaria); border: 1px solid var(--borda); }
.preview { width: 100%; height: 360px; border: 0; border-bottom: 1px solid var(--borda); background: var(--superficie); display: block; }
.oculto { display: none; }
.console { margin: 0; padding: 10px 12px; min-height: 44px; max-height: 300px; overflow: auto; background: #15181b; color: #e2e6ea; font-size: .83rem; white-space: pre-wrap; word-break: break-word; }
.console:empty::before { content: "(aguardando saída do console...)"; color: #5f7290; }
.console .c-error { color: #ff8f8f; }
.console .c-warn { color: #ffd479; }

/* área do aluno */
.aluno { border: 2px solid var(--primaria); border-radius: var(--raio); padding: 16px 18px; background: var(--superficie-2); }
.selo-ok { font-size: .78rem; background: #dcf3e4; color: var(--verde); padding: 2px 8px; border-radius: 99px; font-weight: 700; vertical-align: middle; }
.campos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 12px; }
.campos label, .rotulo-editor { font-size: .85rem; font-weight: 600; color: var(--cinza); display: block; }
.campos input { display: block; width: 100%; margin-top: 3px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; background: var(--superficie); }
.editor-barra { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.editor, .observacoes { width: 100%; margin-top: 4px; border: 1px solid var(--borda); border-radius: 6px; padding: 10px 12px; font-size: .86rem; resize: vertical; background: var(--superficie); }
.editor { min-height: 280px; line-height: 1.5; tab-size: 4; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.observacoes { font-family: inherit; margin-bottom: 12px; }
.ajuda { font-size: .78rem; color: var(--cinza); margin: 4px 0 12px !important; }
.btn-enviar { width: 100%; justify-content: center; padding: 12px; font-size: 1rem; background: var(--verde); border-color: var(--verde); }
.btn-enviar:hover { background: #116632; }
.nav-itens { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.nav-itens .pos { color: var(--cinza); font-size: .9rem; }

/* fluxograma */
.fluxo { display: flex; flex-direction: column; padding: 14px 8px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; }
.fx-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.fx-linha > .fx-no { grid-column: 2; }
.fx-lado { grid-column: 3; display: flex; align-items: center; gap: 6px; min-width: 0; }
.fx-rotulo { font-size: .78rem; font-weight: 700; color: var(--primaria); white-space: nowrap; }
.fx-no { position: relative; text-align: center; font-size: .84rem; font-family: Consolas, monospace; padding: 8px 14px; min-width: 150px; max-width: 280px; justify-self: center; }
.fx-lado .fx-no { min-width: 0; font-size: .8rem; }
.fx-no > span { position: relative; z-index: 1; }
.fx-inicio, .fx-fim { background: var(--primaria); color: #fff; border-radius: 99px; font-family: inherit; font-weight: 700; min-width: 110px; }
.fx-processo { background: var(--superficie); border: 2px solid var(--primaria); border-radius: 4px; }
.fx-entrada, .fx-saida { padding: 8px 24px; }
.fx-entrada::before, .fx-saida::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--primaria); transform: skewX(-18deg); background: var(--primaria-clara); }
.fx-saida::before { background: #e6f5ec; border-color: var(--verde); }
.fx-decisao { padding: 22px 36px; min-width: 190px; background: #c99a1e; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fx-decisao::after { content: ""; position: absolute; inset: 3px 6px; background: var(--amarelo); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fx-volta { border: 2px dashed var(--cinza); border-radius: 99px; color: var(--cinza); font-family: inherit; font-size: .8rem; }
.fx-seta { position: relative; height: 26px; display: flex; justify-content: center; }
.fx-seta::before { content: "↓"; color: var(--primaria); font-weight: 700; line-height: 26px; }
.fx-seta span { position: absolute; left: calc(50% + 12px); top: 3px; font-size: .74rem; font-weight: 700; color: var(--primaria); }
.fx-nota { font-size: .82rem; color: var(--cinza); font-style: italic; margin-top: 6px !important; }

/* diálogo e toast */
dialog { border: 0; border-radius: 12px; padding: 0; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(30, 20, 20, .55); }
.dlg { padding: 22px 24px; }
.dlg h2 { margin: 0 0 12px; color: var(--primaria); font-size: 1.25rem; }
.resumo { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: .9rem; }
.resumo dt { font-weight: 700; color: var(--cinza); }
.resumo dd { margin: 0; }
.aviso { background: var(--amarelo); border: 1px solid #e0b84a; border-radius: 6px; padding: 8px 12px; font-size: .86rem; margin-bottom: 12px; }
.opcoes-envio { display: grid; gap: 8px; }
.opcoes-envio .btn { justify-content: center; }
.dlg-rodape { display: flex; justify-content: flex-end; margin-top: 12px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px);
  background: var(--primaria-escura); color: #fff; padding: 10px 18px; border-radius: 99px;
  font-size: .9rem; opacity: 0; pointer-events: none; transition: .25s; z-index: 50;
  max-width: calc(100% - 32px); text-align: center;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------- boas-vindas ---------- */
.boas-vindas {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.12), transparent 40%), linear-gradient(135deg, var(--primaria) 0%, var(--primaria-escura) 100%);
  color: #fff; border-radius: 18px; padding: 44px 40px; margin-bottom: 18px; overflow: hidden;
}
.modo-professor .boas-vindas { background: linear-gradient(135deg, #3d4248, #1f2327); }
.bv-texto h1 { font-size: 2.5rem; margin: 6px 0 12px; }
.bv-lema { font-size: 1.12rem; opacity: .95; margin: 0 0 22px; max-width: 560px; }
.bv-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.btn-claro { background: #fff; color: var(--primaria); border-color: #fff; padding: 12px 20px; font-size: 1rem; }
.btn-claro:hover { background: var(--primaria-clara); }
.btn-contorno { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.8); padding: 11px 20px; font-size: 1rem; }
.btn-contorno:hover { background: rgba(255,255,255,.12); }
.boas-vindas .busca-hero { margin: 18px 0 0; max-width: none; }
.bv-janela { background: #1e2226; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.35); overflow: hidden; position: relative; min-height: 210px; transform: rotate(1.5deg); }
.jan-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #15181b; }
.jan-barra i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.jan-barra i:nth-child(2) { background: #febc2e; }
.jan-barra i:nth-child(3) { background: #28c840; }
.jan-barra span { margin-left: 8px; font-size: .78rem; color: #9aa1a8; font-family: Consolas, monospace; }
.jan-cod { position: absolute; left: 0; right: 0; top: 40px; margin: 0; padding: 16px 18px; color: #e6edf7; font-size: .95rem; line-height: 1.7; white-space: pre-wrap; opacity: 0; animation: troca 9s infinite; }
.jan-cod b { color: #7f93b0; font-weight: 400; font-style: italic; }
.c2 { animation-delay: 3s; }
.c3 { animation-delay: 6s; }
@keyframes troca { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
.jan-saida { position: absolute; left: 18px; right: 18px; bottom: 16px; font-family: Consolas, monospace; color: #7ee2a8; font-size: .92rem; border-top: 1px dashed #3a4046; padding-top: 10px; }
.cursor { animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.numeros div { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; text-align: center; }
.numeros strong { display: block; font-size: 1.8rem; color: var(--primaria); line-height: 1.1; }
.numeros span { font-size: .85rem; color: var(--cinza); }

.continuar { background: var(--superficie); border: 1px solid var(--borda); border-left: 6px solid var(--primaria); border-radius: 14px; padding: 16px 20px; margin-bottom: 26px; }
.continuar h2 { margin: 0 0 10px; font-size: 1.1rem; color: var(--grafite); }
.continuar-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.card-continuar { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; text-decoration: none; color: var(--texto); background: var(--superficie-2); }
a.card-continuar:hover { border-color: var(--primaria); background: var(--primaria-clara); }
.card-continuar .codigo-id { align-self: flex-start; }
.card-continuar span:last-child { font-size: .8rem; color: var(--cinza); }
.ok-card { background: #f0faf3; border-color: #bfe5cc; }

.titulo-secao { font-size: 1.35rem; color: var(--grafite); margin: 34px 0 14px; scroll-margin-top: calc(var(--topo) + 16px); }
.recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.recurso { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; }
.rec-icone { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--primaria-clara); font-size: 1.4rem; }
.recurso h3 { margin: 10px 0 4px; font-size: 1.02rem; color: var(--primaria); }
.recurso p { margin: 0; font-size: .88rem; color: var(--cinza); }
.passos-inicio { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passos-inicio li { counter-increment: passo; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 18px 18px 66px; position: relative; }
.passos-inicio li::before { content: counter(passo); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--primaria); color: #fff; font-weight: 700; display: grid; place-items: center; }
.passos-inicio strong { display: block; margin-bottom: 4px; }
.passos-inicio span { font-size: .88rem; color: var(--cinza); }
.rodape-inicio { margin-top: 34px; text-align: center; color: var(--cinza); font-size: .85rem; border-top: 1px solid var(--borda); padding-top: 18px; }
.rodape-frase { font-size: 1rem; color: var(--grafite); }

/* ---------- conta no topo ---------- */
.area-conta { display: flex; align-items: center; gap: 8px; }
.progresso:empty { display: none; }
.link-conta { color: #fff; background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; padding: 5px 12px; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.link-conta:hover { background: rgba(255,255,255,.15); }
.nome-conta { font-size: .85rem; opacity: .9; white-space: nowrap; }

/* ---------- página de entrada (login) ---------- */
.entrada { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.entrada-hero { background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); color: #fff; border-radius: 18px; padding: 34px 32px; }
.entrada-hero h1 { font-size: 2.1rem; margin: 6px 0 12px; line-height: 1.2; }
.entrada-hero > p { font-size: 1.05rem; opacity: .95; margin: 0 0 18px; }
.numeros.mini { margin: 0; gap: 8px; }
.entrada-hero .numeros div { background: rgba(255,255,255,.12); border: 0; padding: 10px; }
.entrada-hero .numeros strong { color: #fff; font-size: 1.5rem; }
.entrada-hero .numeros span { color: rgba(255,255,255,.85); }
.entrada-conta { position: sticky; top: calc(var(--topo) + 16px); }
.cartao-conta { background: var(--superficie); border: 1px solid var(--borda); border-top: 6px solid var(--primaria); border-radius: 16px; padding: 22px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.cartao-conta h2 { margin: 0 0 12px; color: var(--primaria); font-size: 1.25rem; }
.abas-conta { margin: 0 0 14px; }
.abas-conta .aba { flex: 1; border-radius: 8px; border-bottom: 1px solid var(--borda); }
.abas-conta .aba[aria-selected="true"] { background: var(--primaria); border-color: var(--primaria); }
.form-conta label { display: block; font-size: .85rem; font-weight: 600; color: var(--cinza); margin-bottom: 10px; }
.form-conta input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: var(--superficie); color: var(--texto); }
.btn-largo { width: 100%; justify-content: center; padding: 11px; font-size: 1rem; }
.link-simples { background: none; border: 0; color: var(--primaria); cursor: pointer; font-size: .85rem; margin-top: 10px; padding: 0; text-decoration: underline; }
.msg-conta { font-size: .88rem; margin: 10px 0 0; min-height: 1.2em; }
.msg-conta.erro { color: var(--vermelho); }
.msg-conta.ok { color: var(--verde); }
.conta-rodape { border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 10px; font-size: .78rem; color: var(--cinza); }
.conta-rodape p { margin: 0; }
.pode-fazer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pode { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 16px 20px; }
.pode h3 { margin: 0 0 6px; color: var(--primaria); }
.pode ul { margin: 0; padding-left: 20px; }
.pode li { margin-bottom: 4px; font-size: .92rem; }
.dicas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dica-card { display: flex; gap: 12px; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--primaria); border-radius: 12px; padding: 14px; }
.dica-card > span { font-size: 1.6rem; }
.dica-card p { margin: 2px 0 0; font-size: .86rem; color: var(--cinza); }

/* ---------- entregas e correção ---------- */
.status { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; vertical-align: middle; }
.st-ok { background: #dcf3e4; color: #166534; }
.st-env { background: #fdf0d2; color: #8a5a00; }
.st-refazer { background: #fbe1e1; color: #9b1c1c; }
.correcao { border: 2px solid var(--verde); border-radius: var(--raio); padding: 12px 16px; }
.comentario { background: var(--cinza-claro); border-radius: 8px; padding: 8px 12px; font-size: .9rem; margin: 6px 0 !important; }
.lista-entregas { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-entregas li { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; }
.lista-entregas a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.lista-entregas .data { margin-left: auto; font-size: .8rem; color: var(--cinza); }

/* ---------- painel do professor ---------- */
.abas-painel { margin: 0 0 0; flex-wrap: wrap; }
.abas-painel .aba { text-decoration: none; }
.abas-painel .aba[aria-selected="true"] { background: var(--primaria); border-color: var(--primaria); }
.painel-corpo { background: var(--superficie); border: 1px solid var(--borda); border-radius: 0 12px 12px 12px; padding: 18px; }
.filtros-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filtros-linha label { font-size: .85rem; font-weight: 600; color: var(--cinza); display: flex; align-items: center; gap: 6px; }
.filtros-linha input, .filtros-linha select, .campos select, .rel-campo select { padding: 7px 9px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; background: var(--superficie); color: var(--texto); }
.filtros-linha .contagem { margin: 0 0 0 auto; }
.tabela-rolagem { overflow-x: auto; margin-top: 12px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { color: var(--cinza); font-size: .78rem; text-transform: uppercase; }
.oculto-linha td { opacity: .5; }
.selo-novo { font-size: .68rem; background: var(--primaria-clara); color: var(--primaria); padding: 1px 6px; border-radius: 99px; font-weight: 700; }
.grade-turmas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.card-turma { border: 1px solid var(--borda); border-radius: 12px; padding: 14px; background: var(--superficie-2); }
.card-turma.ativa { border-color: var(--primaria); border-width: 2px; }
.card-turma h3 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.card-turma p { margin: 4px 0; font-size: .88rem; }
.codigo-turma { font-size: 1rem !important; font-weight: 700; letter-spacing: .05em; }
dialog.dlg-largo { max-width: 860px; }
.dlg .codigo pre { max-height: 320px; }
.campos-3 { grid-template-columns: 1fr 1fr 1fr; }
.campos-3 label, .campos label { font-size: .85rem; font-weight: 600; color: var(--cinza); }
.campos select { display: block; width: 100%; margin-top: 3px; }
.editor-mini { font-family: Consolas, "Cascadia Mono", monospace; font-size: .84rem; white-space: pre; }
.form-livro { display: grid; gap: 4px; }
.form-livro h3 { margin: 0; color: var(--primaria); }
.series { border: 1px solid var(--borda); border-radius: 8px; display: flex; gap: 14px; padding: 8px 12px; margin: 4px 0 10px; }
.series legend { font-size: .85rem; font-weight: 600; color: var(--cinza); }
.form-livro .btn { justify-self: start; }
dialog { background: var(--superficie); color: var(--texto); }

/* ---------- trilha ---------- */
.filtros-trilha { margin-bottom: 18px; }
.filtros-trilha .chip { text-decoration: none; }
.trilha-ano { margin-bottom: 30px; }
.trilha-ano > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; color: var(--grafite); margin: 0 0 14px; }
.trilha { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.trilha::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 4px; background: var(--borda); border-radius: 4px; }
.etapa { position: relative; margin-bottom: 12px; }
.etapa a { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px 14px 0; margin-left: 24px; transition: .15s; }
.etapa a:hover { border-color: var(--primaria); transform: translateX(3px); }
.etapa-marca { flex: 0 0 52px; height: 52px; margin-left: -50px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: var(--superficie); border: 4px solid var(--borda); position: relative; z-index: 1; }
.etapa-completo .etapa-marca { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 700; }
.etapa-atual .etapa-marca { border-color: var(--primaria); box-shadow: 0 0 0 6px var(--primaria-clara); animation: pulsa 2s infinite; }
.etapa-atual a { border-color: var(--primaria); border-width: 2px; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 10px rgba(178, 0, 0, .08); } }
.etapa-bloqueado a { background: var(--cinza-claro); color: var(--cinza); }
.etapa-bloqueado .etapa-marca { background: var(--cinza-claro); }
.etapa-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.etapa-num { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); }
.etapa-num strong { color: var(--primaria); }
.etapa-texto > strong { font-size: 1.05rem; }
.etapa-missao { font-size: .86rem; color: var(--cinza); }
.etapa-cont { font-size: .76rem; color: var(--cinza); }
.barra-prog { display: block; height: 7px; background: var(--cinza-claro); border-radius: 99px; overflow: hidden; margin-top: 4px; max-width: 320px; }
.barra-prog > span { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
.barra-prog.grande { height: 10px; max-width: 420px; background: rgba(255,255,255,.25); }
.barra-prog.grande > span { background: #7ee2a8; }

/* página do capítulo */
.trilha-nav { font-size: .86rem; color: var(--cinza); margin-bottom: 12px; }
.trilha-nav a { text-decoration: none; }
.cap-cab { display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); color: #fff; border-radius: 16px; padding: 26px 28px; margin-bottom: 16px; }
.cap-icone { font-size: 3rem; background: rgba(255,255,255,.15); border-radius: 18px; width: 84px; height: 84px; display: grid; place-items: center; flex: 0 0 84px; }
.cap-num { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.cap-cab h1 { margin: 4px 0 6px; font-size: 1.8rem; }
.cap-missao { margin: 0 0 8px; opacity: .95; }
.cap-cab .etapa-cont { color: rgba(255,255,255,.85); margin: 4px 0 0; }
.aviso-bloqueio { margin-bottom: 16px; }
.historia { background: var(--primaria-clara); border-left: 5px solid var(--primaria); border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: 1.05rem; line-height: 1.7; }
.historia p { margin: 0; }
.historia p::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .4em; vertical-align: -.18em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.cap-folha .bloco ul { padding-left: 22px; margin: 0; }
.cap-folha .bloco li { margin-bottom: 5px; }
.erros-comuns { background: var(--amarelo); border: 1px dashed #e0b84a; border-radius: var(--raio); padding: 14px 18px; }
.abas { display: flex; gap: 4px; margin-top: 10px; }
.aba { background: var(--cinza-claro); border: 1px solid var(--borda); border-bottom: 0; padding: 7px 16px; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--cinza); }
.aba[aria-selected="true"] { background: var(--codigo-fundo); color: #fff; border-color: var(--codigo-fundo); }
.painel-aba { border-top-left-radius: 0; }
.lista-cap a { grid-template-columns: 74px minmax(0, 1fr) auto 70px 20px; }
.chip-cap { display: inline-block; margin-left: 10px; font-size: .8rem; background: var(--primaria-clara); color: var(--primaria); padding: 2px 10px; border-radius: 99px; text-decoration: none; font-weight: 600; }

/* ---------- relatório ---------- */
.rel-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; align-items: start; }
.rel-campo { display: block; font-size: .85rem; font-weight: 600; color: var(--cinza); margin-bottom: 10px; }
.rel-campo input, .rel-campo textarea { display: block; width: 100%; margin-top: 3px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-weight: 400; color: var(--texto); resize: vertical; }
.rel-grade .modelo { position: sticky; top: calc(var(--topo) + 12px); white-space: pre-wrap; max-height: 75vh; overflow: auto; }
.link-relatorio { text-align: center; font-size: .88rem; margin: 10px 0 0 !important; color: var(--cinza); }

/* ---------- biblioteca ---------- */
.intro-bib { color: var(--cinza); margin: -6px 0 14px; max-width: 760px; }
.grupo-livros { margin-bottom: 26px; }
.grupo-livros > h2 { font-size: 1.15rem; color: var(--grafite); border-left: 5px solid var(--primaria); padding-left: 10px; margin: 0 0 12px; }
.grade-livros { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.card-livro { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr auto auto; column-gap: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; }
.capa-livro {
  grid-column: 1; grid-row: 1 / 5; align-self: start; width: 88px; height: 128px; border-radius: 4px 8px 8px 4px; padding: 10px 8px 8px 12px;
  display: flex; flex-direction: column; color: #fff; position: relative; overflow: hidden;
  box-shadow: inset 6px 0 0 rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.18);
}
.capa-livro strong { font-size: .68rem; line-height: 1.2; margin-top: 6px; overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.capa-cat { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.capa-cat { font-size: .55rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.capa-autor { margin-top: auto; font-size: .58rem; opacity: .85; }
.cl-logica { background: linear-gradient(160deg, #b20000, #6e0000); }
.cl-python { background: linear-gradient(160deg, #2f74c0, #18406d); }
.cl-javascript { background: linear-gradient(160deg, #c99a00, #7a5d00); }
.cl-csharp { background: linear-gradient(160deg, #7a3fc8, #44207a); }
.cl-ferramentas { background: linear-gradient(160deg, #4b5259, #25292d); }
.card-livro-info { display: contents; }
.card-livro h3, .card-livro .sub, .card-livro .meta, .card-livro .selos { grid-column: 2; }
.card-livro h3 { grid-row: 1; } .card-livro .sub { grid-row: 2; } .card-livro .meta { grid-row: 3; } .card-livro .selos { grid-row: 4; }
.card-livro .desc { grid-column: 1 / -1; grid-row: 5; margin-top: 10px !important; }
.acoes-livro { grid-column: 1 / -1; grid-row: 7; }
.card-livro .licenca { grid-column: 1 / -1; grid-row: 8; }
.card-livro h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.card-livro .sub { margin: 2px 0 0; font-size: .82rem; color: var(--cinza); }
.card-livro .meta { margin: 4px 0; font-size: .8rem; color: var(--cinza); }
.selos { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.selos span { font-size: .7rem; background: var(--cinza-claro); padding: 1px 7px; border-radius: 99px; color: var(--grafite); }
.card-livro .desc { font-size: .84rem; margin: 0 0 10px; }
.licenca { font-size: .72rem; color: var(--cinza); margin: 6px 0 0; }
.destaque-biblioteca, .faixa-livros { margin-top: 30px; background: var(--superficie); border: 1px solid var(--borda); border-top: 5px solid var(--primaria); border-radius: 14px; padding: 18px 22px; }
.faixa-livros { margin: 0 0 18px; }
.destaque-biblioteca h2, .faixa-livros h2 { margin: 0 0 6px; font-size: 1.1rem; color: var(--primaria); }
.destaque-cab p { margin: 0 0 14px; color: var(--cinza); }
.faixa-livros .card-livro .desc, .destaque-biblioteca .card-livro .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.estudar-mais { margin-top: 22px; border-top: 1px solid var(--borda); padding-top: 14px; }
.estudar-mais h2 { font-size: 1rem; color: var(--grafite); margin: 0 0 6px; }
.estudar-mais ul { margin: 0; padding-left: 20px; }
.estudar-mais li { margin-bottom: 4px; }
.estudar-mais span { color: var(--cinza); font-size: .82rem; }

/* leitor de PDF */
.leitor-cab { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.leitor-cab h1 { margin: 0; color: var(--primaria); font-size: 1.5rem; }
.leitor-cab p { margin: 2px 0 0; color: var(--cinza); font-size: .86rem; }
.leitor-links { display: flex; gap: 6px; flex-wrap: wrap; }
.barra-leitor {
  position: sticky; top: var(--topo); z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  background: var(--grafite); color: #fff; padding: 8px 12px; border-radius: 10px 10px 0 0;
}
.barra-leitor .btn-sec { background: var(--superficie); }
.pag-atual { font-size: .9rem; }
.pag-atual input { width: 64px; padding: 4px 6px; border-radius: 6px; border: 0; font: inherit; text-align: center; }
.barra-leitor .sep { width: 1px; height: 24px; background: rgba(255,255,255,.3); margin: 0 4px; }
#zoom { font-size: .85rem; min-width: 44px; text-align: center; }
.leitor { background: #6b7076; border-radius: 0 0 10px 10px; padding: 16px; min-height: 70vh; overflow: auto; display: flex; justify-content: center; align-items: flex-start; outline: none; }
.leitor canvas { background: var(--superficie); box-shadow: 0 4px 18px rgba(0,0,0,.35); max-width: none; }
.leitor .carregando { color: #fff; }
.leitor.nativo { display: block; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; }
.leitor.nativo iframe { width: 100%; height: 82vh; border: 0; display: block; border-radius: 10px 10px 0 0; }
.leitor.nativo .ajuda { padding: 0 12px 10px; }

/* ---------- celular / tablet ---------- */
@media (max-width: 760px) {
  .topo { gap: 6px 12px; padding: 8px 16px; }
  .nav-topo { order: 3; width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-topo a { white-space: nowrap; flex-shrink: 0; }
  .progresso { display: none; }
  .conteudo { padding: 16px 16px 50px; }
  .hero { padding: 30px 18px; border-radius: 12px; }
  .hero h1 { font-size: 1.6rem; }
  .busca-hero { flex-direction: column; }
  .busca-hero .btn { padding: 11px; justify-content: center; }
  .folha { padding: 18px 16px; }
  .item-cab h1 { font-size: 1.3rem; }
  .lista-exercicios a { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 8px; }
  .lista-exercicios .codigo-id { grid-area: 1 / 1; }
  .lista-exercicios .ex-titulo { grid-area: 1 / 2; }
  .lista-exercicios .ok { grid-area: 1 / 3; justify-self: end; }
  .lista-exercicios .ex-topico { grid-area: 2 / 2; }
  .lista-exercicios .nivel { grid-area: 2 / 3; justify-self: end; }
  .campos { grid-template-columns: 1fr; }
  .grade-livros { grid-template-columns: minmax(0, 1fr); }
  .boas-vindas { grid-template-columns: minmax(0, 1fr); padding: 30px 20px; gap: 22px; }
  .bv-texto h1 { font-size: 1.8rem; }
  .bv-janela { transform: none; min-height: 190px; }
  .boas-vindas .busca-hero { flex-direction: column; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .passos-inicio { grid-template-columns: minmax(0, 1fr); }
  .rel-grade { grid-template-columns: minmax(0, 1fr); }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada-conta { position: static; order: -1; }
  .entrada-hero { padding: 24px 18px; }
  .entrada-hero h1 { font-size: 1.5rem; }
  .pode-fazer { grid-template-columns: minmax(0, 1fr); }
  .campos-3 { grid-template-columns: 1fr; }
  .nome-conta { display: none; }
  .painel-corpo { padding: 12px; border-radius: 12px; }
  .cap-cab { flex-direction: column; align-items: flex-start; padding: 20px; }
  .cap-icone { width: 64px; height: 64px; flex-basis: 64px; font-size: 2.2rem; }
  .cap-cab h1 { font-size: 1.35rem; }
  .lista-cap a { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .lista-cap .lang { display: none; }
  .chip-cap { display: block; margin: 6px 0 0; width: fit-content; }
  .rel-grade .modelo { position: static; }
  .card-livro { grid-template-columns: 72px minmax(0, 1fr); }
  .capa-livro { width: 72px; height: 104px; }
  .leitor { padding: 6px; min-height: 60vh; }
  .leitor-cab h1 { font-size: 1.2rem; }
  .fx-linha { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .fx-linha > .fx-no, .fx-lado { grid-column: 1; }
  .fx-lado { justify-content: center; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media print {
  .topo, .filtros, .editor-barra, .btn, .btn-cod, .aluno, .nav-itens { display: none !important; }
  body { background: var(--superficie); }
  .folha, .grupo-tema { border: 0; padding: 0; }
  .codigo pre { max-height: none; }
  .rel-form, .trilha { display: none !important; }
  .rel-grade { display: block; }
  .rel-grade .modelo { position: static; max-height: none; background: var(--superficie); }
}

/* =====================================================================
   Acabamento "e-learning": tipografia Poppins, cantos amplos e sombras suaves
   ===================================================================== */
[hidden] { display: none !important; }
body { font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; letter-spacing: -.005em; }
h1, h2, h3, .btn, .chip, .aba, .nav-topo a { font-family: "Poppins", "Segoe UI", system-ui, sans-serif; }
h1 { font-weight: 700; letter-spacing: -.02em; }
h2, h3 { font-weight: 600; }
:root { --raio: 14px; --sombra: 0 4px 24px rgba(16, 24, 40, .06); --sombra-forte: 0 14px 34px rgba(16, 24, 40, .12); }
.card-ano, .recurso, .pode, .dica-card, .card-livro, .grupo-tema, .folha, .filtros, .como, .continuar,
.numeros div, .etapa a, .cartao-conta, .painel-corpo, .card-turma, .lista-entregas li, .destaque-biblioteca, .faixa-livros {
  border-radius: 18px; box-shadow: var(--sombra); border-color: transparent;
}
.card-exemplo, .tile-lang, .card-continuar, .lista-exercicios { border-radius: 14px; }
.recurso, .card-livro, .card-exemplo, .tile-lang, .card-ano, .dica-card { transition: transform .18s, box-shadow .18s; }
.recurso:hover, .card-livro:hover, .card-exemplo:hover, .card-ano:hover, .dica-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.btn { border-radius: 12px; padding: 10px 18px; font-weight: 600; }
.btn-peq { border-radius: 10px; }
.chip { border-radius: 12px; padding: 6px 14px; font-weight: 500; }
.rec-icone { width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; }
.titulo-secao { font-size: 1.5rem; font-weight: 700; margin-top: 44px; }
.topo { box-shadow: 0 4px 18px rgba(178, 0, 0, .25); }
.boas-vindas, .entrada-hero, .cap-cab { border-radius: 24px; }
.entrada-hero { position: relative; overflow: hidden; }
.entrada-hero::after, .boas-vindas::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); pointer-events: none;
}
.boas-vindas { position: relative; }
.cartao-conta { border-top-width: 0; padding: 26px; }
.cartao-conta::before { content: ""; display: block; width: 56px; height: 56px; border-radius: 16px; background: var(--primaria-clara) var(--ic-img) center / 28px no-repeat; margin-bottom: 12px; }
.form-conta input, #filtro-q, #busca-hero, .campos input, .rel-campo input, .rel-campo textarea { border-radius: 12px; }
.numeros strong { font-weight: 700; }

/* ---------- ícones de traço (substituem os emojis; ver js/icones.js) ---------- */
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-right: .3em; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-book { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019.5V5a2%202%200%200%201%202-2h14v18H6.5A2.5%202.5%200%200%201%204%2018.5z%22%2F%3E%3Cpath%20d%3D%22M4%2018.5A2.5%202.5%200%200%201%206.5%2016H20%22%2F%3E%3C%2Fsvg%3E"); }
.ic-play { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204l13%208-13%208z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-left { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018l-6-6%206-6%22%2F%3E%3C%2Fsvg%3E"); }
.ic-pencil { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203l4%204L8%2020H4v-4z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-file { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%202v6h6M8%2013h8M8%2017h6%22%2F%3E%3C%2Fsvg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); }
.ic-map { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204L3%206v14l6-2%206%202%206-2V4l-6%202z%22%2F%3E%3Cpath%20d%3D%22M9%204v14M15%206v14%22%2F%3E%3C%2Fsvg%3E"); }
.ic-save { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202z%22%2F%3E%3Cpath%20d%3D%22M17%2021v-8H7v8M7%203v5h8%22%2F%3E%3C%2Fsvg%3E"); }
.ic-send { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%202L11%2013%22%2F%3E%3Cpath%20d%3D%22M22%202l-7%2020-4-9-9-4z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-mail { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M22%206l-10%207L2%206%22%2F%3E%3C%2Fsvg%3E"); }
.ic-target { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.ic-key { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22M10.7%2012.3L21%202M16%207l3%203M18%205l2%202%22%2F%3E%3C%2Fsvg%3E"); }
.ic-code { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2018l6-6-6-6M8%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.ic-cap { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2010L12%205%202%2010l10%205z%22%2F%3E%3Cpath%20d%3D%22M6%2012v5c3%202%209%202%2012%200v-5%22%2F%3E%3C%2Fsvg%3E"); }
.ic-bulb { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2022h4%22%2F%3E%3Cpath%20d%3D%22M12%202a7%207%200%200%200-4%2012.7V16h8v-1.3A7%207%200%200%200%2012%202z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-lock { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22%2F%3E%3C%2Fsvg%3E"); }
.ic-flag { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2022V4M4%204h13l-2%204%202%204H4%22%2F%3E%3C%2Fsvg%3E"); }
.ic-chat { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-alert { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.9L1.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200z%22%2F%3E%3Cpath%20d%3D%22M12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ic-user { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E"); }
.ic-users { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M2%2021a7%207%200%200%201%2014%200M16%204a4%204%200%200%201%200%208M22%2021a7%207%200%200%200-4-6.3%22%2F%3E%3C%2Fsvg%3E"); }
.ic-shuffle { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%203h5v5M4%2020L21%203M21%2016v5h-5M15%2015l6%206M4%204l5%205%22%2F%3E%3C%2Fsvg%3E"); }
.ic-clip { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%2F%3E%3C%2Fsvg%3E"); }
.ic-ext { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6M10%2014L21%203M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3C%2Fsvg%3E"); }
.ic-gear { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M4.9%204.9l2.1%202.1M17%2017l2.1%202.1M2%2012h3M19%2012h3M4.9%2019.1L7%2017M17%207l2.1-2.1%22%2F%3E%3C%2Fsvg%3E"); }
.ic-puzzle { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.ic-repeat { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%201l4%204-4%204%22%2F%3E%3Cpath%20d%3D%22M3%2011V9a4%204%200%200%201%204-4h14M7%2023l-4-4%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2013v2a4%204%200%200%201-4%204H3%22%2F%3E%3C%2Fsvg%3E"); }
.ic-info { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ic-down { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4M7%2010l5%205%205-5M12%2015V3%22%2F%3E%3C%2Fsvg%3E"); }
.ic-print { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V2h12v7M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%228%22%2F%3E%3C%2Fsvg%3E"); }
.ic-sun { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22%2F%3E%3C%2Fsvg%3E"); }
.ic-moon { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012.8A9%209%200%201%201%2011.2%203%207%207%200%200%200%2021%2012.8z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-bug { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%228%22%20height%3D%2214%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%2020v-9M8%2010H4M20%2010h-4M8%2015H3M21%2015h-5M9%206L7%203M15%206l2-3%22%2F%3E%3C%2Fsvg%3E"); }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M21%2021l-4.3-4.3%22%2F%3E%3C%2Fsvg%3E"); }
.ic-clock { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }
.ic-pin { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.ic-box { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208l-9-5-9%205v8l9%205%209-5z%22%2F%3E%3Cpath%20d%3D%22M3%208l9%205%209-5M12%2013v8%22%2F%3E%3C%2Fsvg%3E"); }
.ic-chart { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18M8%2017v-6M13%2017V7M18%2017v-3%22%2F%3E%3C%2Fsvg%3E"); }
.ic-globe { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012h20M12%202a15%2015%200%200%201%200%2020M12%202a15%2015%200%200%200%200%2020%22%2F%3E%3C%2Fsvg%3E"); }
.ic-shield { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-zap { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202L3%2014h9l-1%208%2010-12h-9z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-layers { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202L2%207l10%205%2010-5z%22%2F%3E%3Cpath%20d%3D%22M2%2017l10%205%2010-5M2%2012l10%205%2010-5%22%2F%3E%3C%2Fsvg%3E"); }

/* ícones desenhados em pseudo-elementos */
.historia p::before { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019.5V5a2%202%200%200%201%202-2h14v18H6.5A2.5%202.5%200%200%201%204%2018.5z%22%2F%3E%3Cpath%20d%3D%22M4%2018.5A2.5%202.5%200%200%201%206.5%2016H20%22%2F%3E%3C%2Fsvg%3E"); }
.cartao-conta::before { --ic-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b20000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5z'/%3E%3Cpath d='M6 12v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E"); }
.link-entrar { background: #fff; color: var(--primaria) !important; font-weight: 700; }

/* progresso da trilha */
.trilha-total { font-weight: 600; color: var(--grafite); margin: -6px 0 14px; }
.entregues-ano { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--cinza); background: var(--cinza-claro); padding: 2px 10px; border-radius: 99px; }
.trilha-ano > h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atividades-cap { padding-left: 22px; }
.atividades-cap li { margin-bottom: 8px; }
.faixa-fim { margin: 26px 0 0; }

/* painel: acessos */
.grafico-dias { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; padding: 8px 0; margin-bottom: 18px; }
.gd-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.gd-barra { width: 100%; max-width: 34px; min-height: 2px; background: var(--primaria); border-radius: 4px 4px 0 0; }
.gd-n { font-size: .72rem; color: var(--cinza); }
.gd-dia { font-size: .66rem; color: var(--cinza); }
.tabela-acessos { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela-acessos th, .tabela-acessos td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borda); }
.tabela-acessos th { color: var(--cinza); font-weight: 600; }
@media (max-width: 640px) { .gd-dia { display: none; } .tabela-acessos td:nth-child(4), .tabela-acessos th:nth-child(4) { display: none; } }

/* temas complementares: selos de linguagem, faixas dos cards e capas da biblioteca */
.l-c, .l-cpp { background: #e3ecf5; color: #2d4f73; }
.l-java { background: #fbe9dc; color: #8a3f12; }
.l-swift { background: #fde5df; color: #a1321b; }
.l-lua { background: #e4e6fa; color: #2f3796; }
.l-flowgorithm, .l-estruturas { background: #e4f4ea; color: #1f6b3d; }
.l-frontend { background: #fde9e1; color: #a2401b; }
.l-backend, .l-paralela { background: #efe7fb; color: #5b2b9e; }
.l-dados { background: #e6f0fb; color: #1d5a99; }
.l-office, .l-canva, .l-tcc, .l-git { background: #eceef1; color: #3b434c; }
.tl-c, .tl-cpp { border-left-color: #4f7bab; } .tl-java { border-left-color: #d86b2a; } .tl-swift { border-left-color: #f05138; }
.tl-lua { border-left-color: #3943b7; } .tl-flowgorithm, .tl-estruturas { border-left-color: #2e9a5a; } .tl-frontend { border-left-color: #e0602e; }
.tl-backend, .tl-paralela { border-left-color: #7a3fc8; } .tl-dados { border-left-color: #2f74c0; } .tl-office, .tl-canva, .tl-tcc, .tl-git { border-left-color: #6b737c; }
.cl-c, .cl-cpp { background: linear-gradient(160deg, #4f7bab, #263d57); }
.cl-java { background: linear-gradient(160deg, #d86b2a, #7a3510); }
.cl-swift { background: linear-gradient(160deg, #f05138, #8a2414); }
.cl-lua { background: linear-gradient(160deg, #3943b7, #1d2163); }
.cl-fluxograma, .cl-estruturas { background: linear-gradient(160deg, #2e9a5a, #165031); }
.cl-frontend { background: linear-gradient(160deg, #e0602e, #7c2c0e); }
.cl-backend, .cl-paralela { background: linear-gradient(160deg, #7a3fc8, #3a1b66); }
.cl-dados { background: linear-gradient(160deg, #2f74c0, #18406d); }
.cl-office { background: linear-gradient(160deg, #1f6fb8, #1d7a45); }
.cl-design { background: linear-gradient(160deg, #00a3b4, #6b3fd4); }
.cl-tcc { background: linear-gradient(160deg, #4b5259, #25292d); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) [class*="l-"].lang { filter: saturate(.7) brightness(.92); }
}

/* tutoriais */
.grade-tutoriais { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card-tutorial { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; color: var(--texto); text-decoration: none; }
.card-tutorial:hover { border-color: var(--primaria); }
.card-tutorial strong { font-size: 1.02rem; line-height: 1.3; }
.tut-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primaria); font-weight: 700; }
.tut-resumo { color: var(--cinza); font-size: .9rem; }
.tut-meta { margin-top: auto; font-size: .8rem; color: var(--cinza); }
.tut-cab h1 { margin: 4px 0 6px; }
.tut-passos { counter-reset: passo; list-style: none; padding: 0; margin: 18px 0; }
.tut-passos > li { counter-increment: passo; position: relative; padding: 0 0 18px 34px; border-left: 2px solid var(--borda); margin-left: 16px; min-width: 0; }
.tut-passos > li::before { content: counter(passo); position: absolute; left: -17px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primaria); color: #fff; display: grid; place-items: center; font-weight: 700; }
.tut-passos > li:last-child { border-left-color: transparent; }
.tut-passos h2 { font-size: 1.08rem; margin: 4px 0 6px; }
.tut-resultado { border-left: 4px solid var(--verde); padding-left: 14px; }
@media (max-width: 640px) { .tut-passos > li { padding-left: 26px; margin-left: 14px; } }
.tutorial, .tut-passos > li > * { min-width: 0; max-width: 100%; }
.tutorial .codigo, .tutorial pre { max-width: 100%; overflow-x: auto; }
.tutorial h1 { overflow-wrap: anywhere; }

/* tela de entrada enxuta: boas-vindas + login */
.entrada-simples { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 24px; align-items: center; min-height: calc(100vh - var(--topo) - 120px); }
.boas-vindas-entrada { padding: 48px 40px; }
.boas-vindas-entrada h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 8px 0 14px; }
.boas-vindas-entrada p:last-child { font-size: 1.1rem; max-width: 46ch; }
@media (max-width: 860px) { .entrada-simples { grid-template-columns: minmax(0, 1fr); min-height: 0; } .boas-vindas-entrada { padding: 28px 22px; } }

/* tela de entrada: cabe inteira na janela, sem rolagem */
.sem-login .conteudo { padding-top: 0; padding-bottom: 0; }
.sem-login .entrada-simples { min-height: calc(100vh - var(--topo)); padding: 16px 0; }
/* sem trava de rolagem: o login cabe na janela; o cadastro (mais alto) rola só se precisar */
.sem-login .entrada-simples { min-height: calc(100vh - var(--topo) - 2px); box-sizing: border-box; }
.sem-login .cartao-conta { padding-top: 20px; padding-bottom: 20px; }
.sem-login .cartao-conta::before { width: 44px; height: 44px; background-size: 22px; margin-bottom: 8px; }
.sem-login .form-conta { gap: 8px; }
.sem-login .entrada-simples { padding: 4px 0; }
.sem-login .conta-rodape { margin-top: 8px; padding-top: 8px; }
.sem-login .form-conta input { padding-top: 8px; padding-bottom: 8px; }

/* ---------- topo: conta, acessibilidade e tema no canto direito ---------- */
.area-conta { margin-left: auto; }
.progresso:not(:empty) ~ .area-conta { margin-left: 8px; }
.acess { position: relative; }
.acess > summary { list-style: none; font-weight: 700; font-size: .9rem; min-width: 38px; text-align: center; }
.acess > summary::-webkit-details-marker { display: none; }
.acess-painel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 250px; padding: 14px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); display: grid; gap: 10px; }
.acess-rotulo { margin: 0; font-size: .85rem; color: var(--cinza); }
.acess-fonte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.acess-fonte button, .acess-contraste { padding: 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font-weight: 700; cursor: pointer; }
.acess-fonte button:nth-child(1) { font-size: .85rem; }
.acess-fonte button:nth-child(3) { font-size: 1.15rem; }
.acess-contraste[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.acess-fonte button:hover, .acess-contraste:hover { border-color: var(--primaria); }

/* ---------- alto contraste (claro: preto no branco; escuro: branco/amarelo no preto) ---------- */
:root[data-contraste="alto"] {
  --fundo: #ffffff; --superficie: #ffffff; --superficie-2: #ffffff; --texto: #000000; --grafite: #000000;
  --cinza: #1a1a1a; --cinza-claro: #e8e8e8; --borda: #000000; --primaria: #8a0000; --primaria-escura: #5c0000; --primaria-clara: #ffe3e3;
  --verde: #0a5c2b;
}
:root[data-contraste="alto"][data-tema="escuro"] {
  --fundo: #000000; --superficie: #000000; --superficie-2: #0d0d0d; --texto: #ffffff; --grafite: #ffffff;
  --cinza: #e6e6e6; --cinza-claro: #1f1f1f; --borda: #ffffff; --primaria: #ffd400; --primaria-escura: #ffd400; --primaria-clara: #2e2600;
  --verde: #7dff9e;
}
:root[data-contraste="alto"] a:not(.btn):not(.chip):not(.aba) { text-decoration: underline; }
:root[data-contraste="alto"] :focus-visible { outline: 4px solid #ffd400; outline-offset: 2px; box-shadow: 0 0 0 7px #000; }
:root[data-contraste="alto"] .card-livro, :root[data-contraste="alto"] .folha, :root[data-contraste="alto"] .filtros,
:root[data-contraste="alto"] .numeros div, :root[data-contraste="alto"] .card-tutorial { border-width: 2px; }
:root[data-contraste="alto"] .topo { background: #000 !important; border-bottom: 3px solid #ffd400; }
:root[data-contraste="alto"][data-tema="escuro"] .btn,
:root[data-contraste="alto"][data-tema="escuro"] .chip[aria-pressed="true"],
:root[data-contraste="alto"][data-tema="escuro"] .aba[aria-selected="true"],
:root[data-contraste="alto"][data-tema="escuro"] .acess-contraste[aria-pressed="true"] { color: #000 !important; }
:root[data-contraste="alto"] .entrada-hero, :root[data-contraste="alto"] .boas-vindas, :root[data-contraste="alto"] .cap-cab {
  background: #000 !important; color: #fff; border: 3px solid #ffd400; }
.form-turma input[name=curso] { width: 6em; } .form-turma input[name=letivo] { width: 6.5em; }
.previa-turma { font-size: .9rem; color: var(--cinza); } .previa-turma strong { color: var(--texto); }
/* o painel fica dentro do topo, que muda --primaria: redefine com a cor do tema atual */
.acess-painel { --primaria: #b20000; }
:root[data-tema="escuro"] .acess-painel { --primaria: #d46a6a; }
:root[data-contraste="alto"] .acess-painel { --primaria: #8a0000; }
:root[data-contraste="alto"][data-tema="escuro"] .acess-painel { --primaria: #ffd400; }
:root[data-contraste="alto"] .marca, :root[data-contraste="alto"] .marca * { text-decoration: none !important; }

/* rodapé de todas as páginas */
.rodape-site { text-align: center; padding: 14px 16px; font-size: .82rem; color: var(--cinza); border-top: 1px solid var(--borda); }
.sem-login .rodape-site { position: fixed; left: 0; right: 0; bottom: 0; background: var(--fundo); }
.sem-login .entrada-simples { min-height: calc(100vh - var(--topo) - 50px); }
.sem-login .conteudo { padding-bottom: 48px; }
.entrada-simples { gap: 48px; }
@media (max-width: 860px) { .entrada-simples { gap: 24px; } }

/* cadastro: aluno ou professor */
.papel-conta { border: 1px solid var(--borda); border-radius: 10px; padding: 6px 12px 10px; margin: 2px 0; display: flex; gap: 18px; flex-wrap: wrap; }
.papel-conta legend { font-size: .85rem; font-weight: 600; color: var(--cinza); padding: 0 4px; }
.papel-conta label { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.papel-conta input { width: 18px; height: 18px; accent-color: var(--primaria); }
[data-papel][hidden] { display: none !important; }

/* códigos dos professores */
.form-codigo { display: grid; gap: 12px; margin-bottom: 20px; }
.form-codigo h2 { margin: 0; font-size: 1.15rem; }
.form-codigo .campos-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.form-codigo label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.form-codigo input, .form-codigo select, .form-codigo textarea { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font: inherit; font-weight: 400; }
.form-codigo textarea.editor-mini { font-family: Consolas, "Cascadia Mono", monospace; font-size: .88rem; background: var(--codigo-fundo); color: #e6edf7; tab-size: 4; }
.form-codigo-botoes { display: flex; gap: 8px; }
.lista-codigos { display: grid; gap: 16px; margin-top: 14px; }
.card-codigo header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.card-codigo h2 { margin: 0; font-size: 1.1rem; }
.codigo-acoes { margin-left: auto; display: flex; gap: 10px; }
.texto-codigo p { margin: 0 0 10px; }
@media (max-width: 640px) { .form-codigo .campos-2 { grid-template-columns: minmax(0, 1fr); } }

/* topo mais compacto para caber menu + conta + acessibilidade numa linha */
.topo { gap: 12px; }
.nav-topo { gap: 2px; }
.nav-topo a { padding: 6px 10px; }
@media (max-width: 1360px) and (min-width: 761px) { .marca small { display: none; } .nav-topo a { padding: 6px 8px; font-size: .88rem; } .nome-conta { display: none; } }

.series-codigo { border: 1px solid var(--borda); border-radius: 10px; padding: 6px 12px 10px; display: flex; gap: 18px; flex-wrap: wrap; margin: 0; }
.series-codigo legend { font-size: .9rem; font-weight: 600; padding: 0 4px; }
.series-codigo label { display: flex !important; align-items: center; gap: 6px; cursor: pointer; }
.series-codigo input { width: 18px; height: 18px; accent-color: var(--primaria); }
.janela-entrada { margin-top: 26px; min-height: 180px; transform: rotate(1deg); }
@media (max-width: 860px) { .janela-entrada { transform: none; min-height: 170px; } }
.sem-login .marca small { display: block !important; }
/* o card de boas-vindas fica no mesmo lugar em Entrar e Criar conta:
   o cartão nunca passa da altura da tela; se o cadastro não couber, rola por dentro */
@media (min-width: 861px) {
  .entrada-simples { align-items: center; }
  .sem-login .cartao-conta { max-height: calc(100vh - var(--topo) - 82px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- biblioteca: busca + menu lateral ---------- */
.bib-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.bib-lateral { position: sticky; top: calc(var(--topo) + 16px); max-height: calc(100vh - var(--topo) - 32px); overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 8px; }
.bib-abrir-filtros { display: none; width: 100%; }
.lat-grupo { border-bottom: 1px solid var(--borda); padding: 4px 0; }
.lat-grupo:last-of-type { border-bottom: 0; }
.lat-grupo summary { cursor: pointer; font-weight: 700; padding: 8px 10px; font-size: .92rem; list-style: none; display: flex; justify-content: space-between; }
.lat-grupo summary::after { content: "+"; color: var(--cinza); }
.lat-grupo[open] summary::after { content: "−"; }
.lat-grupo summary::-webkit-details-marker { display: none; }
.lat-grupo ul { list-style: none; margin: 0; padding: 0 0 6px; }
.lat-op { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: 7px 10px; color: var(--texto); cursor: pointer; font-size: .88rem; }
.lat-op:hover { background: var(--cinza-claro); }
.lat-op[aria-pressed="true"] { background: var(--primaria-clara); color: var(--primaria); font-weight: 700; }
.lat-n { font-size: .75rem; color: var(--cinza); background: var(--cinza-claro); border-radius: 99px; padding: 1px 8px; }
#bib-limpar { margin: 8px 10px; }
.bib-busca input { width: 100%; padding: 12px 14px; font-size: 1rem; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); }
.bib-principal .contagem { margin: 12px 0; }
.bib-principal .grade-livros { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 900px) {
  .bib-layout { grid-template-columns: minmax(0, 1fr); }
  .bib-lateral { position: static; max-height: none; padding: 0; border: 0; background: none; }
  .bib-abrir-filtros { display: block; }
  .bib-filtros { display: none; margin-top: 8px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 8px; }
  .bib-lateral.aberta .bib-filtros { display: block; }
}

/* topo: o menu nunca empurra a conta para fora da tela */
.nav-topo { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-topo a { white-space: nowrap; flex-shrink: 0; }
.nome-conta { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.area-conta { flex-shrink: 0; }

/* ---------- menu hambúrguer: o menu vira uma gaveta lateral em todas as telas ---------- */
.btn-menu { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 10px; width: 42px; height: 40px; font-size: 1.35rem; cursor: pointer; flex-shrink: 0; position: relative; z-index: 70; }
.btn-menu:hover { background: rgba(255,255,255,.25); }
.sem-login .btn-menu { display: none; }
.topo .nav-topo {
  position: fixed; top: 0; left: 0; bottom: 0; width: 290px; max-width: 86vw; z-index: 65;
  display: flex; flex-direction: column; gap: 4px; order: 0; overflow-x: hidden; overflow-y: auto;
  padding: calc(var(--topo) + 12px) 12px 20px; background: var(--superficie); border-right: 1px solid var(--borda);
  box-shadow: 8px 0 30px rgba(0,0,0,.25); transform: translateX(-105%); transition: transform .22s ease; visibility: hidden;
}
body.menu-aberto .topo .nav-topo { transform: none; visibility: visible; }
.topo .nav-topo a { color: var(--texto); opacity: 1; padding: 11px 14px; border-radius: 10px; font-size: 1rem; white-space: normal; }
.topo .nav-topo a:hover { background: var(--cinza-claro); }
.topo .nav-topo a.ativo { background: var(--primaria-clara); color: var(--primaria); }
.menu-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; }
body.menu-aberto .btn-menu { background: var(--primaria-clara); color: var(--primaria); }
@media (prefers-reduced-motion: reduce) { .topo .nav-topo { transition: none; } }

/* teste de mesa */
.teste-mesa { margin: 10px 0 16px; }
.tm-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 10px; }
.teste-mesa table { border-collapse: collapse; width: 100%; font-family: Consolas, "Cascadia Mono", monospace; font-size: .88rem; }
.teste-mesa th, .teste-mesa td { padding: 7px 12px; border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); text-align: center; white-space: nowrap; }
.teste-mesa th { background: var(--cinza-claro); color: var(--grafite); font-weight: 700; }
.teste-mesa tr:last-child td { border-bottom: 0; background: var(--primaria-clara); font-weight: 700; }
.teste-mesa td:last-child, .teste-mesa th:last-child { border-right: 0; }
.tm-entrada, .tm-nota { margin: 6px 0; font-size: .9rem; }
.tm-nota { color: var(--cinza); }

/* área de IA */
.grade-trilhas-ia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 18px; }
.card-trilha-ia { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto); text-decoration: none; }
.card-trilha-ia:hover { border-color: var(--primaria); }
.card-trilha-ia strong { font-size: 1.15rem; }
.tia-icone { font-size: 2rem; }
.tia-publico { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primaria); font-weight: 700; }
.cap-ia-cab { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.cap-ia-cab h1 { margin: 2px 0 6px; }
.capitulo-ia .bloco ul { padding-left: 22px; }

/* banco de soluções */
.check-referencia { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: .92rem; cursor: pointer; }
.check-referencia input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primaria); }
.solucoes-ref details { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.solucoes-ref summary { cursor: pointer; font-weight: 600; }

/* área de testes de mesa */
.lista-tm { display: grid; gap: 16px; }
.card-tm header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.tm-algoritmo { margin: 8px 0; }
.tm-algoritmo summary, .tm-como summary { cursor: pointer; font-weight: 600; }
.tm-acoes { display: flex; gap: 8px; margin: 10px 0 4px; }
.teste-mesa input { width: 100%; min-width: 70px; padding: 5px 6px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--superficie); color: var(--texto); font: inherit; text-align: center; }
.teste-mesa input.tm-certo { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 15%, transparent); }
.teste-mesa input.tm-errado { border-color: var(--vermelho, #b91c1c); background: color-mix(in srgb, #b91c1c 15%, transparent); }
.tm-placar { font-weight: 600; margin-left: 8px; }
.link-tm p { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cl-ia { background: linear-gradient(160deg, #0f766e, #134e4a); }
.cl-etica { background: linear-gradient(160deg, #6b7280, #1f2937); }
.cl-uiux { background: linear-gradient(160deg, #db2777, #831843); }
.cl-bancodados { background: linear-gradient(160deg, #0369a1, #0c4a6e); }
.cl-redes { background: linear-gradient(160deg, #4338ca, #1e1b4b); }
.cl-embarcados { background: linear-gradient(160deg, #0d9488, #115e59); }
.cl-mobile { background: linear-gradient(160deg, #7c3aed, #3b0764); }

/* painel: alunos */
.linha-bloqueada td { opacity: .6; }
.acoes-aluno { white-space: nowrap; }

/* área de gabaritos */
.gab-item { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: var(--superficie); }
.gab-item summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gab-enunciado { color: var(--cinza); margin: 8px 0; }
.sem-gab { font-size: .75rem; color: var(--vermelho, #b91c1c); border: 1px solid currentColor; border-radius: 99px; padding: 1px 8px; }
#busca-gab input { width: 100%; padding: 12px 14px; font-size: 1rem; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); }

/* meu perfil */
.perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.link-perfil { color: #fff; text-decoration: none; border-radius: 99px; padding: 5px 10px; }
.link-perfil:hover { background: rgba(255,255,255,.14); }

/* perfil do aluno (área do professor) */
.perfil-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.perfil-cab h1 { margin: 0; }
.perfil-cab p { margin: 4px 0 0; color: var(--cinza); }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--primaria); color: #fff; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; flex-shrink: 0; }
.perfil-dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; }
.perfil-dados dt { font-weight: 700; color: var(--cinza); }
.perfil-dados dd { margin: 0; }

.chip-disciplina { font-size: .75rem; font-weight: 600; background: var(--cinza-claro); color: var(--grafite); border-radius: 99px; padding: 2px 10px; }
.codigos-prof { margin-bottom: 14px; }