:root {
  --bg: #f6f7f9; --card: #ffffff; --texto: #1c2430; --mudo: #5d6a7c; --linha: #dfe3e9;
  --marca: #1f4e79; --marca-txt: #ffffff;
  --dominado: #1e8a4c; --ok: #2b6cb0; --dificuldade: #b7791f; --lacuna: #c53030;
  --sem_rodada: #6b46c1; --nao_comecou: #8a94a3;
  --novo: #8a94a3; --aprendendo: #2b6cb0; --consolidado: #1e8a4c; --atrasado: #c53030;
  --trilho: #e7eaef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151b; --card: #1a2029; --texto: #e6eaf0; --mudo: #9aa6b6; --linha: #2b3441;
    --marca: #7fb2e5; --marca-txt: #0e1319;
    --dominado: #4cc38a; --ok: #6aa9ee; --dificuldade: #e0a84a; --lacuna: #f07a7a;
    --sem_rodada: #a58cf0; --nao_comecou: #7c8797;
    --novo: #7c8797; --aprendendo: #6aa9ee; --consolidado: #4cc38a; --atrasado: #f07a7a;
    --trilho: #2a323e;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.mudo { color: var(--mudo); }
.erro { color: var(--lacuna); min-height: 1.2em; margin: .5rem 0 0; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 340px; background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 24px; display: grid; gap: 12px; }
.login-card h1 { font-size: 1.6rem; color: var(--marca); }
label { display: grid; gap: 4px; font-size: .85rem; color: var(--mudo); }
input { font: inherit; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--bg); color: var(--texto); }
button { font: inherit; cursor: pointer; }
button[type=submit] { padding: 10px; border: 0; border-radius: 8px; background: var(--marca); color: var(--marca-txt); font-weight: 600; }
.link { background: none; border: 0; color: var(--marca); padding: 0; text-decoration: underline; }

.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--linha); }
.marca { font-weight: 700; color: var(--marca); font-size: 1.1rem; }
.abas { display: flex; gap: 4px; flex: 1; }
.abas button { border: 0; background: none; color: var(--mudo); padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.abas button.ativa { background: var(--marca); color: var(--marca-txt); }
.quem { font-size: .85rem; color: var(--mudo); }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.painel { background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.tile { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.tile b { display: block; font-size: 1.5rem; line-height: 1.1; }
.tile span { font-size: .8rem; color: var(--mudo); }

.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.chip.dominado { color: var(--dominado); } .chip.ok { color: var(--ok); } .chip.dificuldade { color: var(--dificuldade); }
.chip.lacuna { color: var(--lacuna); } .chip.sem_rodada { color: var(--sem_rodada); } .chip.nao_comecou { color: var(--nao_comecou); }
.chip.foco { color: var(--marca); }

.barra { height: 10px; background: var(--trilho); border-radius: 999px; overflow: hidden; display: flex; }
.barra > i { display: block; height: 100%; }
.linha-barra { display: grid; gap: 4px; }
.cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cab small { color: var(--mudo); }

.hero { display: grid; gap: 14px; }
.hero .num { font-size: 2rem; font-weight: 700; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.materia { border: 1px solid var(--linha); border-radius: 12px; padding: 12px; display: grid; gap: 8px; background: var(--card); }
.materia button.abrir { background: none; border: 0; text-align: left; padding: 0; color: inherit; display: grid; gap: 8px; width: 100%; }
.materia .nome { font-weight: 650; }
.topicos { display: grid; gap: 4px; border-top: 1px dashed var(--linha); padding-top: 8px; }
.topico { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: .85rem; padding: 4px 0; }
.topico .nome { overflow-wrap: anywhere; }
.topico.atual { background: color-mix(in srgb, var(--marca) 10%, transparent); border-radius: 8px; padding: 4px 6px; }
.topico small { color: var(--mudo); display: block; }

.lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lista li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lista li:last-child { border-bottom: 0; }

.termo-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
@media (max-width: 560px) { .termo-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; } .topo { gap: 8px; } }
.termo-num { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--mudo); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--mudo); font-weight: 600; font-size: .8rem; }
.vazio { color: var(--mudo); padding: 8px 0; }
svg text { fill: var(--mudo); font-size: 10px; }