/* ── indicacao.css ── */
/* /referral — a página de Indicação (design 07/09/2026).
 *
 * Preto #050505, cards #0a0a0a com borda #1b1b1b, laranja SÓ em número,
 * marcador e no botão Copiar; verde-água só na trilha do CodeBot. Sem
 * gradiente decorativo e sem barra colorida no topo do card — o design é
 * deliberadamente seco, e cada cor a mais tira significado das que restam.
 *
 * As duas fontes já estavam hospedadas aqui (docs/codebot-plano usam as
 * mesmas): Space Grotesk na interface, JetBrains Mono em TODO número, UID e
 * hash. `tabular-nums` na raiz da página — coluna de dinheiro que dança de
 * largura entre uma linha e outra é ilegível.
 */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/_local/fonts/space-grotesk-400.cbee7234.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/_local/fonts/JetBrainsMono.340e696a.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

.oc-ind {
  --ind-fundo: #050505;
  --ind-card: #0a0a0a;
  --ind-borda: #1b1b1b;
  --ind-cabeca: #060606;
  --ind-cabeca-borda: #141414;
  --ind-divisa: #121212;
  --ind-hover: #0e0e0e;
  --ind-painel: #080808;
  --ind-campo: #0c0c0c;
  --ind-campo-borda: #1f1f1f;
  --ind-laranja: #f7931a;
  --ind-agua: #2dd4bf;
  --ind-verde: #22c55e;
  --ind-txt: #ffffff;
  --ind-corpo: #a3a3a3;
  --ind-sec: #8a8a8a;
  --ind-rot: #6a6a6a;
  --ind-rot2: #565656;
  --ind-vazio: #4a4a4a;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px 96px;
  background: var(--ind-fundo);
  color: var(--ind-txt);
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.oc-ind *,
.oc-ind *::before,
.oc-ind *::after { box-sizing: border-box; }
.oc-ind .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── cabeçalho ─────────────────────────────────────────────────────── */
.oc-ind-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.oc-ind-topo-txt { display: flex; flex-direction: column; gap: 10px; }
.oc-ind-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ind-sec);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
/* O marcador de seção: quadrado de 9px inclinado, laranja. */
.oc-ind-marca {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--ind-laranja);
  transform: skewX(-26.6deg);
  border-radius: 1px;
}
.oc-ind-marca.agua { background: var(--ind-agua); }
.oc-ind h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.05;
}
.oc-ind-sub {
  margin: 0;
  max-width: 560px;
  color: var(--ind-sec);
  font-size: 14px;
  line-height: 1.6;
}
.oc-ind-sub strong { color: var(--ind-txt); font-weight: 600; }
.oc-ind-fantasma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--ind-campo-borda);
  color: #cfcfcf;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.oc-ind-fantasma:hover { border-color: var(--ind-laranja); color: var(--ind-laranja); }
.oc-ind-fantasma span { color: var(--ind-rot2); }

/* ── cartões ───────────────────────────────────────────────────────── */
.oc-ind-grade2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.oc-ind-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 28px;
  background: var(--ind-card);
  border: 1px solid var(--ind-borda);
  border-radius: 18px;
}
.oc-ind-card-rot {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ind-rot);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.oc-ind-card-rot .dir { margin-left: auto; color: var(--ind-rot2); letter-spacing: 1.5px; }
.oc-ind-olho {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ind-rot2);
  font: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: none;
  cursor: pointer;
}
.oc-ind-olho:hover { color: var(--ind-laranja); }

/* total grande: o cifrão esmaecido e os centavos menores */
.oc-ind-total { display: flex; align-items: baseline; gap: 6px; }
.oc-ind-total .cifrao { color: var(--ind-rot2); font-size: 26px; }
.oc-ind-total .inteiro { font-size: 46px; font-weight: 600; letter-spacing: -1.5px; }
.oc-ind-total .centavos { font-size: 26px; color: var(--ind-sec); }

.oc-ind-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-ind-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #131313;
  border: 1px solid var(--ind-cabeca-borda);
  font-size: 12px;
  color: var(--ind-corpo);
}
.oc-ind-chip .ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.oc-ind-chip.taxa .ponto { background: var(--ind-laranja); }
.oc-ind-chip.taxa b { color: var(--ind-laranja); font-weight: 600; }
.oc-ind-chip.bot .ponto { background: var(--ind-agua); }
.oc-ind-chip.bot b { color: var(--ind-agua); font-weight: 600; }
.oc-ind-chip-nota { color: var(--ind-rot); font-size: 12px; }

/* faixa tracejada do estimado do dia */
.oc-ind-estimado {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px dashed #262626;
  border-radius: 12px;
  background: #070707;
}
.oc-ind-estimado-l1 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ind-corpo);
}
.oc-ind-estimado-l1 b { color: var(--ind-txt); font-weight: 600; }
.oc-ind-estimado-l2 { color: var(--ind-rot); font-size: 12px; }

