/* Mega Brain (Creative IA > Mega Brain | SAP Para Iniciantes). Tudo dentro de .mb, para não mexer no resto do painel.
   Mesmo desenho das outras telas da Creative IA: fundos #0D0D0D/#101010/#141414, texto branco, destaque #2E7697, texto de
   destaque #76B7D5, degradê #2E7697 -> #022F46. Nada de amarelo ou vermelho.
   Layout: barra no topo (título, busca, links); embaixo, índice à esquerda e o texto à direita, cada um com a sua rolagem.
   No celular (ou com pouca largura) o índice vira uma gaveta aberta pelo botão "Índice". */
.mb {
  --mb-cartao: #141414;
  --mb-cartao2: #101010;
  --mb-borda: rgba(255, 255, 255, .07);
  --mb-linha: rgba(255, 255, 255, .05);
  --mb-texto: rgba(255, 255, 255, .92);
  --mb-texto2: rgba(255, 255, 255, .68);
  --mb-mudo: rgba(255, 255, 255, .46);
  --mb-claro: #76B7D5;
  --mb-azul: #2E7697;
  --mb-degrade: linear-gradient(135deg, #2E7697, #022F46);
  --mb-mono: ui-monospace, Consolas, 'Cascadia Mono', 'SF Mono', monospace;
  color: var(--mb-texto);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
}
.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }
.mb button, .mb input { font-family: inherit; }
.mb [hidden] { display: none !important; }
.mb :focus-visible { outline: 2px solid var(--mb-claro); outline-offset: 2px; }
.mb a { color: var(--mb-claro); text-decoration: none; }
.mb a:hover { text-decoration: underline; }

/* ── barra do topo */
.mb-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .05); flex-shrink: 0; }
.mb-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mb-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--mb-degrade); color: #fff; box-shadow: 0 0 0 1px rgba(118, 183, 213, .25) inset; }
.mb-titulo strong { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: .1px; }
.mb-titulo div > span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .45); margin-top: 1px; }
.mb-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-busca { position: relative; display: flex; align-items: center; margin: 0; }
.mb-busca svg { position: absolute; left: 10px; color: var(--mb-mudo); pointer-events: none; }
.mb-busca input { width: 280px; max-width: 100%; padding: 7px 10px 7px 30px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--mb-texto); }
.mb-busca input::placeholder { color: var(--mb-mudo); }
.mb-busca input:focus { outline: none; border-color: rgba(118, 183, 213, .55); background: rgba(46, 118, 151, .08); }
.mb-contagem { font-size: 11.5px; color: var(--mb-texto2); white-space: nowrap; }
.mb-contagem:empty { display: none; }
.mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; border: 1px solid rgba(46, 118, 151, .35); background: rgba(46, 118, 151, .1);
  color: var(--mb-claro); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.mb-btn:hover { background: rgba(46, 118, 151, .2); border-color: rgba(118, 183, 213, .45); text-decoration: none; }
.mb-btn.discreto { background: transparent; border-color: rgba(255, 255, 255, .1); color: var(--mb-texto2); }
.mb-btn.discreto:hover { background: rgba(255, 255, 255, .05); color: var(--mb-texto); }
.mb-btn svg { flex-shrink: 0; display: block; }
/* Cursos com várias apostilas: o botão "Apostilas" abre a lista delas (sigla + nome), cada uma num link. */
.mb-apostilas { position: relative; }
.mb-apostilas[hidden] { display: none; }
.mb-apostilas-lista { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(380px, 92vw); padding: 6px;
  display: grid; gap: 2px; border-radius: 10px; background: #121212; border: 1px solid rgba(118, 183, 213, .22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.mb-apostilas-lista[hidden] { display: none; }
.mb-apostilas-lista a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 9px;
  border-radius: 7px; color: var(--mb-texto) !important; font-size: 12.3px; line-height: 1.35; text-decoration: none !important; }
.mb-apostilas-lista a:hover, .mb-apostilas-lista a:focus-visible { background: rgba(46, 118, 151, .18); }
.mb-apostilas-lista b { font-family: var(--mb-mono); font-size: 11.3px; font-weight: 700; color: var(--mb-claro); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.mb-so-celular { display: none; }

/* ── corpo: índice + texto */
.mb-corpo { flex: 1; min-height: 0; display: flex; position: relative; }
.mb-indice { width: 272px; flex-shrink: 0; overflow-y: auto; padding: 12px 10px 40px 14px; border-right: 1px solid rgba(255, 255, 255, .05);
  scrollbar-width: thin; }
.mb-nav-topo { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-mudo); padding: 4px 8px 8px; }
.mb-nav-modulo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mb-claro);
  padding: 14px 8px 6px; line-height: 1.35; opacity: .9; }
.mb-nav-cap { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 5px 8px; border-radius: 7px;
  color: var(--mb-texto2) !important; font-size: 12.5px; line-height: 1.35; text-decoration: none !important; }
.mb-nav-cap b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mb-mudo); font-size: 11.5px; }
.mb-nav-cap:hover { background: rgba(255, 255, 255, .04); color: var(--mb-texto) !important; }
.mb-nav-cap.ativo { background: rgba(46, 118, 151, .2); color: #fff !important; box-shadow: inset 2px 0 0 var(--mb-claro); }
.mb-nav-cap.ativo b { color: var(--mb-claro); }

.mb-texto { flex: 1; min-width: 0; overflow-y: auto; padding: 0 28px 20px; scroll-behavior: auto; scrollbar-width: thin; outline: none; }
.mb-conteudo { max-width: 920px; margin: 0 auto; padding: 18px 0 60px; overflow-wrap: break-word; }
.mb-conteudo a { overflow-wrap: anywhere; }
.mb-espera, .mb-vazio { padding: 48px 12px; text-align: center; color: var(--mb-mudo); font-size: 13px; }

/* capa: "sobre este cérebro" */
.mb-capa { padding: 14px 18px; border-radius: 12px; background: rgba(46, 118, 151, .08); border: 1px solid rgba(46, 118, 151, .28);
  color: var(--mb-texto2); font-size: 12.5px; }
.mb-capa p { margin: 0 0 8px; }
.mb-capa p:last-child { margin-bottom: 0; }
.mb-capa .mb-nota { border: 0; padding: 0; background: none; margin: 0; }

/* módulos */
.mb-modulo { margin: 34px 0 6px; padding: 16px 18px; border-radius: 14px; background: var(--mb-degrade); color: #fff;
  box-shadow: 0 8px 24px rgba(2, 47, 70, .35); }
.mb-modulo span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.mb-modulo h2 { margin: 3px 0 0; font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: .01em; }

/* capítulos */
.mb-capitulo { margin-top: 14px; padding: 16px 20px 8px; border-radius: 14px; background: var(--mb-cartao); border: 1px solid var(--mb-borda);
  scroll-margin-top: 12px; transition: box-shadow .4s, border-color .4s; }
.mb-capitulo.mb-destaque { border-color: rgba(118, 183, 213, .6); box-shadow: 0 0 0 3px rgba(46, 118, 151, .25); }
.mb-capitulo > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.mb-num { flex-shrink: 0; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: rgba(46, 118, 151, .35);
  border: 1px solid rgba(118, 183, 213, .3); }
.mb-capitulo h3 { flex: 1; margin: 2px 0 0; font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.mb-cap-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 2px; }
.mb-selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--mb-texto2); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }
.mb-selo-link { color: var(--mb-claro) !important; border-color: rgba(46, 118, 151, .35); background: rgba(46, 118, 151, .1); }
.mb-selo-link:hover { background: rgba(46, 118, 151, .2); text-decoration: none !important; }
.mb-elo { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .08);
  background: transparent; color: var(--mb-mudo); cursor: pointer; }
.mb-elo:hover { color: var(--mb-claro); border-color: rgba(46, 118, 151, .4); }
.mb-elo.copiado { color: #fff; background: rgba(46, 118, 151, .45); border-color: rgba(118, 183, 213, .5); }
.mb-sub { margin: 18px 0 6px; font-size: 13.5px; font-weight: 650; color: #fff; padding-top: 12px; border-top: 1px solid var(--mb-linha); }
.mb-capitulo p { margin: 0 0 10px; }
.mb-capitulo ul, .mb-capa ul { margin: 0 0 10px; padding-left: 20px; list-style: disc outside; }
.mb-capitulo ul ul { list-style-type: circle; }
.mb-capitulo li { margin: 3px 0; display: list-item; }
.mb-capitulo li::marker { color: var(--mb-azul); }
.mb-capitulo li > ul { margin: 4px 0 4px; }
.mb-capitulo ol, .mb-capa ol { margin: 0 0 10px; padding-left: 24px; list-style: decimal outside; }
.mb-capitulo li > ol { margin: 4px 0 4px; }
.mb strong { font-weight: 650; color: #fff; }
.mb code { font-family: var(--mb-mono); font-size: 12px; padding: 1px 5px; border-radius: 5px; background: rgba(118, 183, 213, .1);
  border: 1px solid rgba(118, 183, 213, .18); color: #cfe6f1; overflow-wrap: anywhere; }
.mb a.mb-pag { color: var(--mb-claro); border-bottom: 1px dotted rgba(118, 183, 213, .55); text-decoration: none; }
.mb a.mb-pag:hover { border-bottom-style: solid; }

/* notas (citações) */
.mb-nota { margin: 4px 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(46, 118, 151, .1);
  border: 1px solid rgba(46, 118, 151, .3); border-left: 3px solid var(--mb-claro); font-size: 12.8px; color: var(--mb-texto); }
.mb-nota p { margin: 0 0 6px; }
.mb-nota p:last-child { margin: 0; }

/* tabelas */
.mb-tabela { margin: 6px 0 14px; overflow-x: auto; border-radius: 10px; border: 1px solid var(--mb-borda); background: var(--mb-cartao2); }
.mb-tabela table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; }
.mb-tabela th { text-align: left; font-weight: 650; font-size: 11.5px; letter-spacing: .02em; color: var(--mb-claro);
  background: rgba(46, 118, 151, .12); padding: 8px 10px; border-bottom: 1px solid rgba(46, 118, 151, .3); white-space: nowrap; }
.mb-tabela td { padding: 7px 10px; border-top: 1px solid var(--mb-linha); vertical-align: top; color: var(--mb-texto); }
.mb-tabela tbody tr:first-child td { border-top: 0; }
.mb-tabela tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.mb-tabela td:first-child { font-weight: 600; }

/* videoaulas do capítulo */
.mb-aulas { margin: 0 0 14px; padding: 10px 12px 12px; border-radius: 12px; background: rgba(46, 118, 151, .07); border: 1px solid rgba(46, 118, 151, .22); }
.mb-aulas-titulo { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mb-claro); margin-bottom: 8px; }
.mb-aulas-titulo small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mb-mudo); }
.mb-aulas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.mb-aula { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); color: var(--mb-texto) !important; text-decoration: none !important;
  transition: background .15s, border-color .15s, transform .15s; }
