/* Fonte local (sem CDN). Se o arquivo faltar, o navegador usa a fonte do sistema. */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Tokens. Regra do projeto: fora deste bloco não existe cor, medida fixa,
   sombra nem duração solta. Todo componente usa estas variáveis.
   ========================================================================== */
:root {
  /* Cores: pastel, com um roxo forte de destaque */
  --cor-fundo: #fff7ef;
  --cor-superficie: #ffffff;
  --cor-superficie-suave: #fff1e3;
  --cor-quadro: var(--cor-superficie-suave);   /* o fundo do quadro de evolução (a loja troca) */
  --cor-texto: #3a3347;
  --cor-texto-suave: #675d78;
  --cor-borda: #ecd9c6;
  --cor-erro: #b3303f;
  --largura-aviso-experimento: 40rem;
  --largura-pagina-conta: 36rem;
  --largura-pagina-conta-larga: 72rem;
  --altura-termo: 32rem;
  --largura-trilho: 3.25rem;
  --altura-trilho: 1.75rem;
  --espacamento-codigo: 0.12em;
  --largura-campo-curto: 12rem;
  --altura-barra-custo: 1.5rem;
  --cor-experimento: #b3303f; --cor-experimento-texto: #ffffff;          /* a caixa do experimento da loja: vermelha em qualquer tema, para não se confundir com a tela */
  --cor-aviso-fundo: #fff0c9;

  --cor-destaque: #6d4de0;
  --cor-destaque-texto: #ffffff;
  --cor-destaque-suave: #e7defc;
  --cor-destaque-suave-texto: #3b2a8f;
  --cor-brilho: rgba(109, 77, 224, 0.55);
  --cor-brilho-fim: rgba(109, 77, 224, 0);

  /* Uma cor fixa por função */
  --cor-executar: #26794b;
  --cor-executar-texto: #ffffff;
  --cor-parar: #f7c1c7;
  --cor-parar-texto: #6b1b2a;

  /* Conversa */
  --cor-balao-usuario: #e7defc;
  --cor-balao-usuario-texto: #3a3347;
  --cor-balao-tutor: #ffe9d6;
  --cor-balao-tutor-texto: #3a3347;

  /* Editor e saída: sóbrios, alto contraste */
  --cor-codigo-fundo: #fffdfa;
  --cor-codigo-texto: #3a3347;
  --cor-codigo-linha-erro: #ffe0e3;
  --cor-codigo-palavra: #7a3dbf;
  --cor-codigo-string: #1f7a4d;
  --cor-codigo-numero: #a34e00;
  --cor-codigo-comentario: #666d78;
  --cor-codigo-nome: #1d5fbf;
  --cor-codigo-embutida: #9c2e66;
  --cor-codigo-margem: var(--cor-fundo);          /* a coluna dos números de linha */
  --cor-codigo-linha-numero: var(--cor-texto-suave);
  --cor-saida-fundo: #2b2538;
  --cor-saida-texto: #f6f0ff;
  --cor-saida-erro: #ffa3ad;
  --cor-saida-entrada: #9fdcff;
  --cor-terminal-fundo: #0c0c0c;        /* a janela do programa é um terminal (v0.4): a mesma em todo tema */
  --cor-terminal-barra: #1f1f1f;
  --cor-terminal-borda: #3a3a3a;
  --cor-terminal-texto: #e8e8e8;
  --cor-terminal-resposta: #8be9fd;
  --cor-terminal-erro: #ff8a80;
  --cor-tinta-icone: #2b2540;           /* o desenho do ícone de projeto sobre a tinta pastel: escuro em todo modo (a tinta não muda) */
  --cor-tecla-branca: #fbfaf6;          /* o teclado do piano (v0.5): um piano é igual em todo tema */
  --cor-tecla-preta: #1b1b1d;
  --cor-tecla-borda: #7d7d82;
  --cor-tecla-nome: #55555c;
  /* As faixas (o ícone ao lado do nível): a cor de cada faixa do judô */
  --cor-faixa-2: #ffffff;
  --cor-faixa-3: #9aa0a6;
  --cor-faixa-4: #2f6fdb;
  --cor-faixa-5: #f2c200;
  --cor-faixa-6: #f28c1b;
  --cor-faixa-7: #2e9e4f;
  --cor-faixa-8: #7b3fbf;
  --cor-faixa-9: #7a4a21;
  --cor-faixa-10: #1d1a22;
  --cor-dan: #1d1a22;
  --largura-faixa: 2.5rem;
  --tecla-pin: 4.5rem;           /* the PIN keypad: big keys for small fingers (iPad) */
  --ponto-pin: 1.1rem;
  --largura-senha-pin: 16rem;
  --largura-campo-pin: 7rem;
  --altura-faixa: 0.6rem;
  --listra: 0.3rem;
  --filete-dan: 0.1rem;
  --passo-dan: 0.3rem;
  --largura-dan: 0.15rem;
  --tamanho-bolinha: 1.1rem;
  --n-bolinhas: 2;      /* quantas bandeirinhas tem a linha do Ranking que mais tem (a tela troca o valor) */
  --n-bolinhas: 2;      /* quantas bandeirinhas a linha do Ranking com mais bandeirinhas tem (a tela troca) */
  --tamanho-bandeira: 1.5rem;
  --largura-item-loja: 9rem;
  --largura-temas: 15rem;
  --largura-dialogo-largo: 48rem;
  --largura-campo-numero: 6rem;
  --largura-balao-aviso: 24rem;     /* o balão "o programa está esperando você" */
  --ponta-balao: 0.5rem;            /* a ponta de um balão que aponta para algo */
  --largura-credito-valor: 8rem;
  --largura-credito-data: 6.5rem;
  --tamanho-misterio: 3rem;
  --largura-item-bichinho: 6.5rem;
  --duracao-presente: 1.6s;
  --amostra-largura: 100%;
  --amostra-altura: 3.4rem;
  --amostra-pilula: 1.6rem;
  --amostra-pilula-altura: 0.7rem;
  --largura-faixa-experimento: 44rem;
  --cor-sobreposicao: rgba(58, 51, 71, 0.4);
  --cor-codigo-inline: rgba(58, 51, 71, 0.08);

  /* Fontes e tamanhos de texto */
  --fonte: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --fonte-codigo: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --fonte-titulo: var(--fonte);       /* os títulos: a fonte do kit (o Padrão usa a mesma do texto) */
  --texto-pequeno: 0.82rem;
  --texto-minimo: 0.62rem;             /* o nome escrito numa tecla do piano */
  --texto: 0.95rem;
  --texto-grande: 1.08rem;
  --titulo-2: 1.3rem;
  --titulo-1: 1.7rem;
  --peso-normal: 500;
  --peso-forte: 800;

  /* Espaçamentos */
  --janela-desenho-largura: 30rem;     /* a janela flutuante do desenho */
  --certificado-largura: 44rem;        /* o certificado da faixa (v0.4) */
  --certificado-letras: 0.12em;
  --aprender-coluna: 22rem;           /* as lições e os projetos guiados lado a lado */
  --aprender-cartao: 12rem;
  --janela-desenho-minima: 16rem;
  --janela-alca: 1.75rem;              /* o canto que redimensiona as janelas flutuantes */
  --tecla-largura: 1.9rem;             /* uma tecla branca do piano desenhado (a preta tem 60% dela) */
  --tecla-altura: 7.5rem;
  --piano-folga: 6.5rem;               /* a barra, a linha do nome e a cola, embaixo das teclas */
  --janela-borda-puxar: 0.5rem;        /* as bordas da direita e de baixo, que também puxam */
  --espaco-0: 0.2rem;
  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2.5rem;

  /* Bordas, raios e foco */
  --raio-pequeno: 0.7rem;
  --raio: 1.25rem;
  --raio-grande: 1.75rem;
  --borda: 2px;
  --borda-tracejada: 1px;
  --anel-desafio: 0.25rem;
  --foco: 3px;
  --foco-distancia: 2px;

  /* Sombras e brilho */
  --sombra: 0 4px 14px rgba(80, 60, 110, 0.12);
  --sombra-forte: 0 8px 24px rgba(80, 60, 110, 0.18);
  --brilho-raio: 12px;

  /* Movimento */
  --duracao: 150ms;
  --duracao-aviso: 250ms;
  --duracao-pulso: 1.8s;
  --repeticoes-pulso: 3;
  --subida: -1px;

  /* Medidas de layout (tela de referência: Full HD, 1920x1080) */
  --altura-botao: 48px;
  --textura: none;            /* a textura do kit (o <html> traz a do kit em uso) */
  --textura-tamanho: auto;
  --textura-opacidade: 0;
  --cor-gema: #1f9e6e;         /* a gema: verde, legível no claro e no escuro (ícone, a 3:1 no fundo) */
  --icone: 1.25em;            /* um ícone do kit ao lado de um texto */
  --icone-baixo: -0.25em;     /* alinhado com a linha do texto */
  --icone-sozinho: 1.5rem;    /* um botão só com o ícone */
  --altura-cabecalho: 4.5rem;
  --largura-pagina: 72rem;
  --largura-dialogo: 34rem;
  --altura-botao-grande: 7rem;
  --largura-balao: 15rem;      /* a caixinha de ajuda que abre ao passar o mouse */
  --altura-espaco: 12.5rem;      /* cada espaço de "Vamos fazer algo novo?" */
  --altura-projeto: 4.5rem;    /* cada espaço de "Meus projetos": igual para todos, qualquer que seja o título */
  --altura-linha-erro: 1.4em;
  --respiro-codigo: 0.25em;
  --altura-saida: 9rem;
  --altura-lista-vazia: 8rem;
  --altura-passo: 2.25rem;       /* cada passo do quadro: uma lista densa de 36 px (o mínimo da auditoria de acessibilidade); os outros botões seguem 48 px */
  --altura-passos: 11.5rem;      /* cerca de cinco passos; a lista rola dentro dela, para o chat do tutor sempre aparecer */
  --largura-cartao: 15rem;
  --largura-historico: 18rem;
  --altura-historico: 22rem;
  --tamanho-contador: 1.2rem;
  --tamanho-bolinha: 0.65rem;   /* a bolinha de aviso na quina de uma etiqueta (não cobre o número) */
  --largura-cartao-perfil: 12rem;
  --tamanho-avatar: 4rem;
  --tamanho-avatar-cabecalho: 2.2rem;
  --tamanho-emoji-ideia: 2.4rem;
  --altura-barra: 0.9rem;
  --largura-lateral: 22.5rem;      /* o painel da direita (Evolução e Ranking) */
  --altura-barra-curta: 0.45rem;
  --tamanho-nivel: 4.5rem;
  --largura-etiqueta: 18rem;
  --seta: 0.5rem;
  --duracao-nivel: 600ms;
  --escala-pulo: 1.5;

  /* Papel de parede (a tela inicial usa; static/css/temas.css troca estes valores) */
  --papel-imagem: none;
  --papel-tamanho: auto;
  --papel-posicao: 0 0;
  --tile: 100px; --dx: 0; --dy: 0;      /* as camadas do papel animado redefinem estes três (o quadradinho e a direção) */
  --cometa-comprimento: 200px; --cometa-espessura: 2px;            /* os cometas do papel animado: a linha, a cabeça brilhante e o brilho em volta usam a cor da passada (currentColor) */
  --cometa-cabeca: radial-gradient(circle at 2px 1px, currentColor 0 2px, rgba(255, 255, 255, 0) 3.5px);
  --cometa-cauda: linear-gradient(to right, currentColor, rgba(255, 255, 255, 0));
  --cometa-brilho: 0 0 7px 0 currentColor;
  --cometa-cor-1: #e8f0ff; --cometa-cor-2: #ffe9a8; --cometa-cor-3: #ffc2e6; --cometa-cor-4: #b8ffe9;     /* as cores das passadas: azul-gelo, dourado, rosa e verde-água */
  --cometa-cor-5: #d6c8ff; --cometa-cor-6: #ffd0a0; --cometa-cor-7: #bfe9ff;                                /* lilás, laranja-claro e azul-ciano */
  --papel-cometa-min: 0s; --papel-cometa-max: 0s;     /* o intervalo entre um cometa e outro (0s = sem cometas): o script sorteia dentro dele */
  --papel-animado: 0;                   /* o papel de parede animado (2026-10-15): até duas camadas, cada uma com o seu quadradinho, tempo e direção */
  --papel-anim-1-imagem: none; --papel-anim-1-tile: 100px; --papel-anim-1-seg: 60s; --papel-anim-1-dx: 0; --papel-anim-1-dy: 0; --papel-anim-1-pulso: 0s;
  --papel-anim-2-imagem: none; --papel-anim-2-tile: 100px; --papel-anim-2-seg: 60s; --papel-anim-2-dx: 0; --papel-anim-2-dy: 0; --papel-anim-2-pulso: 0s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  font-size: var(--texto);
  line-height: 1.45;
}

body.tela-inicial,
body.tela-perfil,
body.tela-espaco {
  background-image: var(--papel-imagem);
  background-size: var(--papel-tamanho);
  background-position: var(--papel-posicao);
  background-attachment: fixed;
}

/* O papel de parede animado (2026-10-15, "Chuva de estrelas"): duas camadas fixas atrás da tela; cada uma é um quadradinho que se repete e anda
   exatamente um quadradinho (o laço não tem emenda), bem devagar, só com transform e opacidade (leve para o iPad) e sem tocar no texto. A
   camada de perto pode pulsar o brilho, devagar (nunca perto de 3 piscadas por segundo). **Na tela de programação fica parado** (ali vale o
   papel fixo, como em todo papel) e **com "reduzir movimento" também**. O <html> ganha data-animado só quando o papel em uso se mexe. */
[data-animado] body.tela-inicial,
[data-animado] body.tela-perfil { background-image: none; }
[data-animado] body.tela-inicial::before, [data-animado] body.tela-inicial::after,
[data-animado] body.tela-perfil::before, [data-animado] body.tela-perfil::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; inset: calc(var(--tile) * -1);
  background-size: var(--tile) var(--tile); will-change: transform;
}
[data-animado] body.tela-inicial::before, [data-animado] body.tela-perfil::before {
  --tile: var(--papel-anim-1-tile); --dx: var(--papel-anim-1-dx); --dy: var(--papel-anim-1-dy);
  background-image: var(--papel-anim-1-imagem); animation: pp-papel-deriva var(--papel-anim-1-seg) linear infinite;
}
[data-animado] body.tela-inicial::after, [data-animado] body.tela-perfil::after {
  --tile: var(--papel-anim-2-tile); --dx: var(--papel-anim-2-dx); --dy: var(--papel-anim-2-dy);
  background-image: var(--papel-anim-2-imagem);
  animation: pp-papel-deriva var(--papel-anim-2-seg) linear infinite, pp-papel-pulso var(--papel-anim-2-pulso) ease-in-out infinite alternate;
}
/* Os cometas (2026-10-16): linhas finas com a cabeça brilhante que static/js/cometas.js solta de tempos em tempos (a cada 2 ou 3 segundos na Chuva
   de estrelas), num lugar, num ângulo e com uma cor sorteados; o JavaScript só cria, anima e apaga o elemento: o desenho é este. Só nas telas
   inicial e do perfil/loja (o script confere), e nunca com "reduzir movimento". */
.papel-cometa {
  position: fixed; z-index: -1; top: 0; left: 0; width: var(--cometa-comprimento); height: var(--cometa-espessura);
  border-radius: var(--cometa-espessura); pointer-events: none; opacity: 0;
  background: var(--cometa-cabeca), var(--cometa-cauda); box-shadow: var(--cometa-brilho); will-change: transform, opacity;
}
@keyframes pp-papel-deriva { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--tile) * var(--dx)), calc(var(--tile) * var(--dy)), 0); } }
@keyframes pp-papel-pulso { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-animado] body.tela-inicial, [data-animado] body.tela-perfil { background-image: var(--papel-imagem); }
  [data-animado] body.tela-inicial::before, [data-animado] body.tela-perfil::before { display: none; animation: none; }
  [data-animado] body.tela-inicial::after, [data-animado] body.tela-perfil::after { display: none; animation: none; }
}

h1, h2 { margin: 0 0 var(--espaco-2); font-weight: var(--peso-forte); }
h1, h2, h3 { font-family: var(--fonte-titulo); }
h1 { font-size: var(--titulo-1); }
h2 { font-size: var(--titulo-2); }

a { color: var(--cor-destaque); }

/* ---------- Botões: todos com a mesma altura mínima ---------- */
button, .botao, summary {
  min-height: var(--altura-botao);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-1);
  padding: 0 var(--espaco-3);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-weight: var(--peso-forte);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duracao), box-shadow var(--duracao);
}
.botao:hover { transform: translateY(var(--subida)); box-shadow: var(--sombra); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Todo campo de texto do app tem o mesmo visual (cada tela só acerta a largura); :where deixa a regra fraca de propósito. */
:where(input[type="text"], input[type="password"], input[type="email"], textarea) {
  box-sizing: border-box;
  min-height: var(--altura-botao);
  padding: var(--espaco-1) var(--espaco-2);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
}
:where(input[type="text"], input[type="password"], input[type="email"]) { width: 100%; }
:where(input, textarea)::placeholder { color: var(--cor-texto-suave); opacity: 1; }

:is(button, a, input, textarea, summary):focus-visible {
  outline: var(--foco) solid var(--cor-destaque);
  outline-offset: var(--foco-distancia);
}

.botao-grande {
  min-height: var(--altura-botao-grande);
  font-size: var(--texto-grande);
  box-shadow: var(--sombra);
}

/* Principal = pastel; o roxo forte fica só para o destaque do momento */
.botao-principal {
  background: var(--cor-destaque-suave);
  border-color: var(--cor-destaque);
  color: var(--cor-destaque-suave-texto);
}
.botao-executar { background: var(--cor-executar); border-color: var(--cor-executar); color: var(--cor-executar-texto); }
.botao-parar { background: var(--cor-parar); border-color: var(--cor-parar); color: var(--cor-parar-texto); }
.botao-ajuda { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-destaque-texto); }
.botao-ajuda[hidden] { display: none; }
.botao-sublinhado { text-decoration: underline; padding: 0; min-width: 0; min-height: 0; line-height: inherit; color: var(--cor-destaque); font-weight: var(--peso-forte); }       /* um link no meio de uma frase (a regra do alvo de toque deixa os links em texto de fora) */
.botao-link {
  min-width: var(--altura-botao);
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font: inherit;
  cursor: pointer;
}

/* ---------- Destaque único: um elemento por vez (ver destaque.js) ---------- */
.destaque {
  box-shadow: 0 0 0 var(--foco) var(--cor-destaque);
  animation: pulso var(--duracao-pulso) ease-in-out var(--repeticoes-pulso);
}
.botao.destaque {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: var(--cor-destaque-texto);
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 var(--foco) var(--cor-destaque), 0 0 0 0 var(--cor-brilho); }
  50% { box-shadow: 0 0 0 var(--foco) var(--cor-destaque), 0 0 0 var(--brilho-raio) var(--cor-brilho-fim); }
}

/* ---------- Páginas ---------- */
.pagina {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: var(--espaco-4) var(--espaco-3);
}

.cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);       /* o meio fica no centro de verdade */
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--altura-cabecalho);
  padding: var(--espaco-1) var(--espaco-3);
  background: var(--cor-superficie);
  border-bottom: var(--borda) solid var(--cor-borda);
}
.cabecalho-nome { margin: 0; font-size: var(--titulo-2); flex: 0 1 auto; }
.cabecalho .botao { white-space: nowrap; }
.cabecalho-avatar { font-size: var(--tamanho-avatar-cabecalho); line-height: 1; }
.identidade { display: inline-flex; align-items: center; gap: var(--espaco-2); min-width: 0; }
.identidade-nome, .identidade .cabecalho-nome { flex: none; margin: 0; font-size: var(--titulo-2); font-weight: var(--peso-forte); }
.etiqueta {
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  border: var(--borda) solid var(--cor-borda);
}

.vazio { color: var(--cor-texto-suave); }
.aviso { padding: var(--espaco-2); background: var(--cor-aviso-fundo); border-radius: var(--raio); }
.erro { color: var(--cor-erro); min-height: var(--altura-linha-erro); margin: var(--espaco-1) 0; }
.novo, .projetos { margin-bottom: var(--espaco-4); }
/* o espaço 8 (Mais ideias) fica sempre no fim da segunda linha, mesmo com poucas ideias */
@media (min-width: 1101px) {
  .grade-novo > li:last-child { grid-column: 4; grid-row: 2; }
  /* a ideia e a tarefa ficam empilhadas na primeira coluna; as sugestões ocupam o resto */
  .grade-novo > li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .grade-novo > li:nth-child(2) { grid-column: 1; grid-row: 2; }
}

/* Projetos e ideias: dois blocos de 8 espaços (2 linhas de 4), todos da mesma altura */
.grade-espacos {
  list-style: none;
  margin: 0 0 var(--espaco-2);
  padding: 0;
  display: grid;
  gap: var(--espaco-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grade-projetos { grid-auto-rows: var(--altura-projeto); }
.grade-novo { grid-auto-rows: var(--altura-espaco); }
.grade-espacos > li { min-height: 0; }
.grade-espacos > li > * { height: 100%; }
.cartao-acao { width: 100%; height: 100%; font-size: var(--texto-grande); box-shadow: var(--sombra); }
.espaco-vazio { grid-column: span 3; }
.cartao-projeto {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  height: 100%;
  min-height: var(--altura-botao);
  padding: var(--espaco-1) var(--espaco-2);
  overflow: hidden;
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  color: inherit;
  text-decoration: none;
  font-weight: var(--peso-forte);
  transition: transform var(--duracao), box-shadow var(--duracao);
}
.cartao-projeto:hover { transform: translateY(var(--subida)); box-shadow: var(--sombra); }
.projeto-item { position: relative; }
.projeto-item > .projeto-acoes { position: absolute; top: 50%; transform: translateY(-50%); right: var(--espaco-1); height: auto; display: flex; gap: var(--espaco-1); opacity: 0; transition: opacity var(--duracao); }
.projeto-item:hover > .projeto-acoes, .projeto-item:focus-within > .projeto-acoes { opacity: 1; }
@media (hover: none) { .projeto-item > .projeto-acoes { opacity: 1; } .projeto-item .cartao-projeto { padding-right: calc(var(--altura-botao) + var(--espaco-3)); } }
.botao-mini { min-width: var(--altura-botao); min-height: var(--altura-botao); padding: 0; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cor-superficie); color: var(--cor-texto); cursor: pointer; font-size: var(--texto); line-height: 1; }
.botao-mini:hover, .botao-mini:focus-visible { border-color: var(--cor-destaque); }
.botao-apagar { border-color: var(--cor-erro); }
.projeto-icone { flex: none; font-size: var(--titulo-2); }
.projeto-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; }

.cartao-ideia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-1);
  width: 100%;
  height: 100%;
  padding: var(--espaco-2);
  text-align: left;
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: transform var(--duracao), box-shadow var(--duracao);
}
.cartao-ideia:hover { transform: translateY(var(--subida)); box-shadow: var(--sombra); }
.cartao-ideia:disabled { opacity: 0.5; cursor: wait; }
.ideia-emoji { font-size: var(--tamanho-emoji-ideia); line-height: 1; }
.ideia-titulo { font-weight: var(--peso-forte); font-size: var(--texto-grande); }
.ideia-desc { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-ideia { overflow: hidden; }
.ideia-titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }

/* Perfis */
.cartoes-perfis { display: flex; flex-wrap: wrap; gap: var(--espaco-3); margin-top: var(--espaco-3); }
/* "Quem vai brincar hoje?": a entrada dos adultos, discreta, embaixo dos cartões (um link com o ícone do tema, do tamanho de um botão) */
.adultos { margin-top: var(--espaco-3); padding-top: var(--espaco-2); border-top: var(--borda) solid var(--cor-borda); }
.link-adultos {
  display: inline-flex; align-items: center; gap: var(--espaco-1); min-height: var(--altura-botao); padding: 0 var(--espaco-2);
  border-radius: var(--raio); color: var(--cor-texto-suave); font-weight: var(--peso-forte); text-decoration: none;
}
.link-adultos:hover { color: var(--cor-destaque); background: var(--cor-destaque-suave); }
.link-adultos-nota { font-weight: normal; font-size: var(--texto-pequeno); }
.link-adultos-nota::before { content: "·"; margin: 0 var(--espaco-1); }
.cartao-perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-1);
  width: var(--largura-cartao-perfil);
  min-height: var(--largura-cartao-perfil);
  padding: var(--espaco-3) var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  color: var(--cor-texto);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duracao), box-shadow var(--duracao);
}
.cartao-perfil:hover { transform: translateY(var(--subida)); box-shadow: var(--sombra-forte); }
.cartao-novo { background: var(--cor-destaque-suave); border: var(--borda) dashed var(--cor-destaque); color: var(--cor-destaque-suave-texto); }
.perfil-avatar { font-size: var(--tamanho-avatar); line-height: 1; }
.perfil-mais { color: var(--cor-destaque); font-weight: 700; }   /* um + do tema (o emoji ➕ ficava cinza-escuro no modo escuro) */
.perfil-nome { font-size: var(--texto-grande); font-weight: var(--peso-forte); }

/* Diálogos */
.dialogo {
  border: none;
  border-radius: var(--raio-grande);
  padding: var(--espaco-3);
  box-shadow: var(--sombra-forte);
  width: min(var(--largura-dialogo), 92vw);
  color: var(--cor-texto);
  background: var(--cor-superficie);
}
.dialogo::backdrop { background: var(--cor-sobreposicao); }
.dialogo input[type="text"] {
  width: 100%;
  min-height: var(--altura-botao);
  padding: 0 var(--espaco-2);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  font: inherit;
}
.dialogo-botoes { display: flex; justify-content: flex-end; gap: var(--espaco-1); }
.rotulo { display: block; margin: var(--espaco-2) 0 var(--espaco-1); font-weight: var(--peso-forte); padding: 0; }
.escolhas { border: none; margin: 0; padding: 0; }
.grade-escolhas { display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
.escolha { position: relative; }
.escolha input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.escolha span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--altura-botao);
  min-height: var(--altura-botao);
  padding: 0 var(--espaco-1);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-weight: var(--peso-forte);
}
.escolha input:checked + span {
  background: var(--cor-destaque-suave);
  border-color: var(--cor-destaque);
  color: var(--cor-destaque-suave-texto);
}
.escolha input:focus-visible + span { outline: var(--foco) solid var(--cor-destaque); outline-offset: var(--foco-distancia); }

/* ---------- Espaço de trabalho (otimizado para 1920x1080) ---------- */
.espaco {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--espaco-2);
  padding: var(--espaco-2);
  height: calc(100vh - var(--altura-cabecalho));
}
.coluna {
  min-height: 0;
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
}
.coluna-codigo, .coluna-chat { display: flex; flex-direction: column; gap: var(--espaco-2); }
.coluna-codigo { position: relative; }      /* o console de erro sobe por cima do editor */

.editor-caixa {
  flex: 1;
  min-height: 0;
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-codigo-fundo);
}
.editor-caixa #editor, .editor-caixa .CodeMirror { height: 100%; }
.editor-caixa .CodeMirror {
  font-family: var(--fonte-codigo);
  font-size: var(--texto-grande);
  background: var(--cor-codigo-fundo);
  color: var(--cor-codigo-texto);
}
.editor-caixa .CodeMirror-gutters { background: var(--cor-codigo-margem); border-right: var(--borda) solid var(--cor-borda); }
.editor-caixa .CodeMirror-linenumber { color: var(--cor-codigo-linha-numero); }
.editor-caixa .CodeMirror-cursor { border-left-color: var(--cor-codigo-texto); }
.editor-caixa .CodeMirror .cm-keyword { color: var(--cor-codigo-palavra); font-weight: var(--peso-forte); }
.editor-caixa .CodeMirror .cm-string { color: var(--cor-codigo-string); }
.editor-caixa .CodeMirror .cm-number { color: var(--cor-codigo-numero); }
.editor-caixa .CodeMirror .cm-comment { color: var(--cor-codigo-comentario); }
.editor-caixa .CodeMirror .cm-def { color: var(--cor-codigo-nome); }
.editor-caixa .CodeMirror .cm-builtin { color: var(--cor-codigo-embutida); }
.editor-caixa .CodeMirror .cm-variable-2 { color: var(--cor-codigo-texto); }
.linha-erro { background: var(--cor-codigo-linha-erro); }

.barra-execucao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-1); }
.barra-execucao .botao-ajuda { margin-left: auto; }
.estado { font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
.estado[data-tipo="rodando"] { color: var(--cor-executar); }
.estado[data-tipo="erro"] { color: var(--cor-erro); }

.saida {
  height: var(--altura-saida);
  margin: 0;
  padding: var(--espaco-2);
  overflow: auto;
  border-radius: var(--raio);
  background: var(--cor-saida-fundo);
  color: var(--cor-saida-texto);
  font-family: var(--fonte-codigo);
  font-size: var(--texto-pequeno);
  white-space: pre-wrap;
  word-break: break-word;
}
.saida .erro { color: var(--cor-saida-erro); min-height: 0; margin: 0; }
.saida .entrada { color: var(--cor-saida-entrada); }

.entrada { display: flex; gap: var(--espaco-1); }
.entrada input {
  flex: 1;
  min-height: var(--altura-botao);
  padding: 0 var(--espaco-2);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  font: inherit;
  font-family: var(--fonte-codigo);
}
.entrada input:disabled { background: var(--cor-fundo); }

/* A janela do programa (v0.4): um terminal. Do tamanho da janela do desenho; só o texto do programa e o cursor piscando na linha da
   pergunta, onde ela digita (sem caixa, sem balão, sem botão). Igual em TODO tema: o #id vence o que um tema faz na saída e nos
   campos de texto (a Oficina e o Hacker vestiam o painel de saída antigo), e nada de enfeite (::before/::after) entra aqui */
#janela-console {
  width: var(--janela-desenho-largura); height: calc(var(--janela-desenho-largura) * 3 / 4);
  background: var(--cor-terminal-fundo); color: var(--cor-terminal-texto);
  border: var(--borda) solid var(--cor-terminal-borda); border-radius: var(--raio-pequeno); box-shadow: var(--sombra-forte);
}
#janela-console .janela-barra {
  background: var(--cor-terminal-barra); color: var(--cor-terminal-texto); border: 0; border-bottom: var(--borda) solid var(--cor-terminal-borda);
  border-radius: 0; font-family: var(--fonte);
}
#janela-console .janela-barra .botao-mini { background: transparent; color: var(--cor-terminal-texto); border-color: transparent; box-shadow: none; }
#janela-console .console-corpo {
  flex: 1; min-height: 0; overflow: auto; padding: var(--espaco-1) var(--espaco-2); cursor: text;
  background: var(--cor-terminal-fundo); color: var(--cor-terminal-texto);
  font-family: var(--fonte-codigo); font-size: var(--texto-pequeno); line-height: 1.45; text-align: left;
}
#janela-console .saida {
  display: inline; height: auto; min-height: 0; max-height: none; padding: 0; margin: 0; overflow: visible;
  border: 0; border-radius: 0; box-shadow: none; background: none; background-image: none; color: inherit; font: inherit; white-space: pre-wrap;
}
#janela-console .saida::before, #janela-console .saida::after, #janela-console .entrada::before, #janela-console .entrada::after { content: none; display: none; }
#janela-console .saida .entrada { color: var(--cor-terminal-resposta); }
#janela-console .saida .erro { color: var(--cor-terminal-erro); font-weight: inherit; }
#janela-console .entrada { display: inline; position: static; margin: 0; padding: 0; gap: 0; border: 0; background: none; box-shadow: none; }
#janela-console .entrada[hidden] { display: none; }
#janela-console .entrada input {
  display: inline; width: auto; min-width: 1ch; min-height: 0; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--cor-terminal-resposta); caret-color: var(--cor-terminal-texto);
  font: inherit; line-height: inherit; vertical-align: baseline; appearance: none;
}
#janela-console .entrada input:focus, #janela-console .entrada input:focus-visible { outline-color: transparent; box-shadow: none; }
#janela-console:focus-within { outline: var(--foco) solid var(--cor-terminal-resposta); outline-offset: calc(var(--foco) * -1); }   /* o foco do teclado continua visível: na janela */

/* O piano (v0.5): as 88 teclas, que acendem quando o programa toca uma nota e tocam quando ela clica. Igual em todo tema, como o
   terminal: a moldura é a do terminal, as teclas são brancas e pretas, e a tecla acesa usa a cor de destaque do tema */
#janela-piano {
  width: calc(var(--janela-desenho-largura) * 1.3); height: calc(var(--tecla-altura) + var(--piano-folga));
  background: var(--cor-terminal-fundo); color: var(--cor-terminal-texto);
  border: var(--borda) solid var(--cor-terminal-borda); border-radius: var(--raio-pequeno); box-shadow: var(--sombra-forte);
}
#janela-piano .janela-barra {
  background: var(--cor-terminal-barra); color: var(--cor-terminal-texto); border: 0; border-bottom: var(--borda) solid var(--cor-terminal-borda);
  border-radius: 0; font-family: var(--fonte);
}
#janela-piano .janela-barra .botao-mini { background: transparent; color: var(--cor-terminal-texto); border-color: transparent; box-shadow: none; }
#janela-piano .janela-alca-canto { background: linear-gradient(135deg, transparent 50%, var(--cor-terminal-borda) 50%, var(--cor-terminal-borda) 58%, transparent 58%, transparent 70%, var(--cor-terminal-borda) 70%, var(--cor-terminal-borda) 78%, transparent 78%); }
#janela-piano .piano-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--espaco-1); padding: var(--espaco-1) var(--espaco-2); }
#janela-piano .piano-teclado { flex: none; overflow-x: auto; overflow-y: hidden; padding-bottom: var(--espaco-1); }
#janela-piano .piano-teclas { position: relative; display: flex; height: var(--tecla-altura); width: max-content; }
#janela-piano .piano-tecla, #janela-piano .piano-tecla::before, #janela-piano .piano-tecla::after { text-shadow: none; }
#janela-piano .piano-tecla::before, #janela-piano .piano-tecla::after { content: none; display: none; }
#janela-piano .piano-tecla {
  position: relative; font-weight: normal; text-transform: none; letter-spacing: normal; transform: none; transition: none;
  background-image: none; flex: none; width: var(--tecla-largura); height: 100%; margin: 0; padding: 0 0 var(--espaco-0);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  background: var(--cor-tecla-branca); color: var(--cor-tecla-nome); border: var(--borda) solid var(--cor-tecla-borda); border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
  font-family: var(--fonte-codigo); font-size: var(--texto-minimo); line-height: 1.1; cursor: pointer; min-height: 0; box-shadow: none;
}
#janela-piano .piano-tecla-preta {
  position: absolute; top: 0; z-index: 1; width: calc(var(--tecla-largura) * 0.6); height: 62%;
  margin-left: calc(var(--tecla-largura) * -0.3); background: var(--cor-tecla-preta); color: var(--cor-tecla-branca); border-color: var(--cor-tecla-preta);
}
#janela-piano .piano-tecla-do { font-weight: 700; color: var(--cor-tecla-preta); }
#janela-piano .piano-tecla.tecla-acesa { background: var(--cor-destaque); color: var(--cor-destaque-texto); border-color: var(--cor-destaque); }
#janela-piano .piano-tecla:focus-visible { outline: var(--foco) solid var(--cor-terminal-resposta); outline-offset: calc(var(--foco) * -1); }
#janela-piano .piano-info { margin: 0; font-size: var(--texto-pequeno); color: var(--cor-terminal-texto); }
#janela-piano .piano-info code { color: var(--cor-terminal-resposta); font-family: var(--fonte-codigo); }
#janela-piano .piano-cola { margin: 0; font-size: var(--texto-pequeno); color: var(--cor-terminal-texto); opacity: 0.85; }