/* link + botão diagonal */
.oc-ind-campo-rot {
  margin: 0;
  color: var(--ind-rot);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.oc-ind-link {
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ind-campo);
  border: 1px solid var(--ind-campo-borda);
}
.oc-ind-link code {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--ind-corpo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-ind-copiar {
  flex: none;
  height: 44px;
  padding: 0 20px 0 30px;
  margin-left: -16px;
  border: 0;
  background: var(--ind-laranja);
  color: #0a0a0a;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
}
.oc-ind-copiar.ok { background: var(--ind-verde); }
.oc-ind-codigo { margin: 0; color: var(--ind-rot); font-size: 12px; }
.oc-ind-codigo b { color: var(--ind-corpo); font-weight: 500; }

/* nível */
.oc-ind-nivel-linha { display: flex; align-items: flex-start; gap: 18px; }
.oc-ind-nivel-v {
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--ind-laranja);
  letter-spacing: -1px;
}
.oc-ind-nivel-txt { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ind-corpo); }
.oc-ind-nivel-txt b { color: var(--ind-txt); font-weight: 600; }
.oc-ind-nivel-txt .nota { color: var(--ind-rot); font-size: 12px; }
.oc-ind-req { display: flex; flex-direction: column; gap: 12px; }
.oc-ind-req-item { display: flex; flex-direction: column; gap: 7px; }
.oc-ind-req-cab { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ind-corpo); }
.oc-ind-req-cab .val { color: var(--ind-sec); }
.oc-ind-req-barra { height: 4px; border-radius: 2px; background: #161616; overflow: hidden; }
.oc-ind-req-barra i { display: block; height: 100%; background: var(--ind-laranja); border-radius: 2px; }
.oc-ind-req-item.ok .oc-ind-req-barra i { background: var(--ind-verde); }
.oc-ind-falta { margin: 0; color: var(--ind-rot); font-size: 12px; line-height: 1.6; }

/* ── seções ────────────────────────────────────────────────────────── */
.oc-ind-secao { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.oc-ind-secao-cab {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.oc-ind-secao-cab h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.oc-ind-secao-cab .dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.oc-ind-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ind-cabeca-borda);
  color: var(--ind-rot);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.oc-ind-resumo { color: var(--ind-rot); font-size: 12px; }
.oc-ind-resumo b { color: var(--ind-corpo); font-weight: 500; }

/* seletor de botões colados com corte diagonal */
.oc-ind-seg { display: flex; align-items: stretch; }
.oc-ind-seg button {
  height: 34px;
  border: 0;
  background: #141414;
  color: #c9c9c9;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 26px;
  margin-right: -14px;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.oc-ind-seg button:first-child {
  border-radius: 9px 0 0 9px;
  padding: 0 26px 0 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.oc-ind-seg button:last-child {
  border-radius: 0 9px 9px 0;
  padding: 0 16px 0 26px;
  margin-right: 0;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
}
.oc-ind-seg button[aria-pressed='true'] { background: var(--ind-laranja); color: #0a0a0a; }

.oc-ind-busca {
  height: 34px;
  min-width: 220px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--ind-campo);
  border: 1px solid var(--ind-campo-borda);
  color: var(--ind-txt);
  font: inherit;
  font-size: 12px;
}
.oc-ind-busca::placeholder { color: var(--ind-rot2); }
.oc-ind-busca:focus { outline: none; border-color: #2a2a2a; }

/* ── tabelas ───────────────────────────────────────────────────────── */
.oc-ind-quadro {
  background: var(--ind-card);
  border: 1px solid var(--ind-borda);
  border-radius: 18px;
  overflow: hidden;
}
.oc-ind-rolo { overflow-x: auto; }
.oc-ind-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.oc-ind-tab th {
  position: sticky;
  top: 0;
  background: var(--ind-cabeca);
  border-bottom: 1px solid var(--ind-cabeca-borda);
  padding: 12px 16px;
  text-align: left;
  color: var(--ind-rot);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.oc-ind-tab td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--ind-divisa);
  color: var(--ind-corpo);
  white-space: nowrap;
}
.oc-ind-tab tbody tr:last-child td { border-bottom: 0; }
.oc-ind-tab .num { text-align: right; }
.oc-ind-tab .forte { color: var(--ind-txt); font-weight: 600; }
.oc-ind-tab .laranja { color: var(--ind-laranja); }
.oc-ind-tab .agua { color: var(--ind-agua); }
.oc-ind-tab .fraco { color: var(--ind-rot2); }
.oc-ind-tab .sub { display: block; color: var(--ind-rot2); font-size: 11px; margin-top: 2px; }
.oc-ind-tab tbody tr.clicavel { cursor: pointer; }
.oc-ind-tab tbody tr.clicavel:hover td { background: var(--ind-hover); }
.oc-ind-tab tbody tr.aberta td { background: var(--ind-hover); }
.oc-ind-rodape-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ind-cabeca);
  border-top: 1px solid var(--ind-cabeca-borda);
  color: var(--ind-rot);
  font-size: 12px;
}
.oc-ind-rodape-tab .dir { margin-left: auto; }
.oc-ind-vazio-txt { padding: 26px 16px; color: var(--ind-vazio); font-size: 13px; text-align: center; }

/* moeda: pastilha com a inicial */
.oc-ind-moeda { display: inline-flex; align-items: center; gap: 10px; }
.oc-ind-bolha {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #0a0a0a;
  flex: none;
}
/* avatar do afiliado: iniciais + ponto de status */
.oc-ind-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #161616;
  border: 1px solid #232323;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ind-corpo);
  flex: none;
}
.oc-ind-avatar i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a4a4a;
  border: 2px solid var(--ind-card);
}
.oc-ind-avatar.ativo i { background: var(--ind-verde); }
.oc-ind-pessoa { display: inline-flex; align-items: center; gap: 11px; }
.oc-ind-selo {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #131313;
  color: var(--ind-sec);
}
.oc-ind-selo.alto { background: rgba(247, 147, 26, 0.12); color: var(--ind-laranja); }
.oc-ind-seta {
  display: inline-block;
  color: var(--ind-rot2);
  transition: transform 0.15s ease;
}
tr.aberta .oc-ind-seta { transform: rotate(180deg); }

/* painel que abre na linha do afiliado */
.oc-ind-painel td { background: var(--ind-painel); padding: 18px 16px 20px; white-space: normal; }
.oc-ind-painel-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.oc-ind-painel-rot {
  color: var(--ind-rot2);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.oc-ind-moedas-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-ind-moeda-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px 6px 7px;
  border-radius: 999px;
  background: #101010;
  border: 1px solid var(--ind-cabeca-borda);
  font-size: 12px;
  color: var(--ind-corpo);
}
.oc-ind-moeda-chip .oc-ind-bolha { width: 18px; height: 18px; font-size: 9px; }

