/* ============ Identidade: motivacional e vibrante ============ */
:root {
  --bg: #f4f2fc; --bg-2: #ebe7fa; --card: #ffffff; --ink: #1c1930; --muted: #6c6884; --line: #e3dff2;
  --accent: #6a45f5; --accent-2: #9b6bff; --accent-soft: #eee9ff; --sobre-accent: #ffffff;
  --ok: #0f9f55; --ok-soft: #dff6e9; --no: #e0464c; --no-soft: #fde7e8;
  --warn: #b86e00; --warn-soft: #fff1d6; --adj: #2f6fe4; --adj-soft: #e5eeff;
  --fogo: #ff6a1f; --fogo-soft: #ffeadd; --ouro: #e8a500; --ouro-soft: #fff4d1;
  --gradiente: linear-gradient(135deg, #5b3df0 0%, #8f4bf5 50%, #e0559a 100%);
  --sombra: 0 1px 2px rgba(40, 20, 90, .06), 0 8px 24px rgba(40, 20, 90, .08);
  --sombra-forte: 0 12px 40px rgba(80, 40, 200, .25);
  --heat-0: #e6e2f3; --heat-1: #d3c6ff; --heat-2: #a991ff; --heat-3: #7d5cf7; --heat-4: #5534d8;
  --raio: 18px;
  /* gráficos: paleta validada (categórica em ordem fixa, sequencial azul) */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --seq-0: #e6e2f3; --seq-1: #cde2fb; --seq-2: #86b6ef; --seq-3: #3987e5; --seq-4: #1c5cab;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0d18; --bg-2: #171424; --card: #1b1829; --ink: #f2effc; --muted: #a39fbd; --line: #2d2942;
    --accent: #8f72ff; --accent-2: #b39bff; --accent-soft: #2a2350; --sobre-accent: #ffffff;
    --ok: #3fd283; --ok-soft: #12301f; --no: #ff6c71; --no-soft: #3a1a1d;
    --warn: #ffbd4a; --warn-soft: #36290f; --adj: #77a3ff; --adj-soft: #1b2648;
    --fogo: #ff8a4a; --fogo-soft: #3b2215; --ouro: #ffc83d; --ouro-soft: #382c0d;
    --gradiente: linear-gradient(135deg, #4b2fd6 0%, #7a3be0 50%, #c2457f 100%);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --sombra-forte: 0 12px 40px rgba(0, 0, 0, .45);
    --heat-0: #231f35; --heat-1: #3a2c78; --heat-2: #5638c4; --heat-3: #8467ff; --heat-4: #c3b2ff;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --seq-0: #231f35; --seq-1: #104281; --seq-2: #1c5cab; --seq-3: #3987e5; --seq-4: #86b6ef;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-image: radial-gradient(1200px 500px at 85% -10%, var(--accent-soft), transparent 60%); background-attachment: fixed; }
a { color: var(--accent); }
h1, h2, h3 { letter-spacing: -.01em; }
h1 { font-size: 30px; font-weight: 800; margin: 0 0 4px; }
h2 { font-size: 19px; font-weight: 800; margin: 0 0 14px; }
.sub { color: var(--muted); margin: 0 0 24px; }
.num { color: var(--muted); font-size: 13px; }
.vazio { color: var(--muted); text-align: center; padding: 50px 20px; }
small { font-size: .85em; }

button { font: inherit; font-weight: 600; cursor: pointer; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  padding: 9px 16px; transition: transform .08s, border-color .15s, background .15s, box-shadow .15s; }
button:hover { border-color: var(--accent-2); }
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.principal { background: var(--gradiente); color: var(--sobre-accent); border-color: transparent; box-shadow: 0 6px 18px rgba(106, 69, 245, .35); }
button.principal:hover { box-shadow: 0 8px 26px rgba(106, 69, 245, .5); }
button.grande { padding: 14px 28px; font-size: 18px; border-radius: 16px; }
button.peq, a.peq { padding: 5px 12px; font-size: 13px; border-radius: 10px; }
kbd { font: 600 11px ui-monospace, monospace; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; opacity: .6; margin-left: 8px; }
.chip { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }

/* ============ Barra superior ============ */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px 24px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.marca { font-weight: 800; font-size: 19px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.marca::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: var(--gradiente); box-shadow: 0 4px 12px rgba(106, 69, 245, .4); }
nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
nav a { text-decoration: none; color: var(--muted); padding: 7px 13px; border-radius: 10px; font-weight: 600; font-size: 15px; }
nav a:hover { color: var(--ink); background: var(--bg-2); }
nav a.ativo { background: var(--accent-soft); color: var(--accent); }
.status { display: flex; gap: 8px; align-items: center; }
.pilula { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-weight: 700; font-size: 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pilula.fogo { color: var(--fogo); background: var(--fogo-soft); border-color: transparent; }
.pilula.fogo.apagado { color: var(--muted); background: var(--bg-2); }
.pilula.nivel { background: var(--ouro-soft); color: var(--ouro); border-color: transparent; }
.pilula .mini-barra { width: 54px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ouro) 25%, transparent); overflow: hidden; }
.pilula .mini-barra div { height: 100%; background: var(--ouro); border-radius: 3px; }
body.estudando .barra { display: none; }
/* responder cards e questões: letras maiores no PC (o usuário usava zoom de 150% no navegador) */
@media (min-width: 1000px) { body.estudando { zoom: 1.5; } }

main { max-width: 1040px; margin: 0 auto; padding: 30px 24px 70px; }
.painel { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--sombra); }

/* ============ Hoje ============ */
.missao { position: relative; overflow: hidden; border-radius: 26px; padding: 30px 32px; color: #fff; background: var(--gradiente); box-shadow: var(--sombra-forte); margin-bottom: 22px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.missao::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
@media (max-width: 760px) { .missao { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.missao h1 { color: #fff; font-size: 32px; }
.missao .data { opacity: .8; font-size: 15px; }
.missao .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.missao .chip { background: rgba(255, 255, 255, .18); color: #fff; }
.missao button.grande { background: #fff; color: #4b2fd6; border: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-weight: 800; position: relative; z-index: 1; }
.missao button.grande kbd { color: #4b2fd6; }
.anel { position: relative; width: 132px; height: 132px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .trilho { stroke: rgba(255, 255, 255, .22); }
.anel .valor { stroke: #fff; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.anel .centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.anel .centro b { font-size: 30px; font-weight: 800; }
.anel .centro span { font-size: 12px; opacity: .85; }
.missao .detalhe { margin-top: 10px; font-size: 14px; opacity: .9; }
.missao .detalhe a { color: #fff; font-weight: 700; }

.cards-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 760px) { .cards-status { grid-template-columns: 1fr; } }
.status-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra); display: flex; gap: 14px; align-items: center; }
.status-card .icone { font-size: 30px; width: 54px; height: 54px; border-radius: 16px; display: grid; place-content: center; flex: none; }
.status-card.fogo .icone { background: var(--fogo-soft); }
.status-card.ouro .icone { background: var(--ouro-soft); }
.status-card.alvo .icone { background: var(--ok-soft); }
.status-card b { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; }
.status-card span { color: var(--muted); font-size: 14px; }
.status-card .barrinha { height: 7px; border-radius: 4px; background: var(--bg-2); margin-top: 7px; overflow: hidden; }
.status-card .barrinha div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ouro), #ff9d2e); }

.edital-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 22px 24px; box-shadow: var(--sombra); margin-bottom: 22px; }
.edital-card .topo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.edital-card .rotulo { margin-bottom: 2px; }
.trilha { position: relative; height: 12px; border-radius: 6px; background: var(--bg-2); margin: 16px 0 6px; }
.trilha .feito { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--gradiente); }
.trilha .marco { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--card); border: 3px solid var(--accent); box-shadow: var(--sombra); }
.trilha-legenda { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.placar-item .linha-placar { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.placar-item .linha-placar b { font-size: 15px; }
.barra-meta { position: relative; height: 14px; border-radius: 7px; background: var(--bg-2); overflow: visible; }
.barra-meta .atual { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.barra-meta .alvo { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--ouro); }

.conquistas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .conquistas { grid-template-columns: repeat(2, 1fr); } }
.conquista { border-radius: 16px; padding: 14px; text-align: center; background: var(--bg-2); border: 1.5px solid transparent; position: relative; }
.conquista .emoji { font-size: 34px; line-height: 1; filter: grayscale(1); opacity: .45; }
.conquista.obtida { background: linear-gradient(160deg, var(--ouro-soft), var(--card)); border-color: color-mix(in srgb, var(--ouro) 45%, transparent); }
.conquista.obtida .emoji { filter: none; opacity: 1; }
.conquista b { display: block; font-size: 14px; margin-top: 8px; line-height: 1.25; }
.conquista span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.conquista .prog { height: 5px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.conquista .prog div { height: 100%; background: var(--accent); }
.ver-mais { margin-top: 12px; }

.calendario { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); gap: 4px; justify-content: start; overflow-x: auto; }
.calendario i { width: 14px; height: 14px; border-radius: 4px; background: var(--heat-0); }
.dica-foco { background: var(--adj-soft); border-radius: 14px; padding: 12px 16px; font-size: 15px; margin-bottom: 20px; }

/* ============ Estudo ============ */
.estudo-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.estudo-topo .caminho { color: var(--muted); font-size: 13px; flex: 1; min-width: 200px; }
.xp-sessao { font-weight: 800; color: var(--ouro); background: var(--ouro-soft); padding: 4px 12px; border-radius: 99px; font-size: 14px; }
.progresso { height: 10px; background: var(--bg-2); border-radius: 5px; overflow: hidden; margin-bottom: 22px; }
.progresso div { height: 100%; background: var(--gradiente); border-radius: 5px; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.palco { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px 34px; min-height: 280px; box-shadow: var(--sombra); position: relative; }
.palco.flash-ok { animation: flashOk .6s; }
.palco.flash-no { animation: tremer .45s; }
@keyframes flashOk { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes tremer { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.legado { font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.legado img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 10px 0; }
.legado audio { width: 100%; margin: 8px 0; }
.legado * { color: inherit !important; background: transparent !important; font-family: inherit !important; font-size: inherit !important; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; justify-content: center; }
.acoes button { min-width: 140px; }
.acoes button[data-resp="CERTO"] { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.acoes button[data-resp="CERTO"]:hover { background: var(--ok-soft); border-color: var(--ok); }
.acoes button[data-resp="ERRADO"] { border-color: color-mix(in srgb, var(--no) 50%, var(--line)); }
.acoes button[data-resp="ERRADO"]:hover { background: var(--no-soft); border-color: var(--no); }
.notas-botoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
@media (max-width: 640px) { .notas-botoes { grid-template-columns: repeat(2, 1fr) !important; } }
.notas-botoes button { display: grid; gap: 2px; padding: 12px; }
.notas-botoes button small { color: var(--muted); font-size: 12px; font-weight: 500; }
.n1 { border-color: var(--no) !important; } .n4 { border-color: var(--ok) !important; }
.resultado { font-weight: 800; padding: 12px 16px; border-radius: 14px; margin: 20px 0 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.resultado.acertou { background: var(--ok-soft); color: var(--ok); }
.resultado.errou { background: var(--no-soft); color: var(--no); }
.resultado .xp-ganho { margin-left: auto; color: var(--ouro); font-size: 14px; animation: subir 1s ease-out; }
@keyframes subir { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
.cx-alts li.clicavel { cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.cx-alts li.clicavel:hover { border-color: var(--accent); background: var(--accent-soft); }
.cx-alts li.clicavel:active { transform: scale(.99); }
.cx-alts li.escolhida-errada { background: var(--no-soft); border-color: transparent; }
.rodape-estudo { display: flex; justify-content: space-between; margin-top: 14px; color: var(--muted); font-size: 14px; gap: 10px; flex-wrap: wrap; align-items: center; }
.rodape-estudo button { font-size: 14px; padding: 6px 12px; }
.placar-sessao b { color: var(--ink); }
.fim { text-align: center; padding: 50px 24px; position: relative; overflow: hidden; }
.fim h1 { font-size: 34px; }
.fim .resumo-fim { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 28px; }
.fim .resumo-fim div { background: var(--bg-2); border-radius: 16px; padding: 14px 20px; min-width: 120px; }
.fim .resumo-fim b { display: block; font-size: 26px; font-weight: 800; }
.fim .resumo-fim .xp b { color: var(--ouro); }
.subiu-nivel { display: inline-block; background: var(--ouro-soft); color: var(--ouro); font-weight: 800; padding: 8px 18px; border-radius: 99px; margin-bottom: 8px; animation: subir .8s; }
.confete { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: cair 2.6s linear forwards; pointer-events: none; }
@keyframes cair { to { transform: translateY(520px) rotate(720deg); opacity: 0; } }

/* ============ Matérias ============ */
.arvore { display: grid; gap: 8px; }
.linha { display: grid; grid-template-columns: 1fr 150px 130px 270px; gap: 12px; align-items: center; padding: 11px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
@media (max-width: 760px) { .linha { grid-template-columns: 1fr; } }
.linha .nome { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.linha .nome button { border: 0; padding: 0 4px; background: none; color: var(--muted); width: 22px; box-shadow: none; }
.linha .nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha small.pai, h2.secao small { font-size: 13px; font-weight: 500; color: var(--muted); }
.barra-lembranca { height: 7px; border-radius: 4px; background: var(--bg-2); overflow: hidden; margin-top: 3px; }
.barra-lembranca div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.modos { display: flex; background: var(--bg-2); border-radius: 12px; padding: 3px; gap: 2px; }
.modos button { border: 0; border-radius: 9px; flex: 1; padding: 6px 6px; font-size: 13px; background: transparent; color: var(--muted); }
.modos button.ativo { background: var(--card); color: var(--accent); box-shadow: var(--sombra); }
.modos button.herdado { color: var(--accent); }
h2.secao { margin: 32px 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.banner-foco { display: flex; gap: 6px; align-items: center; text-decoration: none; color: #fff; background: var(--gradiente); border-radius: 14px; padding: 12px 18px; margin: 14px 0 18px; box-shadow: var(--sombra); font-weight: 500; }
.ferramentas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.abas { display: inline-flex; background: var(--bg-2); border-radius: 12px; padding: 3px; gap: 2px; }
.abas a { padding: 7px 16px; text-decoration: none; color: var(--muted); border-radius: 9px; font-weight: 600; font-size: 14px; }
.abas a.ativo { background: var(--card); color: var(--accent); box-shadow: var(--sombra); }
.grupo-assunto { margin-bottom: 16px; }
.grupo-assunto summary { cursor: pointer; padding: 8px 0; font-size: 18px; }
.linha-assunto { grid-template-columns: 1fr 160px 140px 200px; }
@media (max-width: 760px) { .linha-assunto { grid-template-columns: 1fr; } }
.acoes-linha { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.sem { color: var(--warn); font-size: 13px; font-weight: 600; }

/* ============ Editais ============ */
.hero { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 26px 28px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--gradiente); }
.hero-topo, .edital-topo { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.sub-hero { color: var(--muted); font-size: 15px; }
.contadores { display: flex; gap: 12px; flex-wrap: wrap; }
.contador { text-align: center; background: var(--accent-soft); border-radius: 18px; padding: 12px 22px; display: grid; }
.contador b { font-size: 44px; line-height: 1; color: var(--accent); font-weight: 800; }
.contador b small { font-size: 22px; }
.contador span { font-size: 14px; font-weight: 600; }
.contador small { color: var(--muted); }
.contador.meta { background: var(--ouro-soft); } .contador.meta b { color: var(--ouro); }
.prazo { margin-top: 16px; padding: 11px 16px; border-radius: 14px; background: var(--warn-soft); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 15px; }
.prazo.urgente { background: var(--no-soft); } .prazo.ok { background: var(--ok-soft); }
.prazo label { color: var(--muted); cursor: pointer; }
.hero-grade { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; margin-top: 22px; }
@media (max-width: 760px) { .hero-grade { grid-template-columns: 1fr; } }
.hero h1 { font-size: 30px; }
.hero h3, .edital h3 { font-size: 16px; margin: 0 0 10px; }
.hero textarea { width: 100%; min-height: 160px; font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical; }
.hero textarea:focus { outline: none; border-color: var(--accent); }
.salvo-motivacao { font-size: 12px; color: var(--ok); min-height: 16px; }
.insights { margin: 0; padding-left: 1.1em; display: grid; gap: 9px; font-size: 15px; }
.insights li::marker { color: var(--accent); }
.disc-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.disc-mini div > span { display: block; font-size: 13px; color: var(--muted); margin: 2px 0 6px; }
.edital { position: relative; }
.edital.em-foco { border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.edital h2 { margin: 2px 0; font-size: 24px; }
.edital-acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.datas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; }
@media (max-width: 640px) { .datas { grid-template-columns: 1fr; } }
.datas div { background: var(--bg-2); border-radius: 14px; padding: 11px 14px; display: grid; }
.datas span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.formato { color: var(--muted); font-size: 15px; }
.cargos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 14px 0 22px; }
.cargo { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--bg); }
.cargo h4 { margin: 0 0 8px; font-size: 16px; }
.cargo dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 14px; }
.cargo dt { color: var(--muted); } .cargo dd { margin: 0; font-weight: 600; }
.cargo details { margin-top: 10px; font-size: 14px; }
.bloco-cargos { margin: 14px 0 6px; }
.bloco-cargos > summary, .disciplina > summary { cursor: pointer; font-weight: 700; }
.disciplina { border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; }
.disciplina summary { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.topicos { display: grid; gap: 6px; margin-top: 12px; }
.topico { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.topico.lacuna { border-style: dashed; border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.topico-linha { width: 100%; display: grid; grid-template-columns: 18px 1fr 180px 130px; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; padding: 9px 12px; font-weight: 600; border-radius: 12px; }
@media (max-width: 760px) { .topico-linha { grid-template-columns: 18px 1fr; } .t-num, .t-lemb { grid-column: 2; } }
.topico-linha:hover { background: var(--bg-2); }
.topico-linha .seta { color: var(--muted); }
.topico-linha .t-num, .topico-linha .num { font-size: 13px; color: var(--muted); font-weight: 500; }
.topico-linha .t-lemb { font-size: 13px; }
.topico.lacuna .t-nome { color: var(--warn); }
.topico.aberto { background: var(--bg); }
.topico-corpo { padding: 0 14px; }
.topico.aberto .topico-corpo { padding: 4px 16px 16px; }
.t-origem { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.t-acoes { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.t-cards { margin: 0; padding-left: 1.4em; display: grid; gap: 5px; font-size: 14px; max-height: 320px; overflow-y: auto; }
.t-cards .num { margin-right: 6px; }

/* ============ Estatísticas ============ */
.filtros-est { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0 8px; }
.filtros { display: inline-flex; gap: 2px; flex-wrap: wrap; background: var(--bg-2); border-radius: 12px; padding: 3px; }
.filtros button { border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-radius: 9px; }
.filtros button.ativo { background: var(--card); color: var(--accent); box-shadow: var(--sombra); }
.recorte-btn { display: inline-flex; align-items: center; gap: 8px; }
.recorte-btn .seta-baixo { opacity: .6; }
.atalhos-recorte { display: flex; gap: 6px; flex-wrap: wrap; }
.atalhos-recorte button { padding: 5px 12px; font-size: 13px; border-radius: 99px; }
.atalhos-recorte button.ativo { background: var(--accent); color: var(--sobre-accent); border-color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 20px; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.metrica { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); }
.metrica b { display: block; font-size: 28px; line-height: 1.15; font-weight: 800; }
.metrica span { color: var(--muted); font-size: 14px; }
.tiles em { font-style: normal; font-size: 13px; font-weight: 700; }
.tiles em.sobe { color: var(--ok); } .tiles em.desce { color: var(--no); }
.grade-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 860px) { .grade-graficos { grid-template-columns: 1fr; } }
.grade-graficos .painel h2, .painel h2 { font-size: 17px; }
.sub-graf { font-size: 14px; margin: 18px 0 4px; color: var(--muted); font-weight: 700; }
.nota-grafico { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
svg.g { width: 100%; height: auto; display: block; overflow: visible; }
.g-grade { stroke: var(--line); stroke-width: 1; }
.g-base { stroke: var(--muted); stroke-width: 1; }
.g-eixo { fill: var(--muted); font-size: 11px; font-family: inherit; }
.g-dica { position: fixed; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .1s; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.4; padding: 7px 11px; border-radius: 10px; max-width: 260px; box-shadow: var(--sombra-forte); }
.g-100 { display: flex; gap: 2px; height: 28px; border-radius: 8px; overflow: hidden; margin: 6px 0 10px; }
.g-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); align-items: center; }
.g-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.g-legenda b { color: var(--ink); }
.g-cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; overflow: hidden; padding-bottom: 6px; }
.g-cal i { width: 11px; height: 11px; border-radius: 3px; }
.g-cal i.vazio { background: transparent; }
.g-escala { margin-top: 6px; gap: 4px; } .g-escala i { margin: 0; }
table.t-est { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t-est th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 7px 8px; border-bottom: 1px solid var(--line); }
table.t-est td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
table.t-est tbody tr { cursor: pointer; }
table.t-est tbody tr:hover { background: var(--accent-soft); }
.celula-barra { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; min-width: 120px; }

/* Seletor de recorte (Estatísticas) */
.seletor { max-width: 640px !important; padding: 0 !important; overflow: hidden; }
.seletor-topo { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.seletor-topo input { width: 100%; font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); margin-top: 10px; }
.seletor-topo input:focus { outline: none; border-color: var(--accent); }
.seletor-corpo { max-height: 60vh; overflow-y: auto; padding: 12px 20px 20px; }
.seletor-grupo h4 { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.seletor-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.seletor-opcoes button { padding: 6px 12px; font-size: 14px; border-radius: 99px; font-weight: 600; display: inline-flex; gap: 6px; align-items: baseline; }
.seletor-opcoes button small { color: var(--muted); font-weight: 500; }
.seletor-opcoes button.ativo { background: var(--accent); color: var(--sobre-accent); border-color: var(--accent); }
.seletor-opcoes button.ativo small { color: inherit; opacity: .8; }

/* ============ Listas, Resumos, diálogos ============ */
.lista { display: grid; gap: 16px; }
.lista .painel { margin: 0; }
.lista .meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.nota-titulo { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.caderno { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .caderno { grid-template-columns: 1fr; } }
.indice { position: sticky; top: 80px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 10px; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow-y: auto; box-shadow: var(--sombra); }
.indice input { font: inherit; font-size: 14px; padding: 8px 11px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); margin-bottom: 6px; }
.indice a { text-decoration: none; color: var(--ink); padding: 6px 10px; border-radius: 9px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; font-weight: 500; }
.indice a:hover { background: var(--bg-2); }
.indice a small { color: var(--muted); }
.indice a.ativo { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
dialog { border: 1px solid var(--line); border-radius: 22px; background: var(--card); color: var(--ink); padding: 24px 26px; max-width: 440px; width: calc(100% - 32px); box-shadow: var(--sombra-forte); }
dialog::backdrop { background: rgba(15, 10, 40, .45); backdrop-filter: blur(3px); }
dialog label { display: grid; gap: 5px; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
dialog input, dialog select { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
dialog .acoes { justify-content: flex-end; }

.linha .nome span.empilhado { display: grid; line-height: 1.3; }
.linha .nome span.empilhado small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Cabeçalho arrumado ============ */
.barra { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; padding: 10px 28px; }
.nav-grupo { justify-self: center; flex: none; display: inline-flex; gap: 2px; background: var(--bg-2); border-radius: 14px; padding: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.nav-grupo a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.nav-grupo a span { font-size: 15px; }
.nav-grupo a.ativo { background: var(--card); color: var(--accent); box-shadow: var(--sombra); }
.status { justify-self: end; }
.pilula { height: 34px; }
.avatar-mini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-content: center; background: var(--gradiente); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 4px 12px rgba(106, 69, 245, .35); }
@media (max-width: 1100px) { .nav-grupo a { padding: 7px 9px; } .nav-grupo a span { display: none; } }
@media (max-width: 860px) { .barra { grid-template-columns: 1fr auto; } .nav-grupo { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; } }

/* Alternâncias com a mesma largura por opção e a mesma altura dos botões */
.abas, .filtros { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; height: 40px; }
.abas a, .filtros button { display: grid; place-content: center; text-align: center; white-space: nowrap; }
.ferramentas button, .ferramentas .abas { height: 40px; }
.ordenar { border-style: dashed; color: var(--accent); }
.ordenar:hover { background: var(--accent-soft); }

/* ============ Diário ============ */
.diario label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
.diario label small { font-weight: 500; color: var(--muted); }
.diario-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.diario-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 760px) { .diario-grade { grid-template-columns: minmax(0, 1fr); } }
.humores { display: flex; gap: 8px; }
.humores button { font-size: 26px; width: 50px; height: 50px; padding: 0; border-radius: 14px; filter: grayscale(.7); opacity: .7; }
.humores button.atual { filter: none; opacity: 1; border-color: var(--accent); background: var(--accent-soft); transform: scale(1.08); }
.bolinhas { display: flex; gap: 6px; flex-wrap: wrap; }
.bolinhas button { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 13px; color: var(--muted); }
.bolinhas button.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent); }
.bolinhas button.atual { background: var(--gradiente); color: #fff; border-color: transparent; }
.opcoes-sono, .tags-diario { display: flex; gap: 6px; flex-wrap: wrap; }
.opcoes-sono button, .tags-diario button { padding: 6px 13px; border-radius: 99px; font-size: 14px; }
.opcoes-sono button.atual, .tags-diario button.atual { background: var(--accent); color: var(--sobre-accent); border-color: var(--accent); }
.diario textarea { width: 100%; min-height: 90px; font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical; }
.diario textarea:focus { outline: none; border-color: var(--accent); }
.diario-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.diario-linha { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip-diario { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--bg-2); }
.diario-texto { margin: 10px 0 0; color: var(--muted); font-style: italic; white-space: pre-line; }

/* ============ Perfil ============ */
.ficha { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; border-radius: 26px; padding: 30px 32px; color: #fff; background: var(--gradiente); box-shadow: var(--sombra-forte); margin-bottom: 22px; position: relative; overflow: hidden; }
.ficha::after { content: ""; position: absolute; left: -60px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.avatar { width: 108px; height: 108px; border-radius: 30px; display: grid; place-content: center; font-size: 52px; font-weight: 800; background: rgba(255, 255, 255, .18); border: 3px solid rgba(255, 255, 255, .5); }
.rotulo-claro { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ficha h1 { color: #fff; font-size: 34px; margin: 2px 0; }
.ficha h1 span { cursor: pointer; }
.editar-nome { background: rgba(255, 255, 255, .15); border: 0; color: #fff; padding: 2px 10px; font-size: 16px; vertical-align: middle; }
.titulo-classe { opacity: .9; font-weight: 600; }
.xp-grande { margin-top: 14px; max-width: 440px; }
.xp-linha { display: flex; justify-content: space-between; font-size: 14px; }
.xp-linha b { font-size: 18px; }
.xp-trilho { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .22); margin-top: 6px; overflow: hidden; }
.xp-trilho div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffd34d, #ffae2b); }
.ficha-fogo { text-align: center; background: rgba(255, 255, 255, .14); border-radius: 20px; padding: 16px 22px; display: grid; position: relative; z-index: 1; }
.ficha-fogo b { font-size: 32px; } .ficha-fogo small { opacity: .8; }
.duas-medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .duas-medidas { grid-template-columns: 1fr; } }
.xp-partes { display: grid; gap: 8px; }
.xp-partes div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); }
.xp-partes div b { white-space: nowrap; }
.xp-partes .total { background: var(--ouro-soft); color: var(--ouro); font-weight: 800; }
.atributos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
@media (max-width: 760px) { .atributos { grid-template-columns: 1fr; } }
.atributo { display: flex; gap: 12px; align-items: center; }
.atr-icone { font-size: 24px; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); display: grid; place-content: center; flex: none; }
.atr-corpo { flex: 1; }
.atr-linha { display: flex; justify-content: space-between; }
.atr-linha span { font-weight: 800; color: var(--accent); }
.atr-barra { height: 9px; border-radius: 5px; background: var(--bg-2); overflow: hidden; margin: 4px 0 2px; }
.atr-barra div { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.atributo small { color: var(--muted); font-size: 12px; }
.marcos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .marcos { grid-template-columns: repeat(2, 1fr); } }
.marcos div { background: var(--bg-2); border-radius: 16px; padding: 14px 16px; }
.marcos b { display: block; font-size: 24px; font-weight: 800; }
.marcos span { color: var(--muted); font-size: 13px; }
.entradas { display: grid; gap: 10px; margin-top: 14px; }
.entrada { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.entrada-data { text-align: center; display: grid; } .entrada-data span { color: var(--muted); font-size: 12px; }
.entrada .diario-linha { margin-top: 0; }

/* ============ Cores por matéria (paleta categórica validada, ordem fixa) ============ */
:root { --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948; --s-outras: #a8a5b8;
  --d1: #6a45f5; --d2: #ff6a1f; --d3: #0f9f55; --d4: #2f6fe4; --d5: #e0559a; }
@media (prefers-color-scheme: dark) {
  :root { --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-outras: #6b6884;
    --d1: #8f72ff; --d2: #ff8a4a; --d3: #3fd283; --d4: #77a3ff; --d5: #f07ab2; }
}

/* ============ Ordenação: critério + direção ============ */
.ordem { display: inline-flex; background: var(--bg-2); border-radius: 12px; padding: 3px; gap: 2px; height: 40px; }
.ordem button { border: 0; background: transparent; color: var(--muted); padding: 0 12px; border-radius: 9px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.ordem button.ativo { background: var(--card); color: var(--accent); box-shadow: var(--sombra); }
.seta-ordem { font-weight: 800; }
.alternar { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; font-weight: 600; }
.chip.neutro { background: var(--bg-2); color: var(--muted); }

/* ============ Editais: caixas das disciplinas ============ */
.disc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.disc-card { border-radius: 18px; padding: 16px 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--cor) 14%, var(--card)), var(--card) 70%);
  border: 1.5px solid color-mix(in srgb, var(--cor) 30%, var(--line)); display: grid; gap: 12px; }
.disc-topo { display: flex; gap: 10px; align-items: center; }
.disc-topo b { display: block; line-height: 1.2; }
.disc-topo small { color: var(--muted); font-size: 12px; }
.disc-icone { width: 42px; height: 42px; border-radius: 13px; display: grid; place-content: center; font-size: 21px; flex: none;
  background: color-mix(in srgb, var(--cor, var(--accent)) 20%, transparent); }
.disc-icone.peq { width: 30px; height: 30px; font-size: 16px; border-radius: 9px; background: var(--accent-soft); }
.disc-numeros { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
.disc-numeros b { display: block; font-size: 22px; font-weight: 800; color: var(--cor); line-height: 1.1; }
.disc-numeros span { font-size: 11px; color: var(--muted); }
.disc-cobertura span { font-size: 12px; color: var(--muted); }
.pontos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pontos i { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid color-mix(in srgb, var(--cor) 55%, transparent); }
.pontos i.cheio { background: var(--cor); border-color: var(--cor); }
.disciplina > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; }
.disciplina > summary::-webkit-details-marker { display: none; }
.disciplina > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.disciplina:not([open]) > summary::after { transform: rotate(-90deg); }
.disc-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ============ Gráficos: efeitos ============ */
.g-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.g-marcador { stroke: var(--ouro); stroke-width: 1.5; stroke-dasharray: 4 3; }
.g-marcador-txt { fill: var(--ouro); font-weight: 700; }
svg.g .g-col { transition: opacity .15s; }
svg.g:hover .g-col { opacity: .45; }
svg.g .g-col:hover { opacity: 1; }
svg.g .g-col:hover .g-barra { filter: brightness(1.12); }
.g-anim .g-barra { transform-box: fill-box; transform-origin: bottom; animation: crescer .7s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 14ms); }
.g-anim .g-linha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 1.1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(var(--k, 0) * 180ms); }
.g-anim .g-area { opacity: .12; animation: aparecer 1s ease both .4s; }
.g-anim .g-ponto { transform-box: fill-box; transform-origin: center; animation: estourar .35s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.5s + var(--i, 0) * 12ms); }
svg.g .g-pontos:hover .g-ponto { r: 6; }
.g-100 > div { transform-origin: left; animation: crescerX .8s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.g-cal.g-anim i { animation: aparecer .4s ease both; animation-delay: calc(var(--i, 0) * 12ms); }
.g-cal i:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.g-h { display: grid; gap: 8px; }
.g-h-linha { display: grid; grid-template-columns: 140px 1fr 56px; gap: 10px; align-items: center; font-size: 13px; padding: 2px 0; border-radius: 8px; }
.g-h-linha:hover { background: var(--bg-2); }
.g-h-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.g-h-linha b { text-align: right; }
.g-h-trilho { height: 14px; border-radius: 7px; background: var(--bg-2); overflow: hidden; }
.g-h-barra { display: block; height: 100%; border-radius: 7px; transform-origin: left; animation: crescerX .8s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes crescerX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes estourar { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .g-anim *, .g-100 > div, .g-h-barra { animation: none !important; stroke-dashoffset: 0 !important; } }
.destaque-futuro { border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.frase-projecao { font-size: 16px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); }
.secao-futuro { margin-top: 32px; margin-bottom: 14px; }

/* ============ Tabelas ordenáveis ============ */
table.t-est th[data-col] { cursor: pointer; user-select: none; white-space: nowrap; }
table.t-est th[data-col]:hover { color: var(--accent); }
table.t-est th.ativa { color: var(--accent); }
table.t-est tr.grupo-linha td { background: var(--bg-2); font-weight: 800; font-size: 14px; cursor: default; }
table.t-est tr.grupo-linha td small { font-weight: 500; color: var(--muted); margin-left: 6px; }
table.t-est tbody tr.grupo-linha:hover { background: transparent; }

/* ============ Resumos ============ */
.resumo-topo { display: flex; gap: 12px; align-items: flex-start; }
.estrela { border: 0; background: none; font-size: 22px; padding: 0 2px; color: var(--muted); line-height: 1.2; }
.estrela.on { color: var(--ouro); }
.chips-resumo { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.chips-resumo .chip { text-decoration: none; }
.resumo .resumo-corpo { position: relative; max-height: 220px; overflow: hidden; }
.resumo .resumo-corpo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; background: linear-gradient(transparent, var(--card)); }
.resumo.aberto .resumo-corpo { max-height: none; }
.resumo.aberto .resumo-corpo::after { display: none; }
.ler-mais { margin-top: 8px; }
.resumo-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
mark { background: var(--ouro-soft); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ouro) 50%, transparent); }
.indice .alternar { padding: 4px 10px 8px; }
dialog.editor-resumo { max-width: 980px; }
.editor-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .editor-grade { grid-template-columns: 1fr; } }
.editor-resumo textarea { width: 100%; min-height: 300px; font: inherit; font-size: 14px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical; }
.editor-resumo input { width: 100%; }
.previa-resumo { border: 1px dashed var(--line); border-radius: 14px; padding: 14px 16px; min-height: 300px; max-height: 55vh; overflow-y: auto; }

/* Impressão do caderno */
#impressao { display: none; }
@media print {
  body.imprimindo > *:not(#impressao) { display: none !important; }
  body.imprimindo { background: #fff !important; color: #111; }
  body.imprimindo #impressao { display: block; font-size: 12pt; color: #111; }
  #impressao h1 { font-size: 22pt; } #impressao h2 { font-size: 16pt; border-bottom: 2px solid #6a45f5; padding-bottom: 4px; margin-top: 24pt; }
  #impressao .imp-nota { break-inside: avoid; margin-bottom: 14pt; }
  #impressao .imp-meta { color: #666; font-size: 9pt; }
  #impressao .cx-destaque { background: #f1edff !important; }
}

/* ============ Revista (estilo editorial) ============ */
.serif { font-family: "Young Serif", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.005em; }
.rv-chapeu { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.revista { margin-bottom: 26px; }
.rv-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); padding: 10px 2px; margin-bottom: 16px; }
.rv-marca { font-size: 26px; }
.rv-edicao { font-size: 13px; color: var(--muted); font-weight: 600; }
.rv-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .rv-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rv-grade { grid-template-columns: 1fr; } }
.rv-capa { grid-column: span 2; grid-row: span 2; border-radius: 24px; padding: 28px 30px; color: #fff; background: var(--gradiente); box-shadow: var(--sombra-forte); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
@media (max-width: 560px) { .rv-capa { grid-column: auto; } }
.rv-capa::before { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.rv-capa .rv-chapeu { color: rgba(255, 255, 255, .85); }
.rv-numero-grande { font-family: "Young Serif", Georgia, serif; font-weight: 800; font-size: clamp(64px, 9vw, 104px); line-height: .95; letter-spacing: -.03em; margin: 8px 0 4px; }
.rv-capa h2 { font-size: 30px; margin: 0 0 8px; color: #fff; }
.rv-capa p { margin: 0; font-size: 16px; opacity: .92; max-width: 46ch; }
.rv-capa.rv-alerta { background: linear-gradient(135deg, #c2410c, #e0464c 55%, #be185d); }
.rv-capa.rv-bom { background: linear-gradient(135deg, #047857, #0f9f55 50%, #2f6fe4); }
.rv-item { border-radius: 20px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sombra); position: relative; overflow: hidden;
  animation: subir .5s ease both; animation-delay: calc(var(--i, 0) * 70ms); }
.rv-item::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.rv-item.rv-bom::after { background: var(--ok); } .rv-item.rv-alerta::after { background: var(--fogo); }
.rv-numero { font-family: "Young Serif", Georgia, serif; font-weight: 800; font-size: 40px; line-height: 1; margin: 8px 0 2px; letter-spacing: -.02em; }
.rv-item.rv-bom .rv-numero { color: var(--ok); } .rv-item.rv-alerta .rv-numero { color: var(--fogo); }
.rv-item h3 { font-size: 18px; margin: 0 0 6px; line-height: 1.25; }
.rv-item p { margin: 0; font-size: 14px; color: var(--muted); }
.clicavel { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.clicavel:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }

/* Mancheteira (topo de página em estilo revista) */
.mancheteira { border-top: 3px solid var(--ink); padding: 16px 2px 22px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.mancheteira h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1; margin: 6px 0 10px; }
.mancheteira p { color: var(--muted); font-size: 17px; max-width: 64ch; margin: 0; }
.mancheteira-numeros { display: flex; gap: 28px; margin-top: 16px; flex-wrap: wrap; }
.mancheteira-numeros b { font-family: "Young Serif", Georgia, serif; font-size: 34px; font-weight: 800; display: block; line-height: 1; color: var(--accent); }
.mancheteira-numeros span { font-size: 13px; color: var(--muted); }
.secao-revista { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin: 30px 0 14px; font-size: 20px; }
.secao-revista small { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Polêmicas */
.pl-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .pl-grade { grid-template-columns: 1fr; } }
.pl-artigo { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; }
.pl-destaque { grid-column: 1 / -1; background: linear-gradient(160deg, var(--accent-soft), var(--card) 60%); }
.pl-artigo h3 { font-size: 21px; line-height: 1.3; margin: 0; }
.pl-destaque h3 { font-size: 27px; }
.pl-gabarito { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: var(--bg-2); border-radius: 12px; padding: 6px 12px; }
.pl-gabarito span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pl-gabarito b { color: var(--accent); }
.pl-citacao { margin: 4px 0 0; padding: 4px 0 4px 22px; position: relative; font-family: "Young Serif", Georgia, serif; font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--ink); border-left: 4px solid var(--ouro); }
.pl-citacao::before { content: "“"; position: absolute; left: 10px; top: -22px; font-size: 64px; color: var(--ouro); opacity: .35; font-family: Georgia, serif; }
.pl-ver { align-self: flex-start; }
.pl-completo:not(:empty) { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* Resumos */
.rs-capa { border-radius: 24px; padding: 30px 32px; background: var(--gradiente); color: #fff; box-shadow: var(--sombra-forte); cursor: pointer; margin-bottom: 16px; position: relative; overflow: hidden; transition: transform .15s; }
.rs-capa:hover { transform: translateY(-3px); }
.rs-capa .rv-chapeu { color: rgba(255, 255, 255, .85); }
.rs-capa h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.05; margin: 8px 0 12px; color: #fff; }
.rs-linha-fina { font-size: 17px; opacity: .92; margin: 0 0 16px; max-width: 60ch; }
.rs-capa .chip { background: rgba(255, 255, 255, .18); color: #fff; }
.rs-capa mark { background: rgba(255, 255, 255, .35); color: #fff; }
.rs-rodape { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rs-ler { margin-left: auto; font-weight: 800; }
.rs-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .rs-grade { grid-template-columns: 1fr; } }
.rs-cartao { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--sombra); cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s, box-shadow .15s; animation: subir .5s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.rs-cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.rs-cartao h3 { font-size: 20px; line-height: 1.2; margin: 0; }
.rs-cartao p { color: var(--muted); font-size: 14px; margin: 0; flex: 1; }
.rs-cartao .rs-ler { color: var(--accent); }
dialog.leitor { max-width: 760px; padding: 34px 40px; }
dialog.leitor h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; margin: 8px 0 12px; }
.leitor-fechar { position: absolute; right: 16px; top: 16px; border-radius: 50%; width: 38px; height: 38px; padding: 0; }
.leitor-corpo { font-size: 17px; line-height: 1.75; margin-top: 10px; max-height: 58vh; overflow-y: auto; padding-right: 6px; }
.leitor-corpo .cx-explicacao > p:first-child::first-letter { font-family: "Young Serif", Georgia, serif; font-size: 3.2em; float: left; line-height: .9; padding: 4px 8px 0 0; color: var(--accent); font-weight: 800; }

/* ============ Hoje: constância ============ */
.constancia-grade { display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; align-items: start; }
@media (max-width: 760px) { .constancia-grade { grid-template-columns: 1fr; } }
.bolhas-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 8px 0 16px; }
.bolha { display: grid; justify-items: center; gap: 4px; }
.bolha b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; font-size: 13px; background: var(--bg-2); color: var(--muted); border: 2px dashed var(--line); }
.bolha.feita b { background: var(--gradiente); color: #fff; border: 0; box-shadow: 0 4px 12px rgba(106, 69, 245, .35); }
.bolha span { font-size: 12px; color: var(--muted); font-weight: 600; }
.constancia-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.constancia-numeros div { background: var(--bg-2); border-radius: 14px; padding: 10px 12px; }
.constancia-numeros b { display: block; font-size: 22px; font-weight: 800; }
.constancia-numeros span { font-size: 12px; color: var(--muted); }

/* Diário: rótulos dos extremos das escalas */
.escala-rotulos { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 5px; max-width: 100%; font-weight: 600; }

/* Matérias: cabeçalhos de seção */
.cabeca-secao { margin: 32px 0 14px; }
.cabeca-secao h2 { margin: 0 0 8px; font-size: 22px; }
.chips-secao { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 860px) { .rv-item[style*="span 3"] { grid-column: span 2 !important; } }

/* ============ Matérias: galeria estilo Notion ============ */
.migalhas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; margin: 4px 0 6px; color: var(--muted); }
.migalhas a { text-decoration: none; color: var(--ink); font-weight: 600; padding: 3px 8px; border-radius: 8px; }
.migalhas a:hover { background: var(--bg-2); }
.migalhas a:last-child { color: var(--accent); }
.nt-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.nt-cartao { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s, border-color .15s; animation: subir .45s ease both; }
.nt-cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); border-color: color-mix(in srgb, var(--capa) 50%, var(--line)); }
.nt-capa { height: 54px; background: linear-gradient(120deg, var(--capa), color-mix(in srgb, var(--capa) 55%, #fff)); opacity: .9; }
.nt-icone { position: absolute; top: 28px; left: 16px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-content: center; font-size: 26px; background: var(--card); box-shadow: var(--sombra); }
.nt-corpo { padding: 30px 16px 14px; }
.nt-corpo h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.nt-caminho { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nt-props { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 12px 0 0; font-size: 13px; align-items: center; }
.nt-props dt { color: var(--muted); white-space: nowrap; }
.nt-props dd { margin: 0; font-weight: 600; }
.nt-props dd small { color: var(--muted); font-weight: 500; }
.nt-props.largo { grid-template-columns: 140px 1fr; font-size: 15px; gap: 10px 16px; margin-top: 16px; }
.nt-tag { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.nt-alta { background: var(--ok-soft); color: var(--ok); } .nt-media { background: var(--ouro-soft); color: var(--warn); } .nt-baixa { background: var(--no-soft); color: var(--no); } .nt-sem { background: var(--bg-2); color: var(--muted); }
.nt-modo-foco { background: var(--accent-soft); color: var(--accent); } .nt-modo-manutencao { background: var(--bg-2); color: var(--muted); } .nt-modo-standby { background: var(--warn-soft); color: var(--warn); }
.nt-filhos { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--accent); }
.nt-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.nt-assunto { cursor: default; }
.nt-pagina { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); margin-top: 8px; }
.nt-pagina-capa { height: 120px; background: linear-gradient(120deg, var(--capa), color-mix(in srgb, var(--capa) 45%, #fff)); }
.nt-pagina-corpo { padding: 0 30px 26px; position: relative; }
.nt-icone.grande { position: relative; top: -36px; left: 0; width: 76px; height: 76px; font-size: 40px; border-radius: 20px; margin-bottom: -24px; }
.nt-pagina h2 { font-size: 38px; margin: 0; }

/* ============ Barra de filtros fixa ============ */
.barra-fixa { position: sticky; top: 64px; z-index: 15; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%;
  padding: 10px 12px; margin: 12px 0 14px; border-radius: 18px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(14px); box-shadow: var(--sombra); }
.barra-fixa .filtros, .barra-fixa .abas { flex: none; }
.barra-fixa .recorte-btn { flex: 1; min-width: 200px; justify-content: space-between; height: 40px; }
.barra-fixa .atalhos-recorte { flex: 1 1 auto; }
.limpar-filtros { margin-left: auto; height: 40px; color: var(--no); border-color: color-mix(in srgb, var(--no) 35%, var(--line)); }
.limpar-filtros:hover:not(:disabled) { background: var(--no-soft); border-color: var(--no); }
@media (max-width: 860px) { .barra-fixa { top: 108px; } }

/* ============ Mapa mental ============ */
.mm-palco { position: relative; height: calc(100vh - 230px); min-height: 520px; border-radius: 22px; border: 1px solid var(--line); overflow: hidden; cursor: grab;
  background: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px, var(--card); box-shadow: var(--sombra); touch-action: none; }
.mm-palco.arrastando { cursor: grabbing; }
.mm-palco svg { width: 100%; height: 100%; display: block; }
.mm-lig { fill: none; stroke: var(--cor); stroke-linecap: round; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar .8s ease forwards; animation-delay: calc(var(--i, 0) * 8ms); }
.mm-no { cursor: pointer; animation: aparecer .45s ease both; animation-delay: calc(var(--i, 0) * 8ms); }
.mm-no rect { fill: var(--card); stroke: var(--cor); stroke-width: 2; transition: filter .15s; }
.mm-no text { fill: var(--ink); font-size: 13px; font-weight: 600; font-family: inherit; pointer-events: none; }
.mm-no.mm-p1 rect { fill: color-mix(in srgb, var(--cor) 22%, var(--card)); stroke-width: 2.5; }
.mm-no.mm-p1 text { font-weight: 800; font-size: 14px; }
.mm-no.mm-p1 rect { height: 32px; y: -16px; rx: 16px; }
.mm-no.mm-alta rect { fill: color-mix(in srgb, var(--ok) 16%, var(--card)); }
.mm-no.mm-media rect { fill: color-mix(in srgb, var(--ouro) 18%, var(--card)); }
.mm-no.mm-baixa rect { fill: color-mix(in srgb, var(--no) 16%, var(--card)); }
.mm-no.mm-p1.mm-alta rect, .mm-no.mm-p1.mm-media rect, .mm-no.mm-p1.mm-baixa rect { stroke-width: 3; }
.mm-no:hover rect { filter: brightness(1.12) drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.mm-no.sel rect { stroke-width: 4; filter: drop-shadow(0 0 10px var(--cor)); }
.mm-no .mm-n { fill: var(--muted); font-size: 11px; font-weight: 700; }
.mm-no .mm-vazio { fill: var(--warn); }
.mm-raiz rect { fill: url(#none); fill: #6a45f5; stroke: none; filter: drop-shadow(0 8px 20px rgba(106, 69, 245, .45)); }
.mm-raiz .mm-raiz-t { fill: #fff; font-size: 17px; font-weight: 800; }
.mm-raiz .mm-raiz-s { fill: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 600; }
.mm-botao circle { fill: var(--card); stroke: var(--cor); stroke-width: 2; }
.mm-botao text { fill: var(--cor) !important; font-weight: 800 !important; font-size: 14px !important; pointer-events: none; }
.mm-botao:hover circle { fill: var(--cor); } .mm-botao:hover text { fill: var(--card) !important; }
.mm-controles { position: absolute; top: 14px; right: 14px; display: grid; gap: 6px; }
.mm-controles button { width: 40px; height: 40px; padding: 0; font-size: 18px; border-radius: 12px; box-shadow: var(--sombra); }
.mm-legenda { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--card) 85%, transparent); padding: 6px 10px; border-radius: 10px; }
.mm-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; border: 1.5px solid var(--line); }
.mm-legenda i.mm-alta { background: color-mix(in srgb, var(--ok) 35%, var(--card)); } .mm-legenda i.mm-media { background: color-mix(in srgb, var(--ouro) 40%, var(--card)); }
.mm-legenda i.mm-baixa { background: color-mix(in srgb, var(--no) 35%, var(--card)); } .mm-legenda i.mm-sem { background: var(--card); }
.mm-painel { position: absolute; top: 14px; left: 14px; width: 300px; max-width: calc(100% - 90px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--sombra-forte); cursor: default; animation: subir .3s ease; }
.mm-painel h3 { margin: 6px 30px 0 0; font-size: 20px; line-height: 1.25; }

.nav-grupo { scrollbar-width: none; } .nav-grupo::-webkit-scrollbar { display: none; }
@media (max-width: 1440px) {
  .nav-grupo a:not(.ativo) { font-size: 0; gap: 0; padding: 7px 10px; }
  .nav-grupo a:not(.ativo) span { font-size: 16px; display: inline; }
  .nav-grupo a span { display: inline; }
}

/* Barra de filtros numa linha só (quebra apenas em telas estreitas) */
.barra-fixa { flex-wrap: nowrap; }
.barra-fixa .filtros button { padding: 0 12px; }
.barra-fixa .recorte-btn { flex: 1 1 200px; min-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.barra-fixa .atalhos-recorte { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.barra-fixa .limpar-filtros { flex: none; }
@media (max-width: 1000px) { .barra-fixa { flex-wrap: wrap; } }

.atalhos-recorte button { white-space: nowrap; }

/* ============ Mapa mental: extras ============ */
.mm-barra-ferr { margin-top: 0; }
.mm-busca { flex: 1 1 280px; min-width: 200px; font: inherit; font-size: 15px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.mm-busca:focus { outline: none; border-color: var(--accent); }
.mm-no .mm-barra { fill: var(--cor); opacity: .9; stroke: none; }
.mm-no.achado rect:first-of-type { stroke: var(--ouro); stroke-width: 4; filter: drop-shadow(0 0 10px var(--ouro)); animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 50% { filter: drop-shadow(0 0 2px var(--ouro)); } }
#mm-svg.realce .mm-no:not(.caminho), #mm-svg.realce .mm-lig:not(.caminho) { opacity: .18; transition: opacity .15s; }
#mm-svg.realce .mm-lig.caminho { opacity: 1; stroke-width: 4; }
.mm-lig, .mm-no { transition: opacity .15s; }

/* ============ Constelação ============ */
.ceu { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--sombra-forte); border: 1px solid #2a2450; background: #05040c; }
.ceu svg { display: block; width: 100%; height: auto; }
.c-poeira circle { fill: #fff; animation: cintilar 4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes cintilar { 50% { opacity: .1; } }
.c-cadente { stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60 600; stroke-dashoffset: 660; opacity: .8; animation: cadente 9s linear infinite 2s; filter: drop-shadow(0 0 4px #fff); }
@keyframes cadente { 0% { stroke-dashoffset: 660; transform: translate(0, 0); } 12% { stroke-dashoffset: 0; transform: translate(520px, 190px); opacity: .9; } 13%, 100% { opacity: 0; transform: translate(520px, 190px); } }
.c-linhas line { stroke: #b9b2ff; stroke-opacity: .35; stroke-width: 1.1; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: tracar 2s ease forwards; animation-delay: calc(.4s + var(--i) * 15ms); }
.c-linhas line.apagada { stroke-opacity: .08; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
.c-pontes path { fill: none; stroke: #ffb4f0; stroke-opacity: .13; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(255, 180, 240, .5)); cursor: help; transition: stroke-opacity .3s; }
.c-pontes path:hover { stroke-opacity: .7; }
.c-estrela { cursor: pointer; animation: surgir .6s ease both; animation-delay: calc(var(--i) * 12ms); }
@keyframes surgir { from { opacity: 0; } }
.c-estrela .halo { fill: var(--c); opacity: .55; animation: brilhar 3.2s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes brilhar { 50% { opacity: .2; transform: scale(.75); } }
.c-estrela .nucleo { fill: var(--c); filter: drop-shadow(0 0 3px var(--c)); }
.c-estrela .raios { stroke: var(--c); stroke-width: 1; opacity: .5; }
.c-estrela .vazia { fill: rgba(255, 157, 77, .08); stroke: #ff9d4d; stroke-width: 1; opacity: .6; filter: drop-shadow(0 0 3px rgba(255, 157, 77, .6)); }
.c-estrela .toque { fill: transparent; }
.c-estrela:hover .nucleo { transform: scale(1.35); transform-box: fill-box; transform-origin: center; }
.c-estrela.sel .nucleo { stroke: #fff; stroke-width: 2; }
.c-estrela.sel .halo { opacity: .9; }
.c-estrela.fora { opacity: .14; }
.c-nomes text { fill: #e6e1ff; font-size: 11px; font-weight: 600; font-family: inherit; opacity: .85; pointer-events: none; }
.c-nomes text.fora { opacity: .1; }
.c-grupos text { fill: #fff; font-family: "Young Serif", Georgia, serif; font-size: 18px; font-weight: 800; letter-spacing: .02em; opacity: .9; pointer-events: none; text-shadow: 0 0 12px rgba(124, 77, 255, .8); }
.c-legenda { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #cfc8ff; background: rgba(10, 8, 26, .7); padding: 6px 12px; border-radius: 10px; backdrop-filter: blur(6px); }
.c-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-shadow: 0 0 6px currentColor; }
.c-legenda i.anel { background: none; border: 1.5px dashed #ff9d4d; box-shadow: none; }
.c-painel { top: 14px; left: auto; right: 14px; }
@media (prefers-reduced-motion: reduce) { .ceu * { animation: none !important; stroke-dashoffset: 0 !important; } }

.mm-palco { max-height: 720px; }

.c-grupos text.lacunas { fill: #ffb27a; text-shadow: 0 0 12px rgba(255, 140, 60, .7); }

/* ============ Constelação: zoom e câmera ============ */
.ceu-barra { margin-top: 0; }
.c-mundo { transform-origin: 0 0; }
.c-mundo.suave { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.c-mundo.voo { transition: transform 2.4s cubic-bezier(.65, 0, .35, 1); }
.ceu { cursor: grab; }
.ceu.arrastando { cursor: grabbing; }
.ceu .mm-controles { top: 14px; right: 14px; }
.ceu .mm-controles button { background: rgba(20, 16, 45, .8); color: #fff; border-color: rgba(255, 255, 255, .15); }
.ceu:fullscreen { border-radius: 0; display: grid; place-items: center; background: #05040c; }
.ceu:fullscreen svg { width: 100vw; height: 100vh; }
svg.com-destaque .c-estrela:not(.destaque) { opacity: .35; transition: opacity .8s; }
.anel-destaque { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .55); stroke-width: 1; filter: drop-shadow(0 0 6px rgba(195, 178, 255, .9)); animation: halo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsarAnel { 50% { opacity: .3; } }
.c-cadente { animation-iteration-count: infinite; }

/* ============ Apresentação ============ */
#apresentacao { position: fixed; inset: 0; z-index: 100; background: #05040c; animation: aparecer .6s ease; }
#apresentacao.saindo { animation: sumir .4s ease forwards; }
@keyframes sumir { to { opacity: 0; } }
#apresentacao > svg { width: 100%; height: 100%; display: block; }
body.apresentando { overflow: hidden; }
.ap-legenda { position: absolute; left: 4vw; bottom: 110px; max-width: min(520px, 88vw); padding: 24px 28px; border-radius: 24px; color: #fff;
  background: rgba(14, 11, 36, .62); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: legenda .9s cubic-bezier(.2, .8, .2, 1) both .9s; }
@keyframes legenda { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
.ap-legenda .rv-chapeu { color: #c3b2ff; }
.ap-numero { font-family: "Young Serif", Georgia, serif; font-weight: 800; font-size: clamp(56px, 8vw, 92px); line-height: .95; letter-spacing: -.03em; margin: 6px 0 2px;
  background: linear-gradient(90deg, #fff, #c3b2ff 60%, #ffb4f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-legenda h2 { font-size: 26px; margin: 0 0 8px; color: #fff; }
.ap-legenda p { margin: 0 0 12px; color: #ddd7ff; font-size: 16px; }
.ap-controles { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 99px;
  background: rgba(14, 11, 36, .7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .14); }
.ap-controles button { background: transparent; color: #fff; border: 0; border-radius: 99px; width: 40px; height: 40px; padding: 0; font-size: 15px; }
.ap-controles button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.ap-pontos { display: flex; gap: 6px; padding: 0 8px; }
.ap-pontos i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: width .3s, background .3s; }
.ap-pontos i.visto { background: rgba(195, 178, 255, .6); }
.ap-pontos i.atual { width: 26px; background: #c3b2ff; }
.ap-progresso { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.ap-progresso div { height: 100%; background: linear-gradient(90deg, #8f72ff, #ffb4f0); animation: progresso 7.5s linear forwards; transform-origin: left; }
@keyframes progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ceu-btn { cursor: pointer; background: linear-gradient(135deg, #1d1840, #3a2c78); color: #fff; border: 0; font-size: 15px; }
.ceu-btn:hover { box-shadow: 0 0 14px rgba(143, 114, 255, .7); }

/* ============ Tema "Constelação" ============ */
#fundo-ceu { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#fundo-ceu svg { width: 100vw; height: 100vh; display: block; }
#fundo-ceu .c-linhas line { stroke-opacity: .22; }
#fundo-ceu .c-estrela .halo { opacity: .4; }
body.tema-ceu {
  --bg: #07061a; --bg-2: rgba(255, 255, 255, .07); --card: rgba(22, 18, 52, .7); --ink: #f2effc; --muted: #b8b2dc; --line: rgba(255, 255, 255, .12);
  --accent: #a08bff; --accent-2: #c7b8ff; --accent-soft: rgba(143, 114, 255, .2); --sobre-accent: #fff;
  --ok: #4fe08f; --ok-soft: rgba(63, 210, 131, .16); --no: #ff7b80; --no-soft: rgba(255, 108, 113, .16);
  --warn: #ffc85a; --warn-soft: rgba(255, 189, 74, .14); --adj: #8fb2ff; --adj-soft: rgba(119, 163, 255, .16);
  --fogo: #ff9a5a; --fogo-soft: rgba(255, 138, 74, .16); --ouro: #ffd34d; --ouro-soft: rgba(255, 200, 61, .14);
  --gradiente: linear-gradient(135deg, #4b2fd6 0%, #7a3be0 50%, #c2457f 100%);
  --sombra: 0 8px 30px rgba(0, 0, 0, .35); --sombra-forte: 0 16px 50px rgba(0, 0, 0, .55);
  --heat-0: rgba(255, 255, 255, .08); --heat-1: #3a2c78; --heat-2: #5638c4; --heat-3: #8467ff; --heat-4: #c3b2ff;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-outras: #6b6884;
  --seq-0: rgba(255, 255, 255, .08); --seq-1: #104281; --seq-2: #1c5cab; --seq-3: #3987e5; --seq-4: #86b6ef;
  background: #05040c; background-image: none; color-scheme: dark;
}
body.tema-ceu .barra { background: rgba(7, 6, 26, .55); }
body.tema-ceu :is(.painel, .nt-cartao, .nt-pagina, .metrica, .status-card, .edital-card, .hero, .rv-item, .pl-artigo, .rs-cartao, .linha, .topico, .disciplina,
  .barra-fixa, .mm-palco, .cargo, .disc-card, .indice, .palco, dialog, .conquista, .entrada, .datas div, .marcos div, .constancia-numeros div) {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body.tema-ceu .mm-palco { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .1) 1px, transparent 0) 0 0 / 22px 22px, rgba(14, 11, 36, .6); }
body.tema-ceu .rv-cabeca, body.tema-ceu .mancheteira, body.tema-ceu .secao-revista { border-color: rgba(255, 255, 255, .5); }
body.tema-ceu .nt-capa { opacity: .75; }

/* Perfil: escolha de aparência */
.aparencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .aparencias { grid-template-columns: 1fr; } }
.aparencia { border: 2px solid var(--line); border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--card); text-align: left; padding: 0; transition: transform .15s, border-color .15s; }
.aparencia:hover { transform: translateY(-2px); }
.aparencia.ativa { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.aparencia .previa { height: 96px; position: relative; overflow: hidden; }
.aparencia .previa.padrao { background: linear-gradient(160deg, #f4f2fc, #eee9ff 60%, #e9e2ff); }
.aparencia .previa.padrao::after { content: ""; position: absolute; left: 16px; right: 16px; top: 20px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #5b3df0, #8f4bf5, #e0559a); }
.aparencia .previa.ceu { background: radial-gradient(circle at 50% 40%, #1d1840, #05040c 75%); }
.aparencia .previa.ceu i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #c3b2ff; animation: cintilar 3s ease-in-out infinite; }
.aparencia .texto { padding: 12px 16px 14px; }
.aparencia .texto b { display: block; font-size: 16px; }
.aparencia .texto span { font-size: 13px; color: var(--muted); font-weight: 500; }

#fundo-ceu { opacity: .72; }
body.tema-ceu { --card: rgba(20, 16, 48, .78); }

/* ============ Marca: Astra ============ */
.marca { letter-spacing: .02em; font-family: "Young Serif", Georgia, serif; font-size: 22px; }
.marca::before { content: "✦"; display: grid; place-content: center; color: #fff; font-size: 15px; font-family: system-ui; }

/* ============ Perfil: Diário de bordo ============ */
.bordo { position: relative; border-radius: 26px; padding: 28px 30px; margin-bottom: 22px; overflow: hidden;
  background: linear-gradient(160deg, #241a52 0%, #3b2580 45%, #6a2f7a 100%); color: #fff; box-shadow: var(--sombra-forte); }
.bordo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .35) 1px, transparent 0) 0 0 / 34px 34px; opacity: .25; }
.bordo > * { position: relative; }
.bordo-topo { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.bordo h2 { color: #fff; font-size: clamp(26px, 3.4vw, 34px); margin: 4px 0 6px; }
.bordo p { margin: 0; opacity: .88; max-width: 62ch; }
.bordo-cta { background: #fff; color: #4b2fd6; font-weight: 800; text-decoration: none; padding: 12px 20px; border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); white-space: nowrap; }
.bordo-cta:hover { transform: translateY(-2px); }
.bordo-ok { background: rgba(63, 210, 131, .22); color: #8ff0b8; font-weight: 800; padding: 10px 16px; border-radius: 14px; white-space: nowrap; }
.bordo-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0; }
@media (max-width: 760px) { .bordo-numeros { grid-template-columns: repeat(2, 1fr); } }
.bordo-numeros div { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 14px 16px; }
.bordo-numeros b { display: block; font-family: "Young Serif", Georgia, serif; font-size: 30px; line-height: 1.1; }
.bordo-numeros span { font-size: 13px; opacity: .8; }
.bordo-linha { background: rgba(0, 0, 0, .18); border-radius: 18px; padding: 14px 16px 10px; }
.bordo .sub-graf { color: rgba(255, 255, 255, .8); }
.bordo-dias { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; }
.bordo-dia { display: grid; justify-items: center; gap: 4px; opacity: .45; }
.bordo-dia.com { opacity: 1; }
.bordo-dia.hoje .bd-data { background: #fff; color: #4b2fd6; border-radius: 99px; padding: 0 6px; font-weight: 800; }
.bd-humor { font-size: 20px; height: 26px; }
.bd-barra { width: 10px; height: 44px; border-radius: 5px; background: rgba(255, 255, 255, .12); display: flex; align-items: flex-end; overflow: hidden; }
.bd-barra i { width: 100%; border-radius: 5px; background: linear-gradient(0deg, #ffb4f0, #ffd34d); animation: crescer .8s ease both; transform-origin: bottom; }
.bd-data { font-size: 12px; opacity: .85; }
.bordo-legenda { font-size: 11px; opacity: .65; margin-top: 6px; text-align: right; }
.bordo-graficos { margin-top: 16px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 8px 16px 12px; }
.bordo-dica { margin-top: 16px !important; background: rgba(255, 255, 255, .08); padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.bordo-entradas { display: grid; gap: 12px; margin: 18px 0 10px; }
.pagina-diario { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 16px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .95); color: #1c1930; box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(106, 69, 245, .1) 27px 28px); }
.pd-data { text-align: center; display: grid; align-content: start; border-right: 2px solid rgba(224, 70, 76, .35); padding-right: 12px; }
.pd-data b { font-size: 34px; line-height: 1; color: #6a45f5; }
.pd-data span { font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.pd-data small { color: #6c6884; }
.pagina-diario .chip-diario { background: #eee9ff; color: #1c1930; }
.pagina-diario .chip { background: #f3efff; color: #6a45f5; }
.pd-texto { margin: 10px 0 0; font-family: "Young Serif", Georgia, serif; font-size: 17px; line-height: 1.6; color: #2b2550; font-style: italic; white-space: pre-line; }
.bordo #diario-todos { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }

/* ============ Tema Constelação: mais contraste ============ */
body.tema-ceu {
  --card: rgba(18, 14, 44, .9); --bg-2: rgba(44, 36, 92, .92); --line: rgba(255, 255, 255, .16); --muted: #c7c1ea;
}
/* um véu escuro sob a coluna de conteúdo, para o texto não competir com as estrelas */
body.tema-ceu #fundo-ceu::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 4, 12, .15), rgba(5, 4, 12, .55) 18%, rgba(5, 4, 12, .62) 50%, rgba(5, 4, 12, .55) 82%, rgba(5, 4, 12, .15)); }
/* textos direto sobre o céu ganham sombra */
body.tema-ceu main > h1, body.tema-ceu main > .sub, body.tema-ceu .cabeca-secao, body.tema-ceu .mancheteira, body.tema-ceu .secao-revista,
body.tema-ceu .migalhas, body.tema-ceu h2.secao, body.tema-ceu .rv-cabeca, body.tema-ceu .ferramentas > h1, body.tema-ceu main > p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }
body.tema-ceu :is(.chip, .chip-diario, .nt-tag, .pl-gabarito, .datas div, .xp-partes div, .marcos div, .constancia-numeros div, .modos, .abas, .filtros, .ordem, .nav-grupo, .humores button, .bolinhas button, .opcoes-sono button, .tags-diario button) {
  background-color: rgba(40, 32, 86, .92); }
body.tema-ceu :is(.abas a.ativo, .filtros button.ativo, .ordem button.ativo, .modos button.ativo, .nav-grupo a.ativo) { background: rgba(255, 255, 255, .14); color: #fff; }
body.tema-ceu :is(.bolinhas button.atual, .opcoes-sono button.atual, .tags-diario button.atual, .atalhos-recorte button.ativo) { background: var(--gradiente); color: #fff; }
body.tema-ceu .chip { color: #d9cfff; }
body.tema-ceu input, body.tema-ceu textarea, body.tema-ceu select { background: rgba(10, 8, 30, .92) !important; color: #fff; }

/* ============ Universo: céu → constelação → sistema → card ============ */
.ceu-migalhas { position: absolute; top: 14px; left: 16px; display: flex; gap: 8px; align-items: center; font-size: 14px; color: #cfc8ff;
  background: rgba(10, 8, 26, .72); padding: 7px 14px; border-radius: 99px; backdrop-filter: blur(8px); z-index: 3; }
.ceu-migalhas a { color: #fff; text-decoration: none; font-weight: 700; }
.ceu-migalhas a:hover { color: #c3b2ff; }
.ceu-migalhas b { color: #ffd166; }
.c-estrela.longe { opacity: .12; }
.c-grupos text.longe { opacity: .15; }
.clicavel-ceu { cursor: pointer; pointer-events: auto !important; }
.clicavel-ceu:hover { fill: #ffd166; }
.nebulosa-clicavel { cursor: pointer; }
.nebulosa-clicavel:hover { filter: brightness(1.8); }
.c-lista { position: absolute; top: 60px; left: 16px; bottom: 56px; width: 300px; max-width: 42%; display: flex; flex-direction: column; color: #fff;
  background: rgba(14, 11, 36, .78); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 16px 16px 10px; backdrop-filter: blur(12px); z-index: 2; animation: subir .5s ease; }
.c-lista .rv-chapeu { color: #c3b2ff; }
.c-lista h3 { color: #fff; margin: 4px 0 2px; font-size: 22px; }
.c-lista .num { color: #b8b2dc; }
.c-lista-itens { overflow-y: auto; display: grid; gap: 4px; margin-top: 8px; padding-right: 4px; }
.c-item { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; text-align: left; background: rgba(255, 255, 255, .05); border: 1px solid transparent; color: #fff; padding: 8px 10px; border-radius: 12px; }
.c-item:hover { background: rgba(143, 114, 255, .25); border-color: rgba(195, 178, 255, .4); }
.c-item-nome { display: grid; font-size: 14px; line-height: 1.25; }
.c-item-nome small { color: #b8b2dc; font-size: 12px; font-weight: 500; }
.c-item b { font-size: 13px; }
.c-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* Sistema estelar */
.ceu.modo-sistema { cursor: default; }
#c-sistema { position: relative; animation: entrarSistema .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes entrarSistema { from { opacity: 0; transform: scale(.35); filter: blur(8px); } }
/* mergulho: passando do zoom máximo, o resto da constelação some enquanto a estrela cresce; o sistema nasce dela sem a animação de entrada */
.ceu.mergulhando svg :is(.c-estrela:not(.merg-alvo), .c-linhas, .c-neb, .c-nomes, .c-grupos, .c-rot-exp [data-r]:not(.merg-alvo)) { opacity: calc(1 - var(--merg, 0)); }
.ceu.mergulhando .c-lista { opacity: calc(1 - var(--merg, 0)); }
#c-sistema.mergulho { animation: none; }
#c-sistema :is(.orbita, .sis-fatias, .c-poeira) { transition: opacity 1s ease .15s; }
#c-sistema.chegando :is(.orbita, .sis-fatias, .c-poeira) { opacity: 0; transition: none; }
.sis-svg { display: block; width: 100%; height: auto; }
.sis-coroa { animation: respirar 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes respirar { 50% { transform: scale(1.12); opacity: .7; } }
.sis-sol { opacity: .9; }
.sis-pct { fill: #1c1930; font-family: "Young Serif", Georgia, serif; font-weight: 800; font-size: 20px; }
/* 20/10: as órbitas não giram mais (girando, era difícil acertar o planeta) */
.trilha-orbita { fill: none; stroke: rgba(195, 178, 255, .1); stroke-width: 1; }
.orbita:hover .trilha-orbita { stroke: rgba(195, 178, 255, .5); }
.planeta { cursor: pointer; }
.planeta .pl-brilho { fill: var(--c); opacity: .25; }
.planeta .pl-corpo { fill: var(--c); }
.planeta .pl-aro { fill: none; stroke: #c3b2ff; stroke-width: 1.2; }
.planeta .pl-aro.polemica { stroke: #ffd34d; stroke-width: 1.6; }
.planeta .pl-toque { fill: transparent; }
.planeta:hover .pl-corpo { stroke: #fff; stroke-width: 2; }
.planeta:hover .pl-brilho { opacity: .7; }
.planeta.pulsa .pl-brilho { animation: pulsoPlaneta 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulsoPlaneta { 50% { transform: scale(1.8); opacity: .05; } }
.c-legenda i.orb-vencidos, .sis-contagem i.orb-vencidos { background: #ff7a6b; }
.c-legenda i.orb-aprendendo, .sis-contagem i.orb-aprendendo { background: #ffb36b; }
.c-legenda i.orb-jovens, .sis-contagem i.orb-jovens { background: #ffd166; }
.c-legenda i.orb-maduros, .sis-contagem i.orb-maduros { background: #d6e6ff; }
.c-legenda i.orb-novos, .sis-contagem i.orb-novos { background: #7d78a3; }
.sis-painel { bottom: auto; }
.sis-contagem { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.sis-contagem div { background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 6px 4px; text-align: center; display: grid; justify-items: center; }
.sis-contagem i { width: 9px; height: 9px; border-radius: 50%; }
.sis-contagem b { font-size: 17px; }
.sis-contagem span { font-size: 10px; color: #b8b2dc; }
.sis-vazio { display: grid; place-items: center; text-align: center; min-height: 520px; padding: 40px; color: #ddd7ff; background: radial-gradient(circle at 50% 45%, #1d1840, #05040c 70%); }
.sis-vazio h3 { color: #fff; font-size: 28px; margin: 18px 0 6px; }
.sis-vazio p { max-width: 46ch; margin: 0; }
.sis-apagada { width: 90px; height: 90px; border-radius: 50%; border: 3px dashed #ff9d4d; opacity: .8; animation: girar 12s linear infinite; }

/* Card respondido dentro do céu */
.ceu-card { position: absolute; right: 16px; top: 60px; bottom: 56px; width: min(520px, 56%); overflow-y: auto; z-index: 5; padding: 18px 22px 22px;
  border-radius: 22px; background: var(--card); color: var(--ink); border: 1px solid rgba(195, 178, 255, .35); box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: cardChega .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes cardChega { from { opacity: 0; transform: translateX(40px) scale(.96); } }
.ceu-card.flash-ok { animation: flashOk .6s; } .ceu-card.flash-no { animation: tremer .45s; }
.ceu-card-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ceu-card .leitor-fechar { position: static; }
.ceu-card .acoes button { min-width: 0; flex: 1; }
.ceu-card-acoes { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ceu-acao { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 16px; line-height: 1; }
#ceu-marcar { filter: grayscale(1); opacity: .55; }
#ceu-marcar.marcado { filter: none; opacity: 1; border-color: var(--no); }
.ceu-aviso-desfazer { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 7; display: flex; gap: 12px; align-items: center;
  padding: 8px 10px 8px 16px; border-radius: 99px; background: var(--card); color: var(--ink); border: 1px solid rgba(195, 178, 255, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 14px; font-weight: 600; white-space: nowrap; animation: cardChega .3s; }
.ceu-aviso-desfazer button { border-radius: 99px; }
.faisca-xp { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 6; font-family: "Young Serif", Georgia, serif; font-weight: 800; font-size: 44px;
  color: #ffd34d; text-shadow: 0 0 20px rgba(255, 211, 77, .8); pointer-events: none; animation: faisca 1.6s ease-out forwards; }
@keyframes faisca { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
@media (max-width: 760px) { .c-lista { display: none; } .ceu-card { left: 8px; right: 8px; width: auto; } }

/* Constelação expandida */
#c-foco { animation: entrarSistema .9s cubic-bezier(.2, .8, .2, 1); }
.foco-svg { display: block; width: 100%; height: auto; }
.c-estrela.foco text { pointer-events: none; }
.foco-nome { fill: #fff; font-size: 14px; font-weight: 700; font-family: inherit; text-shadow: 0 0 8px #000; }
.foco-num { fill: #c3b2ff; font-size: 11.5px; font-weight: 600; font-family: inherit; }
.c-estrela.foco:hover .nucleo { stroke: #fff; stroke-width: 2.5; }
.c-estrela.foco:hover .foco-nome { fill: #ffd166; }

/* Responder cards dentro da apresentação */
.ap-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-acoes .peq:not(.principal) { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.ap-acoes kbd, .ap-fim kbd { opacity: .7; }
#apresentacao .ceu-card { top: 40px; bottom: 110px; right: 4vw; }
#apresentacao.respondendo .ap-controles, #apresentacao.respondendo .ap-progresso { opacity: 0; pointer-events: none; }
#apresentacao.respondendo .ap-legenda { opacity: .35; transition: opacity .4s; }
.ap-fim { bottom: auto !important; text-align: center; display: grid; justify-items: center; gap: 4px; padding: 30px 28px !important; }
.ap-fim h3 { font-size: 26px; margin: 4px 0; }
.ap-fim p { margin: 0 0 8px; color: var(--muted); max-width: 40ch; }
.ap-fim-icone { font-size: 54px; animation: subir .6s ease; }
.ap-fim-placar { display: grid; margin: 6px 0 14px; }
.ap-fim-placar b { font-family: "Young Serif", Georgia, serif; font-size: 34px; }
.ap-fim-placar span { font-size: 13px; color: var(--muted); }
.ap-fim-acoes { display: grid; gap: 8px; width: 100%; }

/* Hoje: estudar ou estudar na constelação */
.missao-botoes { display: grid; gap: 10px; position: relative; z-index: 1; }
.missao button.ceu-botao { background: linear-gradient(135deg, #120e2e, #2a1d63); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(195, 178, 255, .35);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .5) 1px, transparent 0), linear-gradient(135deg, #120e2e, #2a1d63); background-size: 18px 18px, auto; }
.missao button.ceu-botao kbd { color: #c3b2ff; }
.missao button.ceu-botao:hover { box-shadow: 0 10px 30px rgba(124, 77, 255, .5), inset 0 0 0 1px rgba(195, 178, 255, .6); }

/* Matérias: edital */
.nt-tag.nt-edital-foco { background: rgba(232, 165, 0, .16); color: #c98d00; white-space: nowrap; }
.nt-tag.nt-edital { background: rgba(47, 111, 228, .15); color: #5b8def; white-space: nowrap; }
.nt-tag.nt-fora { background: rgba(128, 124, 160, .16); color: var(--muted); white-space: nowrap; }

/* Jornada na constelação */
.jornada .jr-legenda { transition: opacity .4s; }
.jr-rota line { stroke: #ffd34d; stroke-width: 2; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 4px rgba(255, 211, 77, .9));
  stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: tracar 1.2s ease forwards; }
.jr-rota circle { fill: rgba(255, 211, 77, .12); stroke: #ffd34d; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255, 211, 77, .8)); animation: subir .6s ease; }
.jr-placar { color: #ddd7ff; font-size: 13px; font-weight: 700; padding: 0 8px; white-space: nowrap; }
.jr-acendeu { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; color: #ffd34d; z-index: 6; pointer-events: none; animation: faisca 1.4s ease-out forwards; }
.jr-acendeu b { font-size: 70px; line-height: 1; text-shadow: 0 0 30px rgba(255, 211, 77, .9); }
.jr-acendeu span { font-family: "Young Serif", Georgia, serif; font-size: 24px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px #000; }
.jornada.jr-fim .jr-legenda { left: 50%; transform: translateX(-50%); text-align: center; bottom: 60px; }
.jornada.jr-fim .ap-acoes { justify-content: center; }

#apresentacao .ceu-card { bottom: auto; max-height: calc(100% - 150px); }

/* cards que aguardam curadoria: aparecem no sistema estelar, mas apagados */
/* fora dos estudos (sem curadoria, polêmica adiada): contorno tracejado, sem clique */
.planeta.aguardando { opacity: .55; cursor: default; }
.planeta.aguardando .pl-brilho, .planeta.aguardando .pl-aro { display: none; }
.planeta.aguardando .pl-corpo { fill: none; stroke: #8a86a8; stroke-width: 1.2; stroke-dasharray: 2 2; }
.planeta.aguardando:hover .pl-corpo { stroke: #c3b2ff; stroke-width: 1.2; }
label.cfg-check { display: flex; gap: 8px; align-items: baseline; }
label.cfg-check input { width: auto; }
label.cfg-check small { color: var(--muted, #888); }

/* ✍️ fila de curadoria */
.planeta.aguardando.pedido .pl-corpo { stroke: #ffd34d; }
.botao-pedir:disabled { opacity: .8; cursor: default; }
.desfazer-pedido { margin-left: 6px; animation: surgir-desfazer .25s ease-out; }
@keyframes surgir-desfazer { from { opacity: 0; transform: translateX(-6px); } }
.resultado { flex-wrap: wrap; }
.resultado .desfazer-resp { font-size: 13px; padding: 4px 10px; font-weight: 600; }
.fila-curar .t-cards a[data-tirar] { margin-left: 6px; color: var(--muted, #888); text-decoration: none; }
.fila-curar .t-cards a[data-tirar]:hover { color: #d33; }

/* ============ Aba Constelação: o céu ocupa a tela toda abaixo da barra ============ */
body.tela-ceu { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: #05040c; }
body.tela-ceu main { max-width: none; width: 100%; padding: 0; flex: 1; min-height: 0; }
body.tela-ceu #constelacao { height: 100%; }
body.tela-ceu .ceu { height: 100%; border-radius: 0; border: 0; box-shadow: none; }
/* o desenho (céu, constelação, sistema) preenche a área; o SVG centraliza sem cortar */
body.tela-ceu .ceu > svg, body.tela-ceu #c-foco, body.tela-ceu #c-sistema, body.tela-ceu #c-foco > svg, body.tela-ceu #c-sistema > svg { width: 100%; height: 100%; }
body.tela-ceu #c-sistema .sis-vazio { height: 100%; display: grid; place-content: center; }
.ceu-topo { position: absolute; top: 14px; left: 16px; z-index: 3; display: grid; gap: 6px; justify-items: start; max-width: calc(100% - 32px); }
.ceu-topo .ceu-migalhas { position: static; }
.ceu-numeros { font-size: 12px; color: #b8b2dc; padding: 0 14px; text-shadow: 0 1px 6px #000; }
.ceu-ferr { position: absolute; top: 14px; right: 16px; z-index: 4; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  background: rgba(10, 8, 26, .72); padding: 5px 6px 5px 12px; border-radius: 99px; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); }
.ceu-ferr .alternar { color: #cfc8ff; font-size: 13px; padding: 0 6px; }
.ceu-ferr a { color: #cfc8ff; font-size: 13px; font-weight: 600; text-decoration: none; padding: 0 6px; }
.ceu-ferr a:hover { color: #fff; }
.ceu-ferr button { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 14px; }
.ceu-ferr #c-tela { width: 34px; padding: 0; background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .15); }
.ceu .mm-controles { top: 70px; right: 16px; }
/* com a barra no topo, a lista e o card começam um pouco mais abaixo */
body.tela-ceu .c-lista { top: 70px; }
body.tela-ceu .ceu-card { top: 70px; }
@media (max-width: 760px) { .ceu-ferr .alternar, .ceu-ferr a { display: none; } .ceu-numeros { display: none; } }

/* Matérias: atalho para o mapa mental */
.botao-mapa { margin-left: auto; height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.botao-mapa:hover { border-color: var(--accent-2); }
/* quando a tela não tem o formato do desenho, o fundo do SVG deixaria uma faixa com bordas duras:
   o céu pinta a área inteira e o retângulo de fundo do SVG some */
body.tela-ceu .ceu { background: radial-gradient(ellipse at 50% 45%, #1d1840, #0d0b1f 55%, #05040c);
  background-image: radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 78% 9%, #fff6, transparent), radial-gradient(1.2px 1.2px at 33% 88%, #fff7, transparent),
    radial-gradient(1px 1px at 91% 72%, #fff6, transparent), radial-gradient(1px 1px at 5% 63%, #fff5, transparent), radial-gradient(1.2px 1.2px at 58% 96%, #fff6, transparent),
    radial-gradient(1px 1px at 47% 4%, #fff5, transparent), radial-gradient(ellipse at 50% 45%, #1d1840, #0d0b1f 55%, #05040c); }
body.tela-ceu :is(.ceu, #c-foco, #c-sistema) > svg > rect:first-of-type { fill: transparent; }
body.tela-ceu :is(.ceu, #c-foco, #c-sistema) > svg { overflow: visible; }

/* ============ Constelação: visualizações, grupo aceso, estudar ============ */
.ceu-baixo { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 3; display: grid; gap: 8px; justify-items: start; pointer-events: none; }
.ceu-baixo > * { pointer-events: auto; }
.ceu-baixo .c-legenda { position: static; }
.ceu-vis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px 6px 14px; border-radius: 16px; color: #cfc8ff;
  background: rgba(10, 8, 26, .78); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); }
.ceu-rot { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8f88c4; margin-left: 6px; }
.ceu-rot:first-child { margin-left: 0; }
.ceu-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .06); }
.ceu-seg button, .ceu-tog { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; border: 0; background: transparent; color: #cfc8ff; box-shadow: none; }
.ceu-seg button:hover, .ceu-tog:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ceu-seg button.ativo { background: rgba(143, 114, 255, .45); color: #fff; }
.ceu-tog { border: 1px solid rgba(255, 255, 255, .14); margin-left: 4px; }
.ceu-tog.ativo { background: rgba(143, 114, 255, .3); border-color: rgba(195, 178, 255, .5); color: #fff; }
.ceu-ferr button:disabled { opacity: 1; background: rgba(127, 224, 196, .14); color: #a6f0da; border-color: rgba(127, 224, 196, .35); }
.c-item.fora { opacity: .35; }
.c-nomes text.miudo { font-size: 9.5px; opacity: .7; }
/* passar o mouse numa constelação acende o grupo dela e apaga o resto */
.ceu.sobre-grupo svg { cursor: pointer; }
svg.grupo-aceso :is(.c-estrela, .c-linhas line, .c-nomes text, .c-grupos text, .c-pontes path):not(.hg) { opacity: .16; transition: opacity .2s; }
svg.grupo-aceso .c-linhas line.hg { stroke-opacity: .85; stroke-width: 1.6; }
svg.grupo-aceso .c-grupos text.hg { fill: #ffd166; opacity: 1; font-size: 22px; }
svg.grupo-aceso .c-nomes text.hg { opacity: 1; }
svg.grupo-aceso .c-neb.hg { filter: brightness(2.2); }
.c-neb { transition: filter .25s; }
:is(.c-estrela, .c-linhas line, .c-nomes text, .c-grupos text) { transition: opacity .2s; }
@media (max-width: 760px) { .ceu-rot { display: none; } }

/* música */
.musica-btn { cursor: pointer; background: var(--bg-2); border: 0; font-size: 15px; opacity: .55; filter: grayscale(1); }
.musica-btn:hover { opacity: .9; }
.musica-btn.ligada { opacity: 1; filter: none; background: linear-gradient(135deg, #1d1840, #3a2c78); box-shadow: 0 0 12px rgba(143, 114, 255, .55); animation: tocando 2.4s ease-in-out infinite; }
@keyframes tocando { 50% { box-shadow: 0 0 4px rgba(143, 114, 255, .3); } }
body.tela-ceu .c-lista, body.tela-ceu .ceu-card { bottom: 120px; }

/* ============ Constelação: galáxias distantes (edital em foco) e arraste ============ */
.c-galaxia { transition: transform 2s cubic-bezier(.6, 0, .3, 1), opacity 1.6s ease, filter 1.6s ease; }
.c-galaxia.distante { transform: translate(var(--dx), var(--dy)) scale(.45); opacity: .4; filter: blur(.8px) saturate(.4); pointer-events: none; }
.c-pontes path { transition: opacity .8s ease; }
.c-pontes path.distante { opacity: 0; pointer-events: none; }
/* arrastar o céu não seleciona texto */
.ceu svg, .ceu-topo, .ceu-baixo, .ceu-ferr { user-select: none; -webkit-user-select: none; }
.ceu svg { touch-action: none; }
body.tela-ceu .ceu:not(.modo-sistema) { cursor: grab; }
body.tela-ceu .ceu.arrastando, body.tela-ceu .ceu.arrastando svg { cursor: grabbing; }

/* ============ Trilha estratégica ============ */
.tr-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px 26px; box-shadow: var(--sombra); margin: 18px 0 8px; position: relative; overflow: hidden; }
.tr-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--accent); }
.tr-hero.tr-ok::before { background: var(--ok); } .tr-hero.tr-atras::before { background: var(--warn); }
.tr-veredito { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0 18px; }
.tr-veredito > span { font-size: 34px; line-height: 1; }
.tr-veredito b { font-size: 24px; display: block; }
.tr-veredito p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.tr-barra { position: relative; height: 14px; border-radius: 8px; background: var(--bg-2); margin-top: 26px; }
.tr-barra-feito { height: 100%; border-radius: 8px; background: var(--gradiente); min-width: 4px; transition: width .6s; }
.tr-barra-meta { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--ink); }
.tr-barra-meta i { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 11px; font-style: normal; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tr-legenda-barra { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.tr-legenda-barra b { color: var(--ink); }
.tr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.tr-kpis > div { background: var(--bg-2); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.tr-kpis small { font-size: 12px; color: var(--muted); font-weight: 600; }
.tr-kpis b { font-size: 22px; }
.tr-kpis span { font-size: 12px; color: var(--muted); }
.tr-dias { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 92px; position: relative; }
.tr-dia { display: grid; gap: 4px; justify-items: center; height: 100%; grid-template-rows: 1fr auto; }
.tr-col { width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.tr-col i { display: block; width: 100%; }
.tr-col i.t { background: var(--accent); } .tr-col i.c { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.tr-dia span { font-size: 11px; color: var(--muted); font-weight: 600; }
.tr-dia.hoje span { color: var(--accent); font-weight: 800; }
.tr-lista { display: grid; gap: 10px; }
.tr-top { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--g); border-radius: 16px; padding: 14px 16px; }
.tr-top.feito { opacity: .62; }
.tr-top-cab h3 { margin: 2px 0 6px; font-size: 17px; }
.tr-grupo { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--g); }
.tr-info { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.tr-lacuna { color: var(--warn); }
.tr-dom { color: var(--ok); font-weight: 700; }
.tr-passos { display: flex; gap: 6px; }
.tr-passo { display: grid; justify-items: center; gap: 1px; min-width: 78px; padding: 7px 10px; font-size: 13px; border-radius: 12px; }
.tr-passo span { font-size: 17px; line-height: 1.1; }
.tr-passo small { font-size: 11px; color: var(--muted); font-weight: 600; }
.tr-passo.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.tr-passo.ok span { font-weight: 800; }
.tr-acoes { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tr-acoes a.peq { text-decoration: none; border: 1.5px solid var(--line); color: var(--ink); font-weight: 600; }
.tr-sem-link { font-size: 13px; color: var(--muted); }
.tr-bola { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.tr-tempo { display: grid; gap: 8px; margin-bottom: 30px; }
.tr-sem { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; }
.tr-sem.passada { opacity: .7; }
.tr-sem.atual { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tr-sem.revisao { background: linear-gradient(135deg, var(--ouro-soft), var(--card)); border-color: color-mix(in srgb, var(--ouro) 45%, transparent); }
.tr-sem-cab { display: flex; gap: 12px; align-items: baseline; cursor: pointer; }
.tr-sem-cab span { font-size: 13px; color: var(--muted); }
.tr-sem-h { margin-left: auto; font-weight: 700; }
.tr-sem-tops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-chip { font-size: 13px; padding: 4px 10px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--g) 55%, transparent); background: color-mix(in srgb, var(--g) 10%, transparent); color: var(--ink); font-weight: 600; }
.tr-chip.meio { background: linear-gradient(90deg, color-mix(in srgb, var(--g) 30%, transparent) 50%, color-mix(in srgb, var(--g) 8%, transparent) 50%); }
.tr-chip.feito { background: var(--g); color: #fff; border-color: transparent; }
.tr-rev { font-size: 13px; color: var(--muted); }
.tr-sem.aberta .tr-lista { margin-top: 12px; }
.tr-min { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.tr-min input { width: 110px; }
.tr-q { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .tr-hero { grid-template-columns: 1fr; } .tr-top { grid-template-columns: 1fr; } .tr-passo { min-width: 0; flex: 1; } }
.tr-hero .aviso { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 600; }
.tr-barra-meta.inicio i { left: 0; transform: none; } .tr-barra-meta.fim i { left: auto; right: 0; transform: none; }

/* ==========================================================================
   Repaginada "Carta celeste" (out/2026)
   Um atlas de estrelas antigo: azul-noite de tinta, linhas finas de constelação,
   luz de estrela quente no texto e ouro de astrolábio para progresso e ação.
   Fica por último para valer sobre o resto; para voltar ao visual anterior, apague este bloco.
   ========================================================================== */
:root {
  /* tema claro: carta impressa em papel azulado */
  --bg: #EEF1F7; --bg-2: #E3E8F2; --card: #F8FAFD; --ink: #18213F; --muted: #5B6588; --line: #CCD4E5;
  --accent: #5146C4; --accent-2: #7C73DD; --accent-soft: rgba(81, 70, 196, .1); --sobre-accent: #1B1404;
  --ouro: #A87414; --ouro-soft: rgba(168, 116, 20, .12); --ouro-vivo: #E2AE4A;
  --ok: #17865A; --ok-soft: rgba(23, 134, 90, .12); --no: #C8484E; --no-soft: rgba(200, 72, 78, .12);
  --warn: #A6670B; --warn-soft: rgba(166, 103, 11, .12);
  --fogo: #D2611F; --fogo-soft: rgba(210, 97, 31, .12);
  --gradiente: linear-gradient(#E2AE4A, #E2AE4A);
  --sombra: none; --sombra-forte: 0 18px 50px rgba(14, 20, 48, .18);
  --raio: 14px;
  --fonte-titulo: "Young Serif", Georgia, serif;
  --lateral: 228px;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* tema escuro: céu profundo, tinta da carta, linha de constelação, luz de estrela */
    --bg: #0E1430; --bg-2: #131B3D; --card: #18213F; --ink: #F1E7CF; --muted: #9AA3C6; --line: #2C3863;
    --accent: #8F86E8; --accent-2: #B4ADF3; --accent-soft: rgba(143, 134, 232, .14); --sobre-accent: #1B1404;
    --ouro: #E2AE4A; --ouro-soft: rgba(226, 174, 74, .13); --ouro-vivo: #E2AE4A;
    --ok: #5BCB98; --ok-soft: rgba(91, 203, 152, .13); --no: #F07A7E; --no-soft: rgba(240, 122, 126, .13);
    --warn: #F0BC5C; --warn-soft: rgba(240, 188, 92, .13);
    --fogo: #F2945A; --fogo-soft: rgba(242, 148, 90, .13);
    --heat-0: #19224A; --heat-1: #2B3373; --heat-2: #4A4FA8; --heat-3: #8F86E8; --heat-4: #E2AE4A;
    --sombra-forte: 0 18px 50px rgba(0, 0, 0, .45);
  }
}

/* ---------- tipografia ---------- */
body { font: 15.5px/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "tnum" 1;
  /* a grade de uma carta celeste, quase invisível */
  background-image: radial-gradient(circle at 78% -10%, var(--accent-soft), transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 119px, color-mix(in srgb, var(--line) 35%, transparent) 119px 120px),
    repeating-linear-gradient(90deg, transparent 0 119px, color-mix(in srgb, var(--line) 35%, transparent) 119px 120px); }
h1, h2, h3, .serif { font-family: var(--fonte-titulo); font-weight: 400; font-synthesis: none; letter-spacing: -.005em; }
h1 { font-size: 34px; line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 18px; }
b, strong { font-weight: 650; }
.rv-chapeu { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
::selection { background: color-mix(in srgb, var(--ouro-vivo) 40%, transparent); }
:focus-visible { outline: 2px solid var(--ouro-vivo); outline-offset: 2px; }

/* ---------- superfícies: menos cartão, mais linha fina ---------- */
.painel, .status-card, .edital-card, .tr-hero, .tr-top, .tr-sem, .conquista, dialog { box-shadow: none; border-width: 1px; }
.painel { border-radius: var(--raio); }
button { border-radius: 10px; border-width: 1px; font-weight: 600; }
button.principal { background: var(--ouro-vivo); color: var(--sobre-accent); box-shadow: none; border-color: transparent; }
button.principal:hover { box-shadow: 0 0 0 4px var(--ouro-soft); }
.chip { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
kbd { font-family: inherit; }

/* ---------- menu: lateral no PC ---------- */
.marca { font-family: var(--fonte-titulo); font-weight: 400; font-size: 25px; letter-spacing: .01em; color: var(--ink); gap: 10px; }
.marca::before { content: ""; width: 22px; height: 22px; border-radius: 0; box-shadow: none; background: var(--ouro-vivo);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-mais { display: none; }
@media (min-width: 901px) {
  body { padding-left: var(--lateral); }
  body.estudando { padding-left: 0; }
  .barra { position: fixed; inset: 0 auto 0 0; width: var(--lateral); display: flex; flex-direction: column; align-items: stretch; gap: 26px;
    padding: 26px 16px 18px; border-bottom: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); z-index: 30; overflow-y: auto; }
  .marca { padding: 0 10px; }
  .nav-grupo { display: flex; flex-direction: column; gap: 2px; background: none; padding: 0; border-radius: 0; overflow: visible; justify-self: stretch; }
  .nav-grupo a, .nav-grupo a:not(.ativo) { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-size: 15px; font-weight: 500; color: var(--muted); border-radius: 10px; }
  .nav-grupo a:hover { background: var(--bg-2); color: var(--ink); }
  .nav-grupo a.ativo { background: var(--ouro-soft); color: var(--ink); box-shadow: inset 2px 0 0 var(--ouro-vivo); font-weight: 600; }
  .nav-grupo a.ativo .ic { stroke: var(--ouro); }
  /* as três telas do dia a dia ficam separadas das outras por uma linha */
  .nav-grupo a[data-rota="constelacao"] { margin-bottom: 12px; position: relative; }
  .nav-grupo a[data-rota="constelacao"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -7px; border-bottom: 1px solid var(--line); }
  .status { margin-top: auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 0 6px; }
  main { max-width: 1180px; padding: 36px 40px 80px; }
  .barra-fixa { top: 12px; }
}
@media (min-width: 901px) and (max-width: 1120px) { :root { --lateral: 76px; } .marca { font-size: 0; padding: 0; justify-content: center; } .nav-grupo a, .nav-grupo a:not(.ativo) { font-size: 0; justify-content: center; padding: 10px; gap: 0; }
  .status { justify-content: center; } .status .pilula.nivel .mini-barra { display: none; } }

/* ---------- menu: barra embaixo no iPhone ---------- */
@media (max-width: 900px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; position: sticky; top: 0; }
  .marca { font-size: 22px; }
  .nav-grupo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: none;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); border-radius: 0; overflow: visible; }
  .nav-grupo a, .nav-grupo a:not(.ativo), .nav-mais { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11.5px; font-weight: 600;
    color: var(--muted); background: none; border: 0; border-radius: 10px; box-shadow: none; }
  .nav-grupo a.ativo { color: var(--ouro); background: none; box-shadow: none; }
  .nav-grupo a:not([data-prim]) { display: none; }
  /* "Mais" abre as outras telas numa folha acima da barra */
  body.menu-mais .nav-grupo { grid-template-columns: repeat(4, 1fr); box-shadow: 0 -20px 40px rgba(0, 0, 0, .3); }
  body.menu-mais .nav-grupo a:not([data-prim]) { display: flex; order: -1; }
  body.menu-mais .nav-mais { color: var(--ouro); }
  .status { gap: 6px; } .status .pilula.nivel .mini-barra { display: none; }
  main { padding: 22px 16px 40px; }
  .barra-fixa { top: 58px; }
  h1 { font-size: 28px; }
}

/* ---------- Hoje: o astrolábio ---------- */
.hoje-hero { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; padding: 6px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.astro { width: 250px; height: 250px; display: block; }
.astro .trilho { fill: none; stroke: var(--line); }
.astro .arco { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 125px 125px; }
.astro .a-prova { stroke: var(--ouro-vivo); } .astro .a-semana { stroke: var(--accent); } .astro .a-hoje { stroke: var(--ink); }
.astro .marcas line { stroke: var(--muted); stroke-width: 1; opacity: .55; }
.astro .marcas line.maior { opacity: 1; stroke-width: 1.4; }
.astro .centro-num { font-family: var(--fonte-titulo); font-size: 46px; fill: var(--ink); }
.astro .centro-rot { font-size: 12.5px; fill: var(--muted); font-weight: 600; }
.astro .agulha { stroke: var(--ouro-vivo); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .astro .arco { animation: fecharArco 1.6s cubic-bezier(.2, .8, .2, 1) both; }
  .astro .a-semana { animation-delay: .15s; } .astro .a-hoje { animation-delay: .3s; }
  .astro .agulha-g { animation: girarAgulha 1.8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 125px 125px; }
}
@keyframes fecharArco { from { stroke-dashoffset: var(--c); } }
@keyframes girarAgulha { from { transform: rotate(-90deg); opacity: 0; } }
.hoje-data { color: var(--muted); font-size: 14px; margin: 0 0 2px; }
.hoje-texto h1 { font-size: 40px; margin: 0 0 6px; }
.hoje-frase { font-size: 17px; margin: 0 0 18px; max-width: 54ch; }
.astro-leg { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; max-width: 520px; }
.astro-leg li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: baseline; font-size: 14.5px; padding-bottom: 7px; border-bottom: 1px dashed var(--line); }
.astro-leg i { width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); }
.astro-leg b { font-weight: 650; }
.astro-leg span { color: var(--muted); }
.hoje-materias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.hoje-materias .chip { background: var(--bg-2); color: var(--ink); font-weight: 500; }
.hoje-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hoje-acoes button { height: 46px; padding: 0 20px; font-size: 16px; }
.hoje-acoes kbd { font-size: 11px; opacity: .65; margin-left: 6px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.hoje-detalhe { color: var(--muted); font-size: 13.5px; margin-top: 12px; }
.hoje-grade { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.hoje-grade > div { display: grid; gap: 22px; align-content: start; min-width: 0; }
.hoje-grade .painel, .hoje-grade .edital-card { margin: 0; }
.bloco-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bloco-cab h2 { margin: 0; }
.bloco-cab a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.semana-mini { display: grid; }
.semana-mini a { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.semana-mini a:hover { background: var(--bg-2); }
.semana-mini i { align-self: stretch; border-radius: 2px; background: var(--g); }
.semana-mini small { color: var(--muted); display: block; font-size: 12.5px; }
.semana-mini .passos-mini { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.semana-mini .passos-mini b { color: var(--ok); }
.status-lista { display: grid; border: 1px solid var(--line); border-radius: var(--raio); background: var(--card); }
.status-lista > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); align-items: baseline; }
.status-lista > div:last-child { border-bottom: 0; }
.status-lista b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 24px; grid-row: span 2; align-self: center; }
.status-lista small { color: var(--muted); font-size: 13px; }
.status-lista .rot { font-weight: 600; }
.status-lista .barrinha { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; margin-top: 6px; }
.status-lista .barrinha div { height: 100%; background: var(--ouro-vivo); }
@media (max-width: 1000px) { .hoje-grade { grid-template-columns: minmax(0, 1fr); } .hoje-grade > div > * { min-width: 0; } }
@media (max-width: 700px) {
  .hoje-hero { grid-template-columns: 1fr; justify-items: center; text-align: left; gap: 18px; }
  .hoje-texto { width: 100%; } .hoje-texto h1 { font-size: 32px; }
  .astro { width: 220px; height: 220px; }
}

/* ---------- Trilha e outras telas: acertos finos ---------- */
.tr-hero::before { background: var(--ouro-vivo); }
.tr-barra-feito { background: var(--ouro-vivo); }
.tr-col i.t { background: var(--ouro-vivo); } .tr-col i.c { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.tr-veredito b, .tr-kpis b { font-family: var(--fonte-titulo); font-weight: 400; }
.tr-grupo { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; }
.edital-card { border-radius: var(--raio); }
.barra-meta .atual, .barra-lembranca div, .edital-card .trilha .feito { background: var(--accent); }
body.tema-ceu .barra { background: rgba(9, 12, 32, .72); }
body.tema-ceu .nav-grupo a.ativo { background: var(--ouro-soft); color: var(--ink); }

/* ---------- análise do edital (prova anterior + banca) ---------- */
.an { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0 30px; margin: 26px 0 10px; display: grid; gap: 26px; }
.an-cab h2 { font-size: 26px; margin: 0 0 6px; }
.an-cab p { color: var(--muted); max-width: 72ch; margin: 0; }
.an-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--raio); background: var(--card); }
.an-bloco { padding: 18px 20px; border-right: 1px solid var(--line); min-width: 0; }
.an-bloco:last-child { border-right: 0; }
.an-bloco h3 { margin: 0 0 12px; font-size: 18px; }
.an-bloco p { margin: 0 0 8px; font-size: 14.5px; }
.an-nota { color: var(--muted); font-size: 13px !important; }
.an-cortes { display: grid; gap: 10px; margin-bottom: 12px; }
.an-cortes > div { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: baseline; }
.an-cortes b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 40px; line-height: 1; grid-row: span 2; color: var(--ouro); }
.an-cortes b small { font-size: 16px; color: var(--muted); }
.an-cortes span { font-weight: 600; }
.an-cortes > div > small { color: var(--muted); font-size: 12.5px; }
.an-prova { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.an-40 { display: flex; gap: 2px; height: 26px; }
.an-40 i { display: grid; place-content: center; border-radius: 4px; color: #10152c; font-style: normal; }
.an-40 b { font-size: 12.5px; }
.an-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); margin: 8px 0 10px; }
.an-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.an-mud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.an-mud h4, .an-inc h4, .an-armadilhas h4 { margin: 0 0 8px; font-size: 14px; }
.an-mud > div:nth-child(1) h4 { color: var(--ok); } .an-mud > div:nth-child(3) h4 { color: var(--no); }
.an-mud ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.an-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.an-inc h4 small { color: var(--muted); font-weight: 500; }
.an-linha { display: grid; grid-template-columns: 170px 1fr 28px; gap: 10px; align-items: center; font-size: 13.5px; padding: 3px 0; }
.an-linha div { height: 10px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.an-linha i { display: block; height: 100%; background: var(--ouro-vivo); border-radius: 3px; }
.an-linha b { text-align: right; font-weight: 600; }
.an-linha.zero { color: var(--muted); }
.an-armadilhas div { display: flex; flex-wrap: wrap; gap: 6px; }
.an-armadilhas span { font-size: 13.5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.an-pri { display: grid; gap: 8px; }
.an-pri summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.an-pri summary small { color: var(--muted); font-weight: 500; }
.an-pri-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--line); margin-top: 6px; }
.an-pri-lista > div { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.an-pri-lista p { margin: 4px 0; font-size: 14px; }
.an-pri-lista small { color: var(--muted); font-size: 12px; }
.pri { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; flex: none; }
.pri-alta { background: var(--ouro-vivo); box-shadow: 0 0 0 3px var(--ouro-soft); } .pri-media { background: var(--accent); } .pri-baixa { background: var(--muted); opacity: .6; }
.an-st { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; margin-left: 8px; white-space: nowrap; }
.st-novo { color: var(--ok); background: var(--ok-soft); } .st-repete { color: var(--muted); background: var(--bg-2); } .st-mudou { color: var(--warn); background: var(--warn-soft); }
.tr-info .an-st { margin-left: 0; }
.tr-pri { font-weight: 600; color: var(--ink); }
.tr-dica { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--muted); padding-left: 10px; border-left: 2px solid var(--line); }
@media (max-width: 1000px) { .an-tres, .an-mud, .an-duas { grid-template-columns: 1fr; } .an-bloco { border-right: 0; border-bottom: 1px solid var(--line); } .an-linha { grid-template-columns: 130px 1fr 26px; } }
@media (min-width: 901px) { body.tema-ceu .barra .nav-grupo { background: none; } }
/* iPhone: o desfoque do cabeçalho prenderia a barra fixa dentro dele (backdrop-filter cria um novo contêiner para position:fixed) */
@media (max-width: 900px) { .barra, body.tema-ceu .barra { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 97%, transparent); } }
/* telas estreitas: as 7 bolinhas da semana e os quadros encolhem para caber em 390 px */
@media (max-width: 500px) {
  .painel { padding: 16px; }
  .bolhas-semana { gap: 4px; }
  .bolha b { width: 100%; max-width: 40px; height: auto; aspect-ratio: 1; }
  .constancia-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bolhas-semana > *, .constancia-numeros > * { min-width: 0; }
}

/* ---------- Constelação: mergulho (a constelação se abre com o zoom) ---------- */
.c-linhas line { vector-effect: non-scaling-stroke; }
.c-rot-exp { pointer-events: none; }
.c-rot-exp text { text-anchor: middle; paint-order: stroke; stroke: rgba(8, 10, 30, .9); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.c-rot-exp .re-nome { fill: #F1E7CF; font-weight: 600; }
.c-rot-exp .re-num { fill: #b4adf3; font-weight: 500; }
.c-rot-exp .fora { opacity: .25; }
svg.expandindo .c-pontes { opacity: 0; transition: opacity .3s; }
svg.expandindo .c-galaxia:not(.em-foco):not(.distante) { opacity: var(--ofusca, 1); transition: transform 2s cubic-bezier(.6, 0, .3, 1), opacity .2s; }
svg.expandindo .c-galaxia.em-foco .c-neb { opacity: .6; }
.ceu-numeros.some { display: none; }
.c-lista { animation: subir .35s ease; }
svg.expandindo .c-galaxia:not(.em-foco) :is(.c-nomes, .c-grupos) { opacity: 0; transition: opacity .25s; }

/* ==========================================================================
   Carta celeste, segunda rodada: o tema "céu" segue a mesma paleta, os grandes destaques
   viram quadros com uma linha de cor (sem gradiente) e os rótulos saem da caixa alta.
   ========================================================================== */
html { font-synthesis: none; } /* Young Serif só tem um peso: nada de negrito falso */
body.tema-ceu {
  --bg: #0B1029; --bg-2: rgba(241, 231, 207, .06); --card: rgba(20, 27, 62, .8); --ink: #F1E7CF; --muted: #A3ABCF; --line: rgba(241, 231, 207, .13);
  --accent: #8F86E8; --accent-2: #B4ADF3; --accent-soft: rgba(143, 134, 232, .16); --sobre-accent: #1B1404;
  --ouro: #E2AE4A; --ouro-soft: rgba(226, 174, 74, .14); --ouro-vivo: #E2AE4A;
  --ok: #5BCB98; --ok-soft: rgba(91, 203, 152, .14); --no: #F07A7E; --no-soft: rgba(240, 122, 126, .14);
  --warn: #F0BC5C; --warn-soft: rgba(240, 188, 92, .14); --fogo: #F2945A; --fogo-soft: rgba(242, 148, 90, .14);
  --gradiente: linear-gradient(#E2AE4A, #E2AE4A); --sombra: none;
}
/* grandes destaques: quadro com uma linha de cor à esquerda */
.rv-capa, .rs-capa, .ficha, .bordo { background: var(--card); color: var(--ink); box-shadow: none; border: 1px solid var(--line); border-left: 4px solid var(--ouro-vivo); border-radius: var(--raio); }
.rv-capa.rv-bom { border-left-color: var(--ok); } .rv-capa.rv-alerta { border-left-color: var(--no); }
.rv-capa::after, .rs-capa::after, .ficha::after, .bordo::before, .bordo::after, .rv-capa::before, .rs-capa::before, .ficha::before { display: none; }
.rv-capa :is(p, span, small), .rs-capa :is(p, span, small), .ficha :is(p, span, small), .bordo :is(p, span, small) { color: inherit; }
.rv-capa .rv-numero, .rv-capa b:first-of-type { color: var(--ouro); }
.rs-capa h2, .rs-capa h3 { color: var(--ink); }
.bordo { background: var(--card); }
.bordo :is(.metrica, .bd-num, .bd-cartao, .bd-dias) { background: var(--bg-2); color: var(--ink); }
.ficha .barra-xp, .ficha .barrinha { background: var(--bg-2); }
.hero::before { height: 2px; background: var(--ouro-vivo); }
.banner-foco { background: transparent; color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--ouro-vivo); box-shadow: none; border-radius: 10px; }
.banner-foco b { color: var(--ouro); }
/* rótulos sem caixa alta */
:is(.rotulo, .rotulo-claro, .pl-gabarito span, .datas span, .seletor-grupo h4, .pd-data span, .ceu-rot) { text-transform: none; letter-spacing: 0; }
/* Matérias: cartões com uma linha na cor da matéria, sem capa colorida nem ícone */
.nt-cartao { box-shadow: none; border-radius: var(--raio); }
.nt-capa { height: 3px; opacity: 1; background: var(--capa); }
.nt-icone:not(.grande) { display: none; }
.nt-corpo { padding-top: 16px; }
.nt-props dt { color: var(--muted); }
.rv-capa.rv-bom, .rv-capa.rv-alerta { background: var(--card); }

/* Modo visita (link compartilhado): sem botões de responder */
.faixa-visita { position: sticky; top: 0; z-index: 50; padding: 8px 16px; text-align: center; font-size: 14px; background: var(--ouro-soft, #3a3320); color: var(--ouro, #e8c46a); }
.faixa-visita.pisca { animation: pisca-visita .6s 2; }
@keyframes pisca-visita { 50% { filter: brightness(1.6); } }
body.visita :is([data-resp], .acoes button, .resp-alternativa) { pointer-events: none; opacity: .45; }

/* XP perdido no erro */
.resultado .xp-ganho.perde, .faisca-xp.perde { color: #ff8a7a; }
#btn-tema.ligada { animation: none; }

/* Macetes e Pegadinhas */
.cxa-fonte { font-size: 13px; color: var(--muted); }
.cxa-fonte span { color: var(--ink); }
.cxa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cxa-imp { box-shadow: 0 0 0 2px var(--ouro, #e3b341), var(--sombra); }
.cxa-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cxa-artigo .pl-citacao { font-size: 17px; }
#cxa-busca { max-width: 220px; }
.ligados { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ligados:empty { display: none; }
.ligados .chip { cursor: pointer; border: 0; font: inherit; font-size: 13px; }
.ligados-rot { font-size: 12px; color: var(--muted); width: 100%; }
.ligados .lig-conc { background: var(--accent-soft); color: var(--accent); }
.ligados .lig-conc.principal { font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.ligados-rot ~ .ligados-rot { margin-top: 4px; }
.proxima-btn.oculto { display: none; }

/* Barra de status (fogo, nível, música, tema, apresentação): mesma altura, mesma borda, ícones de linha como o menu */
.status .pilula { height: 34px; padding: 0 12px; gap: 6px; font-size: 13.5px; background: var(--card); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.status .pilula .ic { width: 17px; height: 17px; }
.status .pilula.fogo .ic { stroke: var(--fogo); }
.status .pilula.fogo.apagado { color: var(--muted); }
.status .pilula.fogo.apagado .ic { stroke: var(--muted); }
.status .pilula.nivel .ic { stroke: var(--ouro); }
.status .pilula.nivel .mini-barra { width: 44px; }
.st-ferr { display: inline-flex; align-items: center; height: 34px; padding: 0 2px; gap: 1px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); }
.status .st-bt { width: 31px; height: 28px; min-width: 0; padding: 0; border: 0; border-radius: 99px; display: grid; place-content: center; background: none; color: var(--muted); cursor: pointer; position: relative; box-shadow: none; transition: color .2s, background .2s; }
.status .st-bt .ic { width: 17px; height: 17px; }
.status .st-bt:hover { color: var(--ink); background: var(--bg-2); }
.status .st-bt.ligada { color: var(--ouro); background: color-mix(in srgb, var(--ouro) 15%, transparent); }
.status .st-bt.oculto, .status .st-vol.oculto { display: none; }
/* volume da música: botão com controle deslizante em balão */
.st-vol { position: relative; display: inline-flex; }
.vol-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 6; padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex; align-items: center; }
.vol-pop[hidden] { display: none; }
.vol-range { width: 110px; height: 18px; margin: 0; accent-color: var(--ouro); cursor: pointer; }
@media (max-width: 900px) { .vol-pop { bottom: auto; top: calc(100% + 8px); } }
@media (min-width: 901px) and (max-width: 1120px) { .vol-pop { bottom: auto; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); } }
.status .st-bt[data-nome]::after { content: attr(data-nome); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 8px; background: var(--ink); color: var(--bg); pointer-events: none; z-index: 5; }
.status .avatar-mini { width: 34px; height: 34px; flex: none; }
@media (max-width: 900px) { .status .st-bt[data-nome]::after { bottom: auto; top: calc(100% + 7px); } }
@media (max-width: 520px) {
  .status { gap: 5px; } .status .nv-t { display: none; } .status .pilula { padding: 0 9px; gap: 4px; }
  .status .st-bt { width: 28px; } .status .avatar-mini { display: none; }
}
/* menu lateral estreito (só ícones): os botões ficam em coluna */
@media (min-width: 901px) and (max-width: 1120px) {
  .status .nv-t { display: none; } .status .pilula { padding: 0 9px; }
  .st-ferr { flex-direction: column; height: auto; padding: 2px 0; border-radius: 18px; }
  .status .st-bt[data-nome]::after { bottom: auto; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }
}
/* PC (menu lateral largo): foguinho e nível numa linha; música/tema/apresentação e perfil na outra */
@media (min-width: 1121px) {
  .status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .status .pilula.nivel .mini-barra { flex: 1; width: auto; min-width: 24px; }
  .status .st-ferr { justify-self: start; }
  .status .avatar-mini { justify-self: end; }
}
@media (max-width: 420px) {
  .marca { font-size: 20px; }
  .status { gap: 4px; } .status .pilula { padding: 0 8px; } .status .st-bt { width: 26px; }
}
@media (min-width: 1121px) {
  .status { display: flex; flex-wrap: wrap; }
  .status .pilula.nivel { flex: 1 1 calc(100% - 80px); min-width: 0; }
  .status .st-ferr { margin-right: auto; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .status { justify-self: stretch; flex-direction: column; align-items: center; margin: auto -12px 0; padding: 0; gap: 6px; }
}
/* menu lateral: nunca quebrar em uma segunda coluna (o flex-wrap da barra do topo jogava o status para fora) */
@media (min-width: 901px) { .barra { flex-wrap: nowrap; } }
@media (min-width: 901px) and (max-width: 1120px) { .status .pilula { padding: 0 7px; gap: 4px; } .barra { overflow-x: hidden; } }
.status .pilula.nivel { overflow: hidden; }
@media (min-width: 1121px) { .status .pilula.nivel { flex: 1 1 0; } .status .pilula.nivel .mini-barra { flex: 1 1 auto; min-width: 16px; margin-left: 2px; } }
@media (min-width: 901px) { .barra { scrollbar-width: none; } .barra::-webkit-scrollbar { display: none; } }
/* progresso do nível = linha fina na base da pílula (cabe em qualquer tamanho) */
.status .pilula.nivel { position: relative; }
.status .pilula.nivel .mini-barra, .status .pilula.nivel .mini-barra[class] { display: block !important; position: absolute; left: 11px; right: 11px; bottom: 4px; width: auto; min-width: 0; height: 2.5px; margin: 0; flex: none; }
/* cometinhas (cometa() no app.js): só existem enquanto passam */
.c-cometa { fill: none; stroke: #fff; stroke-linecap: round; pointer-events: none; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(190, 180, 255, .8)); }
.c-cadentes { pointer-events: none; }
.c-cometa path { fill: none; stroke-linecap: round; }
.c-cometa circle { fill: #fff; }
.c-cometa { stroke: none; }
/* sistema separado por partes: fatias com o nome de cada parte; os anéis param de girar */
.sis-partes .orbita { animation: none !important; transform: none !important; }
.sis-fatias line { stroke: #bdb4ff; stroke-opacity: .2; stroke-width: 1; }
.sis-fatias text { fill: #e9e4ff; font-size: 15px; font-weight: 600; paint-order: stroke; stroke: #0d0b1f; stroke-width: 4px; }
.sis-fatias text.fora { fill: #9a96b8; font-style: italic; }
.sis-partes-bt.ligado { color: var(--ouro); border-color: color-mix(in srgb, var(--ouro) 50%, transparent); }
/* painel do sistema: seletor de visão, contagem, ação principal e um par de botões iguais */
.sis-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin-top: 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.sis-modo button { min-width: 0; height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: #b8b2dc; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: none; }
.sis-modo button small { font-weight: 600; opacity: .7; margin-left: 2px; }
.sis-modo button:hover { color: #fff; }
.sis-modo button.on { background: color-mix(in srgb, var(--ouro) 18%, transparent); color: var(--ouro); }
.sis-acoes { display: grid; gap: 8px; margin-top: 12px; }
.sis-acoes > .principal { width: 100%; }
.sis-ok { text-align: center; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--ok, #4cc38a) 14%, transparent); color: var(--ok, #4cc38a); font-weight: 700; }
.sis-sec { display: flex; flex-wrap: wrap; gap: 8px; }
.sis-sec > :is(a, button) { flex: 1 1 auto; }
.sis-sec > :is(a, button) { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 0; padding: 0 10px; margin: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #e9e4ff; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: none; cursor: pointer; }
.sis-sec > :is(a, button):hover { background: rgba(255, 255, 255, .11); }
.sis-dica { margin: 10px 0 0; font-size: 12.5px; color: #9f98c9; }

/* "★ Edital" como torcida: cada constelação sai de onde estava (--fx/--fy) e vai para a formação nova, uma depois da outra */
.c-galaxia { transform: translate(var(--fx, 0px), var(--fy, 0px)); transition: transform 1.9s cubic-bezier(.55, 0, .25, 1), opacity 1.4s ease, filter 1.4s ease; transition-delay: calc(var(--k, 0) * 70ms); }
.c-galaxia.distante { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(.55); opacity: .4; filter: blur(.8px) saturate(.4); pointer-events: none; }
svg.parado .c-galaxia { transition: none !important; }
svg.reorganizando .c-pontes { opacity: 0; transition: none; }
.c-pontes { transition: opacity 1s ease .2s; }
/* redesenho sem sair da tela: sem a entrada das estrelas e das linhas */
.ceu.sem-intro :is(.c-estrela, .c-linhas line) { animation: none; }
.ceu.sem-intro .c-linhas line { stroke-dashoffset: 0; }

/* "O que faço hoje": blocos numerados do dia na tela Hoje */
.of { margin: 0 0 30px; }
.of-mentor { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.of-mentor b { color: var(--ink); }
.of-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.of-bloco { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--g, var(--ouro-vivo)); border-radius: var(--raio); box-shadow: var(--sombra); }
.of-bloco.feito { opacity: .72; border-left-color: var(--ok); }
.of-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: 'Young Serif', serif; font-size: 17px; color: var(--g, var(--ouro-vivo)); border: 1.5px solid currentColor; }
.of-bloco.feito .of-num { color: var(--ok); background: var(--ok-soft); }
.of-corpo { min-width: 0; }
.of-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.of-topo h3 { margin: 0; font-size: 17px; }
.of-min { font-weight: 700; font-size: 14px; color: var(--muted); white-space: nowrap; }
.of-barra { height: 4px; border-radius: 3px; background: var(--line); margin: 8px 0 10px; overflow: hidden; }
.of-barra div { height: 100%; border-radius: 3px; background: var(--ouro-vivo); }
.of-porque { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.of-topico { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); }
.of-topico small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.of-topico b { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.of-topico p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.of-erros { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--no-soft); color: var(--no); }
.of-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.of-acoes a:not(.peq) { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.of-acoes a.peq { text-decoration: none; border: 1.5px solid var(--line); color: var(--ink); font-weight: 600; background: var(--card); }
.of-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.of-semana span { padding: 8px 10px; border-radius: 12px; background: var(--bg-2); font-size: 12.5px; color: var(--muted); }
.of-semana b { display: block; font-size: 17px; color: var(--ink); }
.of-passos { margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }
@media (max-width: 600px) {
  .of-bloco { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .of-num { width: 28px; height: 28px; font-size: 14px; }
  .of-acoes > * { flex: 1 1 auto; text-align: center; }
}

/* ---- Foco no cargo, dissertativa semanal e colar questão ---- */
.of-cab-dir { display: flex; align-items: center; gap: 12px; }
.of-enun { white-space: pre-line; }
.of-crit { color: var(--muted); }
.of-diss { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.of-diss .peq { margin-left: 6px; }
.tr-top.fora-foco { opacity: .55; }
.tr-fora { font-style: normal; text-transform: none; letter-spacing: 0; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--bg-2); color: var(--muted); }
dialog.colar { max-width: 720px; width: calc(100vw - 32px); max-height: 92vh; overflow-y: auto; }
dialog textarea { font: inherit; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical; }
.cq-previa { margin: 12px 0; max-height: 220px; overflow-y: auto; border: 1px dashed var(--line); border-radius: 14px; padding: 4px 12px; }
.cq-previa .cartao { box-shadow: none; border: 0; padding: 8px 0; background: none; }
.cq-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.cq-rot { font-size: 15px; font-weight: 600; min-width: 64px; }
.cq-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-seg button { min-width: 0; padding: 6px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); cursor: pointer; box-shadow: none; }
.cq-seg button.on { background: var(--ouro-soft); border-color: var(--ouro-vivo); color: var(--ink); }
.cq-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cq-grade .cq-larga { grid-column: 1 / -1; }
.cq-grade input, .cq-grade select { min-width: 0; width: 100%; box-sizing: border-box; }
.cq-erro { margin: 0; min-height: 0; font-size: 13.5px; color: var(--no); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sombra-forte); font-size: 14.5px; }
@media (max-width: 600px) {
  .of-cab-dir { gap: 8px; }
  .cq-grade { grid-template-columns: 1fr; }
  dialog.colar { padding: 18px 16px; }
  .toast { bottom: 84px; }
}
dialog.colar .acoes { position: sticky; bottom: -24px; margin: 8px -4px -8px; padding: 12px 4px 8px; background: var(--card); }

/* Quadro do dia (topo do Hoje): o roteiro em uma tabela curta, com a linha "agora" destacada */
.qd { margin: 0 0 26px; padding: 18px 20px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); box-shadow: var(--sombra); }
.qd-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.qd-cab h2 { margin: 0; }
.qd-cab span { font-size: 13px; color: var(--muted); font-weight: 600; }
.qd-lista { list-style: none; margin: 0; padding: 0; }
.qd-lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px 64px auto; align-items: center; gap: 12px; padding: 10px 10px; border-top: 1px solid var(--line); border-radius: 10px; }
.qd-lista li:first-child { border-top: 0; }
.qd-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 1.5px solid var(--line); color: var(--muted); }
.qd-oque { display: grid; gap: 1px; color: var(--ink); text-decoration: none; min-width: 0; }
.qd-oque b { font-size: 15px; }
.qd-oque small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-min { font-size: 14px; font-weight: 600; color: var(--muted); text-align: right; }
.qd-estado { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; }
.qd-acao { display: flex; gap: 6px; justify-content: flex-end; }
.qd-acao a.peq { text-decoration: none; }
.qd-lista li.agora { background: var(--ouro-soft); border-top-color: transparent; }
.qd-lista li.agora + li { border-top-color: transparent; }
.qd-lista li.agora .qd-num { background: var(--ouro-vivo); border-color: var(--ouro-vivo); color: #1b1408; }
.qd-lista li.agora .qd-estado { color: var(--ouro); }
.qd-lista li.feito { opacity: .55; }
.qd-lista li.feito .qd-num { border-color: var(--ok); color: var(--ok); }
.qd-lista li.feito .qd-oque b { text-decoration: line-through; }
.qd-dica { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) {
  .qd { padding: 14px 12px 12px; }
  .qd-lista li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 6px; }
  .qd-estado { display: none; }
  .qd-acao { grid-column: 2 / -1; justify-content: flex-start; }
  .qd-acao:empty { display: none; }
}
/* Quadro do dia: coluna "O que você já fez" */
.qd-grade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 22px; align-items: start; }
.qd-feito { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); }
.qd-feito h3 { margin: 0 0 10px; font-size: 15px; }
.qd-hoje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qd-hoje span { display: grid; font-size: 12px; color: var(--muted); line-height: 1.3; }
.qd-hoje b { font-size: 20px; color: var(--ink); }
.qd-fam { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.qd-barras { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 74px; margin-top: 14px; }
.qd-barras div { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; text-align: center; }
.qd-barras i { display: block; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--ouro-vivo) 45%, transparent); }
.qd-barras div.hoje i { background: var(--ouro-vivo); }
.qd-barras small { font-size: 11px; color: var(--muted); font-weight: 600; }
.qd-barras div.hoje small { color: var(--ink); }
.qd-sem { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1000px) { .qd-grade { grid-template-columns: minmax(0, 1fr); } }

/* Questões do banco (#/questoes): uma por vez, com gabarito e comentário do professor */
.qs-palco { max-width: 860px; margin-inline: auto; }
.qs-fonte { margin: 6px 0 14px; font-size: 12px; color: var(--muted); }
.qs-enun { display: grid; gap: 12px; font-size: 16.5px; line-height: 1.65; overflow-wrap: anywhere; }
.qs-enun p { margin: 0; }
.qs-palco .cx-alts { margin-top: 20px; }
.qs-palco .cx-alts li { overflow-wrap: anywhere; }
.qs-palco .cx-alts li.escolhida { border-color: var(--ouro-vivo); background: var(--ouro-soft); }
.qs-palco .cx-alts li.escolhida > span { color: var(--ouro); }
.qs-palco .cx-alts li.cx-certa > span { color: var(--ok); }
.qs-palco .cx-alts li.escolhida-errada > span { color: var(--no); }
.qs-ce { grid-template-columns: 1fr 1fr; }
.qs-ce li { font-weight: 700; font-size: 17px; align-items: center; }
.qs-dica { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.qs-palco .acoes button.principal { background: var(--ouro-vivo); border-color: var(--ouro-vivo); color: #1b1408; }
.qs-palco .acoes button.principal:disabled { opacity: .4; cursor: not-allowed; }
.qs-palco .acoes button.principal kbd { color: #1b1408; }
.qs-gab { margin-left: auto; font-size: 14px; font-weight: 700; }
.qs-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 9px 14px; border-radius: 12px; background: var(--ouro-soft); color: var(--ink); font-size: 14px; }
.qs-card span { flex: 1; min-width: 0; }
.qs-coment { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.qs-coment summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 4px 0; }
.qs-coment-corpo { display: grid; gap: 10px; padding: 8px 0 6px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.qs-coment-corpo p { margin: 0; }
.qs-fim .resumo-fim { margin-bottom: 14px; }
.qs-reg { margin: 0 0 14px; }
.qs-erradas { text-align: left; max-width: 720px; margin: 18px auto 0; }
.qs-erradas h3 { margin: 0 0 8px; }
.qs-erro { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin-top: 8px; }
.qs-erro summary { cursor: pointer; display: grid; gap: 2px; }
.qs-erro-t { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.qs-erro summary small { color: var(--muted); font-size: 12.5px; }
.qs-fim .acoes button small { opacity: .7; font-weight: 500; }
.of-banco { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.of-topico .of-banco b { display: inline; margin: 0; color: var(--ouro); }
a.peq.discreto, .peq.discreto { opacity: .7; }
@media (max-width: 600px) {
  .qs-palco { padding: 20px 16px; min-height: 0; }
  .qs-enun { font-size: 15.5px; }
  .qs-ce { grid-template-columns: 1fr; }
  .qs-palco .acoes { margin-top: 18px; }
  .qs-palco .acoes button { width: 100%; }
  .qs-fim .acoes button { width: 100%; }
}
/* Dissertativa: método e esqueleto recolhíveis no bloco */
.of-metodo { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.of-metodo summary { cursor: pointer; padding: 9px 12px; font-weight: 700; font-size: 14px; color: var(--accent); }
.of-metodo-txt { padding: 0 14px 12px; font-size: 14px; overflow-x: auto; }

/* ---------- Conceitos: links, prévia, painel e índice (docs/conceitos.md) ---------- */
.conceito { text-decoration: underline dotted; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; border-radius: 3px; }
.conceito:hover, .conceito:focus-visible { background: var(--accent-soft); text-decoration-style: solid; }

/* a prévia e o painel moram no <html> (fora do zoom do body) ou dentro de um <dialog> */
.conc-previa, .conc-painel { font: 15px/1.5 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
.conc-previa { position: fixed; z-index: 1000; width: min(330px, calc(100vw - 16px)); padding: 14px 16px; border-radius: var(--raio); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sombra-forte); }
.conc-previa-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.conc-previa-topo b { font-size: 19px; line-height: 1.2; font-weight: 400; }
.conc-previa .conc-resumo { margin: 0 0 8px; font-size: 14.5px; }
.conc-resumo.apagado { color: var(--muted); font-style: italic; }
.conc-contagem { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.conc-fora-n { color: var(--muted); font-weight: 500; opacity: .85; }

.conc-painel { position: fixed; z-index: 900; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0, 0, 0, .25); animation: conc-entra .18s ease-out; }
@keyframes conc-entra { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .conc-painel { animation: none; } }
.conc-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--card); }
.conc-topo h2 { flex: 1; margin: 0; font-size: 22px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.conc-bt { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font-size: 17px; flex: none; }
.conc-bt[hidden] { display: none; }
.conc-corpo { flex: 1; overflow-y: auto; padding: 16px 18px 40px; padding-bottom: max(40px, env(safe-area-inset-bottom)); display: grid; gap: 18px; align-content: start; }
.conc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.conc-rel { cursor: pointer; border: 0; font: inherit; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 3px 11px; }
.conc-resumo.grande { margin: 0; font-size: 17px; line-height: 1.6; }
.conc-sec h3 { margin: 0 0 8px; font-size: 17px; }
.conc-sec h3 small { font-family: "Instrument Sans", system-ui, sans-serif; font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.conc-sem-nota { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.conc-sem-nota p { margin: 0 0 10px; }
.conc-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.conc-grupo summary { cursor: pointer; list-style: revert; }
.conc-grupo summary h3 { display: inline; }
.conc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.conc-mais { font-size: 13px; color: var(--muted); padding: 4px 2px; }
.conc-card { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.conc-linha { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent; padding: 9px 12px; font-weight: 500; font-size: 14.5px; }
.conc-linha:hover { background: var(--accent-soft); }
.conc-frente { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conc-st { flex: none; font-size: 12px; white-space: nowrap; }
.conc-st.st-hoje { background: var(--ouro-soft); color: var(--ouro); }
.conc-st.st-novo { background: var(--accent-soft); color: var(--accent); }
.conc-st.st-dia { background: var(--ok-soft); color: var(--ok); }
.conc-st.st-fora { background: var(--bg-2); color: var(--muted); }
.conc-exp { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.conc-exp[hidden] { display: none; }
.conc-exp .cartao { font-size: 15px; }
.conc-painel .cx-frente { font-size: 16px; }

.cc-grupo { margin: 26px 0; }
.cc-grupo h2 small { font-family: "Instrument Sans", system-ui, sans-serif; font-size: 14px; color: var(--muted); font-weight: 600; }
.cc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.cc-item { display: grid; gap: 2px; text-align: left; padding: 11px 14px; border-radius: 12px; }
.cc-item b { font-weight: 650; }
.cc-meta { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.cc-sem { font-style: normal; color: var(--warn); }
.cc-pedida { font-style: normal; color: var(--ouro); font-weight: 700; }
#cc-busca { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; min-width: min(320px, 100%); }
@media (max-width: 700px) {
  .conc-painel { width: 100vw; border-left: 0; }
  .conc-previa { width: min(330px, calc(100vw - 16px)); }
}
.conc-previa { font-size: 16px; width: min(360px, calc(100vw - 16px)); }
.conc-previa .conc-resumo { font-size: 15.5px; }
.conc-contagem { font-size: 14px; }

/* Árvore virtual por assunto do edital (Matérias): matéria › tópico › conceito */
.of-conceitos { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.of-conceitos .link { background: none; border: 0; padding: 0; color: var(--ouro-vivo); font: inherit; cursor: pointer; text-decoration: underline dotted; }
.av { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card, transparent); }
.av-cab, .av-linha { display: grid; grid-template-columns: minmax(0, 1fr) repeat(6, 62px) 96px; align-items: center; gap: 4px; padding: 7px 12px; }
.av-cab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.av-cab .av-id { text-align: left; text-transform: none; letter-spacing: 0; }
.av-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.av-nome { min-width: 0; overflow-wrap: anywhere; }
.av-n0 .av-nome { font-weight: 700; font-size: 16px; }
.av-n1 { padding-left: 34px; } .av-n1 .av-nome { font-weight: 600; }
.av-n2 { padding-left: 62px; } .av-n2 .av-nome { font-weight: 600; }
.av-n3 { padding-left: 90px; font-size: 14px; }
.av-n4 { padding-left: 118px; font-size: 14px; }
.av-n0 { border-top: 1px solid var(--line); background: rgba(128,124,160,.06); }
.av-bloco:first-of-type .av-n0 { border-top: 0; }
.av-linha:not(.av-n2) { cursor: pointer; }
.av-linha:hover { background: rgba(128,124,160,.1); }
.av-linha.pouco .av-nome { color: var(--no); }
.av-seta { width: 20px; height: 20px; flex: none; display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; transition: transform .15s; }
.av-seta.vazio { cursor: default; }
.aberto > .av-linha .av-seta { transform: rotate(90deg); }
.av-icone { flex: none; }
.av-nome.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.av-nome.link:hover { color: var(--ouro-vivo); text-decoration: underline; }
.av-alerta { flex: none; font-size: 11px; padding: 0 7px; }
.av-c { text-align: center; font-size: 14px; }
.av-c b.zero { color: var(--muted); font-weight: 400; }
.av-c b.hoje { color: var(--ouro-vivo); }
.av-acao { text-align: right; }
.av-filhos { display: none; }
.aberto > .av-filhos { display: block; }
@media (max-width: 760px) {
  .ferramentas .abas-peq { flex-wrap: wrap; max-width: 100%; }
  .av-cab { display: none; }
  .av-linha { grid-template-columns: repeat(3, 1fr); row-gap: 6px; padding: 9px 12px; }
  .av-linha .av-id { grid-column: 1 / -1; }
  .av-n1 { padding-left: 22px; } .av-n2 { padding-left: 34px; } .av-n3 { padding-left: 46px; } .av-n4 { padding-left: 58px; }
  .av-c::before { content: attr(data-r) " "; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .av-acao { grid-column: 1 / -1; text-align: left; } .av-acao::before { display: none; }
}

/* ---------- Ficha da matéria (16/10): como estou, onde estou fraco, o que fazer ---------- */
.mat-ficha { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--capa, var(--accent)); border-radius: var(--raio); padding: 20px 24px; margin: 8px 0 26px; box-shadow: var(--sombra); display: grid; gap: 18px; }
.mat-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mat-topo h2 { margin: 0; font-size: 28px; flex: 1; min-width: 180px; }
.mat-icone { font-size: 30px; line-height: 1; }
.mat-topo .modos { width: auto; min-width: 300px; }
.mat-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mat-numeros > div { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--bg-2, color-mix(in srgb, var(--line) 35%, transparent)); }
.mat-numeros span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mat-numeros b { font-size: 24px; line-height: 1.1; }
.mat-numeros .nt-tag { justify-self: start; font-size: 18px; font-weight: 700; padding: 2px 10px; }
.mat-numeros small { font-size: 12px; color: var(--muted); }
.mat-fracos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mat-fracos > span { font-size: 13px; color: var(--muted); margin-right: 4px; }
.mat-fracos .chip { cursor: pointer; border: 0; font: inherit; font-size: 13px; background: var(--no-soft, #fde8e8); color: var(--no, #c0392b); }
.av-modo { margin-left: 8px; padding: 4px 12px; font-size: 12px; min-height: 28px; }
.av-seta { width: 28px !important; height: 28px !important; border-radius: 6px; }
.av-alerta, .nt-tag { white-space: nowrap; }
.conc-topo h2:focus { outline: none; } /* o foco programático no título não precisa de anel; o Tab segue visível nos botões */
.mat-link { display: inline-flex; align-items: center; gap: 6px; }
.mat-link .ic { width: 16px; height: 16px; }
@media (max-width: 700px) { .mat-numeros { grid-template-columns: repeat(2, 1fr); } .mat-topo .modos { min-width: 0; width: 100%; } }

/* Painel do conceito expandido (16/10): ocupa a janela; o texto fica numa coluna legível */
.conc-painel.expandido { width: 100vw; border-left: 0; }
.conc-painel.expandido .conc-topo { padding-left: max(16px, calc((100vw - 900px) / 2)); padding-right: max(16px, calc((100vw - 900px) / 2)); }
.conc-painel.expandido .conc-topo h2 { flex: 1; }
.conc-painel.expandido .conc-corpo { padding-left: max(18px, calc((100vw - 900px) / 2)); padding-right: max(18px, calc((100vw - 900px) / 2)); }

/* ---------- Página do conceito (16/10): o conceito em primeiro plano ---------- */
.conc-cabeca { display: grid; gap: 10px; padding-bottom: 4px; }
.conc-def { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.conc-onde { gap: 4px 0; font-size: 12.5px; color: var(--muted); }
.conc-onde span + span::before { content: "›"; margin: 0 7px; opacity: .6; }
.conc-sem-nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 14px; }
.conc-sem-nota p { margin: 0; }
.conc-pratica { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); }
.conc-situacao { flex: 1; min-width: 160px; font-size: 14px; color: var(--ink); }
.conc-dobra { border-top: 1px solid var(--line); padding-top: 4px; }
.conc-dobra > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; font-size: 15px; color: var(--ink); }
.conc-dobra > summary::-webkit-details-marker { display: none; }
.conc-dobra > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.conc-dobra[open] > summary::before { transform: rotate(45deg); }
.conc-dobra > summary small { color: var(--muted); font-weight: 600; }
.conc-dobra[open] { display: grid; gap: 10px; padding-bottom: 8px; }
.conc-dobra h4 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.conc-dobra h4 small { margin-left: 4px; }
.conc-veja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.conc-veja > span { font-size: 13px; color: var(--muted); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .conc-dobra > summary::before { transition: none; } }

/* Ícones SVG das matérias (16/10): na cor da matéria (--capa) */
.ic-mat { color: var(--capa, var(--accent)); }
.av-icone { display: inline-grid; place-items: center; }
.av-icone .ic-mat { width: 19px; height: 19px; }
.mat-icone .ic-mat { width: 30px; height: 30px; stroke-width: 1.4; }
.disc-icone .ic-mat { width: 24px; height: 24px; color: var(--accent); }
.disc-icone.peq .ic-mat { width: 18px; height: 18px; }

/* Painel do conceito expandido no PC: zoom de 150%, como a tela de estudo; a coluna de leitura é centralizada por largura máxima */
.conc-painel.expandido .conc-corpo { justify-items: center; }
.conc-painel.expandido .conc-corpo > * { width: 100%; max-width: 900px; }
@media (min-width: 1000px) {
  .conc-painel.expandido > .conc-topo, .conc-painel.expandido > .conc-corpo { zoom: 1.5; }
  .conc-painel.expandido .conc-corpo, .conc-painel.expandido .conc-topo { padding-left: 24px; padding-right: 24px; }
}

/* Letras maiores no PC (16/10): o conteúdo ganha 12% (a Constelação fica de fora, porque o mouse calcula posições,
   e o estudo já tem os 150% dele); o menu lateral fica um pouco mais largo, com letra e ícones maiores */
@media (min-width: 1200px) {
  body:not(.estudando):not(.tela-ceu) > main { zoom: calc(1.12 * var(--letra, 1)); }
  :root { --lateral: 250px; }
  .nav-grupo a, .nav-grupo a:not(.ativo) { font-size: 16px; padding: 10px 13px; }
  .barra .nav-grupo .ic { width: 22px; height: 22px; }
  .marca { font-size: 30px; }
}

/* ============ Céu no toque (16/10): pinçar, card recolhido, arrastar o card para responder ============ */
#apresentacao.jornada, #apresentacao svg, .ceu.modo-sistema { touch-action: none; }
#apresentacao svg, .sis-svg { user-select: none; -webkit-user-select: none; }
.ceu-card { touch-action: pan-y; } /* rola na vertical; o lado é o arraste de responder, dois dedos são do céu */
.ceu-card.solto { transition: transform .22s ease, opacity .22s ease; }
.recolhido > .ceu-card { display: none; }
.card-voltar { display: none; position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); z-index: 7; height: 44px; padding: 0 20px; border-radius: 99px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.recolhido:has(.ceu-card) + .card-voltar { display: block; animation: aparecer .3s ease; }
#apresentacao .card-voltar { bottom: 90px; }
.ceu-card .carimbo { position: absolute; top: 18px; z-index: 5; padding: 4px 12px; border: 3px solid; border-radius: 10px; font: 700 22px "Young Serif", Georgia, serif; letter-spacing: .04em; opacity: 0; pointer-events: none; transform: rotate(-12deg); background: color-mix(in srgb, var(--card) 70%, transparent); }
.ceu-card .carimbo.dir { left: 16px; color: var(--ok); }
.ceu-card .carimbo.esq { right: 16px; color: var(--no); transform: rotate(12deg); }

/* ============ Céu no celular em pé (16/10): o céu ocupa a tela; Cor e filtros recolhidos num botão ============ */
.ceu-vis-abrir { display: none; }
@media (max-width: 760px) {
  .ceu-topo { top: 62px; }
  .ceu .mm-controles { top: 104px; }
  .ceu-vis-abrir { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; background: rgba(10, 8, 26, .78); backdrop-filter: blur(10px); margin: 0; }
  .ceu-baixo:not(.aberto) .ceu-vis { display: none; }
  .ceu-baixo .c-legenda { gap: 4px 10px; font-size: 11px; padding: 5px 10px; }
  .ceu-baixo .c-legenda > span:last-child:not(:has(i)) { display: none; } /* a dica "aproxime ou clique…" */
}

/* ---------- Painel (o "Procurar" do Anki) ---------- */
.pn-abas { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); margin-bottom: 14px; }
.pn-abas button { border: 0; background: transparent; padding: 7px 16px; border-radius: 9px; color: var(--muted); }
.pn-abas button.ativo { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pn-abas .num { margin-left: 4px; }
.pn-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pn-filtros input, .pn-filtros select { font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.pn-filtros input { flex: 1 1 260px; min-width: 0; }
.pn-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pn-rapidos button.ativo { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pn-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--raio); background: var(--card); margin-bottom: 18px; }
.pn-resumo > div { display: grid; line-height: 1.2; }
.pn-resumo b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pn-resumo span { font-size: 12.5px; color: var(--muted); }
.pn-resumo button { margin-left: auto; }
.pn-dia { margin-bottom: 18px; }
.pn-dia h3 { margin: 0 0 6px; text-transform: capitalize; }
.pn-dia h3 small { font-family: "Instrument Sans", system-ui, sans-serif; font-size: 13px; color: var(--muted); text-transform: none; margin-left: 6px; }
.pn-tab td { vertical-align: top; }
.pn-tab td.pn-ck, .pn-tab th.pn-ck { width: 28px; padding-right: 0; }
.pn-tab input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 3px 0 0; }
.pn-tab td.num { white-space: nowrap; }
.pn-txt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn-txt small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.pn-tab td.pn-mk { width: 24px; text-align: center; }
.pn-tab tr.pn-aberta { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pn-tab tr.pn-fora { opacity: .55; }
.pn-todos th { white-space: nowrap; cursor: pointer; user-select: none; }
.pn-todos th.ordenado { color: var(--ink); }
.pn-rolagem { overflow-x: auto; }
.pn-linha-acoes { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pn-mais { text-align: center; margin: 14px 0; }
.pn-nota { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.pn-nota.n1 { background: var(--no-soft); color: var(--no); }
.pn-nota.ns { background: var(--bg-2); color: var(--no); }
.pn-nota.n2 { background: var(--warn-soft); color: var(--warn); }
.pn-nota.n3 { background: var(--ok-soft); color: var(--ok); }
.pn-nota.n4 { background: var(--adj-soft); color: var(--adj); }
.pn-novo { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 5px; }
.pn-est { font-size: 12.5px; font-weight: 600; }
.pn-est.novo { color: var(--adj); } .pn-est.aprendendo, .pn-est.reaprendendo { color: var(--warn); } .pn-est.revisao { color: var(--ok); }
.pn-venc { color: var(--no); font-weight: 650; }
.pn-selecao { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sombra-forte); white-space: nowrap; }
.pn-selecao > span { margin-right: 6px; font-size: 14px; }
.pn-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 45; overflow-y: auto; padding: 16px 22px 40px;
  background: var(--card); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0, 0, 0, .18); animation: pnEntra .22s ease-out; }
@keyframes pnEntra { from { transform: translateX(30px); opacity: 0; } }
body.pn-com-gaveta .pn-selecao { left: calc(50% - min(280px, 50%)); }
.pn-g-topo { display: flex; align-items: center; gap: 8px; position: sticky; top: -16px; background: var(--card); padding: 6px 0 10px; margin-bottom: 4px; z-index: 1; }
.pn-g-topo .ceu-acao:disabled { opacity: .35; cursor: default; }
#pn-g-marcar { filter: grayscale(1); opacity: .55; } #pn-g-marcar.marcado { filter: none; opacity: 1; border-color: var(--no); }
.pn-gaveta .meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.pn-g-dados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.pn-g-dados > div { background: var(--card); padding: 7px 10px; display: grid; line-height: 1.25; }
.pn-g-dados span { font-size: 11.5px; color: var(--muted); }
.pn-g-dados b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pn-g-acoes { display: flex; gap: 8px; margin-bottom: 14px; }
.pn-g-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.pn-g-hist-t { margin: 22px 0 6px; } .pn-g-hist-t small { font-size: 13px; color: var(--muted); }
.pn-hist { list-style: none; padding: 0; margin: 0; }
.pn-hist li { display: grid; grid-template-columns: 118px 74px 56px 56px 1fr; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pn-fonte { font-size: 11.5px; color: var(--muted); text-align: right; }
@media (max-width: 760px) {
  .pn-opc { display: none; }
  .pn-resumo { gap: 8px 18px; } .pn-resumo button { margin-left: 0; width: 100%; }
  .pn-g-dados { grid-template-columns: repeat(2, 1fr); }
  .pn-gaveta { padding: 12px 14px 90px; }
  .pn-hist li { grid-template-columns: 1fr auto auto; } .pn-hist li > :nth-child(4), .pn-hist li > :nth-child(5) { display: none; }
  .pn-selecao { left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: none; overflow-x: auto; gap: 6px; padding: 6px 8px 6px 12px; }
  .pn-selecao button { padding: 6px 10px; font-size: 14px; }
  body.pn-com-gaveta .pn-selecao { left: 8px; }
}
.pn-hist .pn-nota { justify-self: start; }
#pn-corpo { padding-bottom: 70px; }
/* música ligada, mas o navegador ainda segura o som até o primeiro toque */
.st-bt.travada { animation: somTravado 1.6s ease-in-out infinite; }
@keyframes somTravado { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ouro, #e8a500) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .st-bt.travada { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro, #e8a500) 45%, transparent); } }
.mk-nota { margin-top: 4px; font-style: italic; font-weight: 400; color: var(--ink); }

/* ---------- Céu da prova (19/10): a trilha nova ---------- */
.ceu-astro { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; position: relative; }
.ceu-astro.f-nebulosa { background: radial-gradient(circle, rgba(140, 130, 190, .55), rgba(140, 130, 190, 0) 70%); width: 18px; height: 18px; }
.ceu-astro.f-protoestrela { background: radial-gradient(circle, #ffb07a 0 30%, rgba(255, 140, 80, .25) 60%, transparent 72%); }
.ceu-astro.f-acesa { background: radial-gradient(circle, #fff3c4 0 22%, #f2b632 45%, rgba(242, 182, 50, 0) 72%); }
.ceu-astro.f-firme { background: radial-gradient(circle, #fff 0 25%, #a9c4ff 50%, rgba(120, 160, 255, 0) 74%); box-shadow: 0 0 10px 2px rgba(150, 185, 255, .55); }
.ceu-astro.f-apagando { background: radial-gradient(circle, #c99a4a 0 22%, rgba(201, 154, 74, .2) 55%, transparent 70%); outline: 1.5px dashed rgba(201, 154, 74, .7); outline-offset: 1px; }
.ceu-hero { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 22px; align-items: center; padding: 22px 24px; border-radius: 22px;
  background: linear-gradient(135deg, #17123a, #0d0b1f); color: #ece8ff; margin: 6px 0 22px; box-shadow: var(--sombra); }
.ceu-hero-num b { display: block; font-size: 52px; line-height: 1; font-weight: 800; }
.ceu-hero-num > span { font-size: 15px; opacity: .85; }
.ceu-hero-num small { display: block; margin-top: 8px; font-size: 12px; opacity: .6; }
.ceu-barra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); margin-top: 12px; overflow: hidden; }
.ceu-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2b632, #fff3c4, #a9c4ff); }
.ceu-fases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ceu-fase { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.ceu-fase b { font-size: 22px; }
.ceu-fase span:not(.ceu-astro) { font-weight: 700; font-size: 13px; }
.ceu-fase small { font-size: 11px; opacity: .65; line-height: 1.2; }
.ceu-rota { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 26px; }
.ceu-rota-item { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--g); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.ceu-rota-cab { display: flex; gap: 10px; align-items: center; }
.ceu-rota-cab small { color: var(--muted); font-size: 12px; font-weight: 600; }
.ceu-rota-cab h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.25; }
.ceu-porque { margin: 0; font-size: 14px; color: var(--muted); }
.portas { display: flex; gap: 6px; flex-wrap: wrap; }
.porta { display: grid; gap: 1px; text-align: left; padding: 7px 12px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.porta b { font-size: 14px; }
.porta small { font-size: 11.5px; color: var(--muted); }
.porta.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.porta.principal small { color: rgba(255, 255, 255, .85); }
.porta:hover { border-color: var(--accent); }
.porta-vazia { font-size: 12px; color: var(--muted); }
.portas-mini .porta { padding: 4px 10px; }
.portas-mini .porta b { font-size: 12.5px; }
.ceu-grupos { display: grid; gap: 14px; }
.ceu-grupo { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.ceu-grupo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--g); padding-bottom: 6px; margin-bottom: 4px; }
.ceu-grupo-cab h3 { margin: 0; font-size: 15px; }
.ceu-grupo-cab span { font-size: 12px; color: var(--muted); }
.ceu-grupo.completa .ceu-grupo-cab span { color: var(--accent); font-weight: 700; }
.ceu-linha { display: grid; grid-template-columns: 22px 1fr 80px auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.ceu-linha:last-child { border-bottom: 0; }
.ceu-linha-nome b { display: block; font-size: 14px; font-weight: 600; }
.ceu-linha-nome small { font-size: 12px; color: var(--muted); }
.ceu-venc { color: #c9781e; font-weight: 600; }
.ceu-brilho { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ceu-brilho i { display: block; height: 100%; background: linear-gradient(90deg, #f2b632, #a9c4ff); }
.ceu-linha.f-nebulosa .ceu-linha-nome b { color: var(--muted); }
.ceu-fora { margin-top: 18px; }
.ceu-fora summary { cursor: pointer; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.ceu-lista-res { display: grid; gap: 6px; margin: 10px 0; }
.ceu-lista-res button { text-align: left; }
@media (max-width: 760px) {
  .ceu-hero { grid-template-columns: 1fr; padding: 18px; }
  .ceu-fases { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .ceu-fase { padding: 8px 2px; }
  .ceu-fase small { display: none; }
  .ceu-fase span:not(.ceu-astro) { font-size: 10px; overflow-wrap: anywhere; line-height: 1.15; }
  .ceu-fase b { font-size: 19px; }
  .ceu-linha { grid-template-columns: 22px 1fr; }
  .ceu-brilho { display: none; }
  .ceu-linha .portas-mini { grid-column: 2; }
}
.sis-fase { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; font-size: 13px; }
.sis-fase small { opacity: .7; }

/* Céu vivo (fase 2, 19/10): no modo de cor "Fase", cada estrela do edital mostra a fase; as linhas acendem com as estrelas */
.c-estrela.f-nebulosa .nucleo { opacity: .35; }
.c-estrela.f-nebulosa .halo { opacity: .22; animation: none; }
.c-estrela.f-nebulosa .raios { opacity: 0; }
.c-estrela.f-protoestrela .halo { opacity: .35; }
.c-estrela.f-protoestrela .raios { opacity: .2; }
.c-estrela.f-acesa .halo { opacity: .6; }
.c-estrela.f-firme .halo { opacity: .9; }
.c-estrela.f-firme .nucleo { filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 2px #fff); }
.c-estrela.f-firme .raios { opacity: .85; }
.c-estrela.f-apagando .nucleo { opacity: .75; }
.c-estrela.f-apagando .halo { animation: apagar 5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes apagar { 0%, 100% { opacity: .42; } 50% { opacity: .14; } }
.c-linhas line.tenue { stroke-opacity: .07; }
.c-linhas line.ligada { stroke-opacity: .45; }
.c-linhas line.firme { stroke: #d6e6ff; stroke-opacity: .9; stroke-width: 1.6; filter: drop-shadow(0 0 3px #a9c4ff); }
.c-grupos text.completa { fill: #d6e6ff; text-shadow: 0 0 10px rgba(169, 196, 255, .8); }
@media (prefers-reduced-motion: reduce) { .c-estrela.f-apagando .halo { animation: none; opacity: .3; } }

/* Informações do card (19/10): no Painel e depois da resposta */
.sobre-card { display: grid; gap: 0; margin: 4px 0 14px; font-size: 13.5px; }
.sobre-card > div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.sobre-card dt { color: var(--muted); font-weight: 600; }
.sobre-card dd { margin: 0; overflow-wrap: anywhere; }
.info-card { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); }
.info-card summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14px; color: var(--muted); }
.info-card[open] summary { color: var(--ink); }
.info-card .sobre-card { margin-top: 0; }
@media (max-width: 760px) { .sobre-card > div { grid-template-columns: 1fr; gap: 2px; } }
.sobre-card dd button.link { background: none; border: 0; padding: 0; box-shadow: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Céu da prova, fase 3 (19/10): critérios, novidades desde a última visita, linha do brilho e ignição */
.ceu-fase small { font-size: 10.5px; opacity: .7; line-height: 1.25; }
.ceu-linha-brilho { display: block; width: 100%; height: 46px; margin-top: 12px; }
.ceu-linha-brilho polyline { fill: none; stroke: #f2d27a; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ceu-var { display: block; margin-top: 2px; font-weight: 700; opacity: .85 !important; }
.ceu-novidades { margin: -8px 0 22px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ceu-novidades h2 { margin: 0 0 8px; font-size: 17px; }
.ceu-novidades > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ceu-novo { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--bg); }
.ceu-novo .ceu-astro { grid-row: span 3; }
.ceu-novo b { font-size: 14px; }
.ceu-novo span:not(.ceu-astro) { font-size: 13px; font-weight: 600; }
.ceu-novo small { font-size: 11.5px; color: var(--muted); }
.ceu-novo.sobe span:not(.ceu-astro) { color: #b8860b; }
.ceu-novo.desce span:not(.ceu-astro) { color: #c9781e; }
.ceu-novo.sobe .ceu-astro { animation: acender-novo 2.4s ease-out 1; }
@keyframes acender-novo { 0% { transform: scale(.4); filter: brightness(2.2); } 60% { transform: scale(1.35); } 100% { transform: scale(1); filter: none; } }
.ceu-criterios { margin: -4px 0 14px; }
.ceu-criterios summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.ceu-criterios dl { display: grid; gap: 6px; margin: 10px 0; }
.ceu-criterios dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; }
.ceu-criterios dt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ceu-criterios dd { margin: 0; color: var(--muted); font-size: 14px; }
.leg-fase { cursor: help; }
.c-estrela .ignicao { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ignicao 2.6s ease-out .9s 2 both; pointer-events: none; }
.c-estrela .ignicao.sobe { stroke: #ffe08a; }
.c-estrela .ignicao.desce { stroke: #c99a4a; }
@keyframes ignicao { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(3.2); opacity: 0; } }
@media (max-width: 760px) { .ceu-criterios dl > div { grid-template-columns: 1fr; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .ceu-novo.sobe .ceu-astro { animation: none; } }

/* 20/10: o sistema em miniatura na constelação aberta (anel de órbitas em volta de cada estrela) e o painel da estrela */
.c-orbitas { pointer-events: none; animation: orb-surge .35s ease; }
.c-orbitas .trilho { fill: none; stroke-width: .35; opacity: .45; }
.c-orbitas .orb-firmes { opacity: .5; }
.c-orbitas .mais { font-family: inherit; font-weight: 600; opacity: .9; }
.c-orbitas .orb-poeira circle { fill: #8a86a8; opacity: .45; }
.c-estrela:not(.sel) .c-orbitas { opacity: .8; }
.c-estrela:has(.c-orbitas) .halo { opacity: .22; }
.c-estrela:has(.c-orbitas) .raios { opacity: 0; }
.c-nomes text.sob-orbitas, .c-rot-exp .sob-orbitas { opacity: 0; }
.c-orbitas .mais { paint-order: stroke; stroke: #0d0b1f; stroke-width: 1.2px; }
@keyframes orb-surge { from { opacity: 0; transform: scale(.7); } }
.c-legenda i.anel-cards { background: none; border: 2px solid; border-color: #ff7a6b #ffd166 #d6e6ff #7d78a3; box-shadow: none; }
.c-lista-estrela .c-voltar { align-self: flex-start; background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 4px; color: #c3b2ff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.c-lista-estrela .c-voltar:hover { color: #fff; }
.c-lista-estrela .c-lista-itens { flex: 1; min-height: 0; align-content: start; margin-top: 12px; }
.c-sec summary { cursor: pointer; padding: 6px 2px; font-size: 13px; font-weight: 700; color: #e9e4ff; list-style-position: inside; }
.c-sec summary b { color: #b8b2dc; font-weight: 600; margin-left: 4px; }
.c-sec-itens { display: grid; gap: 4px; margin-bottom: 6px; }
.c-card-item { grid-template-columns: 12px 1fr; padding: 7px 9px; width: 100%; margin: 0; }
.c-card-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 500; }
.c-card-item small { margin-top: 2px; }
.c-card-item.c-parado { opacity: .6; cursor: default; }
.c-card-item.c-parado:hover { background: rgba(255, 255, 255, .05); border-color: transparent; }
.c-ponto.c-ponto-oco { background: none; border: 1.5px dashed #8a86a8; box-shadow: none; width: 10px; height: 10px; }
.c-sec-pedir { margin-top: 4px; }
.c-lista-estrela .sis-sec > a { flex: 0 0 auto; }

/* ---------- Céu 3D (beta, 20/10) ---------- */
body.tela-ceu .c3d { height: 100%; }
.c3d { position: relative; overflow: hidden; color: #e9e6ff; background: radial-gradient(ellipse at 50% 40%, #1d1840 0%, #0d0b1f 55%, #05040c 100%); }
.c3d-palco { position: absolute; inset: 0; }
.c3d-palco canvas { cursor: grab; }
.c3d-palco canvas:active { cursor: grabbing; }
.c3d-topo { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; font-size: 14px; }
.c3d-topo > * { pointer-events: auto; }
.c3d-topo a { color: #b9b3e6; text-decoration: none; padding: 6px 10px; border-radius: 10px; background: rgba(20, 16, 44, .7); }
.c3d-topo a:hover { color: #fff; background: rgba(60, 48, 120, .7); }
.c3d-topo b { font-family: var(--fonte-titulo, inherit); font-size: 17px; text-shadow: 0 1px 6px #000; }
.c3d-beta { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1a1430; background: #ffd166; border-radius: 99px; padding: 3px 8px; }
.c3d-info { position: absolute; left: 16px; top: 64px; width: 250px; max-height: calc(100% - 84px); overflow: auto; background: rgba(14, 11, 32, .78); border: 1px solid rgba(160, 150, 230, .16); border-radius: 16px; padding: 14px; backdrop-filter: blur(6px); font-size: 13px; }
.c3d-fase { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.c3d-fase i, .c3d-leg i, .c3d-irmas i, .c3d-lista a i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.c3d-leg { display: grid; gap: 6px; }
.c3d-leg div { display: flex; align-items: center; gap: 8px; color: #c8c3ee; }
.c3d-leg b { color: #fff; min-width: 34px; text-align: right; }
.c3d-carregando { color: #9a94c8; }
.c3d-ajuda { color: #9a94c8; font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.c3d-irmas { display: grid; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(160, 150, 230, .14); }
.c3d-irmas button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; box-shadow: none; color: #b9b3e6; padding: 5px 6px; border-radius: 8px; font: inherit; font-size: 12.5px; cursor: pointer; }
.c3d-irmas button span { flex: 1; min-width: 0; }
.c3d-irmas em, .c3d-nome em { font-style: normal; font-weight: 700; color: #ff7a6b; }
.c3d-irmas button:hover { background: rgba(90, 76, 170, .25); color: #fff; }
.c3d-irmas button.atual { background: rgba(124, 77, 255, .28); color: #fff; font-weight: 600; }
.c3d-rotulos { position: absolute; inset: 0; pointer-events: none; }
.c3d-rotulos span { position: absolute; left: 0; top: 0; margin: -9px 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--c); white-space: nowrap; text-shadow: 0 0 4px #05040c, 0 0 8px #05040c; opacity: .9; }
.c3d-dica { position: absolute; left: 0; top: 0; max-width: 320px; padding: 9px 12px; border-radius: 12px; background: rgba(14, 11, 32, .94); border: 1px solid rgba(160, 150, 230, .25); font-size: 13px; line-height: 1.45; pointer-events: none; opacity: 0; transition: opacity .15s; }
.c3d-dica.vis { opacity: 1; }
.c3d-escolha { overflow: auto; }
.c3d-escolha .c3d-topo { position: sticky; padding-top: 0; }
.c3d-lista { max-width: 900px; margin: 0 auto; padding: 70px 16px 40px; }
.c3d-lista > p { color: #b9b3e6; }
.c3d-lista h3 { font-size: 15px; margin: 22px 0 8px; color: #fff; }
.c3d-lista section > div { display: flex; flex-wrap: wrap; gap: 6px; }
.c3d-lista a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: rgba(30, 24, 66, .75); color: #ddd8ff; text-decoration: none; font-size: 13px; }
.c3d-lista a:hover { background: rgba(80, 64, 160, .6); }
.c3d-lista a small { color: #9a94c8; }
.mm-controles button.c-3d { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
@media (max-width: 760px) {
  .c3d-info { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 34%; padding: 10px 12px; }
  .c3d-leg { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .c3d-irmas, .c3d-ajuda { display: none; }
  .c3d-rotulos span { font-size: 10.5px; }
}
.c3d-nome { position: absolute; left: 0; top: 0; translate: -50% 0; font-size: 12.5px; font-weight: 600; color: #e9e6ff; white-space: nowrap; text-shadow: 0 0 4px #05040c, 0 0 10px #05040c; }
.c3d-nome.vazia { color: #7d78a3; font-weight: 500; }
.c3d-voltar { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 8px; color: #b9a8ff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.c3d-grupo { background: none !important; padding: 0 !important; font-weight: 700; color: #fff !important; }
.c3d-resumo { color: #c8c3ee; line-height: 1.5; margin-bottom: 10px; }
.c3d-resumo b { color: #fff; font-size: 16px; }
.c3d-venc { font-style: normal; font-weight: 700; color: #ff7a6b; }
.c3d-acoes { margin: 12px 0 4px; }
.c3d-acoes .principal { display: block; width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }
.c3d-acoes .sis-ok { color: #8fe0b0; font-weight: 600; }
.c3d-info { scrollbar-width: thin; scrollbar-color: rgba(160, 150, 230, .35) transparent; }
.c3d-topo-dir { margin-left: auto; }
/* 21/10: trilha Céu › constelação › estrela e botões − + ↑ (sempre visíveis, também com o card aberto) */
.c3d-trilha { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.c3d-trilha a { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-trilha a[aria-current] { background: none; color: #fff; font-family: var(--fonte-titulo, inherit); font-size: 17px; text-shadow: 0 1px 6px #000; padding: 4px 6px; }
.c3d-trilha a[aria-current]:hover { background: rgba(60, 48, 120, .7); }
.c3d-sep { color: #7d78a3; }
.c3d-zoom { min-width: 34px; padding: 6px 0; text-align: center; font-size: 16px; line-height: 1; }
.c3d-zoom:disabled { opacity: .35; cursor: default; }
.c3d-topo { z-index: 7; }
.c3d-plano { background: rgba(20, 16, 44, .7); color: #b9b3e6; border: 0; box-shadow: none; padding: 6px 12px; border-radius: 10px; font: inherit; font-size: 13px; cursor: pointer; }
.c3d-plano:hover { color: #fff; background: rgba(60, 48, 120, .7); }
.c3d-gnome { position: absolute; left: 0; top: 0; translate: -50% -50%; font-family: var(--fonte-titulo, inherit); font-size: 14px; font-weight: 700; color: #f1eeff; white-space: nowrap; text-shadow: 0 0 6px #05040c, 0 0 12px #05040c; pointer-events: auto; cursor: pointer; transition: opacity .3s; }
.c3d-gnome:hover { color: #ffd166; }
.c3d-gnome em { font-style: normal; font-size: 12px; color: #ff7a6b; }
.c3d-gnome.vazia { color: #8a86a8; font-weight: 500; }
.c3d-gnome.fraca { opacity: .45; font-size: 12px; }
#c3d-resposta .ceu-card { z-index: 6; }
.c3d .ceu-aviso-desfazer { z-index: 7; }
@media (max-width: 760px) {
  .c3d-info .c3d-irmas { display: grid; max-height: 120px; overflow: auto; }
  .c3d-topo { top: 10px; left: 10px; right: 10px; gap: 6px; font-size: 13px; }
  .c3d-topo b { font-size: 15px; flex-basis: 100%; order: 5; }
  .c3d-gnome { font-size: 12px; }
}
.c3d-acoes a.principal { background: var(--ouro-vivo); color: var(--sobre-accent); padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.c3d-lista-btn { display: none; }
@media (max-width: 760px) {
  .c3d-info { max-height: 50%; }
  .c3d-info .c3d-irmas { display: none; max-height: 30vh; }
  .c3d-info.lista-aberta .c3d-irmas { display: grid; }
  .c3d-lista-btn { display: block; width: 100%; margin-top: 8px; background: rgba(60, 48, 120, .35); color: #ddd8ff; border: 0; box-shadow: none; border-radius: 10px; padding: 8px; font: inherit; font-size: 13px; }
  .c3d-info.lista-aberta .c3d-lista-btn { margin-bottom: 6px; }
  .c3d-acoes { margin: 8px 0 0; }
}
/* filtros do céu 3D */
.c3d-filtros { position: absolute; left: 282px; right: 16px; bottom: 12px; display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.c3d-f-linha, .c3d-f-leg { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: rgba(14, 11, 32, .78); border: 1px solid rgba(160, 150, 230, .16); border-radius: 14px; padding: 5px 8px; backdrop-filter: blur(6px); }
.c3d-f-linha button { background: none; border: 0; box-shadow: none; color: #c8c3ee; font: inherit; font-size: 13px; padding: 5px 9px; border-radius: 9px; cursor: pointer; }
.c3d-f-linha button:hover { background: rgba(90, 76, 170, .3); color: #fff; }
.c3d-f-linha button.ativo { background: rgba(124, 77, 255, .45); color: #fff; font-weight: 600; }
.c3d-f-rot { font-size: 11.5px; color: #8a86a8; margin: 0 2px 0 6px; }
.c3d-f-leg { font-size: 12px; color: #c8c3ee; gap: 12px; padding: 5px 12px; }
.c3d-f-leg span { display: inline-flex; align-items: center; gap: 5px; }
.c3d-f-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.c3d-f-dica { color: #8a86a8; }
.c3d-nome.fora, .c3d-gnome.fora { opacity: .3 !important; }
.c3d-irmas button.fora { opacity: .45; }
.c3d-btn-filtros { display: none; margin-right: 6px; }
@media (max-width: 760px) {
  .c3d-btn-filtros { display: inline-block; }
  .c3d-filtros { display: none; left: 10px; right: 10px; top: 96px; bottom: auto; z-index: 4; }
  .c3d.filtros-abertos .c3d-filtros { display: grid; }
  .c3d-f-leg .c3d-f-dica { display: none; }
}

/* ---------- céu 3D: o jogo (21/10) ---------- */
.c3d-vinheta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(3, 2, 10, .55) 100%); }
.c3d-hud { position: absolute; top: 58px; left: 50%; translate: -50% 0; display: grid; gap: 8px; justify-items: center; z-index: 5; pointer-events: none; }
.c3d-hud > * { pointer-events: auto; }
.c3d-hud-j { display: flex; align-items: center; gap: 10px; background: rgba(14, 11, 32, .86); border: 1px solid rgba(255, 209, 102, .35); border-radius: 14px; padding: 8px 12px; color: #e9e6ff; font-size: 13px; box-shadow: 0 0 24px rgba(255, 209, 102, .15); backdrop-filter: blur(6px); }
.c3d-hud-j b { color: #ffd166; }
.c3d-hud-barra { width: 140px; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.c3d-hud-barra i { display: block; height: 100%; background: linear-gradient(90deg, #ffb36b, #ffd166); border-radius: 9px; transition: width .5s; }
.c3d-hud-j button { padding: 5px 10px; font-size: 12.5px; }
/* 26/10: voltar ao último card respondido, sempre à mão e discreto */
.c3d-ultimo { padding: 4px 10px; font-size: 12px; border-radius: 10px; color: #b9b3e6; background: rgba(20, 16, 44, .6); border: 1px solid rgba(185, 179, 230, .25); cursor: pointer; }
.c3d-ultimo:hover { color: #fff; background: rgba(60, 48, 120, .75); }
.c3d-ultimo kbd { opacity: .6; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .c3d-combo, .c3d-anuncio, .c3d-fim, .c3d-guia, .c3d-brief { animation: none !important; }
  .c3d-hud-barra i, .c3d-gnome, .c3d-dica { transition: none !important; }
}
.c3d-combo { font-family: var(--fonte-titulo, inherit); font-size: 18px; color: #ffd166; text-shadow: 0 0 12px rgba(255, 180, 80, .8); animation: c3d-pulo .35s ease; }
.c3d-combo b { font-size: 24px; }
.c3d-combo.medio { color: #ffb36b; text-shadow: 0 0 16px rgba(255, 140, 60, .9); }
.c3d-combo.forte { color: #ff8a5b; text-shadow: 0 0 22px rgba(255, 90, 60, 1); font-size: 21px; }
@keyframes c3d-pulo { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.c3d-anuncio { position: absolute; left: 50%; top: 38%; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; pointer-events: none; z-index: 8; animation: c3d-anuncio 3.2s ease forwards; text-align: center; }
.c3d-anuncio b { font-family: var(--fonte-titulo, inherit); font-size: clamp(26px, 5vw, 46px); color: #fff; text-shadow: 0 0 18px rgba(255, 220, 150, .9), 0 0 40px rgba(255, 180, 90, .6); }
.c3d-anuncio span { font-size: 16px; color: #ffe2a0; text-shadow: 0 0 10px #000; }
.c3d-anuncio.a-conquista b { color: #ffe2a0; }
.c3d-anuncio.a-queda b { font-size: clamp(20px, 3.6vw, 30px); color: #ffb36b; text-shadow: 0 0 14px rgba(255, 140, 60, .55); }
.c3d-anuncio.a-queda span { color: #ffcf9f; }
.c3d-fim-quedas { margin: 6px 0 0; color: #ffb36b; font-size: 14px; }
.c3d-anuncio.a-combo b { font-size: clamp(22px, 4vw, 34px); color: #ffd166; }
@keyframes c3d-anuncio { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.06); } 20% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
.c3d-missao { display: flex; flex-direction: column; margin-bottom: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 176, 102, .18), rgba(124, 77, 255, .12)); border: 1px solid rgba(255, 176, 102, .25); }
.c3d-missao span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #ffb066; }
.c3d-missao b { color: #fff; font-size: 15px; }
.c3d-acoes2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.c3d-acoes2 button { flex: 1; background: rgba(60, 48, 120, .45); color: #e9e6ff; border: 1px solid rgba(160, 150, 230, .2); box-shadow: none; border-radius: 10px; padding: 7px 9px; font: inherit; font-size: 12.5px; cursor: pointer; }
.c3d-acoes2 button:hover { background: rgba(90, 70, 170, .6); }
.c3d-coroa { color: #ffe2a0; text-shadow: 0 0 8px rgba(255, 210, 120, .8); font-weight: 700; }
.c3d-gnome.c3d-prova { color: #ffc98a; font-size: 15px; cursor: default; }
.c3d-fim { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 4, 12, .55); z-index: 9; animation: c3d-surge .4s ease; }
.c3d-fim-caixa { background: rgba(18, 14, 40, .95); border: 1px solid rgba(255, 209, 102, .35); border-radius: 22px; padding: 26px 30px; text-align: center; color: #e9e6ff; box-shadow: 0 0 60px rgba(255, 190, 90, .2); max-width: 92vw; }
.c3d-fim-caixa h2 { margin: 0 0 16px; font-family: var(--fonte-titulo, inherit); color: #ffd166; }
.c3d-fim-num { display: flex; gap: 22px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.c3d-fim-num div { display: grid; }
.c3d-fim-num b { font-size: 28px; color: #fff; }
.c3d-fim-num span { font-size: 12px; color: #9a94c8; }
.c3d-fim-acesas { color: #ffe2a0; }
@keyframes c3d-surge { from { opacity: 0; } }
.c3d.em-jornada .c3d-filtros { display: none; }
@media (max-width: 760px) {
  .c3d-hud { top: 92px; }
  .c3d-hud-barra { width: 70px; }
}

/* ---------- céu 3D: referências (21/10): legenda por nível, guia "Como ler o céu", Recentrar ---------- */
.c3d-f-leg .c3d-f-rot { color: #8a86a8; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.c3d-f-ajuda { background: rgba(124, 77, 255, .25); color: #e9e6ff; border: 1px solid rgba(160, 150, 230, .3); box-shadow: none; border-radius: 9px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.c3d-f-ajuda:hover { background: rgba(124, 77, 255, .45); }
.c3d-btn-guia { width: 32px; padding: 6px 0; font-weight: 700; }
.c3d-guia { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 12, .6); animation: c3d-surge .3s ease; }
.c3d-guia-caixa { position: relative; width: min(760px, 100%); max-height: 100%; overflow: auto; background: rgba(18, 14, 40, .97); border: 1px solid rgba(160, 150, 230, .25); border-radius: 20px; padding: 22px 24px; color: #e9e6ff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.c3d-guia-caixa h2 { margin: 0 0 14px; font-family: var(--fonte-titulo, inherit); font-size: 22px; color: #fff; }
.c3d-guia-caixa h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #8a86a8; }
.c3d-guia-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #c8c3ee; border: 0; box-shadow: none; cursor: pointer; font-size: 14px; }
.c3d-guia-niveis { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.c3d-guia-niveis div { display: grid; padding: 7px 12px; border-radius: 12px; background: rgba(124, 77, 255, .14); border: 1px solid rgba(160, 150, 230, .18); }
.c3d-guia-niveis b { font-size: 14px; color: #fff; }
.c3d-guia-niveis span { font-size: 11.5px; color: #a49ee0; }
.c3d-guia-niveis i { font-style: normal; color: #6f64a8; font-size: 20px; }
.c3d-guia-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 20px; }
.c3d-g-item { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #c8c3ee; }
.c3d-g-item b { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; }
.c3d-g-item em { font-style: normal; font-weight: 600; color: var(--c); }
.c3d-g-ico { flex: none; position: relative; width: 44px; height: 44px; border-radius: 12px; background: rgba(5, 4, 12, .7); border: 1px solid rgba(160, 150, 230, .14); overflow: hidden; }
.c3d-g-ico.estrela::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: #ffe7b0; box-shadow: 0 0 10px 3px rgba(255, 209, 102, .55); }
.c3d-g-ico.linha::before, .c3d-g-ico.linha::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffe2a0; top: 10px; left: 9px; box-shadow: 18px 18px 0 #ffe2a0; }
.c3d-g-ico.linha { background: linear-gradient(45deg, transparent 47%, rgba(255, 226, 160, .7) 49%, rgba(255, 226, 160, .7) 51%, transparent 53%), rgba(5, 4, 12, .7); }
.c3d-g-ico.orbitas { background: radial-gradient(circle, #fff3d0 0 3px, transparent 4px 7px, rgba(255, 74, 61, .8) 7px 8.5px, transparent 9px 11px, rgba(255, 179, 107, .7) 11px 12.5px, transparent 13px 15px, rgba(169, 156, 255, .7) 15px 16.5px, transparent 17px 19px, rgba(207, 224, 255, .5) 19px 20px, transparent 20.5px), rgba(5, 4, 12, .7); }
.c3d-g-ico.chao { background: repeating-linear-gradient(90deg, rgba(143, 134, 216, .35) 0 1px, transparent 1px 9px), repeating-linear-gradient(0deg, rgba(143, 134, 216, .35) 0 1px, transparent 1px 9px), rgba(5, 4, 12, .7); }
.c3d-g-ico.chao::after { content: ''; position: absolute; left: 21px; top: 6px; width: 2px; height: 26px; background: linear-gradient(#ffe7b0, rgba(143, 134, 216, .7)); box-shadow: 0 -3px 6px 2px rgba(255, 209, 102, .5); }
.c3d-g-ico.nevoa::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(138, 127, 184, .9), rgba(108, 100, 148, .4) 55%, transparent 72%); filter: blur(2px); }
.c3d-g-ico.prova::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: linear-gradient(#f2d7a6 0 30%, #b88a50 30% 45%, #f2d7a6 45% 70%, #a27240 70%); box-shadow: 0 0 0 0 transparent, 0 0 0 6px rgba(255, 217, 160, .0); }
.c3d-g-ico.prova::before { content: ''; position: absolute; left: 4px; right: 4px; top: 19px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(255, 217, 160, .7); transform: rotate(-14deg); z-index: 1; }
.c3d-guia-ctrl { display: flex; flex-wrap: wrap; gap: 8px; }
.c3d-guia-ctrl span { padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 12.5px; color: #c8c3ee; }
.c3d-guia-ctrl b { color: #ffd166; font-weight: 600; }
.c3d-guia-ok { display: block; margin: 18px auto 0; min-width: 140px; }
@media (max-width: 760px) {
  .c3d-guia-caixa { padding: 18px 16px; }
  .c3d-guia-grade { grid-template-columns: 1fr; }
  .c3d-guia-niveis { flex-wrap: nowrap; gap: 4px; }
  .c3d-guia-niveis div { padding: 6px 9px; }
  .c3d-guia-niveis span { display: none; }
  .c3d-guia-ok { position: sticky; bottom: 0; width: 100%; box-shadow: 0 -10px 20px rgba(18, 14, 40, .95); }
  .c3d-topo [data-c3d-centro] { font-size: 0; width: 32px; padding: 6px 0; }
  /* a trilha ocupa uma linha só (nomes longos cortam com reticências, o atual leva o resto) e os botões ficam na linha de baixo */
  .c3d-trilha { flex: 1 1 100%; flex-wrap: nowrap; }
  .c3d-trilha a { flex: 0 1 auto; min-width: 0; max-width: none; }
  .c3d-trilha a[data-c3d-ceu] { flex-shrink: 0; }
  .c3d-trilha a[aria-current] { font-size: 15px; }
  .c3d-topo-dir { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 0; }
  /* com o card aberto ele cobre quase a tela: o topo fica só com a trilha e − + ↑ ⌖, e o card desce para não ficar por baixo */
  .c3d.com-card .c3d-btn-guia, .c3d.com-card .c3d-btn-filtros, .c3d.com-card [data-c3d-plano] { display: none; }
  body.tela-ceu .c3d.com-card .ceu-card { top: 92px; }
  .c3d-topo [data-c3d-centro]::before { content: '⌖'; font-size: 15px; }
}

/* ---------- céu 3D: do Mass Effect (21/10): domínio por constelação, você está aqui ---------- */
.c3d-pct { font-style: normal; display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; font-family: var(--fonte, inherit); font-size: 11px; font-weight: 700; color: #bff0ff; background: linear-gradient(90deg, rgba(127, 224, 255, .32) var(--p), rgba(127, 224, 255, .08) var(--p)); border: 1px solid rgba(127, 224, 255, .35); vertical-align: 2px; }
.c3d-pct-l { margin-left: auto; color: #7fe0ff; font-size: 11px; font-weight: 700; padding-right: 6px; }
.c3d-dom { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.c3d-dom span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #7fe0ff; }
.c3d-dom b { font-size: 18px; color: #fff; }
.c3d-dom i { height: 6px; border-radius: 9px; background: rgba(127, 224, 255, .12); overflow: hidden; }
.c3d-dom s { display: block; height: 100%; background: linear-gradient(90deg, #4fc3f7, #bff0ff); border-radius: 9px; }
.c3d-aqui { position: absolute; left: 0; top: 0; translate: -50% -100%; padding: 2px 8px 2px 18px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #06202b; background: #7fe0ff; white-space: nowrap; pointer-events: none; box-shadow: 0 0 12px rgba(127, 224, 255, .6); }
.c3d-aqui::before { content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #06202b; transform: rotate(45deg); }
.c3d-aqui::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #7fe0ff; }
.c3d-g-ico.pulso::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid rgba(255, 77, 61, .8); box-shadow: 0 0 8px rgba(255, 77, 61, .6), inset 0 0 0 8px rgba(5, 4, 12, .7); background: radial-gradient(circle, #ffe7b0 0 4px, transparent 5px); }
.c3d-g-ico.pct { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #bff0ff; }
.c3d-g-ico.aqui::after { content: ''; position: absolute; left: 15px; top: 15px; width: 13px; height: 13px; background: #7fe0ff; transform: rotate(45deg); box-shadow: 0 0 10px rgba(127, 224, 255, .7); }

/* ---------- céu 3D: pistas (Outer Wilds), cor útil, filtro que reorganiza (21/10) ---------- */
.c3d-gnome .c3d-comp { position: absolute; left: 50%; top: 100%; translate: -50% 2px; display: flex; gap: 1px; width: 72%; min-width: 40px; height: 4px; border-radius: 3px; overflow: hidden; font-style: normal; }
.c3d-gnome .c3d-comp s { display: block; height: 100%; text-decoration: none; }
.c3d-f-cor { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: #c8c3ee; border: 1px solid transparent; box-shadow: none; border-radius: 9px; padding: 2px 7px; font: inherit; font-size: 12px; cursor: pointer; }
.c3d-f-cor i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.c3d-f-cor b { color: #fff; font-weight: 700; }
.c3d-f-cor:hover { border-color: rgba(160, 150, 230, .35); }
.c3d-f-cor.ativo { border-color: var(--c); background: rgba(255, 255, 255, .06); color: #fff; }
.c3d-f-cor.apagada { opacity: .45; }

/* ---------- céu 3D: o briefing da missão (21/10) ---------- */
.c3d.em-briefing .c3d-info, .c3d.em-briefing .c3d-filtros, .c3d.em-briefing .c3d-hud, .c3d.em-briefing .c3d-topo, .c3d.em-briefing .c3d-dica, .c3d.em-briefing #c3d-nomes, .c3d.em-briefing #c3d-grupos, .c3d.em-briefing #c3d-rotulos, .c3d.em-briefing .ceu-aviso-desfazer { display: none !important; }
.c3d-brief { position: absolute; inset: 0; z-index: 11; display: grid; grid-template-rows: auto 1fr auto; pointer-events: auto; animation: c3d-surge .6s ease; }
.cb-faixa { position: absolute; left: 0; right: 0; height: 9vh; background: #000; pointer-events: none; }
.cb-cima { top: 0; } .cb-baixo { bottom: 0; }
.cb-topo { position: relative; display: flex; justify-content: space-between; align-items: center; padding: calc(9vh - 34px) 24px 0; color: #a49ee0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.cb-topo button { background: transparent; color: #8a86a8; border: 1px solid rgba(160, 150, 230, .25); box-shadow: none; border-radius: 9px; padding: 4px 10px; font: inherit; font-size: 11px; letter-spacing: .08em; cursor: pointer; }
.cb-topo button:hover { color: #fff; }
.cb-grande { align-self: center; justify-self: center; display: grid; justify-items: center; gap: 4px; text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 0 50px rgba(5, 4, 12, .9); pointer-events: none; padding: 26px 48px; border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 4, 12, .62), rgba(5, 4, 12, .3) 60%, transparent); }
.cb-grande b { font-family: var(--fonte-titulo, inherit); font-size: clamp(56px, 11vw, 132px); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: #fff8ea; }
.cb-grande b.cb-nome { font-size: clamp(30px, 5vw, 56px); max-width: 16ch; }
.cb-grande small { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #ffd9a0; }
.cb-pe { position: relative; justify-self: center; width: min(720px, 100%); padding: 0 20px calc(9vh + 14px); display: grid; justify-items: center; gap: 12px; text-align: center; }
.cb-pe p { margin: 0; font-size: 17px; line-height: 1.55; color: #e9e6ff; text-shadow: 0 1px 10px #000, 0 0 24px #000; min-height: 3em; }
.cb-pe p b { color: #ffd166; }
.cb-botoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 40px; }
.cb-botoes button:not(.principal) { background: rgba(20, 16, 44, .8); color: #e9e6ff; border: 1px solid rgba(160, 150, 230, .3); box-shadow: none; }
.cb-pontos { display: flex; gap: 6px; }
.cb-pontos i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.cb-pontos i.feito { background: #ffd166; }
.c3d-brief-btn { margin-top: 8px; width: 100%; background: rgba(255, 176, 102, .16); color: #ffe2a0; border: 1px solid rgba(255, 176, 102, .35); box-shadow: none; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.c3d-brief-btn:hover { background: rgba(255, 176, 102, .28); }
.c3d-brief-btn em { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; background: #ffd166; color: #2a1a00; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
@media (max-width: 760px) {
  .cb-pe p { font-size: 15px; }
  .cb-grande small { font-size: 12px; }
}

/* Divisão do tempo entre preparações e equivalência dos tópicos (21/10, várias preparações) */
.divisao-tempo { margin: 18px 0; }
.divisao-tempo h3 { margin: 0 0 4px; }
.dt-linhas { display: grid; gap: 8px; margin: 12px 0; }
.dt-linhas label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-linhas label > span { flex: 1 1 220px; }
.dt-linhas input { width: 76px; min-height: 40px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; text-align: right; }
.dt-linhas input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.equiv { font-size: 11px; padding: 1px 7px; margin-right: 4px; vertical-align: 1px; }
.equiv-parcial, .equiv-confirmar { border-style: dashed; }
.mk-quem { margin: 4px 0 14px; }
.mk-linha + .mk-linha { margin-top: 4px; }
.mk-quem .num { display: inline; margin-left: 4px; }

/* ============ Céu plano mais enfeitado (26/10, pedido dele): nebulosas coloridas, Via Láctea, coroa nas firmes, cintilar leve ============ */
.c-via, .c-neb2, .c-estrela .coroa { pointer-events: none; }
.c-estrela .coroa { fill: var(--c); opacity: .05; }
#fundo-ceu .c-via { opacity: .8; }
.c-linhas line { stroke-linecap: round; }
.c-linhas line.ligada { stroke: #cdc6ff; }
.c-estrela.f-acesa .nucleo, .c-estrela.f-firme .nucleo { animation: cintilar-n 5.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes cintilar-n { 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .c-estrela .nucleo { animation: none !important; } }

/* Onde responder (pergunta antes de abrir uma sessão de cards) */
dialog.onde-responder { max-width: 460px; width: calc(100vw - 32px); }
.onde-ops { display: grid; gap: 8px; margin: 12px 0; }
.onde-op { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 12px; width: 100%; }
.onde-op span { display: flex; flex-direction: column; gap: 2px; }
.onde-op small { color: var(--muted); font-size: 12.5px; }
.onde-op kbd, #onde-cancelar kbd { font-size: 11px; opacity: .7; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.onde-lembrar { margin: 4px 0 8px; font-size: 13.5px; }
.onde-lembrar { flex-wrap: wrap; } .onde-lembrar small { flex-basis: 100%; padding-left: 24px; }
/* 27/10: Hoje com o ritmo à mão e "Teoria + cards" destacado */
.h-cab-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.h-cab-linha .em-hoje { margin: 0; }
button.h-destaque { border-color: var(--o-luz, #e8b04b); color: var(--o-luz, #e8b04b); box-shadow: 0 0 0 1px var(--o-luz, #e8b04b) inset; }

/* 27/10: versão enxuta (piloto das professoras, só Português): Hoje, Simulados e o essencial */
html.enxuto .nav-grupo a[data-rota]:not([data-rota="hoje"]):not([data-rota="simulados"]):not([data-rota="estatisticas"]):not([data-rota="teoria"]):not([data-rota="editais"]):not([data-rota="como-usar"]),
html.enxuto.sem-edital .nav-grupo a[data-rota="editais"],
html.enxuto .nav-grupo .nav-sep, html.enxuto .nav-grupo .nav-mais,
html.enxuto .st2-eu, html.enxuto .st2-conc-w,
html.enxuto .so-completo { display: none !important; }
/* 27/10 (revisão no celular, versão enxuta): o botão Teoria só onde há cartão ou questão; o "?" no alto, sem cobrir o texto */
html.enxuto:not([data-rota="estudar"]):not([data-rota="questoes"]):not([data-rota="sessao"]) #teoria-tog { display: none !important; }
@media (max-width: 640px) { html.enxuto .tr-botao { top: 74px !important; bottom: auto !important; right: 12px !important; } }
.dia-mat:not(:has(.dia-ceu)) { justify-content: center; min-height: 0; padding-top: 14px; }

html.enxuto #btn-apresentacao { display: none !important; }

/* 27/10 (pedido dele: as professoras enxergam mal): letras maiores a qualquer momento, desde a apresentação */
body > main, dialog > * { zoom: var(--letra, 1); }
.letra-ctl { position: fixed; z-index: 9000; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(10, 14, 40, .92); border: 1px solid var(--o-linha-forte, #3A4778); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.letra-ctl button { min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--o-tinta, #F1E7CF); font: 600 15px/1 var(--f-tex, system-ui); cursor: pointer; }
.letra-ctl button:hover, .letra-ctl button:focus-visible { background: rgba(226, 174, 74, .16); color: var(--o-luz, #E2AE4A); }
.letra-ctl button:disabled { opacity: .35; cursor: default; }
.letra-ctl .lt-g { font-size: 19px; }
@media (min-width: 900px) { .letra-ctl { left: calc(var(--lateral, 230px) + 16px); bottom: 16px; } body.lateral-oculta .letra-ctl { left: 16px; } }
body.tela-ceu > main { zoom: 1; }
@media (max-width: 899px) { .letra-ctl { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 800; } }
/* 27/10: a barra de Marcar como lido / Cards da teoria ganha fundo sólido (o texto aparecia por baixo) e fica sempre à vista */
dialog.teoria .aula-acoes.aula-acoes { background: #10173a; border-top: 1px solid var(--o-linha, #2C3863); box-shadow: 0 -12px 24px rgba(5, 8, 25, .7); padding: 12px 0; margin-top: 12px; }
@media (max-width: 600px) { dialog.teoria .aula-acoes.aula-acoes > * { flex: 1 1 100%; min-height: 46px; } dialog.teoria .aula-acoes #t-cards { order: -1; } }
@media (max-width: 899px) {
  .au-fixa { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .letra-ctl { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; transform: translateX(-50%); z-index: 800; }
  .letra-ctl button { min-width: 40px; min-height: 36px; padding: 0 8px; }
}

/* 28/10 (pedido dele): teoria com o ✕ e a Tela cheia sempre no alto, mesmo rolando (aula e diálogo da teoria) */
.leitura-topo { position: sticky; top: 3px; z-index: 6; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 0; margin-bottom: var(--esp-3, 12px); background: color-mix(in srgb, var(--bg, #0b1030) 88%, transparent); }
.leitura-topo .au-volta { margin: 0 auto 0 0; }
.leitura-topo .lt-cheia { min-height: 0; padding: 7px 13px; border-radius: 999px; font-size: 13px; }
.leitura-topo .lt-x { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; }
dialog.leitor .leitura-topo { top: -34px; margin: -34px -40px 8px; padding: 12px 16px; background: inherit; }
dialog.leitor.cheia { max-width: none; width: 100vw; height: 100vh; max-height: none; margin: 0; border-radius: 0; padding: 34px max(40px, calc((100vw - 1000px) / 2)); }
dialog.leitor.cheia .leitura-topo { margin-left: calc(-1 * max(40px, calc((100vw - 1000px) / 2)) + 16px); margin-right: calc(-1 * max(40px, calc((100vw - 1000px) / 2)) + 16px); }
body.leitura-cheia .au { max-width: 1000px; }
body.leitura-cheia .tr-botao, body.leitura-cheia .lateral-tog { display: none !important; }
@media (max-width: 640px) { .leitura-topo .lt-cheia span { display: none; } dialog.leitor .leitura-topo { margin: -34px -20px 8px; } }

/* 28/10 (pedido dele: harmonizar o A−/A+): no computador ele mora no pé do menu lateral, como uma linha do próprio menu,
   em vez de flutuar sobre o conteúdo; com o menu recolhido volta a ser a pílula no canto */
.letra-ctl .lt-rot { display: none; }
@media (min-width: 900px) {
  body:not(.lateral-oculta) .letra-ctl { left: 12px; bottom: 62px; width: calc(var(--lateral, 230px) - 24px); padding: 4px 4px 4px 12px; border-radius: 10px;
    background: transparent; border: 1px solid var(--o-linha, rgba(241, 231, 207, .12)); box-shadow: none; }
  body:not(.lateral-oculta) .letra-ctl .lt-rot { display: block; margin-right: auto; font: 500 11px/1.2 var(--f-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--o-tinta-3, #9a93a8); }
  body:not(.lateral-oculta) .letra-ctl button { min-width: 38px; min-height: 32px; font-size: 14px; }
  body:not(.lateral-oculta) .letra-ctl .lt-g { font-size: 17px; }
}
/* 28/10 (a Jade ficou em dúvida se era obrigatório vir à Teoria): o aviso de que o Hoje dá conta */
.te-aviso { margin: 14px 0 6px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(226, 174, 74, .35); background: rgba(226, 174, 74, .08); line-height: 1.55; max-width: 820px; }
.te-aviso b { color: var(--o-luz, #E2AE4A); }
.te-aviso a { color: inherit; font-weight: 600; text-decoration: underline; }
/* 28/10: com a letra maior, cresce o texto de leitura; títulos, rótulos e números grandes crescem só um terço disso
   (antes tudo crescia junto e os títulos ficavam enormes), e o menu lateral acompanha um pouco */
main h1, main h2, main .o-rotulo, main .serif, main .dia-data, main .h-data { zoom: calc((1 + (var(--letra, 1) - 1) * .35) / var(--letra, 1)); }
.nav-grupo a[data-rota] { zoom: calc(1 + (var(--letra, 1) - 1) * .6); }
/* 28/10: o cargo da pessoa no Edital e nos simulados */
.ed-cargo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.sm-seu { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font: 600 11px/1.4 var(--f-mono, monospace); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #1a1405; background: var(--o-luz, #E2AE4A); vertical-align: middle; }
/* 28/10: atalho para o "Como usar o Astra" no alto do Hoje */
.dia-como { margin-left: auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--o-luz, #E2AE4A); color: var(--o-luz, #E2AE4A); font-size: 13px; text-decoration: none; white-space: nowrap; }
.dia-como:hover { background: rgba(226, 174, 74, .12); }

/* 28/10 (revisão visual): A−/A+ sem cobrir nada.
   Computador com menu: no pé do menu, embaixo de tudo; o menu reserva o espaço. Estudando: pílula no canto e a tela
   ganha folga embaixo (cobria o placar). Celular estudando: embaixo à esquerda (no alto cobria o caminho do card). */
@media (min-width: 900px) {
  body:not(.lateral-oculta):not(.estudando) .barra { padding-bottom: 64px !important; }
  body:not(.lateral-oculta):not(.estudando) .letra-ctl { bottom: 12px; }
  /* estudando: em pé, colada à borda esquerda, na faixa vazia ao lado do card */
  body.estudando .letra-ctl { left: 8px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; width: auto; padding: 3px; border-radius: 999px; background: rgba(10, 14, 40, .92); border: 1px solid var(--o-linha-forte, #3A4778); }
  body.estudando .letra-ctl button { min-width: 38px; min-height: 36px; padding: 0 6px; }
  body.estudando .letra-ctl .lt-rot { display: none; }
}
@media (max-width: 899px) { body.estudando main { padding-bottom: 96px; } }
@media (max-width: 899px) {
  body.estudando .letra-ctl { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 12px; transform: none; }
}

/* 28/10 (revisão visual): no celular o menu de baixo cabe numa linha (Hoje, Prova, Céu, Teoria, Mais); Tripulação,
   Dissertativas e Simulados vão para o "Mais". Os botões flutuantes ficam acima do menu. A versão enxuta tem o menu dela. */
@media (max-width: 900px) {
  html:not(.enxuto) .nav-grupo, html:not(.enxuto) body.menu-mais .nav-grupo { grid-template-columns: repeat(5, 1fr) !important; }
  html:not(.enxuto) .nav-grupo a:is([data-rota="tripulacao"], [data-rota="dissertativa"], [data-rota="simulados"]) { display: none !important; }
  html:not(.enxuto) body.menu-mais .nav-grupo a:is([data-rota="tripulacao"], [data-rota="dissertativa"], [data-rota="simulados"]) { display: flex !important; order: -1; }
  html:not(.enxuto) body:not(.estudando) .teoria-tog { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
/* "Como usar o Astra" já está no alto do Hoje: o botão Apresentação some ali */
html[data-rota="hoje"] .tr-botao { display: none !important; }
/* 28/10 (revisão): a barra Marcar como lida da aula acima do menu de baixo no celular (a regra antiga perdia para o rota.css, carregado depois) */
@media (max-width: 899px) { body .au-fixa { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }