/* ────────────────────────────────────────────────────────────────
   Pilha — o baralho como fichário: a caixa é o fundo, a ficha é a
   superfície erguida, e as fichas que esperam aparecem atrás dela.
   Verde-noite para a caixa, âmbar para o que exige decisão, verde-água
   só para o acerto — que por isso é visto.

   Toda cor vive aqui. Os tons translúcidos também têm token, para a
   próxima repaginação não ter de caçar rgba pelo arquivo inteiro.
   ──────────────────────────────────────────────────────────────── */
:root{
  --fundo:#0d1614;        /* a caixa */
  --fundo-2:#16211f;      /* a ficha */
  --fundo-3:#1e2c29;      /* blocos dentro da ficha */
  --atras-1:#132320;      /* a ficha logo atrás */
  --atras-2:#101d1b;      /* e a de trás dela */
  --borda:#25352f;
  --texto:#e4ebe8;
  --texto-2:#8ba39d;
  --acento:#e8b93f;
  --acento-2:#c8102e;
  --ok:#4dd4a0;
  --erro:#f0796f;
  --quase:#f2d489;

  --acento-fraco:rgba(232,185,63,.13);
  --acento-borda:rgba(232,185,63,.34);
  --ok-fraco:rgba(77,212,160,.13);
  --ok-borda:rgba(77,212,160,.38);
  --erro-fraco:rgba(240,121,111,.10);
  --erro-borda:rgba(240,121,111,.42);
  --quase-fraco:rgba(242,212,137,.09);
  --quase-borda:rgba(242,212,137,.34);

  --raio:15px;
  --sombra:0 1px 0 rgba(255,255,255,.05), 0 10px 26px -12px #000;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);
  color:var(--texto);
  font:400 16px/1.5 "Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}

.oculto{display:none !important}

/* ── topo ── */
.topo{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--borda);
  background:rgba(13,22,20,.88);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
}
.marca{font-weight:700;letter-spacing:.3px}
.marca span{color:var(--acento)}
.placar{margin-left:auto;font-size:13px;color:var(--texto-2);white-space:nowrap}
.placar b{color:var(--texto)}
.acoes-topo{display:flex;gap:6px}
.icone{
  background:transparent;border:1px solid var(--borda);color:var(--texto-2);
  border-radius:10px;width:36px;height:36px;cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:color .12s,border-color .12s,background .12s;
}
.icone svg{
  width:19px;height:19px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* os botões dos controles deslizantes são vazados, não riscados pela linha */
.icone svg circle{fill:var(--fundo)}
.icone:hover{color:var(--texto);border-color:var(--texto-2);background:var(--fundo-3)}
.icone:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* a tela em que você está fica marcada: saber onde se está é barato */
.icone.aqui{color:var(--acento);border-color:var(--acento-borda);background:var(--acento-fraco)}
.icone.aqui svg circle{fill:#1c1a10}

main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:22px 16px 40px}

h1{font-size:26px;margin:0 0 6px}
h2{font-size:20px;margin:0 0 16px}
h3{font-size:15px;margin:0 0 8px;color:var(--acento)}
.sub{color:var(--texto-2);margin:0 0 22px}
.dica{color:var(--texto-2);font-size:12.5px;margin-top:18px}
kbd{
  background:var(--fundo-3);border:1px solid var(--borda);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;font-size:11.5px;font-family:inherit;
}

/* ── início ── */
.bloco-inicio{text-align:center;padding:36px 0}

/* ── botões ── */
button{font:inherit}
.primario{
  background:linear-gradient(180deg,var(--acento),#f09a2b);
  color:#20160a;border:0;border-radius:12px;padding:13px 22px;
  font-weight:650;cursor:pointer;transition:transform .06s,filter .15s;
}
.primario:hover{filter:brightness(1.06)}
.primario:active{transform:translateY(1px)}
.grande{width:100%;max-width:340px;padding:15px 22px;font-size:17px}
/* Ao rolar até eles depois da resposta, param com uma folga da borda de
   baixo em vez de encostar nela. */
#btn-proximo,#area-julgamento{scroll-margin-bottom:24px}
.secundario{
  background:var(--fundo-3);color:var(--texto);border:1px solid var(--borda);
  border-radius:11px;padding:11px 18px;cursor:pointer;
}
.secundario:hover{border-color:var(--texto-2)}
.linha-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ── a ficha, e as que esperam atrás ──
   A pilha não é enfeite: ela diz o que número nenhum diz tão bem — que há
   fila, que ela tem tamanho, e que este card saiu de algum lugar e volta
   para lá. São duas bordas assomando no alto, atrás da ficha. */
.fichario{position:relative;padding-top:15px}
.atras{
  position:absolute;height:46px;
  border-radius:var(--raio);border:1px solid var(--borda);border-bottom:0;
}
.atras.a{top:7px;left:10px;right:10px;background:var(--atras-1)}
.atras.b{top:0;left:21px;right:21px;background:var(--atras-2)}

.card{
  position:relative;z-index:1;
  background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:var(--raio);padding:22px;box-shadow:var(--sombra);
}

/* a aba do nível sai por cima da ficha, como a lingueta de um fichário */
.aba{
  position:absolute;top:0;right:24px;z-index:2;
  background:var(--acento);color:#1a1405;
  font-size:11px;font-weight:800;letter-spacing:.9px;
  padding:6px 11px 7px;border-radius:0 0 8px 8px;
}

.card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding-right:56px}
.etiqueta{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;
  background:var(--acento-fraco);color:var(--acento);
  border:1px solid var(--acento-borda);border-radius:999px;padding:3px 11px;
}
.etiqueta.suave{background:var(--fundo-3);color:var(--texto-2);border-color:var(--borda)}
/* a palavra que destravou esta frase: verde, como a conquista que a trouxe */
.etiqueta.origem{background:var(--ok-fraco);color:var(--ok);border-color:var(--ok-borda);
  font-style:italic;text-transform:none;letter-spacing:0}
.enunciado{color:var(--texto-2);font-size:13.5px;margin:0 0 6px}
/* ── a pergunta não sai da tela ──
   Respondida a pergunta, a tela desce sozinha até o botão, e num card longo
   era a pergunta que sumia por cima — para reler era preciso subir a tela à
   mão. Ela gruda logo abaixo do cabeçalho e a resposta passa por baixo.

   Gruda o enunciado, a frase e a linha tracejada que fecha a pergunta — e
   não a metade de cima inteira. As etiquetas e a aba do nível, que ficam
   acima, sobem e desaparecem atrás do cabeçalho: nada disso se relê, e são
   uns 60px que a resposta ganha num aparelho onde ela mal cabia. Sai de
   graça e sem sobressalto, porque é rolagem comum: esconder aquilo por
   script encolheria a página no meio da rolagem e o card ficaria oscilando
   entre dois tamanhos, justo na faixa em que acaba de grudar.

   A linha é a borda de baixo deste bloco, e não mais a borda de cima do
   «responda em…»: assim ela sobe junto com a pergunta e o bloco fica com
   começo e fim, em vez de terminar no ar.

   As margens negativas fazem o bloco cobrir a ficha de ponta a ponta: sem
   elas, o que rola aparece nas laterais, dentro do respiro de 22px. E o
   respiro de baixo é padding pelo mesmo motivo — margem não pinta fundo, e a
   resposta apareceria pela fresta.

   O gruda vale só dentro da ficha, então quando ela acaba a pergunta sobe
   junto — que é o certo: não há mais resposta para ler embaixo. */
.pergunta-fixa{
  position:sticky;top:var(--altura-topo,65px);z-index:3;
  background:var(--fundo-2);
  margin:0 -22px;
  padding:0 22px 14px;
  border-bottom:1px dashed var(--borda);
}
.termo-linha{display:flex;align-items:flex-start;gap:12px}
.termo{
  font-size:29px;font-weight:800;line-height:1.22;letter-spacing:-.015em;
  color:#fff;overflow-wrap:break-word;flex:1;
}
.termo.frase{font-size:23px;font-style:italic}

/* a bandeira diz de que lado vai a tradução, para não errar a direção */
.bandeira{font-size:22px;line-height:1.3;flex:none}
.rotulo-resposta{
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;font-size:12.5px;color:var(--texto-2);
  text-transform:uppercase;letter-spacing:.6px;
  /* a linha tracejada passou para a borda de baixo da .pergunta-fixa, para
     grudar junto com ela; aqui fica só o respiro que vinha depois */
  padding-top:13px;
}
.rotulo-resposta .bandeira{font-size:17px}
.resposta-certa .rotulo span{font-size:13px;margin-right:2px}

/* Respondeu em espanhol num card de falso amigo: o aviso devolve a vez em
   vez de contar erro, então usa o amarelo do «deu quase», que é a cor de
   quem não acertou nem errou. */
.aviso-lingua{
  margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--quase);
  background:var(--quase-fraco);border:1px solid var(--quase-borda);
  border-radius:11px;padding:11px 14px;
}
.aviso-lingua b{color:var(--texto);font-weight:700}

/* Degrau da escada dos dominados onde ninguém chegou ainda. */
tr.vago td{opacity:.42}

/* Acertou sem o acento: nem verde nem vermelho, que não é acerto limpo nem
   erro. O mesmo amarelo do «deu quase». */
.aviso-acento{
  margin:-4px 0 12px;font-size:13.5px;color:var(--quase);
}
.aviso-acento b{color:var(--texto);font-weight:700}
/* A letra acentuada que faltou, pintada na resposta certa. O mesmo amarelo
   do aviso, para o olho ligar uma coisa à outra sem ler nada. */
.resposta-certa mark.acento{
  background:var(--quase-fraco);color:var(--quase);
  border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px var(--quase-borda);
}

/* ── alternativas ── */
.alternativas{display:flex;flex-direction:column;gap:9px}
.alternativa{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--fundo-3);border:1px solid var(--borda);color:var(--texto);
  border-radius:11px;padding:13px 15px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.alternativa:hover:not(:disabled){border-color:var(--acento);background:var(--fundo-2)}
.alternativa:disabled{cursor:default;opacity:.85}
.alternativa .num{
  flex:none;width:23px;height:23px;border-radius:50%;background:var(--fundo);
  border:1px solid var(--borda);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--acento);
}
.alternativa.certa{border-color:var(--ok);background:var(--ok-fraco);opacity:1}
.alternativa.certa .num{background:var(--ok);border-color:var(--ok);color:#0a231b}
.alternativa.errada{border-color:var(--erro);background:var(--erro-fraco)}

/* ── escrita ── */
#entrada{
  width:100%;background:var(--fundo);border:1px solid var(--borda);
  color:var(--texto);border-radius:11px;padding:14px 15px;font-size:18px;
}
#entrada:focus{outline:0;border-color:var(--acento)}

/* ── feedback ── */
.veredito{font-size:19px;font-weight:700;margin-bottom:14px}
.veredito.ok{color:var(--ok)}
.veredito.erro{color:var(--erro)}
.veredito.quase{color:var(--quase)}
/* Venceu as duas direções. Uma etiqueta, logo abaixo do veredito: no
   mesmo verde do acerto, mas com contorno, para não ser lida como
   subtítulo do «Certo!» — é outra coisa, e maior. */
.conquista{
  display:inline-block;margin:-6px 0 14px;
  background:var(--ok-fraco);color:var(--ok);border:1px solid var(--ok-borda);
  border-radius:999px;padding:4px 13px;font-size:13px;font-weight:700;
  letter-spacing:.3px;
}
.resposta-certa{
  background:var(--fundo-3);border:1px solid var(--borda);border-radius:11px;
  padding:12px 15px;margin-bottom:12px;
}
.resposta-certa .rotulo{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--texto-2);margin-bottom:3px;
}
.resposta-certa strong{font-size:19px}
/* Acertou: a caixa inteira confirma, sem depender de ler o veredito. */
.resposta-certa.certa{background:var(--ok-fraco);border-color:var(--ok-borda)}
.resposta-certa.certa .rotulo{color:var(--ok)}
/* A nota traz pares «🇪🇸 palavra → 🇧🇷 tradução», um por linha, sempre no
   mesmo sentido. Antes ela misturava as duas direções na mesma frase e
   ninguém sabia qual palavra era de qual língua. */
.nota{
  color:var(--texto-2);font-size:14px;margin:0 0 12px;
  border-left:2px solid var(--acento);padding-left:12px;
  white-space:pre-line;line-height:1.7;
}
.medidas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.medida{
  font-size:12px;background:var(--fundo-3);border:1px solid var(--borda);
  border-radius:999px;padding:4px 11px;color:var(--texto-2);
}
.medida b{color:var(--texto);font-weight:600}

.resposta-dada{
  background:var(--quase-fraco);border:1px solid var(--quase-borda);
  border-radius:11px;padding:12px 15px;margin-bottom:10px;
}
.resposta-dada .rotulo{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--quase);margin-bottom:3px;
}
.resposta-dada strong{font-size:18px}

.julgamento{
  border-top:1px solid var(--borda);margin:14px 0 18px;padding-top:16px;
}
.pergunta-julgamento{margin:0;font-size:14.5px}
.julgamento .linha-botoes{margin-top:10px}
.opcao-julgamento{
  flex:1;min-width:130px;border-radius:999px;padding:11px 15px;
  font-size:14.5px;font-weight:600;cursor:pointer;
  background:var(--fundo-3);border:1px solid var(--borda);color:var(--texto);
}
.opcao-julgamento.acertei:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-fraco)}
.opcao-julgamento.errei:hover{border-color:var(--erro);color:var(--erro);background:var(--erro-fraco)}

.conhecia{
  border-top:1px solid var(--borda);margin:0 0 18px;padding-top:16px;
}
.pergunta-conhecia{margin:0;font-size:14.5px}
.conhecia .linha-botoes{margin-top:10px}
.opcao-conhecia{
  background:var(--fundo-3);border:1px solid var(--borda);color:var(--texto);
  border-radius:999px;padding:9px 15px;cursor:pointer;font-size:14px;flex:1;
  min-width:130px;
}
.opcao-conhecia:hover{border-color:var(--acento);color:var(--acento)}

/* ── painel ── */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:22px}
.metrica{background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;padding:14px}
.metrica .valor{font-size:25px;font-weight:700;line-height:1.1}
.metrica .rotulo{font-size:12px;color:var(--texto-2);margin-top:3px}
.legenda{color:var(--texto-2);font-size:13px;margin:-8px 0 16px;line-height:1.55}
.legenda b{color:var(--texto)}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:22px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--borda)}
th{color:var(--texto-2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* a linha de totais fecha a tabela: sem borda embaixo e um pouco mais firme */
tr.soma td{border-bottom:none;border-top:1px solid var(--borda);font-weight:600;color:var(--texto)}

/* ── tabela de etapas ──
   São seis colunas de números com rótulos longos ("Escrevendo", "Dominados").
   Deitados, eles decidiam sozinhos a largura da tabela e estouravam a tela do
   celular. De pé, cada coluna fica do tamanho do número que carrega. */
th.vert{
  padding:8px 3px;vertical-align:bottom;text-align:center;
}
th.vert span{
  display:inline-block;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);  /* lê de baixo para cima */
}
table.etapas td,table.etapas th{padding-left:4px;padding-right:4px}
table.etapas td:first-child,table.etapas th:first-child{padding-left:10px;text-align:left}
table.etapas td{text-align:center;font-variant-numeric:tabular-nums}
.barra{height:6px;background:var(--fundo-3);border-radius:99px;overflow:hidden;min-width:60px}
.barra i{display:block;height:100%;background:var(--ok)}

/* ── o caminho até aqui ──
   Três cores para três etapas, escolhidas para se separarem também em visão
   com deficiência de cor, e conferidas contra o fundo escuro da ficha. */
:root{
  --serie-espt:#3987e5;
  --serie-ptes:#d95926;
  --serie-dom:#199e70;
  /* Os seis degraus do dominado: um verde só, do escuro ao claro. Conferido
     como escala ordinal contra o fundo escuro — tom único, claridade sempre
     subindo, passo visível entre vizinhos, e o degrau mais escuro ainda com
     3,1:1 de contraste. */
  --degrau-0:#14764f;
  --degrau-1:#1e9a71;
  --degrau-2:#33b98a;
  --degrau-3:#5ecfa4;
  --degrau-4:#8ce0bf;
  --degrau-5:#b9f0d8;
}
svg.grafico-etapas{display:block;width:100%;height:auto;margin:4px 0 14px}
svg.grafico-etapas .malha{stroke:var(--borda);stroke-width:1}
svg.grafico-etapas .eixo{fill:var(--texto-2);font-size:10px}
/* a fresta é o fundo da ficha passando entre duas bandas */
svg.grafico-etapas .fresta{stroke:var(--fundo-2);stroke-width:2;stroke-linejoin:round}
svg.grafico-etapas .cursor{stroke:var(--texto-2);stroke-width:1}
.chaves{display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 4px}
.chaves .chave{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--texto-2)}
.chaves .chave i{width:11px;height:11px;border-radius:3px;flex:none}
.chaves .chave b{color:var(--texto);font-variant-numeric:tabular-nums}
/* os seis degraus numa linha só, miúda, embaixo da legenda principal */
.escada-legenda{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 4px;
  font-size:11.5px;color:var(--texto-2)}
.escada-legenda span{display:flex;align-items:center;gap:5px}
.escada-legenda i{width:9px;height:9px;border-radius:2px;flex:none}
.escada-legenda b{color:var(--texto);font-weight:600;font-variant-numeric:tabular-nums}

/* a barra fica na sua própria coluna, sem título: o número ao lado já diz o
   que ela mede, e o rótulo repetido só roubaria largura */
td.col-barra{width:1%;padding-left:8px}
td.col-barra .barra{width:56px;min-width:0}
table.nivel td,table.nivel th{padding-left:5px;padding-right:5px}
table.nivel td:first-child,table.nivel th:first-child{padding-left:10px}

/* ── configurações ── */
.grupo{
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;
  padding:16px;margin-bottom:16px;
}
.grupo.perigo{border-color:var(--erro-borda)}
.grupo.perigo h3{color:var(--erro)}
.ajuda{color:var(--texto-2);font-size:13px;margin:0 0 14px}
.ajuda code{background:var(--fundo-3);padding:1px 6px;border-radius:5px;font-size:12px}
label{display:block;font-size:13px;color:var(--texto-2);margin-bottom:12px}
label input[type=text],label input[type=password]{
  display:block;width:100%;margin-top:5px;background:var(--fundo);
  border:1px solid var(--borda);color:var(--texto);border-radius:9px;padding:10px 12px;font-size:14px;
}
label input:focus{outline:0;border-color:var(--acento)}
.linha-check{display:flex;align-items:center;gap:9px;color:var(--texto)}
.linha-check input{width:17px;height:17px;accent-color:var(--acento)}
.estado-sync{font-size:13px;margin:12px 0 0;min-height:19px}
.estado-sync.ok{color:var(--ok)}
.estado-sync.erro{color:var(--erro)}

/* ── rodapé ── */
.rodape{
  border-top:1px solid var(--borda);padding:9px 18px;
  font-size:12px;color:var(--texto-2);text-align:right;
}

@media (max-width:520px){
  .termo{font-size:26px}
  .termo.frase{font-size:20px}
  .placar{display:none}
  main{padding:16px 13px 30px}
}

/* quando o erro foi de conjugação, o feedback nomeia o que ele escreveu */
.resposta-dada.conjugacao{
  background:var(--erro-fraco);border-color:var(--erro-borda);
}
.resposta-dada.conjugacao .rotulo{color:var(--erro)}
.forma-rotulo{
  font-size:12.5px;font-weight:500;color:var(--texto-2);
  border:1px solid var(--borda);border-radius:999px;padding:2px 9px;
  margin-left:8px;white-space:nowrap;
}

/* contestar: o card pode estar errado, não você */
.contestar{margin-bottom:16px}
.link-contestar{
  background:var(--erro-fraco);border:1px solid var(--erro-borda);color:var(--erro);
  border-radius:10px;padding:10px 14px;font-size:14px;font-weight:500;cursor:pointer;width:100%;
  text-align:left;transition:border-color .12s,background .12s;
}
.link-contestar:hover{border-color:var(--erro);background:var(--erro-fraco)}
.aviso-contestado{margin:9px 0 0;font-size:13px;color:var(--ok)}

/* ── comentar um card ──
   Discreto de propósito: é uma saída sempre disponível, não uma ação que
   o card esteja pedindo. Sublinhado fino, do lado do texto secundário. */
.linha-comentar{margin:10px 0 16px;text-align:right}
.link-comentar{
  background:none;border:none;color:var(--texto-2);font:inherit;font-size:13px;
  cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--borda);
}
.link-comentar:hover{color:var(--texto);text-decoration-color:var(--texto-2)}
.link-comentar.na-lista{margin-top:8px;font-size:12.5px}

.comentario-fundo{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.comentario-painel{
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:20px;width:100%;max-width:460px;
}
.comentario-painel h3{margin:0 0 4px;font-size:17px}
.comentario-alvo{
  margin:0 0 14px;font-size:14px;color:var(--texto-2);line-height:1.5;
  border-left:2px solid var(--acento);padding-left:10px;
}
#comentario-texto{
  width:100%;background:var(--fundo);border:1px solid var(--borda);color:var(--texto);
  border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;line-height:1.55;
  resize:vertical;min-height:88px;
}
#comentario-texto:focus{outline:none;border-color:var(--acento)}
.comentario-conta{margin:6px 0 14px;font-size:12.5px;color:var(--texto-2);text-align:right}
.comentario-conta.no-fim{color:var(--quase)}

/* ── lista de todos os cards ── */
.filtros{
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;
  padding:14px;margin-bottom:16px;position:sticky;top:66px;z-index:5;
}
#busca-cards{
  width:100%;background:var(--fundo);border:1px solid var(--borda);
  color:var(--texto);border-radius:10px;padding:11px 13px;font-size:15px;
}
#busca-cards:focus{outline:0;border-color:var(--acento)}
.linha-filtros{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.filtro{
  display:flex;flex-direction:column;gap:4px;margin:0;flex:1;min-width:132px;
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--texto-2);
}
.filtro select{
  background:var(--fundo);border:1px solid var(--borda);color:var(--texto);
  border-radius:9px;padding:8px 9px;font:inherit;font-size:13.5px;text-transform:none;
  letter-spacing:normal;
}
.filtro select:focus{outline:0;border-color:var(--acento)}
.contagem{margin:11px 0 0;font-size:13px;color:var(--texto-2)}
.contagem b{color:var(--texto)}

.lista-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.card-linha{
  background:var(--fundo-2);border:1px solid var(--borda);
  border-left:3px solid var(--borda);border-radius:10px;padding:12px 14px;
}
.card-linha.visto{border-left-color:var(--acento)}
.card-linha.dominado{border-left-color:var(--ok)}
.card-linha-topo{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.card-linha .es{font-weight:650;color:#fff;font-size:16px}
.card-linha .seta{color:var(--texto-2);font-size:13px}
.card-linha .pt{color:var(--texto)}
.card-linha-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.selo{
  font-size:11px;border-radius:999px;padding:2px 9px;
  border:1px solid var(--borda);color:var(--texto-2);background:var(--fundo-3);
}
.selo.nivel{color:var(--acento);border-color:var(--acento-borda);background:var(--acento-fraco)}
.selo.situacao.novo{opacity:.7}
.selo.situacao.preso{color:var(--texto-2);border-style:dashed;opacity:.85}
.selo.situacao.andamento{color:var(--acento)}
.selo.situacao.invertido{color:var(--quase);border-color:var(--quase-borda)}
.selo.situacao.dominado{color:var(--ok);border-color:var(--ok-borda)}
.card-linha-nota{
  color:var(--texto-2);font-size:13px;margin:9px 0 0;
  border-left:2px solid var(--borda);padding-left:10px;
  white-space:pre-line;line-height:1.65;
}
.vazio{color:var(--texto-2);text-align:center;padding:30px 0}

@media (max-width:520px){
  .filtros{position:static}
  .filtro{min-width:calc(50% - 5px)}
}