/* barras do CodeBot */
.oc-ind-barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 78px;
  padding: 0 2px;
}
.oc-ind-barras i {
  flex: 1;
  min-width: 2px;
  background: #1c6b62;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.oc-ind-barras i.hoje { background: var(--ind-agua); }

/* escada */
.oc-ind-tab tr.eu td { background: rgba(247, 147, 26, 0.06); }
.oc-ind-tab tr.eu td:first-child { box-shadow: inset 2px 0 0 var(--ind-laranja); }
.oc-ind-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--ind-laranja);
  color: var(--ind-laranja);
  font-size: 10px;
  letter-spacing: 1px;
}
.oc-ind-tag.frio { border-color: #2a2a2a; color: var(--ind-rot); }

/* navegação de dia */
.oc-ind-dia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid var(--ind-campo-borda);
  background: var(--ind-campo);
  font-size: 13px;
  color: var(--ind-corpo);
}
.oc-ind-dia button {
  background: none;
  border: 0;
  color: var(--ind-corpo);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
}
.oc-ind-dia button:disabled { color: #2a2a2a; cursor: default; }
.oc-ind-acao {
  height: 34px;
  padding: 0 16px 0 26px;
  margin-left: -14px;
  border: 0;
  background: #141414;
  color: #c9c9c9;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 9px 9px 0;
  cursor: pointer;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
}
.oc-ind-acao:hover { color: var(--ind-laranja); }
.oc-ind-mostrar {
  background: none;
  border: 0;
  color: var(--ind-corpo);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.oc-ind-mostrar:hover { color: var(--ind-laranja); }

.oc-ind-nota {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--ind-divisa);
  color: var(--ind-corpo);
  font-size: 12px;
  line-height: 1.6;
}
.oc-ind-nota b { color: var(--ind-txt); font-weight: 600; }
.oc-ind-nota .oc-ind-marca { margin-top: 4px; }

.oc-ind-erro {
  padding: 18px;
  border: 1px solid #2a1414;
  border-radius: 12px;
  background: #0d0808;
  color: #d98e8e;
  font-size: 13px;
}

/* ── mobile: coluna única, tabela rola, número nunca quebra ────────── */
@media (max-width: 900px) {
  .oc-ind { padding: 28px 16px 72px; gap: 16px; }
  .oc-ind h1 { font-size: 27px; }
  .oc-ind-card { padding: 20px 18px; }
  .oc-ind-grade2 { grid-template-columns: 1fr; }
  .oc-ind-total .inteiro { font-size: 38px; }
  .oc-ind-secao-cab .dir { margin-left: 0; width: 100%; }
  .oc-ind-busca { min-width: 0; width: 100%; }
  /* Alvo de toque: 44px é o piso, e a linha da tabela é clicável. */
  .oc-ind-tab td { padding: 15px 14px; }
  .oc-ind-seg button { height: 44px; }
  .oc-ind-dia, .oc-ind-acao { height: 44px; }
  .oc-ind-copiar { height: 48px; }
}

/* ── modo cheio dentro da /affiliate ────────────────────────────────
 *
 * Logado, o `afiliado-pagina.js` marca o capítulo do painel com
 * `.oc-af-cap-cheio`: o texto do capítulo sai (o título dele é o folheto), a
 * moldura do painel some (a tela nova traz os próprios cards) e a coluna passa
 * a ser uma só. Sem isso a tela de 1100px seria espremida na coluna de 7fr do
 * grid do capítulo — que é metade da linha.
 */
/* 🔴 `minmax(0, 1fr)`, não `1fr`. Uma coluna `1fr` tem mínimo AUTO e não
 * encolhe abaixo do conteúdo: com a tabela dentro, a coluna virava 699px numa
 * tela de 390 e a tela sangrava para fora do recorte — sem barra de rolagem,
 * porque quem cortava era um pai com `overflow` mais acima. É a mesma razão de
 * a `.oc-cap-inner` original usar `minmax(0, 5fr)`. */
.oc-af-cap-cheio .oc-cap-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: none;
}
.oc-af-cap-cheio .oc-cap-painel,
.oc-af-cap-cheio .oc-af-painel-caixa { min-width: 0; }
.oc-af-cap-cheio .oc-cap-texto { display: none; }
[dir] .oc-af-cap-cheio .oc-cap-painel {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
[dir] .oc-af-cap-cheio .oc-af-painel-caixa {
  padding: 0;
  border: 0;
  background: transparent;
}

/* 🔴 `hidden` sozinho NÃO esconde um capítulo: `[hidden]{display:none}` vem da
 * folha do navegador (especificidade 0) e o `.oc-cap { display: block }` da
 * `home-secoes.css` vence. Sem esta regra o folheto continuava desenhado
 * ACIMA do painel, com o atributo posto e a tela dizendo que estava escondido
 * — foi o que a prova de 07/09/2026 pegou. Mesmo remédio que a
 * `.oc-af-painel-caixa [hidden]` já usava. */
.oc-cap[hidden] { display: none !important; }

/* ── v2 do handoff (07/09/2026) ─────────────────────────────────────
 *
 * O que entrou: o seletor ‹ › de metas no card do nível, a busca e o filtro
 * PRÓPRIOS da trilha do CodeBot, e o celular em três abas com cartões no lugar
 * das tabelas.
 */

/* seletor de meta do nível: duas setas e o rótulo, sem popup */
.oc-ind-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px;
  border-radius: 8px;
  border: 1px solid var(--ind-cabeca-borda);
  background: #0c0c0c;
}
.oc-ind-meta button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ind-corpo);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.oc-ind-meta button:disabled { color: #2a2a2a; cursor: default; }
.oc-ind-meta span {
  color: var(--ind-laranja);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* busca + profundidade dentro da trilha do CodeBot */
.oc-ind-cb-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.oc-ind-cb-filtros .oc-ind-busca { flex: 1; min-width: 180px; }

/* uma linha de contagem acima das listas do celular */
.oc-ind-cont-mob {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
  color: var(--ind-rot);
  font-size: 12px;
}
.oc-ind-cont-mob .dir { margin-left: auto; letter-spacing: 1.2px; }

/* cartões (celular): afiliado e crédito */
.oc-ind-cartao {
  background: var(--ind-card);
  border: 1px solid var(--ind-borda);
  border-radius: 14px;
  overflow: hidden;
}
.oc-ind-cartao + .oc-ind-cartao { margin-top: 10px; }
.oc-ind-cartao-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.oc-ind-cartao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oc-ind-cartao-txt .forte {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ind-txt);
  font-size: 15px;
  font-weight: 600;
}
.oc-ind-cartao-txt .sub { color: var(--ind-sec); font-size: 12px; }
.oc-ind-cartao.aberta { border-color: #242424; }
.oc-ind-cartao.aberta .oc-ind-seta { transform: rotate(180deg); }

.oc-ind-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 14px; }
.oc-ind-duplo.sem-borda { padding: 0; }
.oc-ind-duplo-cel .rot.laranja { color: var(--ind-laranja); }
.oc-ind-duplo-cel .rot.agua { color: var(--ind-agua); }
.oc-ind-duplo-cel {
  padding: 10px 12px;
  border-radius: 11px;
  background: #0e0e0e;
  border: 1px solid var(--ind-cabeca-borda);
}
.oc-ind-duplo-cel .rot {
  display: block;
  color: var(--ind-rot);
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.oc-ind-duplo-cel .val { display: block; margin-top: 5px; font-size: 15px; }
.oc-ind-duplo-cel .val.laranja { color: var(--ind-laranja); }
.oc-ind-duplo-cel .val.agua { color: var(--ind-agua); }

.oc-ind-cartao-painel {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ind-divisa);
  background: var(--ind-painel);
}
.oc-ind-moeda-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--ind-corpo);
}
.oc-ind-moeda-linha .dir { margin-left: auto; }
.oc-ind-moeda-linha .sub { color: var(--ind-rot2); font-size: 11.5px; }
.oc-ind-mini-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.oc-ind-mini-grade .rot {
  display: block;
  color: var(--ind-rot);
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.oc-ind-mini-grade .val { display: block; margin-top: 4px; color: var(--ind-txt); font-size: 14px; }

.oc-ind-credito { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.oc-ind-credito-esq { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.oc-ind-credito-esq .sub { color: var(--ind-rot2); font-size: 11.5px; margin-top: 3px; }
.oc-ind-credito-dir { text-align: right; font-size: 13px; color: var(--ind-corpo); }
.oc-ind-trilha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.oc-ind-trilha.taxa { color: var(--ind-laranja); }
.oc-ind-trilha.bot { color: var(--ind-agua); }
.oc-ind-mostrar.larga {
  width: 100%;
  height: 44px;
  border: 1px solid var(--ind-cabeca-borda);
  border-radius: 12px;
  background: #0c0c0c;
}

@media (max-width: 900px) {
  /* As abas ocupam a linha inteira e o alvo cresce para 44px. */
  .oc-ind-mob > .oc-ind-seg { width: 100%; }
  .oc-ind-mob > .oc-ind-seg button { flex: 1; height: 44px; }
  .oc-ind-mob .oc-ind-card-rot .oc-ind-olho {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .oc-ind-mob .oc-ind-meta { height: 34px; }
  .oc-ind-mob .oc-ind-meta button { width: 30px; height: 30px; }
  .oc-ind-mob .oc-ind-secao-cab .dir { flex-wrap: wrap; }
  .oc-ind-mob .oc-ind-cb-filtros { flex-direction: column; align-items: stretch; }
  .oc-ind-mob .oc-ind-cb-filtros .oc-ind-busca { height: 44px; }
  .oc-ind-mob .oc-ind-dia { width: 100%; justify-content: space-between; }
  /* O CSV é uma AÇÃO, não mais uma opção do filtro: no celular ele sai do
   * grupo colado (o corte diagonal o fazia parecer a quarta aba de trilha). */
  .oc-ind-mob .oc-ind-acao {
    margin-left: 10px;
    padding: 0 16px;
    border-radius: 10px;
    clip-path: none;
    border: 1px solid var(--ind-campo-borda);
  }
  /* A contagem já aparece na linha logo abaixo; a pílula do título repetia o
   * mesmo número dois centímetros acima. */
  .oc-ind-mob .oc-ind-secao-cab .oc-ind-pill { display: none; }
}

/* A régua da tela nunca passa da janela. */
.oc-ind { width: 100%; }

/* ── espelho de especificidade (gerado por _tools/espelha_dir.py) ──
 *
 * NÃO edite à mão: rode `python3 _tools/espelha_dir.py <folha>` depois de
 * mexer em qualquer medida acima. O @media vem junto de propósito — na
 * primeira geração ele ficou de fora e o desktop passou a usar as medidas
 * do celular.
 */
[dir] .oc-ind {
  margin: 0 auto;
  padding: 56px 32px 96px;
}
[dir] .oc-ind-topo {
  margin-bottom: 6px;
}
[dir] .oc-ind h1 {
  margin: 0;
}
[dir] .oc-ind-sub {
  margin: 0;
}
[dir] .oc-ind-fantasma {
  padding: 0 16px;
  border: 1px solid var(--ind-campo-borda);
}
[dir] .oc-ind-card {
  padding: 26px 28px;
  border: 1px solid var(--ind-borda);
}
[dir] .oc-ind-card-rot .dir {
  margin-left: auto;
}
[dir] .oc-ind-olho {
  border: 0;
  padding: 0;
}
[dir] .oc-ind-chip {
  padding: 0 11px;
  border: 1px solid var(--ind-cabeca-borda);
}
[dir] .oc-ind-estimado {
  padding: 14px 16px;
  border: 1px dashed #262626;
}
[dir] .oc-ind-campo-rot {
  margin: 0;
}
[dir] .oc-ind-link {
  border: 1px solid var(--ind-campo-borda);
}
[dir] .oc-ind-link code {
  padding: 0 14px;
}
[dir] .oc-ind-copiar {
  padding: 0 20px 0 30px;
  margin-left: -16px;
  border: 0;
}
[dir] .oc-ind-codigo {
  margin: 0;
}
[dir] .oc-ind-falta {
  margin: 0;
}
[dir] .oc-ind-secao {
  margin-top: 22px;
}
[dir] .oc-ind-secao-cab h2 {
  margin: 0;
}
[dir] .oc-ind-secao-cab .dir {
  margin-left: auto;
}
[dir] .oc-ind-pill {
  padding: 0 10px;
  border: 1px solid var(--ind-cabeca-borda);
}
[dir] .oc-ind-seg button {
  border: 0;
  padding: 0 26px;
  margin-right: -14px;
}
[dir] .oc-ind-seg button:first-child {
  padding: 0 26px 0 16px;
}
[dir] .oc-ind-seg button:last-child {
  padding: 0 16px 0 26px;
  margin-right: 0;
}
[dir] .oc-ind-busca {
  padding: 0 12px;
  border: 1px solid var(--ind-campo-borda);
}
[dir] .oc-ind-quadro {
  border: 1px solid var(--ind-borda);
}
[dir] .oc-ind-tab th {
  border-bottom: 1px solid var(--ind-cabeca-borda);
  padding: 12px 16px;
}
[dir] .oc-ind-tab td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--ind-divisa);
}
[dir] .oc-ind-tab tbody tr:last-child td {
  border-bottom: 0;
}
[dir] .oc-ind-tab .sub {
  margin-top: 2px;
}
[dir] .oc-ind-rodape-tab {
  padding: 12px 16px;
  border-top: 1px solid var(--ind-cabeca-borda);
}
[dir] .oc-ind-rodape-tab .dir {
  margin-left: auto;
}
[dir] .oc-ind-vazio-txt {
  padding: 26px 16px;
}
[dir] .oc-ind-avatar {
  border: 1px solid #232323;
}
[dir] .oc-ind-avatar i {
  border: 2px solid var(--ind-card);
}
[dir] .oc-ind-selo {
  padding: 0 8px;
}
[dir] .oc-ind-painel td {
  padding: 18px 16px 20px;
}
[dir] .oc-ind-painel-rot {
  margin-bottom: 10px;
}
[dir] .oc-ind-moeda-chip {
  padding: 6px 11px 6px 7px;
  border: 1px solid var(--ind-cabeca-borda);
}
[dir] .oc-ind-barras {
  padding: 0 2px;
}
[dir] .oc-ind-tag {
  padding: 0 8px;
  border: 1px solid var(--ind-laranja);
}
[dir] .oc-ind-dia {
  padding: 0 8px;
  border: 1px solid var(--ind-campo-borda);
}
[dir] .oc-ind-dia button {
  border: 0;
  padding: 4px 6px;
}
[dir] .oc-ind-acao {
  padding: 0 16px 0 26px;
  margin-left: -14px;
  border: 0;
}
[dir] .oc-ind-mostrar {
  border: 0;
  padding: 0;
}
[dir] .oc-ind-nota {
  padding: 14px 16px;
  border-top: 1px solid var(--ind-divisa);
}
[dir] .oc-ind-nota .oc-ind-marca {
  margin-top: 4px;
}
[dir] .oc-ind-erro {
  padding: 18px;
  border: 1px solid #2a1414;
}
@media (max-width: 900px) {
  [dir] .oc-ind {
    padding: 28px 16px 72px;
  }
  [dir] .oc-ind-card {
    padding: 20px 18px;
  }
  [dir] .oc-ind-secao-cab .dir {
    margin-left: 0;
  }
  [dir] .oc-ind-tab td {
    padding: 15px 14px;
  }
}
[dir] .oc-ind-meta {
  padding: 0 4px;
  border: 1px solid var(--ind-cabeca-borda);
}
[dir] .oc-ind-meta button {
  border: 0;
}
[dir] .oc-ind-cont-mob {
  padding: 0 2px;
}
[dir] .oc-ind-cont-mob .dir {
  margin-left: auto;
}
[dir] .oc-ind-cartao {
  border: 1px solid var(--ind-borda);
}
[dir] .oc-ind-cartao + .oc-ind-cartao {
  margin-top: 10px;
}
[dir] .oc-ind-cartao-cab {
  padding: 14px 16px;
  border: 0;
}
[dir] .oc-ind-duplo {
  padding: 0 16px 14px;
}
[dir] .oc-ind-duplo.sem-borda {
  padding: 0;
}
[dir] .oc-ind-duplo-cel {
  padding: 10px 12px;
  border: 1px solid var(--ind-cabeca-borda);
}
[dir] .oc-ind-duplo-cel .val {
  margin-top: 5px;
}
[dir] .oc-ind-cartao-painel {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ind-divisa);
}
[dir] .oc-ind-moeda-linha {
  padding: 6px 0;
}
[dir] .oc-ind-moeda-linha .dir {
  margin-left: auto;
}
[dir] .oc-ind-mini-grade {
  margin-top: 12px;
}
[dir] .oc-ind-mini-grade .val {
  margin-top: 4px;
}
[dir] .oc-ind-credito {
  padding: 12px 14px;
}
[dir] .oc-ind-credito-esq .sub {
  margin-top: 3px;
}
[dir] .oc-ind-trilha {
  margin-top: 4px;
}
[dir] .oc-ind-mostrar.larga {
  border: 1px solid var(--ind-cabeca-borda);
}
@media (max-width: 900px) {
  [dir] .oc-ind-mob .oc-ind-acao {
    margin-left: 10px;
    padding: 0 16px;
    border: 1px solid var(--ind-campo-borda);
  }
}

/* ── cookies.css ── */
/* cookies.css — a BARRA DE CONSENTIMENTO da OFFCODE (handoff do dono,
 * `design_handoff_cookies`, 12/09/2026). Três estados mutuamente exclusivos,
 * um por vez: barra (1ª visita) → preferências → chip de reabrir.
 *
 * A mecânica está em `_local/cookies.js`; aqui só o desenho.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A captura reseta `border/margin/padding` num bloco `[dir] div, [dir] p, …`
 * de especificidade (0,1,1), que vence classe sozinha (0,1,0). Por isso TODO
 * seletor daqui nasce com `[dir]` na frente — a mesma regra do `deposit.css`.
 * Sem isso a barra desenha, o CSS "existe", e as caixas saem coladas.
 *
 * ## Sem `rem`
 *
 * A raiz do espelho é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum. `_tools/checa_css.py` reprova o build.
 *
 * ## z-index: 8950, não 9000
 *
 * 🔴 O handoff pede 9000 "mas ABAIXO de modais críticos de transação". O véu
 * do popup de saque/depósito (`.oc-dep-veu`, `deposito.css`) é 9000 TAMBÉM —
 * e entre iguais quem vem depois no DOM pinta por cima. A barra é o último
 * filho do `<body>`: em 9000 ela cobriria a confirmação de um saque. 8950
 * mantém a barra acima de tudo o que é página (abas móveis = 900, barra do
 * topo = 901) e abaixo de todo modal de dinheiro (9000, 9100, 9999, 99999).
 *
 * ## O pé é variável
 *
 * `--ck-pe` é a altura da barra de ABAS do móvel, medida em runtime pelo
 * `cookies.js`. Sem isso a folha cobriria as cinco abas na árvore `/m/`.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/_local/fonts/space-grotesk-400.cbee7234.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ck-surface:      #080808;
  --ck-card:         #070707;
  --ck-card-on:      #0B0906;

  --ck-line:         #1E1E1E;
  --ck-line-soft:    #141414;
  --ck-line-row:     #101010;

  --ck-ink:          #FFFFFF;
  --ck-ink-2:        #C8CCD2;
  --ck-ink-3:        #A4AAB2;
  --ck-ink-4:        #8A9098;
  --ck-ink-5:        #6E7480;
  --ck-ink-6:        #5A5F67;
  --ck-ink-7:        #4A4E55;

  --ck-accent:       #FFA51F;
  --ck-accent-soft:  #FFC24A;
  --ck-accent-deep:  #C9861A;

  --ck-font:         'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  --ck-slant:        -23.5deg;
  --ck-pe:           0px;
}

/* ---------- casca ---------- */

[dir] .ck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--ck-pe, 0px);
  z-index: 8950;
  border: 0;
  border-top: 1px solid var(--ck-line);
  margin: 0;
  padding: 0;
  background: var(--ck-surface);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.7);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  animation: ckRise 0.22s ease;
}
[dir] .ck *,
[dir] .ck *::before,
[dir] .ck *::after { box-sizing: border-box; }