/* O console de erro (v0.4): só existe quando há erro; sobe de baixo por cima do editor */
.console-erro {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 55%; overflow: auto;
  display: flex; flex-direction: column; gap: var(--espaco-1); padding: var(--espaco-2);
  background: var(--cor-superficie); color: var(--cor-texto);
  border: var(--borda) solid var(--cor-erro); border-radius: var(--raio); box-shadow: var(--sombra-forte);
  transform: translateY(110%); transition: transform var(--duracao) ease-out;
}
.console-erro[hidden] { display: none; }
.console-erro-aberto { transform: translateY(0); }
.console-erro-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-1); color: var(--cor-erro); }
.console-erro .erro-resumo { margin: 0; }
.saida-erro { margin: 0; font-family: var(--fonte-codigo); font-size: var(--texto-pequeno); color: var(--cor-erro); white-space: pre-wrap; word-break: break-word; }
.console-erro .botao-ajuda { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .console-erro { transition: none; } }

/* Tutor */
.chat-cabecalho { display: flex; align-items: center; gap: var(--espaco-1); }
.chat-titulo { margin: 0; font-size: var(--titulo-2); }
.chat-lista { flex: 1; min-height: var(--altura-lista-vazia); overflow-y: auto; display: flex; flex-direction: column; gap: var(--espaco-1); }
.chat-boasvindas { color: var(--cor-texto-suave); margin: 0; }
.chat-boasvindas[hidden] { display: none; }
.balao {
  max-width: 92%;
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio);
  overflow-wrap: anywhere;
}
.balao-user { align-self: flex-end; background: var(--cor-balao-usuario); color: var(--cor-balao-usuario-texto); }
.balao-assistant { align-self: flex-start; width: 92%; background: var(--cor-balao-tutor); color: var(--cor-balao-tutor-texto); }   /* every tutor box the same width (João, 2026-10-12) */
.balao-sistema { align-self: center; color: var(--cor-texto-suave); font-style: italic; }
.balao a { color: var(--cor-destaque-suave-texto); font-weight: var(--peso-forte); }
.balao pre, .balao code { font-family: var(--fonte-codigo); font-size: var(--texto-pequeno); }
.balao pre {
  margin: var(--espaco-1) 0 0;
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio);
  background: var(--cor-saida-fundo);
  color: var(--cor-saida-texto);
  overflow-x: auto;
}
.balao code { background: var(--cor-codigo-inline); padding: 0 var(--respiro-codigo); border-radius: var(--raio-pequeno); }
.balao pre code { background: none; padding: 0; }
.chat-form { display: flex; flex-wrap: wrap; gap: var(--espaco-1); align-items: flex-end; }
.chat-form .erro { flex-basis: 100%; margin: 0; }
.botao-ouvir { display: flex; width: fit-content; margin-top: var(--espaco-1); }
.botao[hidden] { display: none; }
.chat-form textarea {
  flex: 1;
  padding: var(--espaco-1) var(--espaco-2);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  font: inherit;
  resize: none;
}

/* Painéis recolhíveis (enunciado, memória) */
.painel {
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--espaco-1) var(--espaco-2);
  background: var(--cor-fundo);
}
.painel summary { cursor: pointer; font-weight: var(--peso-forte); display: flex; align-items: center; gap: var(--espaco-1); }
.painel-status { font-weight: var(--peso-normal); font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
.painel-ajuda { margin: var(--espaco-1) 0; color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.painel textarea, #campo-memoria {
  width: 100%;
  padding: var(--espaco-1) var(--espaco-2);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  font: inherit;
  resize: vertical;
  background: var(--cor-superficie);
  color: var(--cor-texto);
}
.painel-botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-1); margin-top: var(--espaco-1); }
.escolha-feita {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio);
  background: var(--cor-balao-usuario);
  color: var(--cor-balao-usuario-texto);
}
.escolha-feita[hidden] { display: none; }

/* ---------- Telas menores: as duas colunas passam a uma só ---------- */
@media (max-width: 1100px) {
  .espaco { grid-template-columns: minmax(0, 1fr); height: auto; }
  .coluna-codigo .editor-caixa { height: 60vh; flex: none; }
  .coluna-chat { min-height: 70vh; }
  .grade-espacos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .espaco-vazio { grid-column: span 2; }
}

/* ---------- Movimento reduzido: sem animação, só o anel fixo ---------- */
@media (prefers-reduced-motion: reduce) {
  .botao, .cartao-projeto, .cartao-ideia, .cartao-perfil { transition: none; }
  .botao:hover, .cartao-projeto:hover, .cartao-ideia:hover, .cartao-perfil:hover { transform: none; }
  .destaque { animation: none; }
}

/* ---------- Nível, XP e ranking ---------- */
.barra {
  display: block;
  width: 100%;
  height: var(--altura-barra);
  background: var(--cor-destaque-suave);
  border-radius: var(--raio);
  overflow: hidden;
}
.barra-cheia {
  display: block;
  height: 100%;
  background: var(--cor-destaque);
  border-radius: var(--raio);
  transition-property: width;
  transition-timing-function: ease-out;
}
.nivel-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--espaco-1) var(--espaco-2);
  margin-bottom: var(--espaco-3);
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
}
.nivel-selo { font-size: var(--titulo-2); font-weight: var(--peso-forte); }
.nivel-card .barra, .nivel-xp { grid-column: 1 / -1; }
/* A barra da faixa: 3 graus (trechos) com uma bandeirinha em cada divisa */
.trilha-barra { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--espaco-1); }
.faixa-grau-caixa { flex: 1; display: flex; }
.faixa-grau { position: relative; flex: 1; height: var(--altura-barra); overflow: hidden; border-radius: var(--raio); background: var(--cor-destaque-suave); }
.faixa-grau-cheio { position: absolute; inset: 0 auto 0 0; background: var(--cor-destaque); border-radius: var(--raio); }
.bandeira { flex: none; display: inline-flex; line-height: 1; }
/* a bandeirinha é um desenho só (haste e pano com ponta em V) em 3 estados: vazia (contorno), meia e cheia */
.bandeira-svg { width: var(--tamanho-bandeira); height: var(--tamanho-bandeira); flex: none; vertical-align: middle; color: var(--cor-destaque); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bandeira-svg-0 { color: var(--cor-texto-suave); }
.bandeira-svg .b-meio, .bandeira-svg .b-cheio { fill: currentColor; }
.bandeira-svg .b-meio { stroke: none; }
/* a bandeirinha que está segurando a barra: um brilho suave (parado com "movimento reduzido") */
.bandeira-segura { border-radius: var(--raio-pequeno); animation: bandeira-segura var(--duracao-pulso) ease-in-out infinite; }
@keyframes bandeira-segura { 0%, 100% { box-shadow: 0 0 0 0 var(--cor-destaque-suave); } 50% { box-shadow: 0 0 0 var(--espaco-1) var(--cor-destaque-suave); } }
/* XP já ganho que espera uma bandeirinha fechada: roxo listrado (a forma, não só a cor, mostra que está guardado) */
.faixa-grau-espera { background: repeating-linear-gradient(135deg, var(--cor-destaque) 0 var(--listra), var(--cor-superficie) var(--listra) calc(2 * var(--listra))); }
.nivel-falta { color: var(--cor-destaque-suave-texto); font-weight: var(--peso-forte); }
.conceitos-faixa { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-1); font-size: var(--texto-pequeno); }
.conceito-2 { color: var(--cor-executar); font-weight: var(--peso-forte); }
.nivel-card .painel-ajuda { grid-column: 1 / -1; }
.faixa-icone {
  position: relative;
  display: inline-block;
  width: var(--largura-faixa);
  height: var(--altura-faixa);
  vertical-align: middle;
  border: var(--borda) solid var(--cor-texto-suave);
  border-radius: var(--raio);
}
/* um risco preto por dan perto da ponta da faixa (com um filete branco para aparecer em qualquer cor) */
.faixa-dan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--largura-dan);
  background: var(--cor-dan);
  box-shadow: 0 0 0 var(--filete-dan) var(--cor-faixa-2);
}
.faixa-dan:nth-child(1) { right: calc(1 * var(--passo-dan)); }
.faixa-dan:nth-child(2) { right: calc(2 * var(--passo-dan)); }
.faixa-dan:nth-child(3) { right: calc(3 * var(--passo-dan)); }
.faixa-1 { background: transparent; border: var(--borda-tracejada) dashed var(--cor-texto-suave); }   /* sem faixa: só o contorno tracejado */
.faixa-1 .faixa-dan { top: calc(-1 * var(--borda-tracejada)); bottom: calc(-1 * var(--borda-tracejada)); box-shadow: 0 0 0 var(--filete-dan) var(--cor-superficie); }   /* o risco corta o tracejado */
.faixa-2 { background: var(--cor-faixa-2); }
.faixa-3 { background: var(--cor-faixa-3); }
.faixa-4 { background: var(--cor-faixa-4); }
.faixa-5 { background: var(--cor-faixa-5); }
.faixa-6 { background: var(--cor-faixa-6); }
.faixa-7 { background: var(--cor-faixa-7); }
.faixa-8 { background: var(--cor-faixa-8); }
.faixa-9 { background: var(--cor-faixa-9); }
.faixa-10 { background: var(--cor-faixa-10); }
.botao-subir { grid-column: 1 / -1; width: 100%; }
.conceitos-titulo { grid-column: 1 / -1; margin: var(--espaco-1) 0 0; font-size: var(--texto); font-weight: var(--peso-forte); }

/* Ajuda ao passar o mouse (ou focar com o teclado): uma caixinha escura com o texto */
.com-ajuda { position: relative; cursor: help; }
.com-ajuda .balao {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content;
  max-width: var(--largura-balao);
  margin-top: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-pequeno);
  background: var(--cor-texto);
  color: var(--cor-superficie);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-normal);
  line-height: 1.35;
  text-align: left;
  box-shadow: var(--sombra-forte);
}
.com-ajuda:hover .balao, .com-ajuda:focus .balao, .com-ajuda:focus-visible .balao, .com-ajuda.aberto .balao { display: block; }
.ajuda { display: inline-block; margin-left: var(--espaco-1); color: var(--cor-destaque); font-weight: var(--peso-forte); }
.nivel-xp { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }

.ideia-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; gap: var(--espaco-1); }
.ideia-nivel {
  white-space: nowrap; margin-left: auto;
  padding: 0 var(--espaco-1);
  border-radius: var(--raio);
  background: var(--cor-destaque-suave);
  color: var(--cor-destaque-suave-texto);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-forte);
}
/* o desafio da faixa é uma ideia (cartão branco, borda cheia), com um realce a mais: borda de destaque e um anel suave */
.cartao-desafio { border-color: var(--cor-destaque); box-shadow: 0 0 0 var(--anel-desafio) var(--cor-destaque-suave), var(--sombra); }
/* ações (criar o meu, mais ideias, desafio da faixa) parecem botões: fundo suave, borda tracejada, texto centrado; as sugestões continuam brancas */
.cartao-acao { background: var(--cor-destaque-suave); color: var(--cor-destaque-suave-texto); border: var(--borda) dashed var(--cor-destaque); }
.cartao-acao { justify-content: center; text-align: center; }

.versao { padding: var(--espaco-1) var(--espaco-3) var(--espaco-2); text-align: right; color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.pagina-lateral {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--largura-lateral);
  gap: var(--espaco-3);
  max-width: calc(var(--largura-pagina) + var(--largura-lateral));
  margin: 0 auto;
  padding-right: var(--espaco-3);
}
.pagina-lateral > .pagina { max-width: none; margin: 0; }
.lateral {
  align-self: start;
  position: sticky;
  top: var(--espaco-3);
  margin-top: var(--espaco-4);
  padding: var(--espaco-2);
  background: var(--cor-quadro);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: var(--texto-pequeno);
}
.lateral .nivel-card { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--espaco-2); padding: var(--espaco-1) var(--espaco-2); }
.lateral .nivel-selo { font-size: var(--texto-grande); line-height: 1.3; }
.lateral-titulo { font-size: var(--texto-grande); margin: 0 0 var(--espaco-1); }
.lateral-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); margin: 0 0 var(--espaco-1); }
.lateral-cabeca .lateral-titulo { margin: 0; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-1); }
.ranking-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--espaco-1);
  padding: var(--espaco-1);
  border-radius: var(--raio-pequeno);
}
.ranking-progresso { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--espaco-1); margin-top: var(--espaco-1); }
.ranking-progresso .barra { flex: 1; min-width: 0; height: var(--altura-barra-curta); }
/* a barra tem o mesmo comprimento em todas as linhas: as bolinhas e o % ocupam sempre o mesmo espaço */
.ranking-bolinhas { flex: none; display: flex; gap: var(--espaco-1); width: calc(var(--n-bolinhas) * var(--tamanho-bolinha) + (var(--n-bolinhas) - 1) * var(--espaco-1)); }
/* as bandeirinhas do Ranking: a mesma bandeirinha, pequena */
.bolinha { flex: none; display: inline-flex; }
.bolinha .bandeira-svg { width: var(--tamanho-bolinha); height: var(--tamanho-bolinha); }
.ranking-semana { grid-column: 1 / -1; font-size: var(--texto-pequeno); }
.ranking-eu { background: var(--cor-destaque-suave); color: var(--cor-destaque-suave-texto); }
.ranking-eu .barra { background: var(--cor-superficie); }
.ranking-avatar { font-size: var(--texto-grande); line-height: 1; }
.ranking-nome { font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-nivel { color: inherit; font-weight: var(--peso-forte); }

.dialogo-nivel { text-align: center; }
.dialogo-nivel .dialogo-botoes { justify-content: center; }      /* o botão do presente fica no meio da janela */
.nivel-grande .faixa-grande { width: calc(5 * var(--largura-faixa)); height: calc(2 * var(--altura-faixa)); }
.nivel-grande { font-size: var(--tamanho-nivel); font-weight: var(--peso-forte); margin: var(--espaco-1) 0; line-height: 1; color: var(--cor-destaque); }
.nivel-pulo { animation: nivel-pulo var(--duracao-nivel) ease-out; }
.nivel-resumo { min-height: var(--altura-linha-erro); margin: var(--espaco-2) 0; }
@keyframes nivel-pulo { 0% { transform: scale(var(--escala-pulo)); } 100% { transform: scale(1); } }

/* Avisos curtos na barra de cima: ficam logo depois do título, no espaço livre (nada some nem se move) */
.cabecalho-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avisos { flex: 0 0 auto; display: flex; align-items: center; }
.sino { position: relative; flex: 0 0 auto; }
.botao-sino { position: relative; padding-left: var(--espaco-2); padding-right: var(--espaco-2); }
.sino-contador {
  position: absolute;
  top: var(--espaco-0);
  right: var(--espaco-0);
  min-width: var(--tamanho-contador);
  padding: 0 var(--espaco-0);
  background: var(--cor-erro);
  color: var(--cor-destaque-texto);
  border-radius: var(--raio);
  font-size: var(--texto-pequeno);
  line-height: var(--tamanho-contador);
  text-align: center;
}
.historico-avisos {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--espaco-1);
  width: var(--largura-historico);
  max-height: var(--altura-historico);
  overflow-y: auto;
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
  z-index: 30;
}
.historico-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-1); }
.historico-lista li { display: flex; justify-content: space-between; gap: var(--espaco-2); font-weight: var(--peso-forte); }
.historico-motivo { flex: 1; min-width: 0; color: var(--cor-texto-suave); font-weight: normal; font-size: var(--texto-pequeno); }
.historico-quando { color: var(--cor-texto-suave); font-weight: normal; font-size: var(--texto-pequeno); white-space: nowrap; }
.historico-vazio { margin: 0; color: var(--cor-texto-suave); }
.aviso-chip {
  cursor: pointer;
  padding: var(--espaco-1) var(--espaco-3);
  background: var(--cor-destaque);
  color: var(--cor-destaque-texto);
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(-1 * var(--espaco-2)));
  transition: opacity var(--duracao-aviso), transform var(--duracao-aviso);
}
.aviso-chip.entra { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aviso-chip { transition: none; transform: none; }
}
@media (max-width: 1100px) {
  .pagina-lateral { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .lateral { position: static; margin: 0 var(--espaco-3) var(--espaco-3); }
}
@media (prefers-reduced-motion: reduce) {
  .barra-cheia { transition: none; }
  .bandeira-segura { animation: none; }
  .nivel-pulo { animation: none; }
}

/* ---------- Primeiros passos, trecho do tutor e erro em português ---------- */
.passeio {
  margin-bottom: var(--espaco-2);
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-destaque);
  color: var(--cor-destaque-suave-texto);
  border-radius: var(--raio);
  display: grid;
  gap: var(--espaco-1);
}
.passeio:empty { display: none; }
.passeio-passo { margin: 0; font-size: var(--texto-pequeno); font-weight: var(--peso-forte); }
.passeio-texto { margin: 0; font-weight: var(--peso-forte); }
.passeio-codigo {
  margin: 0;
  padding: var(--espaco-1) var(--espaco-2);
  background: var(--cor-superficie);
  color: var(--cor-codigo-texto);
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-codigo);
  user-select: all;
}
.passeio-teclado {
  min-height: var(--altura-botao);
  padding: 0 var(--espaco-2);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio);
  font: inherit;
  font-family: var(--fonte-codigo);
}
.passeio-botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
.passeio-dica { margin: 0; color: var(--cor-erro); font-weight: var(--peso-forte); }

.trecho {
  margin-top: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) dashed var(--cor-destaque);
  border-radius: var(--raio-pequeno);
}
.trecho-titulo { margin: 0; font-size: var(--texto-pequeno); font-weight: var(--peso-forte); color: var(--cor-destaque-suave-texto); }
.trecho pre {
  margin: var(--espaco-1) 0;
  font-family: var(--fonte-codigo);
  white-space: pre-wrap;
}
.copiar-exemplo { margin: var(--espaco-1) 0; }
.trecho-nota { margin: var(--espaco-1) 0 0; font-size: var(--texto-pequeno); color: var(--cor-texto-suave); min-height: var(--altura-linha-erro); }
/* Mini-lição: cartão no chat do tutor e na página da lição */
.licao {
  margin-top: var(--espaco-1);
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-destaque);
  border-radius: var(--raio-pequeno);
  display: grid;
  gap: var(--espaco-1);
}
.licao-titulo { margin: 0; font-weight: var(--peso-forte); color: var(--cor-destaque-suave-texto); }
.licao-texto { margin: 0; }
.licao-nota { margin: 0; color: var(--cor-erro); min-height: var(--altura-linha-erro); font-weight: var(--peso-forte); }
.licao-link { color: var(--cor-destaque-suave-texto); font-weight: var(--peso-forte); }
/* O aviso de que o programa espera: um balão sobre o campo (à direita, para não cobrir a pergunta, que fica à esquerda da saída), com a ponta para baixo.
   Ele flutua: não empurra a saída nem o resto da tela. */
.entrada { position: relative; }
.entrada-aviso { position: absolute; right: 0; bottom: calc(100% + var(--espaco-1)); z-index: 5; max-width: min(100%, var(--largura-balao-aviso)); margin: 0; padding: var(--espaco-1) var(--espaco-2); background: var(--cor-aviso-fundo); color: var(--cor-texto); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pequeno); box-shadow: var(--sombra); font-weight: var(--peso-forte); pointer-events: none; }
.entrada-aviso::after { content: ""; position: absolute; right: var(--espaco-4); top: 100%; border: var(--ponta-balao) solid transparent; border-top-color: var(--cor-borda); }

.CodeMirror .linha-inserida { background: var(--cor-destaque-suave); }

.erro-resumo {
  margin: var(--espaco-1) 0;
  padding: var(--espaco-1) var(--espaco-2);
  background: var(--cor-aviso-fundo);
  color: var(--cor-texto);
  border-radius: var(--raio-pequeno);
  font-weight: var(--peso-forte);
}
.passeio-convite {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-destaque);
  color: var(--cor-destaque-suave-texto);
  border-radius: var(--raio);
}
.passeio-convite > div { flex: 1; }
.passeio-convite h2 { margin: 0; font-size: var(--texto-grande); }
.passeio-convite .painel-ajuda { margin: 0; color: inherit; }

.passeio-etiqueta {
  position: fixed;
  z-index: 20;
  max-width: var(--largura-etiqueta);
  padding: var(--espaco-1) var(--espaco-2);
  background: var(--cor-destaque);
  color: var(--cor-destaque-texto);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-forte);
  font-weight: var(--peso-forte);
  pointer-events: none;
}
.passeio-etiqueta::after { content: ""; position: absolute; border: var(--seta) solid transparent; }
.passeio-etiqueta[data-posicao="abaixo"]::after { bottom: 100%; left: var(--espaco-2); border-bottom-color: var(--cor-destaque); }
.passeio-etiqueta[data-posicao="acima"]::after { top: 100%; left: var(--espaco-2); border-top-color: var(--cor-destaque); }
.passeio-etiqueta[data-posicao="acima-direita"]::after { top: 100%; right: var(--espaco-2); border-top-color: var(--cor-destaque); }
.etiqueta-no-campo .entrada-aviso { display: none; }

/* Presente ao subir de nível e escolha de enfeites */
.escolha input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.presente { margin: var(--espaco-1) 0; font-weight: var(--peso-forte); }

/* ---------- Meu perfil: informações, lojinha e dados ---------- */
a.etiqueta { text-decoration: none; color: inherit; }
.etiqueta-creditos, .etiqueta-gemas { font-weight: var(--peso-forte); white-space: nowrap; flex: none; }   /* quando um aviso aparece na barra, o selo encolhia e quebrava em duas linhas */
.pagina-perfil { max-width: calc(var(--largura-pagina) + var(--largura-lateral)); }          /* a mesma largura e as mesmas margens da tela inicial */
.perfil-secao { margin-bottom: var(--espaco-3); padding: var(--espaco-2) var(--espaco-3); background: var(--cor-superficie); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.perfil-secao h2 { margin-top: 0; }
.perfil-secao h3 { margin: var(--espaco-3) 0 var(--espaco-1); font-size: var(--texto-grande); }
.perfil-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-4); }
.perfil-numeros, .moedas, .premios, .historico-creditos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-1); }
.perfil-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-1) var(--espaco-3); }
.moedas li { padding: var(--espaco-1) var(--espaco-2); background: var(--cor-superficie-suave); border-radius: var(--raio-pequeno); }
.historico-creditos li { display: grid; grid-template-columns: var(--largura-credito-valor) var(--largura-credito-data) minmax(0, 1fr); gap: var(--espaco-2); align-items: baseline; }   /* valor, data, motivo: cada um na sua coluna */
.credito-valor { font-weight: var(--peso-forte); color: var(--cor-executar); text-align: right; }
.credito-data { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.como-ganhar { margin-top: var(--espaco-1); }
.como-ganhar summary { cursor: pointer; font-weight: var(--peso-forte); }
.premio-falta { color: var(--cor-texto-suave); }
.premio-tipo { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.loja-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); grid-template-columns: repeat(auto-fill, minmax(var(--largura-item-loja), 1fr)); }
.loja-item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--espaco-1); padding: var(--espaco-2); text-align: center; background: var(--cor-superficie); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.loja-item-atual { border-color: var(--cor-destaque); background: var(--cor-destaque-suave); }
.loja-emoji { font-size: var(--tamanho-emoji-ideia); line-height: 1; }
.loja-nome { font-weight: var(--peso-forte); }
.loja-estado { font-size: var(--texto-pequeno); font-weight: var(--peso-forte); }
.loja-cartao { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-1); width: 100%; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
.loja-cartao[aria-pressed="true"] { cursor: default; }
.loja-comprar { white-space: nowrap; }
.loja-botao { width: 100%; justify-content: center; white-space: nowrap; }
.loja-botao:disabled { opacity: 1; cursor: default; background: transparent; color: var(--cor-texto); border-color: var(--cor-texto-suave); box-shadow: none; }      /* "Seu" e "Em uso": só contorno, não parece compra */
.loja-comprar:disabled { opacity: 0.55; background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-borda); }
.loja-cartao-fixo { cursor: default; }
.loja-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.loja-titulo .com-ajuda .balao { left: 0; right: auto; transform: none; }   /* the ⓘ is right after the word Loja: the balloon opens to the right */
.so-leitor { position: absolute; width: var(--borda); height: var(--borda); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Amostras: cada item da lojinha mostra o que é (o papel, as duas cores, a borda, o quadro, o destaque), usando os mesmos tokens
   que a página usaria; como os enfeites ficam em [data-...] (temas.css), a amostra pega os valores do próprio item. */
.amostra { display: block; position: relative; width: var(--amostra-largura); height: var(--amostra-altura); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cor-fundo); overflow: hidden; }
.amostra-fundo { background-color: var(--cor-fundo); background-image: var(--papel-imagem); background-size: var(--papel-tamanho); background-position: var(--papel-posicao); }
.amostra-fundo::before { content: ""; position: absolute; inset: var(--espaco-1) var(--espaco-1) auto var(--espaco-1); height: var(--amostra-pilula-altura); border-radius: var(--raio); background: var(--cor-superficie-suave); }
.amostra-destaque { background: var(--cor-fundo); }
.amostra-destaque::after { content: ""; position: absolute; left: var(--espaco-1); bottom: var(--espaco-1); width: var(--amostra-pilula); height: var(--amostra-pilula-altura); border-radius: var(--raio); background: var(--cor-destaque); }
.amostra-destaque::before { content: ""; position: absolute; inset: var(--espaco-1) var(--espaco-1) auto var(--espaco-1); height: var(--amostra-pilula-altura); border-radius: var(--raio); background: var(--cor-destaque-suave); }
.amostra-borda { background: var(--cor-superficie); border-width: calc(var(--borda) * 3); }
.amostra-quadro { background: var(--cor-quadro); }
.amostra-tema { background-color: var(--cor-fundo); background-image: var(--papel-imagem); background-size: var(--papel-tamanho); background-position: var(--papel-posicao); }
.amostra-tema::before { content: ""; position: absolute; inset: var(--espaco-1) var(--espaco-1) var(--espaco-1) 40%; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cor-quadro); }
.amostra-tema::after { content: ""; position: absolute; left: var(--espaco-1); bottom: var(--espaco-1); width: var(--amostra-pilula); height: var(--amostra-pilula-altura); border-radius: var(--raio); background: var(--cor-destaque); }

