:root{
  --bg:#f4f6f9; --superficie:#ffffff; --texto:#1a2634; --suave:#5b6b7d;
  --linha:#dde4ec; --marca:#0f3057; --marca-clara:#1f5f9e; --destaque:#e8f0f8;
  --ok:#1b7f52; --ok-bg:#e3f5ec; --erro:#b4231f; --erro-bg:#fbe9e8;
  --aviso:#8a6100; --aviso-bg:#fdf3dd;
  --raio:12px; --sombra:0 1px 3px rgba(16,32,52,.10),0 8px 24px rgba(16,32,52,.05);
}
html[data-tema="escuro"]{
  --bg:#12171f; --superficie:#1a212b; --texto:#e6ecf3; --suave:#9aa9ba;
  --linha:#2a3442; --marca:#5aa7e8; --marca-clara:#7dbdf2; --destaque:#22303f;
  --ok:#5fd39b; --ok-bg:#173328; --erro:#f08a86; --erro-bg:#3a1e1d;
  --aviso:#e5c069; --aviso-bg:#33290f;
  --sombra:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--texto); line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;
  background:var(--marca); color:#fff;
}
html[data-tema="escuro"] .topo{background:#0d1219; border-bottom:1px solid var(--linha)}
.topo h1{font-size:1.05rem; margin:0; flex:1; font-weight:600; letter-spacing:.2px}
.icone{
  background:transparent; border:0; color:inherit; font-size:1.3rem;
  padding:4px 10px; cursor:pointer; border-radius:8px; line-height:1;
}
.icone:hover{background:rgba(255,255,255,.14)}
#btn-menu{display:none}

.abas{
  position:sticky; top:0; z-index:30; display:flex; overflow-x:auto;
  background:var(--superficie); border-bottom:1px solid var(--linha);
  scrollbar-width:none;
}
.abas::-webkit-scrollbar{display:none}
.aba{
  flex:1 0 auto; padding:12px 16px; border:0; background:transparent; cursor:pointer;
  font-size:.92rem; color:var(--suave); border-bottom:3px solid transparent;
  font-family:inherit; white-space:nowrap;
}
.aba.ativa{color:var(--marca); border-bottom-color:var(--marca); font-weight:600}

.carregando{padding:40px 16px; text-align:center; color:var(--suave)}

/* ---------- telas ---------- */
.tela{display:none}
.tela.ativa{display:block}
#tela-guia.ativa{display:flex; align-items:flex-start}

.painel{
  max-width:820px; margin:16px auto; padding:18px;
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra);
}
.painel h2{margin-top:0; font-size:1.15rem}
.painel h3{font-size:1rem; margin:22px 0 8px; color:var(--suave)}

/* ---------- guia ---------- */
.sumario{
  width:290px; flex:0 0 290px; position:sticky; top:49px;
  max-height:calc(100vh - 49px); overflow-y:auto;
  background:var(--superficie); border-right:1px solid var(--linha); padding:12px;
}
.busca-wrap{position:sticky; top:0; background:var(--superficie); padding-bottom:8px}
#busca{
  width:100%; padding:9px 12px; border:1px solid var(--linha); border-radius:20px;
  background:var(--bg); color:var(--texto); font-size:.9rem; font-family:inherit;
}
#busca:focus{outline:2px solid var(--marca-clara); outline-offset:1px}
.grupo-titulo{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.9px;
  color:var(--suave); margin:14px 0 6px; padding-left:8px; font-weight:700;
}
.item-sumario{
  display:block; width:100%; text-align:left; padding:8px 10px; border:0;
  background:transparent; border-radius:8px; cursor:pointer; color:var(--texto);
  font-size:.88rem; font-family:inherit; line-height:1.35;
}
.item-sumario:hover{background:var(--destaque)}
.item-sumario.ativo{background:var(--destaque); color:var(--marca); font-weight:600}
.item-sumario small{display:block; color:var(--suave); font-size:.74rem; font-weight:400}
.sem-resultado{padding:14px 10px; color:var(--suave); font-size:.86rem}