@keyframes ckRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [dir] .ck,
  [dir] .ck-chip { animation: none; }
}

/* scrim que descola a barra do conteúdo da página */
[dir] .ck::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -90px;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
  pointer-events: none;
}
/* hairline laranja de entrada — assinatura OFFCODE */
[dir] .ck::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 165, 31, 0.75) 42%, transparent);
}

/* tick angulado */
[dir] .ck__tick {
  width: 4px;
  height: 15px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ck-accent);
  transform: skewX(var(--ck-slant));
}

/* ---------- estado 1 · barra ---------- */

[dir] .ck__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 36px;
  margin: 0;
  padding: 24px 28px;
  border: 0;
  flex-wrap: wrap;
}
[dir] .ck__copy {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
[dir] .ck__eyebrow-row { display: flex; align-items: center; gap: 11px; margin: 0; padding: 0; border: 0; }
[dir] .ck__eyebrow {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ck-accent-deep);
}
[dir] .ck__text {
  margin: 0;
  padding: 0 0 0 15px;
  border: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ck-ink-3);
  text-wrap: pretty;
}
[dir] .ck__text a { color: var(--ck-accent); text-decoration: none; }
[dir] .ck__text a:hover { color: var(--ck-accent-soft); }

/* o grupo fica ancorado à direita mesmo quando a linha quebra */
[dir] .ck__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  flex: none;
}

/* ---------- botões do sistema (corte de 23.5°) ---------- */
/*
 * O deslocamento é altura × tan(23.5°) ≈ altura × 0.4348 — 40px → 17.4px,
 * 44px → 19.1px, 46px → 20px. O fantasma é o MESMO corte com moldura
 * hairline: o `__fill` em `inset: 1px` recalcula para a altura interna
 * (altura − 2). As medidas moram em variáveis porque o móvel troca a altura
 * dos mesmos botões — duplicar o bloco inteiro por tamanho é o que faz um
 * dos dois ficar para trás na próxima mudança.
 */

[dir] .ck-btn {
  --ck-h: 40px;
  --ck-skew: 17.4px;
  --ck-fill: 16.5px;
  --ck-gloss: 40.5px;
  --ck-edge: 19px;
  --ck-cell: 51px;
  --ck-fs: 11.5px;
  position: relative;
  display: block;
  height: var(--ck-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  clip-path: polygon(var(--ck-skew) 0, 100% 0, calc(100% - var(--ck-skew)) 100%, 0 100%);
  transition: filter 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
[dir] .ck-btn--46 {
  --ck-h: 46px; --ck-skew: 20px; --ck-fill: 19.1px;
  --ck-gloss: 46.5px; --ck-edge: 22px; --ck-cell: 58.6px; --ck-fs: 12px;
}
[dir] .ck-btn--44 { --ck-h: 44px; --ck-skew: 19.1px; --ck-fill: 18.3px; }

/* primário */
[dir] .ck-btn--primary {
  display: flex;
  align-items: stretch;
  min-width: 158px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 58%) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08) 58%) bottom/100% 1px no-repeat,
    linear-gradient(90deg in oklab, #FFCB63 0%, #FFA51F 15%, #C87A0A 58%, #8C5205 78%, #4A2C02 100%);
  box-shadow: inset 0 -11.2px 14.5px -11.2px rgba(0, 0, 0, 0.3);
}
[dir] .ck-btn--primary:hover { filter: brightness(1.05); }
[dir] .ck-btn--primary:active { filter: brightness(0.96); transform: scale(0.994); }
/* fio de luz sobre a diagonal de entrada */
[dir] .ck-btn__gloss,
[dir] .ck-btn__edge {
  position: absolute;
  inset: 0 auto 0 0;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inherit;
  pointer-events: none;
}
[dir] .ck-btn__gloss {
  width: var(--ck-gloss);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0));
}
[dir] .ck-btn__edge {
  width: var(--ck-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14));
}
/*
 * 🔑 Rótulo e célula em FLUXO, não em `inset` fixo como na referência: o
 * rótulo é traduzido para sete idiomas (`НАСТРОИТЬ`, `自定义`, `कस्टमाइज़ करें`) e
 * caixa de largura cravada corta texto em silêncio. A célula recupera a
 * geometria exata da referência com a margem negativa: ela OCUPA
 * `cell − skew` (33.6px em 40px de altura, que é o `inset` da referência) e
 * PINTA `cell` (51px), passando por cima da diagonal do rótulo.
 */
[dir] .ck-btn__label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--ck-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--ck-ink);
}
/* célula escura do ícone, à direita */
[dir] .ck-btn__cell {
  flex: none;
  width: var(--ck-cell);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 calc(-1 * var(--ck-skew));
  padding: 0;
  border: 0;
  clip-path: inherit;
  background: linear-gradient(90deg in oklab, rgba(255, 228, 178, 0.17) 0 1.5px, rgba(70, 41, 2, 0.52) 1.5px, rgba(24, 12, 0, 0.92));
}
[dir] .ck-btn__cell svg { width: 13px; height: 13px; display: block; }
[dir] .ck-btn--46 .ck-btn__cell svg { width: 14px; height: 14px; }

/* fantasma — mesmo corte, moldura hairline */
[dir] .ck-btn--ghost { min-width: 118px; background: #2A2A2A; }
[dir] .ck-btn--ghost:hover { background: #4A4E55; }
[dir] .ck-btn__fill {
  position: absolute;
  inset: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: polygon(var(--ck-fill) 0, 100% 0, calc(100% - var(--ck-fill)) 100%, 0 100%);
  background: var(--ck-surface);
  pointer-events: none;
}
[dir] .ck-btn__ghost-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--ck-skew) + 6px);
  border: 0;
  font-size: var(--ck-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--ck-ink-2);
}