/* "Meu perfil": o cartão do topo, as seções recolhíveis e a cartela de prêmios */
.perfil-topo { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; }
.perfil-avatar-grande { font-size: var(--tamanho-avatar); line-height: 1; }
.perfil-quem { flex: 1; min-width: 0; }
.perfil-quem p { margin: 0; }
.perfil-nome-grande { font-size: var(--titulo-2); font-weight: var(--peso-forte); }
.perfil-creditos { font-size: var(--texto-grande); font-weight: var(--peso-forte); padding: var(--espaco-1) var(--espaco-3); border-radius: var(--raio); background: var(--cor-destaque-suave); color: var(--cor-destaque-suave-texto); text-decoration: none; white-space: nowrap; }
.perfil-creditos span { font-size: var(--texto-pequeno); }
.perfil-xp { display: flex; align-items: center; gap: var(--espaco-2); margin: var(--espaco-2) 0; }
.perfil-xp .barra { flex: 1; }
.perfil-xp-texto { font-weight: var(--peso-forte); white-space: nowrap; }
.perfil-recolhivel > summary { cursor: pointer; list-style: none; }
.perfil-recolhivel > summary h2 { display: inline; margin: 0; font-size: var(--titulo-2); }
.perfil-recolhivel > summary::-webkit-details-marker { display: none; }
.perfil-recolhivel > summary::after { content: " ▾"; color: var(--cor-texto-suave); }
.perfil-recolhivel[open] > summary::after { content: " ▴"; }
.historico-creditos li { display: flex; gap: var(--espaco-2); }

/* A faixa fixa de "experimentando": o visual muda por alguns segundos, e dá para comprar ou voltar */

/* A janela do desenho (turtleweb): parece a janela do turtle, flutuante, arrastável e redimensionável; em toque ou tela estreita
   vira um painel embaixo */
.janela-desenho {
  position: fixed;
  z-index: 30;
  top: var(--espaco-4);
  left: var(--espaco-4);
  width: var(--janela-desenho-largura);
  max-width: 95vw;
  max-height: 90vh;
  min-width: var(--janela-desenho-minima);
  min-height: var(--altura-botao);
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-forte);
  overflow: hidden;
}
.janela-desenho[hidden] { display: none; }
/* As alças de redimensionar (static/js/janela.js): um canto grande com o desenho de linhas e as bordas da direita e de baixo */
.janela-alca { position: absolute; z-index: 2; touch-action: none; }
.janela-alca-canto {
  right: 0; bottom: 0; width: var(--janela-alca); height: var(--janela-alca); cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--cor-borda) 50%, var(--cor-borda) 58%, transparent 58%, transparent 70%, var(--cor-borda) 70%, var(--cor-borda) 78%, transparent 78%);
}
.janela-alca-direita { top: 0; right: 0; bottom: var(--janela-alca); width: var(--janela-borda-puxar); cursor: ew-resize; }
.janela-alca-baixo { left: 0; bottom: 0; right: var(--janela-alca); height: var(--janela-borda-puxar); cursor: ns-resize; }
.janela-redimensionando, .janela-redimensionando * { user-select: none; }
#janela-console .janela-alca-canto { background: linear-gradient(135deg, transparent 50%, var(--cor-terminal-borda) 50%, var(--cor-terminal-borda) 58%, transparent 58%, transparent 70%, var(--cor-terminal-borda) 70%, var(--cor-terminal-borda) 78%, transparent 78%); }
.janela-recolhida .janela-alca { display: none; }
.janela-barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-0) var(--espaco-1) var(--espaco-0) var(--espaco-2);
  background: var(--cor-superficie-suave);
  color: var(--cor-texto);
  border-bottom: var(--borda) solid var(--cor-borda);
  cursor: grab;
  touch-action: none;
  user-select: none;
  flex: none;
}
.janela-barra:active { cursor: grabbing; }
.janela-titulo { flex: 1; font-weight: var(--peso-forte); text-align: center; }
.janela-barra .botao-mini { flex: none; }
.janela-corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.janela-recolhida { height: auto !important; min-height: 0; resize: none; }
.janela-recolhida .janela-corpo { display: none; }
.janela-recolhida .janela-barra { border-bottom: 0; }
/* O desenho ocupa a janela inteira: sem o quadro e a moldura do turtleweb, só o que o turtle mostra */
.janela-corpo .tw { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: none; }
.janela-corpo .tw-bar { display: none; }
.janela-corpo .tw-stage { border: 0; background: none; display: block; max-width: none; }
.janela-corpo .tw-stage canvas { display: block; max-width: none; }
.janela-corpo .tw-ask { margin: 0; border-radius: 0; width: 100%; }
.janela-barra .janela-rapido {
  min-height: var(--altura-botao);
  padding: 0 var(--espaco-1);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  font: inherit;
  font-size: var(--texto-pequeno);
  cursor: pointer;
}
@media (pointer: coarse), (max-width: 900px) {
  .janela-alca { display: none; }                 /* o painel embaixo não se redimensiona */
  .janela-desenho {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100%;
    max-width: 100%;
    height: 55vh !important;
    border-radius: var(--raio) var(--raio) 0 0;
    resize: none;
  }
  .janela-recolhida { height: auto !important; }
  .janela-barra { cursor: default; }
}

/* Lições na tela inicial e atalho no conceito da ficha */
/* Aprender passo a passo (v0.4): as lições e os projetos guiados lado a lado, em cartões do mesmo jeito */
.aprender-grade { margin-top: var(--espaco-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aprender-coluna)), 1fr)); gap: var(--espaco-3); align-items: start; }
.licoes-home h2 { margin: 0; }
.licoes-home .painel-ajuda { margin: var(--espaco-0) 0 var(--espaco-2); }
.aprender-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--aprender-cartao)), 1fr)); gap: var(--espaco-2); }
.aprender-cartao {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--espaco-1); height: 100%; min-height: calc(var(--altura-botao) * 1.75);
  padding: var(--espaco-1) var(--espaco-2); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio);
  background: var(--cor-superficie); color: var(--cor-texto); text-decoration: none; box-shadow: var(--sombra);
  transition: border-color var(--duracao), transform var(--duracao);
}
.aprender-cartao:hover { border-color: var(--cor-destaque); transform: translateY(calc(var(--borda) * -1)); }
.aprender-titulo { font-weight: var(--peso-forte); line-height: 1.25; }
.aprender-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-1); font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
.aprender-premio { display: inline-flex; align-items: center; gap: var(--espaco-0); font-weight: var(--peso-forte); color: var(--cor-texto); }
.aprender-detalhe { margin-right: auto; }
.aprender-estado { font-weight: var(--peso-forte); }
.aprender-continuar { color: var(--cor-destaque); }
.aprender-feito { background: var(--cor-superficie-suave); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .aprender-cartao { transition: none; } .aprender-cartao:hover { transform: none; } }
.conceito-link { color: inherit; text-decoration: underline dotted; text-underline-offset: var(--espaco-0); }
.conceito-link:hover, .conceito-link:focus-visible { text-decoration-style: solid; }

/* O nome da criança na barra é um botão que abre o painel do perfil */
/* As três colunas da barra: esquerda (casinha e quem está usando), meio (título da tela) e direita (avisos, moedas, sino, sair) */
.cabecalho-esquerda, .cabecalho-meio, .cabecalho-acoes { display: flex; align-items: center; gap: var(--espaco-2); min-width: 0; }
.cabecalho-meio { justify-content: center; }
.cabecalho-acoes { justify-content: flex-end; }
.sino-lugar { display: contents; }
@media (max-width: 900px) {
  .cabecalho { display: flex; flex-wrap: wrap; }
  .cabecalho-acoes { margin-left: auto; }
}
.botao-icone { padding-left: var(--espaco-2); padding-right: var(--espaco-2); min-width: var(--altura-botao); justify-content: center; }

/* A textura do kit (2026-10-10): um desenho que se repete, bem fraco, só onde o kit diz (data-textura no <html>) e nunca por cima do
   papel de parede dela; as variáveis vêm do kit (--textura, --textura-tamanho, --textura-opacidade) */
[data-textura~="canvas-margin"] body::before,
[data-textura~="header-band"] .cabecalho::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--textura); background-size: var(--textura-tamanho); opacity: var(--textura-opacidade);
}
[data-textura~="canvas-margin"] body::before { position: fixed; }
[data-textura~="header-band"] .cabecalho { position: relative; isolation: isolate; }

/* Os ícones de sistema do kit (2026-10-10): desenhos de traço na cor do texto do botão (static/js/icones.js e icone() nos modelos) */
.icone { width: var(--icone); height: var(--icone); flex: none; vertical-align: var(--icone-baixo); }
.botao-icone .icone, .botao-sino .icone, .botao-mini .icone, .dialogo-fechar .icone { width: var(--icone-sozinho); height: var(--icone-sozinho); }
.botao-mini:not([hidden]), .dialogo-fechar { display: inline-flex; align-items: center; justify-content: center; }
.icone-gema { color: var(--cor-gema); }
.projeto-icone .icone-projeto, .botao-icone-projeto .icone-projeto, .icone-opcao .icone-projeto { width: var(--icone-sozinho); height: var(--icone-sozinho); }
.loja-amostra-icones { display: flex; gap: var(--espaco-1); justify-content: center; color: var(--cor-destaque); }
.loja-amostra-icones .icone { width: var(--icone-sozinho); height: var(--icone-sozinho); }
.loja-descricao { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); text-align: center; }

/* A cerimônia do presente */
.dialogo-presente { max-width: min(var(--largura-faixa-experimento), calc(100% - var(--espaco-4))); }
.presente-sub { margin: var(--espaco-2) 0 var(--espaco-1); font-weight: var(--peso-forte); }
.presente-fixos, .presente-caixas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); grid-template-columns: repeat(auto-fit, minmax(var(--largura-item-bichinho), 1fr)); }
.presente-item, .presente-caixa-aberta { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-1); padding: var(--espaco-2); text-align: center; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); }
.presente-caixa-fechada { width: 100%; min-height: var(--altura-botao-grande); font-size: var(--tamanho-emoji-ideia); border: var(--borda) dashed var(--cor-destaque); border-radius: var(--raio); background: var(--cor-destaque-suave); cursor: pointer; animation: presente-balanca var(--duracao-presente) ease-in-out infinite; }
.presente-caixa-fechada:hover, .presente-caixa-fechada:focus-visible { background: var(--cor-superficie-suave); }
.presente-abrindo { animation: none; opacity: 0.6; }
.presente-resumo { margin: var(--espaco-2) 0; font-weight: var(--peso-forte); }
.presente-convite { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; padding: var(--espaco-2) var(--espaco-3); margin-bottom: var(--espaco-3); background: var(--cor-destaque-suave); color: var(--cor-destaque-suave-texto); border: var(--borda) solid var(--cor-destaque); border-radius: var(--raio); }
.presente-convite p { margin: 0; flex: 1; }
.presente-convite-icone { font-size: var(--tamanho-emoji-ideia); }
@keyframes presente-balanca { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .presente-caixa-fechada { animation: none; } }
.presente-caixas { margin-top: var(--espaco-2); }

/* O ✕ padrão de todo modal (criado por modais.js) */
.dialogo { position: relative; }
.dialogo-fechar { position: absolute; top: var(--espaco-2); right: var(--espaco-2); min-width: var(--altura-botao); min-height: var(--altura-botao); padding: 0; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); color: var(--cor-texto); font-size: var(--texto-grande); line-height: 1; cursor: pointer; }
.dialogo-fechar:hover { border-color: var(--cor-destaque); }
.dialogo > :first-child:not(.dialogo-fechar), .dialogo-fechar + * { margin-top: 0; }
.dialogo h2 { padding-right: calc(var(--altura-botao) + var(--espaco-2)); }
.presente-caixa-vazia { background: var(--cor-fundo); border-style: dashed; opacity: 0.75; color: var(--cor-texto-suave); }
.presente-caixa-vazia .loja-emoji { color: var(--cor-erro); }
.passeio-etiqueta[data-posicao="esquerda"]::after { left: 100%; top: 50%; margin-top: calc(-1 * var(--seta)); border-left-color: var(--cor-destaque); }

/* O PIN de cada perfil: cadeado no cartão e o teclado numérico grande */
.cartao-perfil { position: relative; }
.perfil-cadeado { position: absolute; top: var(--espaco-1); right: var(--espaco-1); font-size: var(--texto); }
.dialogo-pin { text-align: center; }
.pin-avatar { font-size: var(--tamanho-avatar-cabecalho); margin: 0; }
.pin-pontos { display: flex; justify-content: center; gap: var(--espaco-2); margin: var(--espaco-2) 0; }
.pin-ponto { width: var(--ponto-pin); height: var(--ponto-pin); border-radius: 50%; border: var(--borda) solid var(--cor-texto-suave); }
.pin-ponto-cheio { background: var(--cor-destaque); border-color: var(--cor-destaque); }
.pin-erro { min-height: var(--altura-linha-erro); margin: 0; }
.pin-teclado { display: grid; grid-template-columns: repeat(3, var(--tecla-pin)); gap: var(--espaco-1); justify-content: center; margin: var(--espaco-2) 0; }
.pin-tecla { width: var(--tecla-pin); height: var(--tecla-pin); font-size: var(--titulo-1); justify-content: center; padding: 0; }
.pin-senha { display: grid; gap: var(--espaco-1); max-width: var(--largura-senha-pin); margin: var(--espaco-2) auto 0; }
.pin-campos { display: flex; gap: var(--espaco-2); }
.pin-campos input { width: var(--largura-campo-pin); font-size: var(--texto-grande); letter-spacing: var(--espaco-1); }

/* Créditos do Perfil: o extrato à esquerda e a caixa "como ganhar" à direita (uma embaixo da outra em telas estreitas) */
.creditos-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--espaco-3); align-items: start; }
.creditos-como { padding: var(--espaco-2); background: var(--cor-superficie-suave); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.creditos-como h3 { margin-top: 0; }
.credito-gasto { color: var(--cor-texto-suave); }
@media (max-width: 700px) { .creditos-colunas { grid-template-columns: minmax(0, 1fr); } }
.pin-senha[hidden], #pin-esqueci[hidden], .pin-teclado[hidden], .pin-pontos[hidden] { display: none; }

/* As moedas (levam à loja): efeito de botão ao passar o mouse */
.etiqueta-creditos, .etiqueta-gemas { text-decoration: none; color: inherit; transition: background var(--duracao), border-color var(--duracao), transform var(--duracao); }
.moedas-juntas { display: inline-flex; align-items: stretch; flex: none; }      /* os dois saldos lado a lado, como um campo só (E6-36); cada metade continua levando à loja */
.moedas-juntas .etiqueta-creditos:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.moedas-juntas .etiqueta-gemas { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: calc(-1 * var(--borda)); }
.moedas-juntas:hover, .moedas-juntas:focus-within { transform: translateY(var(--subida)); transition: transform var(--duracao); }           /* o realce vale para os dois saldos juntos (um campo só) */
.moedas-juntas:hover .etiqueta, .moedas-juntas:focus-within .etiqueta { background: var(--cor-destaque-suave); border-color: var(--cor-destaque); transform: none; }
.etiqueta-creditos.pode-gastar { position: relative; }      /* a bolinha discreta: dá para comprar algo novo na loja */
.etiqueta-creditos.pode-gastar::after { content: ""; position: absolute; top: calc(-1 * var(--espaco-0)); right: calc(-1 * var(--espaco-0)); width: var(--tamanho-bolinha); height: var(--tamanho-bolinha); box-sizing: content-box; border: var(--borda) solid var(--cor-superficie); border-radius: 50%; background: var(--cor-destaque); }
.etiqueta-creditos:hover, .etiqueta-creditos:focus-visible { background: var(--cor-destaque-suave); border-color: var(--cor-destaque); transform: translateY(var(--subida)); }
.etiqueta-tipo { flex: none; }
.dialogo-sair { text-align: center; }
.botao-lateral { border-color: var(--cor-texto-suave); }

/* A loja: os temas numa coluna ao lado, e as seções de ajuste e os bichinhos na outra */
.loja-layout { display: grid; grid-template-columns: var(--largura-temas) minmax(0, 1fr); gap: var(--espaco-3); align-items: start; }
.loja-temas { position: sticky; top: var(--espaco-3); padding: var(--espaco-2); background: var(--cor-quadro); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.loja-temas h2 { margin: 0 0 var(--espaco-1); font-size: var(--texto-grande); }
/* O sol, a lua e o alto contraste, no alto da coluna de temas (e em "Meu perfil") */
.modo-cor { display: flex; flex-wrap: wrap; gap: var(--espaco-1); margin: 0 0 var(--espaco-1); }
.modo-cor-botao { flex: 1 1 auto; justify-content: center; border-color: var(--cor-texto-suave); }
.modo-cor-botao[aria-pressed="true"] { background: var(--cor-destaque-suave); color: var(--cor-destaque-suave-texto); border-color: var(--cor-destaque); opacity: 1; }
.modo-cor-trancado { display: inline-flex; align-items: center; color: var(--cor-texto-suave); border-style: dashed; cursor: help; }
.temas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.tema-cartao { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--espaco-1); padding: var(--espaco-2); text-align: center; background: var(--cor-superficie); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.tema-cartao-atual { border-color: var(--cor-destaque); background: var(--cor-destaque-suave); }
.tema-cartao-oculto { background: var(--cor-superficie-suave); border-style: dashed; }
.tema-nome { display: inline-flex; align-items: center; gap: var(--espaco-1); font-weight: var(--peso-forte); white-space: nowrap; }
.tema-nota { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
.tema-misterio { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--amostra-altura); font-size: var(--tamanho-misterio); color: var(--cor-texto-suave); }
.loja-secao-ajuda { margin: 0 0 var(--espaco-1); color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.loja-escuro .loja-grade { opacity: 0.6; }      /* sobre o tema escuro os ajustes não valem: as seções ficam apagadas */
@media (max-width: 900px) {
  .loja-layout { grid-template-columns: minmax(0, 1fr); }
  .loja-temas { position: static; }
  .temas-lista { grid-template-columns: repeat(auto-fill, minmax(var(--largura-temas), 1fr)); }
}

#btn-recado.recado-novidade { position: relative; }
#btn-recado.recado-novidade::after { content: ""; position: absolute; top: var(--espaco-0); right: var(--espaco-0); width: var(--tamanho-contador); height: var(--tamanho-contador); border-radius: var(--raio); background: var(--cor-erro); }
.resposta-texto { margin: 0 0 var(--espaco-2); font-size: var(--texto-grande); }
.loja-explica { list-style: none; margin: var(--espaco-2) 0 0; padding: 0; display: grid; gap: var(--espaco-2); }
.recado-atalhos { display: flex; flex-wrap: wrap; gap: var(--espaco-1); margin-bottom: var(--espaco-2); }
#recado-texto { width: 100%; }

/* ---------- Passos da ideia e respostas rápidas (E2-04) ---------- */
.respostas-rapidas { display: flex; flex-wrap: wrap; gap: var(--espaco-1); margin-bottom: var(--espaco-1); }
.passos-lista { list-style: none; margin: var(--espaco-1) 0 0; padding: 0; display: grid; gap: 0; max-height: var(--altura-passos); overflow-y: auto; }
.passo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espaco-1); padding: 0 var(--espaco-1); border: var(--borda) solid transparent; border-radius: var(--raio-pequeno); }
.passo-atual { background: var(--cor-destaque-suave); border-color: var(--cor-destaque); color: var(--cor-destaque-suave-texto); font-weight: var(--peso-forte); }
.passo-feito, .passo-depois { color: var(--cor-texto-suave); }
.passo-novo { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
.passo-atual .passo-novo { color: var(--cor-destaque-suave-texto); }
.passos-mensagem { margin: var(--espaco-1) 0 0; min-height: var(--altura-linha-erro); }
.passos-mensagem:empty { display: none; }
.passos-falta { color: var(--cor-destaque-suave-texto); font-weight: var(--peso-forte); }
.passos-certo { color: var(--cor-executar); font-weight: var(--peso-forte); }

/* Minha evolução */
.evolucao-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.evolucao-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espaco-2); }
.evolucao-quando { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }

/* Barra de símbolos (iPad e celular): colada em cima do teclado da tela, só enquanto o cursor está no editor */
.barra-simbolos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: var(--espaco-1); padding: var(--espaco-1); overflow-x: auto; background: var(--cor-superficie); border-top: var(--borda) solid var(--cor-borda); box-shadow: var(--sombra); }
.barra-simbolos[hidden] { display: none; }
.simbolo { flex: none; min-width: var(--altura-botao); min-height: var(--altura-botao); padding: 0 var(--espaco-1); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cor-superficie-suave); color: var(--cor-texto); font-family: var(--fonte-codigo); font-size: var(--texto-grande); font-weight: var(--peso-forte); line-height: 1; cursor: pointer; touch-action: manipulation; }
.simbolo:hover, .simbolo:focus-visible { border-color: var(--cor-destaque); }

/* O ✅ Fiz! dentro do título do quadro de Passos (quando os botões de ajuda não estão na barra) */
.painel-passos summary { display: flex; align-items: center; gap: var(--espaco-1); flex-wrap: wrap; }