.mb-aula:hover { background: rgba(46, 118, 151, .22); border-color: rgba(118, 183, 213, .45); transform: translateY(-1px); }
.mb-aula b { font-size: 11px; font-weight: 700; color: #fff; background: var(--mb-degrade); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.mb-aula span { font-size: 12px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mb-aula i { font-style: normal; font-size: 11px; color: var(--mb-mudo); font-variant-numeric: tabular-nums; }

/* busca */
.mb mark.mb-achado { background: rgba(118, 183, 213, .32); color: #fff; border-radius: 3px; padding: 0 1px; }
.mb mark.mb-achado.atual { background: #2E7697; box-shadow: 0 0 0 2px rgba(118, 183, 213, .6); }

.mb-rodape { margin-top: 26px; font-size: 11.5px; color: var(--mb-mudo); text-align: center; }

/* ── chave Cérebro | Leitura */
.mb-seg { display: inline-flex; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; overflow: hidden; }
.mb-seg button { border: 0; background: transparent; color: var(--mb-texto2); padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.mb-seg button + button { border-left: 1px solid rgba(255, 255, 255, .08); }
.mb-seg button:hover { background: rgba(255, 255, 255, .05); color: var(--mb-texto); }
.mb-seg button[aria-pressed="true"] { background: rgba(46, 118, 151, .35); color: #fff; }
.mb:not(.mb-em-leitura) .mb-so-leitura { display: none !important; }

/* ── vista Cérebro: o radar à esquerda, o painel da área à direita */
/* O radar fica só com a largura que a altura permite (quase quadrado); o painel da área fica com todo o resto. */
.mb-cerebro { flex: 1; min-height: 0; display: flex; container: mbc / size; background:
  radial-gradient(ellipse 45% 70% at 28% 52%, rgba(46, 118, 151, .10), transparent 70%), #070a0b; }
.mb-radar-col { flex: 0 0 auto; width: min(56cqw, 98cqh); min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.mb-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 22px 0; font-family: var(--mb-mono); font-size: 12px;
  letter-spacing: .12em; color: rgba(255, 255, 255, .5); text-transform: uppercase; }
.mb-stats b { color: var(--mb-claro); font-weight: 700; margin-left: 6px; letter-spacing: .04em; }
.mb-radar { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 10px 12px; }
.mb-svg { width: 100%; height: 100%; max-height: 100%; display: block; overflow: visible; font-family: var(--mb-mono); }
.mb-anel { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.mb-anel-aulas { stroke: rgba(229, 185, 74, .42); }
.mb-anel-in { stroke: rgba(255, 255, 255, .06); stroke-dasharray: 2 5; }
/* a varredura gira pelo próprio SVG (animateTransform); quem pede menos movimento no sistema recebe ela parada */
.mb-varredura { pointer-events: none; }

/* fatias: linhas tracejadas por capítulo */
.mb-traco { fill: none; stroke: var(--c); stroke-width: 2.9; stroke-dasharray: 9 4.2; transition: opacity .2s, stroke-width .2s; }
.mb-alvo { fill: transparent; cursor: pointer; }
.mb-banda { transition: opacity .2s; }
.mb-fatia { transition: opacity .25s, filter .25s; }
.mb-svg.mb-foco .mb-banda:not(.foco) { opacity: .28; }
.mb-svg.mb-foco .mb-ponto-cap:not(.foco) { opacity: .35; }
.mb-banda.foco .mb-traco { stroke-width: 3.6; opacity: 1 !important; filter: drop-shadow(0 0 3px var(--c)); }
.mb-svg.mb-com-tema .mb-fatia:not(.escolhida) { opacity: .3; }
.mb-svg.mb-com-tema .mb-rotulo:not(.escolhida) { opacity: .45; }
.mb-fatia.escolhida .mb-traco { filter: drop-shadow(0 0 2px var(--c)); }
.mb-fatia.foco .mb-traco { opacity: 1 !important; }

/* rótulos das áreas */
.mb-rotulo { cursor: pointer; transition: opacity .25s; outline: none; }
.mb-rotulo rect { fill: rgba(7, 10, 11, .92); stroke: var(--c); stroke-width: 1.2; transition: fill .15s; }
.mb-rotulo text { fill: var(--c); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-anchor: middle; }
.mb-rotulo:hover rect, .mb-rotulo:focus-visible rect, .mb-rotulo.escolhida rect { fill: rgba(20, 28, 32, .98); stroke-width: 1.8; }

/* pontos, hexágonos e centro */
.mb-ponto-cap { fill: var(--c); cursor: pointer; transition: r .15s, opacity .2s; }
.mb-ponto-cap.foco, .mb-ponto-cap:hover { r: 5; filter: drop-shadow(0 0 4px var(--c)); }
.mb-ponto-aula { fill: var(--c); cursor: pointer; opacity: .9; transition: r .15s; }
.mb-ponto-aula:hover, .mb-ponto-aula.foco { r: 4.4; opacity: 1; filter: drop-shadow(0 0 4px var(--c)); }
.mb-hex { fill: #0b1012; stroke: var(--c); stroke-width: 1.4; cursor: pointer; transition: fill .15s; }
.mb-hex.apostila { fill: rgba(118, 183, 213, .08); }
.mb-hex:hover, .mb-hex.foco { fill: var(--c); }
.mb-legenda-anel { fill: rgba(255, 255, 255, .72); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; }
.mb-centro-seg { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; }
.mb-centro { cursor: pointer; outline: none; }
.mb-centro circle { transition: filter .2s; }
.mb-centro:hover circle, .mb-centro:focus-visible circle { filter: drop-shadow(0 0 9px rgba(229, 185, 74, .65)); }
.mb-centro-num { fill: #1c1405; font-size: 21px; font-weight: 700; text-anchor: middle; }
.mb-centro-rot { fill: rgba(28, 20, 5, .78); font-size: 8px; font-weight: 700; letter-spacing: .18em; text-anchor: middle; }

/* a dinâmica das pílulas (23/10/2026): os números do alto e o do centro correm até os da área em foco (algarismos da
   mesma largura; cada número com a largura do maior valor dele), o nome numa linha só e o detalhe com a altura de duas
   (o radar não anda de uma área para outra); a área em foco no degradê da Creative, com o fio */
.mb-stats b.mb-gf-num { display: inline-block; font-variant-numeric: tabular-nums; }
.mb-centro-num { font-variant-numeric: tabular-nums; }
.mb-gf-alto { display: flex; flex-direction: column; padding: 4px 22px 0; font-size: 12px; line-height: 1.45; }
.mb-gf-rot { display: block; min-height: 1.45em; color: var(--mb-claro); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-gf-sub { display: block; min-height: 2.9em; color: var(--mb-mudo); }
.mb-rotulo.mb-gf-foco rect { fill: var(--mb-gf-degrade); stroke: rgba(118, 183, 213, .45); stroke-width: 1; }
.mb-rotulo.mb-gf-foco text { fill: #fff; }
.mb-fatia.mb-gf-foco .mb-traco { stroke: var(--mb-gf-degrade); }
.mb-rotulo:focus-visible rect { stroke: #76B7D5; stroke-width: 2; }

/* dica ao passar o mouse */
.mb-dica { position: absolute; left: 0; top: 0; z-index: 4; max-width: 300px; padding: 9px 12px; border-radius: 10px; pointer-events: none;
  background: rgba(9, 13, 15, .96); border: 1px solid rgba(118, 183, 213, .28); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.4; }
.mb-dica b { font-weight: 700; }
.mb-dica span { color: var(--mb-texto2); }
.mb-dica small { color: var(--mb-mudo); font-size: 11px; }

/* painel da área */
.mb-painel { flex: 1 1 auto; min-width: 340px; overflow-y: auto; padding: 18px 24px 30px; border-left: 1px solid rgba(255, 255, 255, .06);
  background: rgba(10, 13, 14, .85); scrollbar-width: thin; container: mbp / inline-size; }
.mb-p-topo { --c: #76B7D5; margin-bottom: 12px; }
.mb-p-chip { display: inline-block; font-family: var(--mb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--c);
  border: 1px solid var(--c); border-radius: 5px; padding: 2px 8px; }
.mb-p-topo h3 { margin: 10px 0 4px; font-size: 16px; font-weight: 650; line-height: 1.35; }
.mb-p-topo p { margin: 0; font-size: 12.5px; color: var(--mb-texto2); line-height: 1.55; }
.mb-p-voltar { border: 0; background: none; color: var(--mb-claro); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 0 10px; }
.mb-p-voltar:hover { text-decoration: underline; }
.mb-p-sub { margin: 16px 0 8px; font-family: var(--mb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mb-mudo); }
.mb-p-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mb-p-legenda li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; color: var(--mb-texto2); line-height: 1.5; }
.mb-p-legenda b { color: #fff; font-weight: 650; }
.mb-p-legenda i { display: block; width: 18px; height: 14px; margin-top: 3px; }
.lg-fatia { background: repeating-linear-gradient(90deg, #4ADE80 0 4px, transparent 4px 7px) top/100% 3px no-repeat,
  repeating-linear-gradient(90deg, #4ADE80 0 4px, transparent 4px 7px) center/100% 3px no-repeat,
  repeating-linear-gradient(90deg, #4ADE80 0 4px, transparent 4px 7px) bottom/100% 3px no-repeat; opacity: .9; }
.lg-cap { background: radial-gradient(circle, #76B7D5 0 3.5px, transparent 4px); }
.lg-aula { background: radial-gradient(circle, #A78BFA 0 2.5px, transparent 3px) 0 50%/9px 9px repeat-x; }
.lg-hex { clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); background: #2DD4BF; width: 14px !important; margin-left: 2px; }
.lg-centro { border-radius: 50%; width: 14px !important; margin-left: 2px; background: linear-gradient(135deg, #F0CB62, #9C7519); box-shadow: 0 0 0 2px rgba(229, 185, 74, .5); }
.mb-p-temas, .mb-p-caps { display: flex; flex-direction: column; gap: 6px; }
.mb-p-tema, .mb-p-cap { display: grid; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; color: var(--mb-texto);
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 9px 11px;
  transition: background .15s, border-color .15s; font: inherit; }
.mb-p-tema { grid-template-columns: 4px minmax(0, 1fr) auto; }
.mb-p-tema i { width: 4px; height: 30px; border-radius: 3px; background: var(--c); }
.mb-p-tema > b { font-family: var(--mb-mono); font-size: 13px; color: var(--c); }
.mb-p-tema strong, .mb-p-cap strong { display: block; font-size: 12.8px; font-weight: 650; line-height: 1.35; }
.mb-p-tema small, .mb-p-cap small { display: block; font-size: 11.3px; color: var(--mb-mudo); margin-top: 2px; line-height: 1.35; }
.mb-p-tema:hover, .mb-p-cap:hover { background: rgba(255, 255, 255, .05); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.mb-p-cap { grid-template-columns: 30px minmax(0, 1fr) 10px; }
.mb-p-cap > b { font-family: var(--mb-mono); font-size: 11.5px; color: var(--c); text-align: center; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 6px; padding: 2px 0; }
.mb-p-cap > i { font-style: normal; color: var(--mb-mudo); font-size: 16px; }
.mb-p-cap.marcado { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.mb-p-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.mb-p-nums div { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); border-radius: 9px; padding: 7px 9px; }
.mb-p-nums b { display: block; font-family: var(--mb-mono); font-size: 15px; color: #fff; }
.mb-p-nums span { font-size: 10.5px; color: var(--mb-mudo); text-transform: uppercase; letter-spacing: .06em; }
.mb-p-trans { display: flex; flex-wrap: wrap; gap: 5px; }
.mb-p-trans button { font-family: var(--mb-mono); font-size: 11.5px; font-weight: 600; color: #cfe6f1; cursor: pointer; padding: 3px 8px; border-radius: 6px;
  background: rgba(118, 183, 213, .08); border: 1px solid rgba(118, 183, 213, .22); }
.mb-p-trans button:hover { background: rgba(118, 183, 213, .2); }
.mb-p-aulas { display: flex; flex-direction: column; gap: 4px; }
.mb-p-aulas a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 8px;
  color: var(--mb-texto) !important; text-decoration: none !important; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .05); font-size: 12px; }
.mb-p-aulas a:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.mb-p-aulas b { font-size: 10.5px; font-weight: 700; color: #06110c; background: var(--c); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.mb-p-aulas span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-p-aulas i { font-style: normal; font-size: 11px; color: var(--mb-mudo); font-variant-numeric: tabular-nums; }
.mb-p-ler { margin-top: 16px; width: 100%; }

/* ── fluxo Áreas → Capítulos → Resumo, tudo no painel */
.mb-radar-col { transition: width .35s ease; }
.mb-cerebro.mb-lendo .mb-radar-col { width: min(40cqw, 98cqh); }   /* resumo aberto: radar menor, painel largo para ler */
.mb-p-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding-bottom: 10px; }
.mb-p-nav .mb-p-voltar { padding: 0; }
.mb-p-voltar.discreto { color: var(--mb-texto2); font-weight: 500; }
.mb-p-sep { color: var(--mb-mudo); }
.mb-p-nav-fim { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }

/* radar: capítulo aberto e capítulos achados na busca */
.mb-svg.mb-com-cap .mb-fatia.escolhida .mb-banda:not(.aberto) { opacity: .42; }
.mb-banda.aberto .mb-traco { stroke-width: 3.7; opacity: 1 !important; filter: drop-shadow(0 0 3px var(--c)); }
.mb-ponto-cap.aberto { r: 5.2; filter: drop-shadow(0 0 5px var(--c)); }
.mb-svg.mb-buscando .mb-banda:not(.achado) { opacity: .14; }
.mb-svg.mb-buscando .mb-ponto-cap:not(.achado) { opacity: .22; }
.mb-banda.achado .mb-traco { opacity: 1 !important; }

/* resumo do capítulo, na cor da área (--c) */
.mb-cap-painel { --c: #76B7D5; }
.mb-cap-topo { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 8px; }
.mb-cap-topo .mb-num { background: color-mix(in srgb, var(--c) 26%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); color: #fff; }
.mb-cap-topo h3 { flex: 1; margin: 2px 0 0; font-size: 17px; font-weight: 650; line-height: 1.35; }
.mb-cap-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mb-cap-painel .mb-selo-link { color: var(--c) !important; border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.mb-cap-painel .mb-elo:hover { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.mb-cap-texto { font-size: 13.5px; line-height: 1.62; }
.mb-cap-texto p { margin: 0 0 10px; }
.mb-cap-texto ul { margin: 0 0 10px; padding-left: 20px; list-style: disc outside; }
.mb-cap-texto ul ul { list-style-type: circle; margin: 4px 0; }
.mb-cap-texto ol { margin: 0 0 10px; padding-left: 24px; list-style: decimal outside; }   /* lista numerada (passos) */
.mb-cap-texto li > ol { margin: 4px 0; }
.mb-cap-texto li { margin: 3px 0; display: list-item; }
.mb-cap-texto li::marker { color: var(--c); }
.mb-cap-texto ol > li::marker { font-weight: 700; }
.mb-cap-texto .mb-sub { border-top-color: color-mix(in srgb, var(--c) 25%, transparent); }
.mb-cap-texto .mb-sub::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 8px; vertical-align: 1px; }
.mb-cap-texto a { color: color-mix(in srgb, var(--c) 78%, #fff); }
.mb-cap-texto a.mb-pag { color: color-mix(in srgb, var(--c) 78%, #fff); border-bottom-color: color-mix(in srgb, var(--c) 55%, transparent); }
.mb-cap-texto .mb-nota { background: color-mix(in srgb, var(--c) 9%, transparent); border-color: color-mix(in srgb, var(--c) 30%, transparent);
  border-left-color: var(--c); }
.mb-cap-texto .mb-tabela th { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--c) 32%, transparent); }
.mb-cap-texto .mb-aulas { background: color-mix(in srgb, var(--c) 7%, transparent); border-color: color-mix(in srgb, var(--c) 24%, transparent); }
.mb-cap-texto .mb-aulas-titulo { color: var(--c); }
.mb-cap-texto .mb-aula:hover { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.mb-cap-texto .mb-aula b { background: var(--c); color: #0b0d0e; }
.mb-cap-texto .mb-aulas-lista { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* anterior / próximo */
.mb-p-passos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.mb-p-passo { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; font: inherit; color: var(--mb-texto);
  padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .07); transition: background .15s, border-color .15s; }
.mb-p-passo.prox { text-align: right; align-items: flex-end; }
.mb-p-passo small { font-size: 11px; color: var(--c); font-weight: 600; }
.mb-p-passo span { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.mb-p-passo:hover { background: color-mix(in srgb, var(--c) 10%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); }

/* busca: resultados com trecho */
.mb-p-caps.mb-p-resultados { display: flex !important; flex-direction: column; }
.mb-p-trecho { display: block; font-style: normal; font-size: 11.8px; color: var(--mb-texto2); margin-top: 4px; line-height: 1.45; }
.mb-p-trecho mark { background: rgba(229, 185, 74, .28); color: #fff; border-radius: 3px; padding: 0 1px; }
.mb-p-sobre { font-size: 12.3px; color: var(--mb-texto2); padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.mb-p-sobre p { margin: 0 0 8px; }
.mb-p-sobre p:last-child { margin: 0; }
.mb-p-sobre .mb-nota { border: 0; background: none; padding: 0; margin: 0; }

/* Painel largo: legenda, áreas, números e aulas em colunas, para caber sem rolar. */
@container mbp (min-width: 440px) {
  .mb-p-topo h3 { font-size: 17px; }
  .mb-p-legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .mb-p-temas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mb-p-nums { grid-template-columns: repeat(5, 1fr); }
  .mb-p-nums span { font-size: 9.5px; letter-spacing: .04em; }
  .mb-p-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mb-p-cap { padding: 7px 9px; gap: 8px; grid-template-columns: 26px minmax(0, 1fr) 8px; }
  .mb-p-cap strong { font-size: 12.3px; }
  .mb-p-aulas { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .mb-p-ler { width: auto; }
}
@container mbp (min-width: 660px) {
  .mb-p-topo p { font-size: 13px; max-width: 70ch; }
  .mb-p-nums span { font-size: 10.5px; }
}

/* ── abas "Cérebro" | "Mapa Mental" (16/10/2026) */
.mb-abas { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); flex-shrink: 0; }
.mb-aba { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 8px; margin-bottom: -1px; border: 0;
  border-bottom: 2px solid transparent; background: transparent; color: var(--mb-texto2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: color .15s, border-color .15s; }
.mb-aba svg { flex-shrink: 0; display: block; color: var(--mb-mudo); }
.mb-aba:hover { color: var(--mb-texto); }
.mb-aba[aria-selected="true"] { color: #fff; border-bottom-color: var(--mb-claro); }
.mb-aba[aria-selected="true"] svg { color: var(--mb-claro); }

/* ── o mapa mental: ramos centrados na vertical, ligados por linhas na cor da área; cada ramo abre e fecha */
.mb-mapa { flex: 1; min-height: 0; display: flex; flex-direction: column; background:
  radial-gradient(ellipse 50% 70% at 18% 50%, rgba(46, 118, 151, .10), transparent 70%), #070a0b; }
.mb-mm-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 20px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04); }
.mb-mm-niveis { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-mm-info { font-size: 11.5px; color: var(--mb-mudo); }
.mb-mm-tela { flex: 1; min-height: 0; overflow: auto; padding: 22px 28px 48px; cursor: grab; scrollbar-width: thin; }
.mb-mm-tela.arrastando { cursor: grabbing; user-select: none; }
/* O mapa tem a largura do conteúdo (nada encolhe para caber na tela: quem rola é a .mb-mm-tela). */
.mb-mm-arvore { display: inline-flex; width: max-content; min-width: 100%; }
.mb-mm-no { --c: var(--mb-claro); display: flex; align-items: center; position: relative; }
.mb-mm-linha { display: flex; align-items: center; gap: 5px; flex-shrink: 0; position: relative; z-index: 1; }
.mb-mm-rot { max-width: 380px; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--mb-texto);
  background: #111416; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); cursor: pointer; overflow-wrap: anywhere;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.mb-mm-rot:hover { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
/* Folha (ramo sem nada dentro): texto longo cortado em 4 linhas; o clique mostra inteiro (e corta de novo). */
.mb-mm-folha > .mb-mm-linha > .mb-mm-rot { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.mb-mm-folha.inteiro > .mb-mm-linha > .mb-mm-rot { display: block; -webkit-line-clamp: none; }
.mb-mm-rot code { font-size: 11.5px; }
.mb-mm-k-raiz > .mb-mm-linha > .mb-mm-rot { max-width: 240px; padding: 12px 16px; font-size: 14px; font-weight: 650; color: #fff;
  background: var(--mb-degrade); border-color: rgba(118, 183, 213, .45); box-shadow: 0 0 24px rgba(46, 118, 151, .35); }
.mb-mm-k-area > .mb-mm-linha > .mb-mm-rot { max-width: 260px; padding: 8px 13px; font-size: 13px; font-weight: 650; color: #fff;
  background: color-mix(in srgb, var(--c) 18%, #0d0f10); border-color: var(--c); }
.mb-mm-k-cap > .mb-mm-linha > .mb-mm-rot { max-width: 320px; border-left: 3px solid var(--c); font-weight: 550; color: #fff; }
.mb-mm-k-cap > .mb-mm-linha > .mb-mm-rot > b { font-family: var(--mb-mono); font-size: 11.5px; color: var(--c); margin-right: 2px; }
.mb-mm-k-sub > .mb-mm-linha > .mb-mm-rot { font-weight: 650; color: #fff; background: color-mix(in srgb, var(--c) 9%, #0f1112); }
.mb-mm-k-texto > .mb-mm-linha > .mb-mm-rot { background: transparent; border-style: dashed; color: var(--mb-texto2); max-width: 440px; }
.mb-mm-k-nota > .mb-mm-linha > .mb-mm-rot { background: rgba(46, 118, 151, .1); border-color: rgba(46, 118, 151, .35);
  border-left: 3px solid var(--mb-claro); max-width: 440px; }
.mb-mm-k-tabela > .mb-mm-linha > .mb-mm-rot { font-family: var(--mb-mono); font-size: 11.5px; color: var(--c); }
.mb-mm-k-linha > .mb-mm-linha > .mb-mm-rot { font-size: 12px; padding: 4px 10px; }
.mb-mm-mais { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; border: 1.5px solid var(--c); background: #0b0d0e;
  color: var(--c); font-family: var(--mb-mono); font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; }
.mb-mm-mais:hover { background: color-mix(in srgb, var(--c) 20%, #0b0d0e); }
.mb-mm-no.aberto > .mb-mm-linha > .mb-mm-mais { background: var(--c); color: #071016; font-size: 13px; }
.mb-mm-ir { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--mb-mudo); cursor: pointer; flex-shrink: 0; }
.mb-mm-ir:hover { color: var(--mb-claro); border-color: rgba(46, 118, 151, .4); }
/* Ligações: um traço do ramo de cima até o tronco; o tronco desce pelos ramos de dentro, com a curva no primeiro e no último. */
.mb-mm-filhos { display: none; flex-direction: column; flex-shrink: 0; padding-left: 18px; position: relative; }
.mb-mm-no.aberto > .mb-mm-filhos { display: flex; }
.mb-mm-filhos::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; border-top: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
.mb-mm-filhos > .mb-mm-no { padding: 3px 0 3px 18px; }
.mb-mm-filhos > .mb-mm-no::before, .mb-mm-filhos > .mb-mm-no::after { content: ''; position: absolute; left: 0; pointer-events: none;
  border: 0 solid color-mix(in srgb, var(--c) 55%, transparent); }
.mb-mm-filhos > .mb-mm-no::before { top: 0; bottom: 0; border-left-width: 2px; }
.mb-mm-filhos > .mb-mm-no::after { top: 50%; width: 18px; border-top-width: 2px; }
.mb-mm-filhos > .mb-mm-no:first-child::before { top: 50%; width: 18px; border-top-width: 2px; border-top-left-radius: 10px; }
.mb-mm-filhos > .mb-mm-no:last-child::before { top: 0; bottom: calc(50% - 2px); width: 18px; border-bottom-width: 2px; border-bottom-left-radius: 10px; }
.mb-mm-filhos > .mb-mm-no:first-child::after, .mb-mm-filhos > .mb-mm-no:last-child::after { display: none; }
.mb-mm-filhos > .mb-mm-no:only-child::before { top: 50%; bottom: auto; border-left-width: 0; border-bottom-width: 0; border-top-width: 2px; border-radius: 0; }
/* Busca no mapa: os ramos achados acesos; o atual mais forte. */
.mb-mm-no.achado > .mb-mm-linha > .mb-mm-rot { background: rgba(46, 118, 151, .28); border-color: var(--mb-claro); }
.mb-mm-no.achado.atual > .mb-mm-linha > .mb-mm-rot { background: #2E7697; color: #fff; box-shadow: 0 0 0 3px rgba(118, 183, 213, .45); }

@media (max-width: 980px) {
  .mb-cerebro { container-type: normal; flex-direction: column; overflow-y: auto; }
  .mb-radar-col, .mb-cerebro.mb-lendo .mb-radar-col { flex: none; width: auto; }
  .mb-radar { height: min(92vw, 620px); flex: none; }
  .mb-painel { min-width: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); overflow: visible; padding: 16px 16px 30px; }
  .mb-stats { gap: 4px 14px; font-size: 11px; padding: 12px 14px 0; }
  .mb-gf-alto { padding: 4px 14px 0; font-size: 11.5px; }
}

/* ── pouca largura: o índice vira gaveta */
@media (max-width: 1100px) {
  .mb-indice { width: 236px; }
  .mb-busca input { width: 220px; }
}
@media (max-width: 860px) {
  .mb-barra { padding: 10px 14px; }
  .mb-so-celular { display: inline-flex; }
  .mb-acoes { width: 100%; }
  .mb-busca { flex: 1; min-width: 160px; }
  .mb-busca input { width: 100%; }
  .mb-btn[data-link] span, .mb-btn[data-apostilas] span { display: none; }
  .mb-indice { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: min(300px, 86%); background: #0f0f0f;
    box-shadow: 12px 0 30px rgba(0, 0, 0, .5); transform: translateX(-105%); transition: transform .2s; }
  .mb-indice-aberto .mb-indice { transform: none; }
  .mb-texto { padding: 0 14px 16px; }
  .mb-capitulo { padding: 14px 14px 6px; }
  .mb-capitulo > header { flex-wrap: wrap; }
  .mb-cap-acoes { width: 100%; justify-content: flex-start; padding-left: 46px; }
  .mb-aulas-lista { grid-template-columns: 1fr; }
  .mb-abas { padding: 0 14px; }
  .mb-mm-barra { padding: 10px 14px; }
  .mb-mm-info { width: 100%; }
  .mb-mm-tela { padding: 14px 14px 40px; }
  .mb-mm-rot, .mb-mm-k-texto > .mb-mm-linha > .mb-mm-rot, .mb-mm-k-nota > .mb-mm-linha > .mb-mm-rot { max-width: 240px; }
  /* Raiz + áreas (com o número) cabem em 375 px depois de "Recolher". */
  .mb-mm-k-raiz > .mb-mm-linha > .mb-mm-rot { max-width: 120px; padding: 8px 10px; font-size: 12px; }
  .mb-mm-k-area > .mb-mm-linha > .mb-mm-rot { max-width: 140px; padding: 7px 10px; font-size: 12px; }
  .mb-mm-filhos { padding-left: 12px; }
  .mb-mm-filhos::before { width: 12px; }
  .mb-mm-filhos > .mb-mm-no { padding-left: 12px; }
  .mb-mm-filhos > .mb-mm-no::after, .mb-mm-filhos > .mb-mm-no:first-child::before,
  .mb-mm-filhos > .mb-mm-no:last-child::before { width: 12px; }
}