/* foco visível em todo controle (o teclado é caminho de primeira classe) */
[dir] .ck-btn:focus-visible,
[dir] .ck-switch:focus-visible,
[dir] .ck__back:focus-visible,
[dir] .ck-chip:focus-visible,
[dir] .ck__text a:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

/* ---------- estado 2 · preferências ---------- */

[dir] .ck__panel { margin: 0; padding: 22px 28px 20px; border: 0; }
[dir] .ck__panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
[dir] .ck__panel-head .ck__tick { height: 18px; }
[dir] .ck__panel-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-ink-2);
}
[dir] .ck__panel-rule { flex: 1; height: 1px; margin: 0; padding: 0; border: 0; background: var(--ck-line-soft); }
[dir] .ck__back {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: var(--ck-ink-6);
  transition: color 0.15s ease;
}
[dir] .ck__back:hover { color: var(--ck-ink-2); }

[dir] .ck__cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
/*
 * 🔑 Grade, não pilha: o cartão tem a MESMA marcação nas duas larguras e só
 * troca de mapa. No desktop o interruptor fica na linha do nome; no móvel ele
 * fica à direita das DUAS linhas (nome + descrição), como na referência.
 * Marcação diferente por largura significaria dois estados de interruptor
 * para manter em acordo — e um deles ficaria para trás.
 */
[dir] .ck-cat {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 16px 16px 15px;
  border: 1px solid #181818;
  border-radius: 12px;
  background: var(--ck-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'nome sw' 'desc desc' 'estado estado';
  align-items: center;
  gap: 9px 12px;
  min-width: 0;
  transition: border-color 0.16s ease, background 0.16s ease;
}
/* hairline de entrada quando a categoria está ativa */
[dir] .ck-cat.is-on {
  border-color: rgba(255, 165, 31, 0.3);
  background: var(--ck-card-on);
}
[dir] .ck-cat.is-on::before,
[dir] .ck-cat.is-locked::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 165, 31, 0.55) 45%, transparent);
}
[dir] .ck-cat__name {
  grid-area: nome;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ck-ink);
}
[dir] .ck-cat__desc {
  grid-area: desc;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ck-ink-5);
  text-wrap: pretty;
}
[dir] .ck-cat__state {
  grid-area: estado;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ck-ink-7);
}
[dir] .ck-cat.is-on .ck-cat__state,
[dir] .ck-cat.is-locked .ck-cat__state { color: var(--ck-accent-deep); }

/* interruptor */
[dir] .ck-switch {
  grid-area: sw;
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1px solid #262626;
  border-radius: 11px;
  background: #151515;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
[dir] .ck-switch__knob {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ck-ink-7);
  transition: left 0.16s ease, background 0.16s ease;
}
[dir] .ck-switch[aria-checked='true'] { background: var(--ck-accent); border-color: var(--ck-accent); }
[dir] .ck-switch[aria-checked='true'] .ck-switch__knob { left: 18px; background: #1A1000; }
/* necessários: ligado e imutável */
[dir] .ck-switch[aria-disabled='true'] {
  background: rgba(255, 165, 31, 0.22);
  border-color: rgba(255, 165, 31, 0.45);
  cursor: not-allowed;
}
[dir] .ck-switch[aria-disabled='true'] .ck-switch__knob { left: 18px; background: var(--ck-accent-soft); }

[dir] .ck__panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid #111111;
}
[dir] .ck__panel-note {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ck-ink-6);
  text-wrap: pretty;
}
[dir] .ck__panel-actions { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; flex: none; }
[dir] .ck__panel-actions .ck-btn--primary { min-width: 186px; }
[dir] .ck__panel-actions .ck-btn--ghost { min-width: 150px; }
[dir] .ck__actions .ck-btn--pers { min-width: 134px; }

