:root {
  --fs-navy: #0F4F97;
  --fs-navy-2: #0b3d78;
  --fs-red: #D01721;
  --ok: #1f7a4d;
  --bg: #eef2f6;
  --surface: #fff;
  --ink: #0b1d33;
  --ink-soft: #51617a;
  --line: #d2dbe6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 'Segoe UI', Arial, sans-serif;
}
.brandbar { height: 6px; background: linear-gradient(90deg, var(--fs-navy), var(--fs-red) 130%); }
header.topo {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.1rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
header.topo img { height: 2.4rem; width: auto; border-radius: 5px; }
header.topo h1 { font-size: 1.15rem; margin: 0; color: var(--fs-navy); }
header.topo .sub { font-size: 0.8rem; color: var(--ink-soft); }
main { max-width: 46rem; margin: 0 auto; padding: 1.25rem; }
.progresso {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem 1.1rem; margin-bottom: 1.1rem;
}
.progresso .barra { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; margin-top: 0.5rem; }
.progresso .fill { height: 100%; background: var(--ok); width: 0%; transition: width .2s; }
.progresso .texto { font-size: 0.85rem; color: var(--ink-soft); }
section.grupo { margin-bottom: 1.4rem; }
section.grupo h2 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin: 0 0 0.5rem 0.1rem;
}
ul.itens { list-style: none; margin: 0; padding: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
ul.itens li { border-bottom: 1px solid var(--line); }
ul.itens li:last-child { border-bottom: none; }
ul.itens li.feito { background: #f3fbf6; }
ul.itens li label.linha {
  display: flex; align-items: center; gap: 0.9rem; padding: 1rem;
  min-height: 3rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
ul.itens li label.linha:active { background: #e4eaf1; }
ul.itens input[type=checkbox] { width: 1.5rem; height: 1.5rem; accent-color: var(--ok); flex-shrink: 0; }
ul.itens .nome { flex: 1; font-size: 1rem; }
ul.itens .extra { display: flex; padding: 0 1rem 0.9rem 1rem; }
ul.itens a.baixar { font-size: 0.85rem; color: var(--fs-navy); text-decoration: none;
  border: 1px solid var(--fs-navy); padding: 0.5rem 0.8rem; border-radius: 5px; margin-left: 2.4rem; }
ul.itens a.baixar:active { background: var(--fs-navy); color: #fff; }
@media (hover: hover) { ul.itens a.baixar:hover { background: var(--fs-navy); color: #fff; } }
footer.rodape { text-align: center; font-size: 0.72rem; color: var(--ink-soft); padding: 1.5rem; }

@media print {
  header.topo, .brandbar, footer.rodape, ul.itens a.baixar, ul.itens input[type=checkbox] { display: none; }
  ul.itens li::before { content: "\2610  "; }
  ul.itens li.feito::before { content: "\2611  "; }
  body { background: #fff; }
}