/* O quadro de passos: cada passo é um botão (marcar e desmarcar) */
.passos-dica { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.passo-botao { display: flex; align-items: baseline; gap: var(--espaco-1); width: 100%; min-height: var(--altura-passo); padding: 0 var(--espaco-1); border: var(--borda) solid transparent; border-radius: var(--raio-pequeno); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.passo-botao:hover, .passo-botao:focus-visible { border-color: var(--cor-destaque); }
.passo-botao[aria-disabled="true"] { cursor: default; }

/* Aviso do sistema na tela inicial (o mesmo lugar do convite dos Primeiros passos) */
.aviso-sistema { position: relative; }
.aviso-sistema .aviso-fechar { position: absolute; top: var(--espaco-1); right: var(--espaco-1); }


/* O ícone de cada projeto (2026-10-10): a cor é só o fundo do emoji, então vale em qualquer tema */
.projeto-icone[data-tinta="lilas"], .botao-icone-projeto[data-tinta-atual="lilas"] { background: #e8dcfb; }
.projeto-icone[data-tinta="menta"], .botao-icone-projeto[data-tinta-atual="menta"] { background: #d3f1e2; }
.projeto-icone[data-tinta="pessego"], .botao-icone-projeto[data-tinta-atual="pessego"] { background: #ffe0cf; }
.projeto-icone[data-tinta="ceu"], .botao-icone-projeto[data-tinta-atual="ceu"] { background: #d4e8fb; }
.projeto-icone[data-tinta="limao"], .botao-icone-projeto[data-tinta-atual="limao"] { background: #f3f4c6; }
.projeto-icone[data-tinta="rosa"], .botao-icone-projeto[data-tinta-atual="rosa"] { background: #fbd9e6; }
.projeto-icone[data-tinta] { border-radius: var(--raio-pequeno); }
.projeto-icone[data-tinta], .botao-icone-projeto[data-tinta-atual] { color: var(--cor-tinta-icone); }   /* no modo escuro o texto é claro e o desenho sumia na tinta */
.grade-icones { display: flex; flex-wrap: wrap; gap: var(--espaco-1); margin-bottom: var(--espaco-2); }
.icone-opcao, .cor-opcao { min-width: var(--altura-botao); font-size: var(--texto-grande); }
.icone-opcao[aria-pressed="true"], .cor-opcao[aria-pressed="true"] { border-color: var(--cor-destaque); box-shadow: 0 0 0 var(--foco) var(--cor-destaque-suave); }

/* Ganchos para a folha de um tema (design/kits/<id>/tema/): escondidos, a não ser que o tema os desenhe */
.placa { display: none; }
/* uma peça que o tema em uso não aceita (só o papel de parede passa por cima) */
.loja-cartao-bloqueado { cursor: not-allowed; }

/* O exame da faixa (v0.4): o painel ao lado do chat */
.exame-titulo { margin: 0; }
.exame-selo { display: inline-block; font-weight: var(--peso-forte); font-size: var(--texto-pequeno); }
.link-exame { display: inline-flex; align-items: center; min-height: var(--altura-botao); font-weight: var(--peso-forte); }
.exame-desafios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
.exame-desafios li { padding: var(--espaco-0) var(--espaco-1); border-radius: var(--raio-pequeno); background: var(--cor-superficie-suave); font-weight: var(--peso-forte); }
.exame-desafios .exame-atual { background: var(--cor-destaque-suave); color: var(--cor-destaque-suave-texto); }
.exame-texto { font-weight: var(--peso-forte); font-size: var(--texto-grande); }
.exame-dica { color: var(--cor-erro); }
.exame-medalha { font-size: var(--titulo-2); font-weight: var(--peso-forte); margin: 0; }
.exame-painel .botao { align-self: flex-start; }

/* Minhas faixas e o certificado (v0.4) */
.faixas-ganhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-1); }
.faixa-ganha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
.faixa-ganha-nome { font-weight: var(--peso-forte); margin-right: auto; }
.certificado-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); justify-content: space-between; }
.certificado {
  margin: var(--espaco-3) auto; max-width: var(--certificado-largura); padding: var(--espaco-4) var(--espaco-3); text-align: center;
  background: var(--cor-superficie); color: var(--cor-texto); border: calc(var(--borda) * 4) double var(--cor-destaque); border-radius: var(--raio);
}
.certificado p { margin: var(--espaco-2) 0; }
.certificado-topo { text-transform: uppercase; letter-spacing: var(--certificado-letras); color: var(--cor-texto-suave); font-weight: var(--peso-forte); }
.certificado-quem { font-size: var(--texto-grande); }
.certificado-faixa { font-size: var(--titulo-1); font-weight: var(--peso-forte); }
.certificado-rodape { display: flex; justify-content: center; align-items: center; gap: var(--espaco-3); color: var(--cor-texto-suave); }
.certificado-medalha { font-size: var(--texto-pequeno); }
@media print {
  body * { visibility: hidden; }
  .certificado, .certificado * { visibility: visible; }
  .certificado { position: absolute; inset: 0; margin: auto; height: fit-content; box-shadow: none; }
}
.loja-titulo h2 .ajuda { font-size: var(--texto); font-weight: normal; vertical-align: middle; margin-left: var(--espaco-0); }

/* O experimento da loja (10 s): uma caixa vermelha embaixo, por cima de tudo, sem impedir de navegar (só a caixa recebe o toque). */
.aviso-experimento {
  position: fixed; left: 50%; bottom: var(--espaco-2); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: var(--espaco-2); max-width: min(100% - var(--espaco-4), var(--largura-aviso-experimento));
  padding: var(--espaco-1) var(--espaco-2); background: var(--cor-experimento); color: var(--cor-experimento-texto);
  border-radius: var(--raio); box-shadow: var(--sombra-forte); font-weight: var(--peso-forte);
}
.aviso-experimento .botao-mini { color: inherit; }
.tema-experimentar { display: contents; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }

/* A conta do adulto na tela "Quem vai brincar hoje?" (modo famílias) e as páginas de conta */
.conta-barra { display: flex; align-items: center; justify-content: flex-end; gap: var(--espaco-2); margin: 0 0 var(--espaco-2); color: var(--cor-texto-suave); }
/* As páginas de entrada e da família (o estilo do tema Padrão): um cartão no meio da tela, com a marca em cima */
.pagina-conta {
  max-width: var(--largura-pagina-conta); margin: var(--espaco-4) auto; padding: var(--espaco-4);
  background: var(--cor-superficie); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra);
}
.pagina-conta h1 { margin-top: 0; text-align: center; }
.pagina-conta h1 + .painel-ajuda { text-align: center; }
.pagina-conta .erro:empty { min-height: 0; margin: 0; }
.pagina-conta h2 { margin-top: var(--espaco-3); padding-top: var(--espaco-2); border-top: var(--borda) solid var(--cor-borda); }
.marca-conta { display: flex; align-items: center; justify-content: center; gap: var(--espaco-2); margin: 0 0 var(--espaco-2); font-weight: var(--peso-forte); font-size: var(--texto-grande); color: var(--cor-destaque); }
.marca-conta img { border-radius: var(--raio-pequeno); }
.pagina-conta .painel-botoes { margin-top: var(--espaco-3); }
.pagina-conta .painel-botoes .botao-principal { flex: 1 1 100%; justify-content: center; }
.pagina-conta .painel-botoes .botao:not(.botao-principal) { flex: 1 1 auto; justify-content: center; }
.campo-codigo { text-align: center; font-size: var(--titulo-1); font-weight: var(--peso-forte); letter-spacing: var(--espacamento-codigo); text-transform: uppercase; }
.campo-codigo::placeholder { text-transform: none; }
.codigo-familia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--espaco-2); margin: var(--espaco-2) 0; padding: var(--espaco-2); background: var(--cor-destaque-suave); border-radius: var(--raio); }
.codigo-familia code { font-size: var(--titulo-1); font-weight: var(--peso-forte); letter-spacing: var(--espacamento-codigo); color: var(--cor-destaque-suave-texto); }
.pagina-conta form .botao + .painel-ajuda { display: block; margin-top: var(--espaco-1); }
.pagina-conta label[for="campo-valor"] + input { max-width: var(--largura-campo-curto); }
.resumo-crianca { margin: var(--espaco-2) 0; padding: var(--espaco-2); background: var(--cor-superficie-suave); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.resumo-crianca h3 { margin: 0 0 var(--espaco-1); }
.resumo-crianca h3 small { font-weight: normal; color: var(--cor-texto-suave); margin-left: var(--espaco-1); }
.resumo-linhas { margin: var(--espaco-1) 0; padding-left: var(--espaco-3); }
.resumo-atencao ul { margin: var(--espaco-1) 0 0; padding-left: var(--espaco-3); }
.lista-criancas { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.lista-criancas > li { padding: var(--espaco-2); background: var(--cor-superficie-suave); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.lista-criancas .crianca-nome { font-weight: var(--peso-forte); }
.apagar-crianca { margin-top: var(--espaco-1); }
.apagar-crianca summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.apagar-crianca summary::-webkit-details-marker { display: none; }
.botao-perigo { background: var(--cor-parar); color: var(--cor-parar-texto); border-color: var(--cor-parar); }
.pagina-conta ul.lista-simples { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
.pagina-conta ul.lista-simples li { padding: var(--espaco-1) var(--espaco-2); background: var(--cor-superficie-suave); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
/* "Quem vai brincar hoje?": no meio da tela, e a barra do aparelho/da conta num cartão discreto */
.pagina-escolha { text-align: center; }
.pagina-escolha > .painel-ajuda { margin-top: var(--espaco-3); }
.pagina-escolha .cartoes-perfis { justify-content: center; }
.pagina-conta-larga { max-width: var(--largura-pagina-conta-larga); }
.cadastro-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); align-items: start; margin-top: var(--espaco-3); }
@media (min-width: 900px) { .cadastro-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.termo-lateral { padding: var(--espaco-2) var(--espaco-3); background: var(--cor-superficie-suave); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.termo-lateral h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.termo-rolagem { max-height: var(--altura-termo); overflow-y: auto; padding-right: var(--espaco-2); }
.termo-rolagem h2 { font-size: var(--titulo-2); border-top: 0; margin-top: var(--espaco-2); padding-top: 0; }
.termo-rolagem:focus-visible { outline: var(--foco) solid var(--cor-destaque); }
/* a chave "concordo": um interruptor de verdade, no lugar do quadradinho */
.alternar { position: relative; display: flex; align-items: center; gap: var(--espaco-2); margin: var(--espaco-3) 0 var(--espaco-1); padding: var(--espaco-2); background: var(--cor-aviso-fundo); border-radius: var(--raio); cursor: pointer; }
.alternar input { position: absolute; opacity: 0; width: var(--largura-trilho); height: var(--altura-trilho); margin: 0; cursor: pointer; }
.alternar-trilho { position: relative; flex: none; width: var(--largura-trilho); height: var(--altura-trilho); background: var(--cor-borda); border-radius: var(--raio-grande); transition: background var(--duracao); }
.alternar-trilho::after { content: ""; position: absolute; top: var(--espaco-0); left: var(--espaco-0); width: calc(var(--altura-trilho) - 2 * var(--espaco-0)); height: calc(var(--altura-trilho) - 2 * var(--espaco-0)); background: var(--cor-superficie); border-radius: 50%; box-shadow: var(--sombra); transition: transform var(--duracao); }
.alternar input:checked + .alternar-trilho { background: var(--cor-executar); }
.alternar input:checked + .alternar-trilho::after { transform: translateX(calc(var(--largura-trilho) - var(--altura-trilho))); }
.alternar input:focus-visible + .alternar-trilho { outline: var(--foco) solid var(--cor-destaque); outline-offset: var(--espaco-0); }
.estado-aparelho { margin: var(--espaco-4) auto 0; padding: var(--espaco-2) var(--espaco-3); max-width: var(--largura-pagina-conta); background: var(--cor-superficie); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); color: var(--cor-texto-suave); }
.estado-aparelho p { margin: 0 0 var(--espaco-2); }
.estado-aparelho .painel-botoes { justify-content: center; }
.pagina-escolha .conta-barra { justify-content: center; flex-wrap: wrap; margin: var(--espaco-3) auto 0; padding: var(--espaco-1) var(--espaco-2); width: fit-content; max-width: 100%; background: var(--cor-superficie); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); }
.pagina-escolha .adultos { text-align: center; }
/* telas grandes (4K sem ampliação): estas páginas crescem junto, para não ficarem pequenas no meio da tela */
@media (min-width: 2400px) { html:has(.pagina-conta, .pagina-escolha) { font-size: 150%; } }
.barra-custo { height: var(--altura-barra-custo); border-radius: var(--raio); background: var(--cor-superficie-suave); border: var(--borda) solid var(--cor-borda); overflow: hidden; }
.barra-custo-cheia { height: 100%; background: var(--cor-destaque); }
.barra-custo-texto { display: flex; flex-wrap: wrap; gap: var(--espaco-1); align-items: baseline; }
.barra-custo-fim { margin-left: auto; font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
.lista-simples { padding-left: var(--espaco-3); }