/* ---------- estado 3 · respondido (chip) ---------- */

[dir] .ck-chip {
  position: fixed;
  left: 22px;
  bottom: calc(20px + var(--ck-pe, 0px));
  z-index: 8900;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--ck-line);
  border-radius: 19px;
  background: var(--ck-surface);
  cursor: pointer;
  font-family: var(--ck-font);
  font-size: 11px;
  font-weight: 500;
  color: var(--ck-ink-4);
  animation: ckRise 0.22s ease;
  transition: border-color 0.15s ease, color 0.15s ease;
}
[dir] .ck-chip:hover { border-color: var(--ck-accent); color: var(--ck-accent-soft); }
[dir] .ck-chip svg { width: 14px; height: 14px; display: block; flex: none; }

/* A última linha da página não fica embaixo da barra enquanto ela estiver no
 * ar. Só o rodapé recebe a folga: as telas de negociação e a carteira são
 * grade de altura de tela (`100dvh`) e um `padding-bottom` no `<body>` as
 * empurraria para fora — foi assim que a carteira ganhou a faixa preta de
 * 06/09. Quem não tem rodapé continua sem folga, de propósito. */
[dir] body.ck-com-barra .oc-rod { padding-bottom: var(--ck-alt, 0px); }

/* ============================================================
   MOBILE (≤ 560px) — folha que sobe da base
   ============================================================ */

@media (max-width: 560px) {
  [dir] .ck {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    box-shadow: 0 -26px 50px rgba(0, 0, 0, 0.7);
  }
  [dir] .ck::before { top: -80px; height: 80px; }

  /* barra */
  [dir] .ck__bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 22px 20px 24px;
  }
  /* 🔴 `flex: 1 1 360px` do desktop vira ALTURA quando a barra empilha: a
   * caixa do texto reservava 360px de altura e abria um vão preto entre o
   * texto e os botões (medido em 390px: barra de 1.000px, as abas cobertas).
   * `flex-basis` segue o eixo PRINCIPAL — trocar `row` por `column` troca o
   * significado da mesma declaração, sem erro nenhum. */
  [dir] .ck__copy { flex: 0 0 auto; max-width: none; }
  [dir] .ck__text { padding-left: 0; font-size: 12px; }
  /* o primário vem SOZINHO, em largura total, acima do par secundário — e a
   * ordem do par é `Rejeitar | Personalizar`, como na referência. Recusar não
   * fica atrás de "Personalizar" em lugar nenhum. */
  [dir] .ck__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-left: 0;
  }
  [dir] .ck__actions .ck-btn--primary {
    --ck-h: 46px; --ck-skew: 20px; --ck-fill: 19.1px;
    --ck-gloss: 46.5px; --ck-edge: 22px; --ck-cell: 58.6px; --ck-fs: 12px;
    order: -1;
    grid-column: 1 / -1;
    min-width: 0;
    box-shadow: inset 0 -12.8px 16.6px -12.8px rgba(0, 0, 0, 0.3);
  }
  [dir] .ck__actions .ck-btn--ghost {
    --ck-h: 44px; --ck-skew: 19.1px; --ck-fill: 18.3px;
    min-width: 0;
  }
  [dir] .ck__actions .ck-btn--rej { order: 1; }
  [dir] .ck__actions .ck-btn--pers { order: 2; min-width: 0; }

  /* preferências viram lista vertical */
  [dir] .ck__panel { padding: 18px 20px 22px; }
  [dir] .ck__panel-head { gap: 11px; margin-bottom: 14px; }
  [dir] .ck__panel-head .ck__tick { height: 16px; }
  [dir] .ck__panel-title { font-size: 11px; }
  [dir] .ck__back { font-size: 10.5px; }
  [dir] .ck__cats {
    display: block;
    margin-bottom: 16px;
  }
  /* o interruptor passa a ocupar as DUAS linhas, à direita — o mapa muda, a
   * marcação não */
  [dir] .ck-cat {
    grid-template-areas: 'nome sw' 'desc sw';
    align-items: start;
    gap: 5px 13px;
    padding: 13px 0;
    border: 0;
    border-top: 1px solid var(--ck-line-row);
    border-radius: 0;
    background: transparent;
  }
  [dir] .ck-cat.is-on { background: transparent; }
  [dir] .ck-cat.is-on::before,
  [dir] .ck-cat.is-locked::before { display: none; }
  [dir] .ck-cat__state { display: none; }
  /* alvo de toque maior */
  [dir] .ck-switch {
    align-self: start;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    margin-top: 2px;
  }
  [dir] .ck-switch__knob { top: 3px; width: 18px; height: 18px; }
  [dir] .ck-switch[aria-checked='true'] .ck-switch__knob,
  [dir] .ck-switch[aria-disabled='true'] .ck-switch__knob { left: 21px; }

  [dir] .ck__panel-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-top: 0;
    padding-top: 0;
  }
  [dir] .ck__panel-note { display: none; }
  /* 🔴 `align-items: stretch` explícito: o bloco de desktop centraliza, e sem
   * esta linha os dois botões da folha saíam com a largura do texto, boiando
   * no meio da tela em vez de ocuparem a largura toda. */
  [dir] .ck__panel-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  /* salvar em cima, só essenciais embaixo — os dois em 46px e largura total */
  [dir] .ck__panel-actions .ck-btn {
    --ck-h: 46px; --ck-skew: 20px; --ck-fill: 19.1px;
    --ck-gloss: 46.5px; --ck-edge: 22px; --ck-cell: 58.6px; --ck-fs: 12px;
    min-width: 0;
  }
  [dir] .ck__panel-actions .ck-btn--primary { order: -1; box-shadow: inset 0 -12.8px 16.6px -12.8px rgba(0, 0, 0, 0.3); }

  [dir] .ck-chip { left: 20px; height: 40px; border-radius: 20px; }
}