.conteudo{
  flex:1; min-width:0; max-width:820px; margin:0 auto; padding:20px 22px 80px;
}
.conteudo h1{font-size:1.5rem; line-height:1.3; margin-top:0}
.conteudo h2{font-size:1.2rem; margin-top:1.8em; border-bottom:1px solid var(--linha); padding-bottom:4px}
.conteudo h3{font-size:1.02rem; margin-top:1.5em; color:var(--marca)}
.conteudo table{
  width:100%; border-collapse:collapse; margin:1em 0; font-size:.87rem; display:block; overflow-x:auto;
}
.conteudo th,.conteudo td{border:1px solid var(--linha); padding:7px 10px; text-align:left; vertical-align:top}
.conteudo th{background:var(--destaque); font-weight:600}
.conteudo blockquote{
  margin:1em 0; padding:10px 16px; border-left:4px solid var(--marca);
  background:var(--destaque); border-radius:0 8px 8px 0;
}
.conteudo code{background:var(--destaque); padding:1px 5px; border-radius:4px; font-size:.88em}
.conteudo pre{background:var(--destaque); padding:12px; border-radius:8px; overflow-x:auto}
.conteudo pre code{background:none; padding:0}
.conteudo hr{border:0; border-top:1px solid var(--linha); margin:2em 0}
.conteudo img{max-width:100%}
.nav-secoes{display:flex; justify-content:space-between; gap:10px; margin-top:40px}
mark{background:#ffe58a; color:#1a2634; padding:0 2px; border-radius:2px}
html[data-tema="escuro"] mark{background:#7a6314; color:#fff}

.overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:19}
.overlay.visivel{display:block}

/* ---------- formularios ---------- */
.campo{display:block; margin:14px 0}
.campo span{display:block; font-size:.82rem; color:var(--suave); margin-bottom:5px}
.campo select{
  width:100%; padding:10px 12px; border:1px solid var(--linha); border-radius:8px;
  background:var(--bg); color:var(--texto); font-size:.95rem; font-family:inherit;
}
.checkbox{display:flex; align-items:center; gap:9px; margin:14px 0; font-size:.9rem; cursor:pointer}
.checkbox input{width:18px; height:18px; accent-color:var(--marca)}

.botao{
  padding:10px 18px; border:1px solid var(--linha); border-radius:9px;
  background:var(--superficie); color:var(--texto); font-size:.92rem;
  cursor:pointer; font-family:inherit;
}
.botao:hover{background:var(--destaque)}
.botao:disabled{opacity:.45; cursor:default}
.botao.primario{background:var(--marca); color:#fff; border-color:var(--marca); font-weight:600}
html[data-tema="escuro"] .botao.primario{color:#0d1219}
.botao.primario:hover{background:var(--marca-clara); border-color:var(--marca-clara)}
.botao.pequeno{padding:6px 12px; font-size:.82rem}
.botao.largo{width:100%; margin-top:14px}
.botao.ruim{background:var(--erro-bg); border-color:var(--erro); color:var(--erro)}
.botao.medio{background:var(--aviso-bg); border-color:var(--aviso); color:var(--aviso)}
.botao.bom{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.nota{font-size:.82rem; color:var(--suave)}

/* ---------- simulado ---------- */
.sim-topo{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.pill{
  background:var(--destaque); color:var(--marca); padding:4px 12px;
  border-radius:20px; font-size:.8rem; font-weight:600;
}
.pill.alerta{background:var(--erro-bg); color:var(--erro)}
.sim-topo .botao{margin-left:auto}
.barra{height:4px; background:var(--linha); border-radius:4px; overflow:hidden; margin-bottom:16px}
#sim-barra-fill{height:100%; width:0; background:var(--marca); transition:width .25s}
.tema-tag{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.8px;
  color:var(--suave); margin:0 0 6px; font-weight:700;
}
.enunciado{font-size:1.02rem; line-height:1.62; margin:0 0 18px}
.opcoes{display:flex; flex-direction:column; gap:9px}
.opcao{
  display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%;
  padding:13px 15px; border:1px solid var(--linha); border-radius:10px;
  background:var(--superficie); color:var(--texto); cursor:pointer;
  font-size:.94rem; line-height:1.5; font-family:inherit;
}
.opcao:hover{border-color:var(--marca-clara)}
.opcao .letra{
  flex:0 0 25px; height:25px; border-radius:50%; background:var(--destaque);
  color:var(--marca); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem;
}
.opcao.marcada{border-color:var(--marca); background:var(--destaque)}
.opcao.certa{border-color:var(--ok); background:var(--ok-bg)}
.opcao.certa .letra{background:var(--ok); color:#fff}
.opcao.errada{border-color:var(--erro); background:var(--erro-bg)}
.opcao.errada .letra{background:var(--erro); color:#fff}
.comentario{
  margin-top:16px; padding:14px 16px; border-radius:10px;
  background:var(--destaque); border-left:4px solid var(--marca); font-size:.9rem;
}
.comentario .fonte{display:block; margin-top:8px; font-size:.76rem; color:var(--suave)}
.sim-acoes{display:flex; gap:10px; margin-top:20px}
.sim-acoes .botao{flex:1}

.nota-grande{text-align:center; padding:20px 0}
.nota-grande .numero{font-size:3rem; font-weight:700; color:var(--marca); line-height:1}
.nota-grande .sub{color:var(--suave); font-size:.9rem}
.linha-tema{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--linha); font-size:.87rem;
}
.linha-tema .nome{flex:1; min-width:0}
.linha-tema .mini-barra{flex:0 0 90px; height:6px; background:var(--linha); border-radius:6px; overflow:hidden}
.linha-tema .mini-barra i{display:block; height:100%; background:var(--ok)}
.linha-tema .mini-barra i.baixo{background:var(--erro)}
.linha-tema .mini-barra i.medio{background:var(--aviso)}
.linha-tema .valor{flex:0 0 56px; text-align:right; color:var(--suave); font-variant-numeric:tabular-nums}
.revisao .item{padding:14px 0; border-bottom:1px solid var(--linha)}
.revisao .item .marca-res{font-weight:700; font-size:.8rem}
.revisao .item .marca-res.ok{color:var(--ok)}
.revisao .item .marca-res.nok{color:var(--erro)}

/* ---------- flashcards ---------- */
.cartao{
  min-height:200px; padding:24px; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--destaque); display:flex; flex-direction:column; justify-content:center;
}
.cartao-frente{font-size:1.1rem; font-weight:600; line-height:1.5}
.cartao-verso{
  margin-top:18px; padding-top:16px; border-top:1px dashed var(--linha);
  font-size:.96rem; line-height:1.62;
}
.avaliacao{display:flex; gap:9px; margin-top:14px}
.avaliacao .botao{flex:1}

/* ---------- progresso ---------- */
.cards-metricas{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:11px; margin:14px 0}
.metrica{padding:14px; background:var(--destaque); border-radius:10px; text-align:center}
.metrica .v{font-size:1.6rem; font-weight:700; color:var(--marca); line-height:1.2}
.metrica .r{font-size:.76rem; color:var(--suave)}
.hist-item{
  display:flex; gap:10px; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--linha); font-size:.85rem;
}
.hist-item .data{color:var(--suave); flex:1}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  #btn-menu{display:block}
  .sumario{
    position:fixed; top:0; left:0; bottom:0; z-index:20; width:82%; max-width:320px;
    max-height:none; transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:var(--sombra); padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  }
  .sumario.aberto{transform:translateX(0)}
  .conteudo{padding:16px 15px 70px}
  .painel{margin:12px 10px; padding:15px; border-radius:10px}
  .conteudo h1{font-size:1.3rem}
}
@media print{
  .topo,.abas,.sumario,.overlay,.sim-acoes,.botao{display:none!important}
  .conteudo{max-width:100%; padding:0}
  body{background:#fff}
}