/* ── perfil-tela.css ── */
/* /profile — a tela de Perfil (design 07/09/2026).
 *
 * Desktop: barra lateral fixa de seis itens + conteúdo à direita.
 * Celular: tela-menu com identidade e lista, e cada item abre uma SUB-TELA com
 * cabeçalho `←` — não é o desktop espremido, é a navegação que o handoff
 * desenhou.
 *
 * Os tokens são os mesmos da tela de Indicação (preto #050505, cards #0a0a0a,
 * laranja só em ação e destaque), com o fundo do celular indo a #000000 como
 * no protótipo. As duas folhas repetem os `@font-face` de propósito: cada
 * página carrega a sua, e depender da folha da outra amarraria as duas.
 *
 * 🔑 O bloco `[dir]` no fim NÃO é enfeite: a captura traz um reset por
 * atributo (`[dir] div, [dir] table … { border:0; margin:0; padding:0 }`) com
 * especificidade 0,1,1, maior que qualquer classe. Sem repetir padding, margem
 * e borda com `[dir]` na frente, a tela desenha com tudo colado — e sem erro
 * nenhum no console.
 */
@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-pf {
  --pf-fundo: #050505;
  --pf-card: #0a0a0a;
  --pf-borda: #1b1b1b;
  --pf-cabeca: #060606;
  --pf-cabeca-borda: #141414;
  --pf-divisa: #121212;
  --pf-hover: #0e0e0e;
  --pf-campo: #0c0c0c;
  --pf-campo-borda: #1f1f1f;
  --pf-laranja: #f7931a;
  --pf-verde: #22c55e;
  --pf-vermelho: #f87171;
  --pf-txt: #ffffff;
  --pf-corpo: #a3a3a3;
  --pf-sec: #8a8a8a;
  --pf-rot: #6a6a6a;
  --pf-rot2: #565656;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
  /* 🔑 88px no topo, não 56. A barra do site tem 65px e é `sticky`: com 56 o
   * kicker nascia a 9px dela e qualquer rolagem curta já enfiava o título por
   * baixo — o que o dono viu em 07/09/2026. O respiro maior tira o cabeçalho
   * da zona de atrito da barra. */
  padding: 88px 32px 96px;
  background: var(--pf-fundo);
  color: var(--pf-txt);
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.oc-pf *,
.oc-pf *::before,
.oc-pf *::after { box-sizing: border-box; }
.oc-pf .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── cabeçalho ─────────────────────────────────────────────────────── */
.oc-pf-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--pf-sec);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.oc-pf-marca {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--pf-laranja);
  transform: skewX(-26.6deg);
  border-radius: 1px;
}
.oc-pf-marca.pequeno { width: 7px; height: 7px; }
.oc-pf-marca.vermelho { background: var(--pf-vermelho); }
.oc-pf h1 {
  margin: 8px 0 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.05;
}

/* ── corpo: barra lateral + conteúdo ───────────────────────────────── */
.oc-pf-corpo {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.oc-pf-lado {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--pf-card);
  border: 1px solid var(--pf-borda);
  border-radius: 16px;
}
.oc-pf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--pf-corpo);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.oc-pf-item:hover { background: var(--pf-hover); color: var(--pf-txt); }
.oc-pf-item[aria-current='true'] { background: #121212; color: var(--pf-txt); font-weight: 600; }
.oc-pf-item .oc-pf-marca { opacity: 0; }
.oc-pf-item[aria-current='true'] .oc-pf-marca { opacity: 1; }
.oc-pf-item .selo {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: #161616;
  color: var(--pf-rot);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oc-pf-item .selo.alerta { background: rgba(247, 147, 26, 0.14); color: var(--pf-laranja); }
.oc-pf-item.perigo { color: var(--pf-vermelho); }
.oc-pf-item.perigo .oc-pf-marca { background: var(--pf-vermelho); }
.oc-pf-fio { height: 1px; margin: 8px 4px; background: var(--pf-divisa); }

/* ── cartões e linhas ──────────────────────────────────────────────── */
.oc-pf-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-borda);
  border-radius: 16px;
  overflow: hidden;
}
.oc-pf-card + .oc-pf-card { margin-top: 18px; }
.oc-pf-ident {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--pf-divisa);
}
.oc-pf-avatar {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  background: rgba(247, 147, 26, 0.12);
  color: var(--pf-laranja);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}
.oc-pf-ident-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.oc-pf-nome { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.oc-pf-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--pf-sec); }
.oc-pf-selo-nivel {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(247, 147, 26, 0.12);
  color: var(--pf-laranja);
  font-size: 11px;
  letter-spacing: 1px;
}

.oc-pf-linha {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--pf-divisa);
}
.oc-pf-card > .oc-pf-linha:last-child { border-bottom: 0; }
.oc-pf-linha .rot { width: 168px; flex: none; color: var(--pf-sec); font-size: 13px; }
.oc-pf-linha .val {
  flex: 1;
  min-width: 0;
  color: var(--pf-txt);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* O e-mail nunca é truncado (handoff): ele quebra a linha se precisar. */
  word-break: break-word;
}
.oc-pf-linha .val.fraco { color: var(--pf-rot2); }
.oc-pf-check { color: var(--pf-verde); }

.oc-pf-bt {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--pf-campo-borda);
  background: #101010;
  color: var(--pf-corpo);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
}
.oc-pf-bt:hover { border-color: #2a2a2a; color: var(--pf-txt); }
.oc-pf-bt.marca { background: var(--pf-laranja); border-color: var(--pf-laranja); color: #0a0a0a; }
.oc-pf-bt.marca:hover { color: #0a0a0a; }
.oc-pf-bt.perigo { border-color: rgba(248, 113, 113, 0.35); color: var(--pf-vermelho); background: rgba(248, 113, 113, 0.06); }
.oc-pf-bt.larga { width: 100%; height: 42px; }
.oc-pf-bt:disabled { opacity: 0.45; cursor: default; }
.oc-pf-bt-txt {
  background: none;
  border: 0;
  padding: 0;
  color: var(--pf-corpo);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.oc-pf-bt-txt:hover { color: var(--pf-laranja); }

/* ── segurança ─────────────────────────────────────────────────────── */
.oc-pf-nivel {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 22px 26px;
  flex-wrap: wrap;
}
.oc-pf-nivel-esq { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.oc-pf-nivel-t { display: flex; align-items: baseline; gap: 12px; }
.oc-pf-nivel-t b { font-size: 19px; font-weight: 700; }
.oc-pf-nivel-t.baixa b { color: var(--pf-vermelho); }
.oc-pf-nivel-t.media b { color: var(--pf-laranja); }
.oc-pf-nivel-t.alta b { color: var(--pf-verde); }
.oc-pf-nivel-t span { color: var(--pf-rot); font-size: 12px; }
.oc-pf-barra { height: 4px; border-radius: 2px; background: #161616; overflow: hidden; }
.oc-pf-barra i { display: block; height: 100%; border-radius: 2px; background: var(--pf-laranja); }
.oc-pf-nivel-t.baixa ~ .oc-pf-barra i { background: var(--pf-vermelho); }
.oc-pf-nivel-t.alta ~ .oc-pf-barra i { background: var(--pf-verde); }
.oc-pf-nivel-txt { max-width: 320px; color: var(--pf-corpo); font-size: 13px; line-height: 1.6; }

.oc-pf-sg {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 26px;
  border-top: 1px solid var(--pf-divisa);
}
.oc-pf-sg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.oc-pf-sg-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.oc-pf-sg-d { color: var(--pf-sec); font-size: 12.5px; line-height: 1.5; }
.oc-pf-ponto { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--pf-rot2); }
.oc-pf-ponto.ok { background: var(--pf-verde); }
.oc-pf-ponto.aviso { background: var(--pf-laranja); }
.oc-pf-tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 5px;
  background: #131313;
  color: var(--pf-rot);
  font-size: 10px;
  letter-spacing: 1px;
}
.oc-pf-tag.ok { background: rgba(34, 197, 94, 0.12); color: var(--pf-verde); }
.oc-pf-tag.aviso { background: rgba(247, 147, 26, 0.12); color: var(--pf-laranja); }
.oc-pf-acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.oc-pf-rodape {
  display: flex;
  gap: 10px;
  padding: 14px 26px;
  background: var(--pf-cabeca);
  border-top: 1px solid var(--pf-cabeca-borda);
  color: var(--pf-corpo);
  font-size: 12px;
  line-height: 1.6;
}
.oc-pf-rodape b { color: var(--pf-txt); font-weight: 600; }
.oc-pf-rodape .dir { margin-left: auto; }

/* interruptor */
.oc-pf-chave {
  width: 48px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #202020;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.oc-pf-chave i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s ease;
}
.oc-pf-chave[aria-pressed='true'] { background: var(--pf-laranja); }
.oc-pf-chave[aria-pressed='true'] i { transform: translateX(20px); }
/* Travado LIGADO tem de PARECER ligado: o 2FA no saque não é uma opção
 * desligada, é uma proteção que acompanha o 2FA. Opacidade de "desabilitado"
 * faria a tela dizer o contrário do que o servidor faz. */
.oc-pf-chave:disabled { cursor: default; }
.oc-pf-chave:disabled[aria-pressed='false'] { opacity: 0.5; }

/* ── tabelas (sessões, histórico, notificações) ────────────────────── */
.oc-pf-rolo { overflow-x: auto; }
.oc-pf-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.oc-pf-tab th {
  background: var(--pf-cabeca);
  border-bottom: 1px solid var(--pf-cabeca-borda);
  padding: 12px 26px;
  text-align: left;
  color: var(--pf-rot);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.oc-pf-tab td {
  padding: 14px 26px;
  border-bottom: 1px solid var(--pf-divisa);
  color: var(--pf-corpo);
  vertical-align: middle;
}
.oc-pf-tab tbody tr:last-child td { border-bottom: 0; }
.oc-pf-tab .num { text-align: right; }
.oc-pf-tab .forte { color: var(--pf-txt); font-weight: 600; }
.oc-pf-tab .sub { display: block; color: var(--pf-rot2); font-size: 11.5px; margin-top: 3px; }
.oc-pf-vazio { padding: 28px 26px; color: #4a4a4a; font-size: 13px; text-align: center; }

.oc-pf-disp {
  width: 40px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: #131313;
  color: var(--pf-sec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.oc-pf-cab-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--pf-divisa);
}
.oc-pf-cab-card .t { font-size: 15px; font-weight: 700; }
.oc-pf-cab-card .d { color: var(--pf-sec); font-size: 12.5px; margin-top: 4px; }
.oc-pf-cab-card .dir { margin-left: auto; }

/* ── encerrar conta ────────────────────────────────────────────────── */
.oc-pf-fim-txt {
  padding: 22px 26px 18px;
  color: var(--pf-corpo);
  font-size: 13px;
  line-height: 1.65;
  max-width: 640px;
}
.oc-pf-fim-txt .t { color: var(--pf-txt); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.oc-pf-valor { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1px; }
.oc-pf-valor.alerta { color: var(--pf-laranja); }
.oc-pf-valor.ok { color: var(--pf-verde); }
.oc-pf-valor.neutro { color: var(--pf-rot); }

/* ── modal (desktop) / sheet (celular) ─────────────────────────────── */
.oc-pf-veu {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(0, 0, 0, 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.oc-pf-modal {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #0b0b0b;
  border: 1px solid #1f1f1f;
  border-radius: 18px;
  padding: 24px 26px 26px;
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  color: var(--pf-txt, #fff);
}
.oc-pf-modal-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.oc-pf-modal-cab h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.oc-pf-x {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #161616;
  color: #a3a3a3;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.oc-pf-x:hover { color: #fff; }
.oc-pf-modal-sub { margin: 0 0 16px; color: #a3a3a3; font-size: 13px; line-height: 1.6; }
.oc-pf-passo { color: #6a6a6a; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.oc-pf-campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.oc-pf-campo > label {
  color: #6a6a6a;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.oc-pf-campo input {
  height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid #1f1f1f;
  background: #0c0c0c;
  color: #fff;
  font: inherit;
  font-size: 14px;
}
.oc-pf-campo input::placeholder { color: #4a4a4a; }
.oc-pf-campo input:focus { outline: none; border-color: #2e2e2e; }
.oc-pf-campo input.mono { letter-spacing: 0.28em; }
.oc-pf-ajuda { color: #6a6a6a; font-size: 11.5px; line-height: 1.5; }
.oc-pf-ajuda.erro { color: var(--pf-vermelho, #f87171); }
.oc-pf-forca { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.oc-pf-forca .trilho { flex: 1; height: 3px; border-radius: 2px; background: #161616; overflow: hidden; }
.oc-pf-forca .trilho i { display: block; height: 100%; background: var(--pf-laranja, #f7931a); }
.oc-pf-modal-acoes { display: flex; gap: 12px; margin-top: 20px; }
.oc-pf-modal-acoes .oc-pf-bt { flex: 1; height: 44px; }
.oc-pf-aviso {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 11px;
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.55;
}
.oc-pf-aviso.neutro { background: #0e0e0e; color: #a3a3a3; }
.oc-pf-aviso.alerta { background: rgba(247, 147, 26, 0.08); color: #e3b872; }
.oc-pf-aviso.perigo { background: rgba(248, 113, 113, 0.08); color: #f0a3a3; }

.oc-pf-qr {
  width: 176px;
  height: 176px;
  margin: 4px auto 14px;
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
  display: block;
}
.oc-pf-chave-manual {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 11px;
  background: #0c0c0c;
  border: 1px solid #1f1f1f;
  margin-bottom: 14px;
  font-size: 12.5px;
  word-break: break-all;
}
.oc-pf-codigos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 14px;
}
.oc-pf-codigos span {
  padding: 10px 12px;
  border-radius: 9px;
  background: #0c0c0c;
  border: 1px solid #1f1f1f;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* toast */
.oc-pf-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 2147483100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 12px;
  background: #101010;
  border: 1px solid #232323;
  color: #fff;
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.oc-pf-toast.erro { border-color: rgba(248, 113, 113, 0.4); }

/* ── celular: tela-menu + sub-telas ────────────────────────────────── */
.oc-pf-mob-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 2px;
}
.oc-pf-mob-topo .oc-pf-avatar { width: 58px; height: 58px; font-size: 19px; }
.oc-pf-mob-nome { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.oc-pf-cartao-seg {
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--pf-borda);
  border-radius: 16px;
  background: var(--pf-card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.oc-pf-cartao-seg .seta { position: absolute; right: 16px; top: 16px; color: var(--pf-rot2); }
.oc-pf-cartao-seg .oc-pf-nivel-t { justify-content: flex-start; padding-right: 22px; }
.oc-pf-lista-rot {
  color: var(--pf-rot);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 6px 0 -6px;
}
.oc-pf-mob-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-bottom: 1px solid var(--pf-divisa);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.oc-pf-card > .oc-pf-mob-item:last-child { border-bottom: 0; }
/* 🔴 `<span>` é inline: sem `display:block` o título e a descrição saem
 * grudados na mesma linha ("ContaApelido, e-mail, UID"). Pego na prova de
 * 07/09/2026 — o reset da captura não tem culpa desta, é HTML mesmo. */
.oc-pf-mob-item > span:nth-child(2) { flex: 1; min-width: 0; }
.oc-pf-mob-item .t { display: block; font-size: 15px; font-weight: 600; }
.oc-pf-mob-item .d { display: block; color: var(--pf-sec); font-size: 12.5px; margin-top: 3px; }
.oc-pf-mob-item .seta { margin-left: auto; color: var(--pf-rot2); }
.oc-pf-mob-item.perigo .t { color: var(--pf-vermelho); }
.oc-pf-sub-cab {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  margin-bottom: 4px;
  background: var(--pf-fundo);
  border-bottom: 1px solid var(--pf-divisa);
}
.oc-pf-voltar {
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #131313;
  color: var(--pf-txt);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.oc-pf-sub-cab h2 { margin: 0; font-size: 17px; font-weight: 700; }

@media (max-width: 900px) {
  .oc-pf {
    padding: 14px 16px 96px;
    gap: 14px;
    background: #000000;
    --pf-fundo: #000000;
    --pf-card: #080808;
    --pf-borda: #171717;
  }
  .oc-pf h1 { font-size: 25px; }
  .oc-pf-corpo { grid-template-columns: 1fr; }
  .oc-pf-lado { display: none; }
  /* Linha vira cartão: rótulo pequeno em cima, valor abaixo, ação à direita. */
  .oc-pf-linha {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    padding: 14px 16px;
    min-height: 0;
  }
  .oc-pf-linha .rot { width: 100%; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pf-rot); }
  .oc-pf-linha .val { flex: 1 1 auto; font-size: 14px; }
  .oc-pf-linha .oc-pf-bt { height: 36px; }
  .oc-pf-ident { padding: 18px 16px; }
  .oc-pf-sg { flex-wrap: wrap; padding: 16px; }
  .oc-pf-sg .oc-pf-acoes { width: 100%; }
  .oc-pf-sg .oc-pf-acoes .oc-pf-bt { flex: 1; height: 42px; }
  .oc-pf-nivel { padding: 16px; gap: 12px; }
  .oc-pf-tab th, .oc-pf-tab td { padding: 13px 16px; }
  .oc-pf-rodape, .oc-pf-cab-card, .oc-pf-fim-txt { padding-left: 16px; padding-right: 16px; }
  /* Modal vira folha subindo da base, com pega e filete laranja. */
  .oc-pf-veu { align-items: flex-end; padding: 0; }
  .oc-pf-modal {
    max-width: none;
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 2px solid var(--pf-laranja, #f7931a);
    background: #030303;
    padding: 10px 18px calc(26px + env(safe-area-inset-bottom));
  }
  .oc-pf-pega {
    width: 40px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #262626;
  }
  /* As ações ficam presas ao fundo da folha. Com o formulário mais alto que a
   * tela (senha nova + confirmação + código), o botão principal saía da vista
   * e a pessoa tinha de rolar para dentro da folha para achá-lo. */
  .oc-pf-modal-acoes {
    flex-direction: column-reverse;
    position: sticky;
    bottom: 0;
    margin-top: 18px;
    padding-top: 12px;
    padding-bottom: 4px;
    background: linear-gradient(to bottom, rgba(3, 3, 3, 0) 0, #030303 14px);
  }
  .oc-pf-modal-acoes .oc-pf-bt { width: 100%; height: 46px; }
  /* O toast sobe acima da barra de abas do celular. */
  .oc-pf-toast { bottom: calc(108px + env(safe-area-inset-bottom)); left: 16px; right: 16px; transform: none; }
}
@media (min-width: 901px) {
  .oc-pf-mob { display: none; }
  .oc-pf-pega { display: none; }
}

/* ── 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-pf {
  margin: 0 auto;
  padding: 88px 32px 96px;
}
[dir] .oc-pf h1 {
  margin: 8px 0 0;
}
[dir] .oc-pf-lado {
  padding: 12px;
  border: 1px solid var(--pf-borda);
}
[dir] .oc-pf-item {
  padding: 0 12px;
  border: 0;
}
[dir] .oc-pf-item .selo {
  margin-left: auto;
  padding: 0 6px;
}
[dir] .oc-pf-fio {
  margin: 8px 4px;
}
[dir] .oc-pf-card {
  border: 1px solid var(--pf-borda);
}
[dir] .oc-pf-card + .oc-pf-card {
  margin-top: 18px;
}
[dir] .oc-pf-ident {
  padding: 24px 26px;
  border-bottom: 1px solid var(--pf-divisa);
}
[dir] .oc-pf-selo-nivel {
  padding: 0 8px;
}
[dir] .oc-pf-linha {
  padding: 14px 26px;
  border-bottom: 1px solid var(--pf-divisa);
}
[dir] .oc-pf-card > .oc-pf-linha:last-child {
  border-bottom: 0;
}
[dir] .oc-pf-bt {
  padding: 0 14px;
  border: 1px solid var(--pf-campo-borda);
}
[dir] .oc-pf-bt-txt {
  border: 0;
  padding: 0;
}
[dir] .oc-pf-nivel {
  padding: 22px 26px;
}
[dir] .oc-pf-sg {
  padding: 18px 26px;
  border-top: 1px solid var(--pf-divisa);
}
[dir] .oc-pf-tag {
  padding: 0 7px;
}
[dir] .oc-pf-rodape {
  padding: 14px 26px;
  border-top: 1px solid var(--pf-cabeca-borda);
}
[dir] .oc-pf-rodape .dir {
  margin-left: auto;
}
[dir] .oc-pf-chave {
  padding: 0;
  border: 0;
}
[dir] .oc-pf-tab th {
  border-bottom: 1px solid var(--pf-cabeca-borda);
  padding: 12px 26px;
}
[dir] .oc-pf-tab td {
  padding: 14px 26px;
  border-bottom: 1px solid var(--pf-divisa);
}
[dir] .oc-pf-tab tbody tr:last-child td {
  border-bottom: 0;
}
[dir] .oc-pf-tab .sub {
  margin-top: 3px;
}
[dir] .oc-pf-vazio {
  padding: 28px 26px;
}
[dir] .oc-pf-cab-card {
  padding: 20px 26px;
  border-bottom: 1px solid var(--pf-divisa);
}
[dir] .oc-pf-cab-card .d {
  margin-top: 4px;
}
[dir] .oc-pf-cab-card .dir {
  margin-left: auto;
}
[dir] .oc-pf-fim-txt {
  padding: 22px 26px 18px;
}
[dir] .oc-pf-fim-txt .t {
  margin-bottom: 8px;
}
[dir] .oc-pf-veu {
  padding: 24px;
}
[dir] .oc-pf-modal {
  border: 1px solid #1f1f1f;
  padding: 24px 26px 26px;
}
[dir] .oc-pf-modal-cab {
  margin-bottom: 6px;
}
[dir] .oc-pf-modal-cab h2 {
  margin: 0;
}
[dir] .oc-pf-x {
  margin-left: auto;
  border: 0;
}
[dir] .oc-pf-modal-sub {
  margin: 0 0 16px;
}
[dir] .oc-pf-passo {
  margin-bottom: 12px;
}
[dir] .oc-pf-campo {
  margin-bottom: 14px;
}
[dir] .oc-pf-campo input {
  padding: 0 14px;
  border: 1px solid #1f1f1f;
}
[dir] .oc-pf-modal-acoes {
  margin-top: 20px;
}
[dir] .oc-pf-aviso {
  padding: 12px 14px;
  margin-bottom: 16px;
}
[dir] .oc-pf-qr {
  margin: 4px auto 14px;
  padding: 10px;
}
[dir] .oc-pf-chave-manual {
  padding: 12px 14px;
  border: 1px solid #1f1f1f;
  margin-bottom: 14px;
}
[dir] .oc-pf-codigos {
  margin: 4px 0 14px;
}
[dir] .oc-pf-codigos span {
  padding: 10px 12px;
  border: 1px solid #1f1f1f;
}
[dir] .oc-pf-toast {
  padding: 13px 18px;
  border: 1px solid #232323;
}
[dir] .oc-pf-mob-topo {
  padding: 4px 0 2px;
}
[dir] .oc-pf-cartao-seg {
  padding: 16px 18px;
  border: 1px solid var(--pf-borda);
}
[dir] .oc-pf-cartao-seg .oc-pf-nivel-t {
  padding-right: 22px;
}
[dir] .oc-pf-lista-rot {
  margin: 6px 0 -6px;
}
[dir] .oc-pf-mob-item {
  padding: 15px 18px;
  border: 0;
  border-bottom: 1px solid var(--pf-divisa);
}
[dir] .oc-pf-card > .oc-pf-mob-item:last-child {
  border-bottom: 0;
}
[dir] .oc-pf-mob-item .d {
  margin-top: 3px;
}
[dir] .oc-pf-mob-item .seta {
  margin-left: auto;
}
[dir] .oc-pf-sub-cab {
  padding: 12px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--pf-divisa);
}
[dir] .oc-pf-voltar {
  border: 0;
}
[dir] .oc-pf-sub-cab h2 {
  margin: 0;
}
@media (max-width: 900px) {
  [dir] .oc-pf {
    padding: 14px 16px 96px;
  }
  [dir] .oc-pf-linha {
    padding: 14px 16px;
  }
  [dir] .oc-pf-ident {
    padding: 18px 16px;
  }
  [dir] .oc-pf-sg {
    padding: 16px;
  }
  [dir] .oc-pf-nivel {
    padding: 16px;
  }
  [dir] .oc-pf-tab th, [dir] .oc-pf-tab td {
    padding: 13px 16px;
  }
  [dir] .oc-pf-rodape, [dir] .oc-pf-cab-card, [dir] .oc-pf-fim-txt {
    padding-left: 16px;
    padding-right: 16px;
  }
  [dir] .oc-pf-veu {
    padding: 0;
  }
  [dir] .oc-pf-modal {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 2px solid var(--pf-laranja, #f7931a);
    padding: 10px 18px calc(26px + env(safe-area-inset-bottom));
  }
  [dir] .oc-pf-pega {
    margin: 0 auto 14px;
  }
  [dir] .oc-pf-modal-acoes {
    margin-top: 18px;
    padding-top: 12px;
    padding-bottom: 4px;
  }
}

/* ── rodape.css ── */
/* O rodapé único do site (01/09/2026): fio laranja + listras dos popups, marca,
 * aviso de KYC, pílula de status, quatro colunas, aviso de risco recolhido e a
 * barra final. Gerado por `_tools/poe_rodape.py` a partir de
 * `_tools/rodape_textos.json`; só entra nas páginas que tinham rodapé — spot,
 * futuros/perpétuo/tradfi/grade/1001x e carteira ficam sem (decisão do dono).
 *
 * As duas regras da casa: caixa (margin/padding/border/background) em regra
 * `[dir] .classe` — o reset `[dir] *` da origem é (0,1,1); e nada de `rem`. */

.oc-rod { position: relative; overflow: hidden; color: #fff; font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif; }
[dir] .oc-rod { background: #030303; border-top: 1px solid #141414; margin: 0; padding: 0; }
.oc-rod-fio { position: absolute; left: 0; top: 0; height: 2px; width: 100%; }
[dir] .oc-rod-fio { background: linear-gradient(90deg, #f7931a 0, #f7931a 26%, rgba(247, 147, 26, .25) 52%, transparent 78%); }
.oc-rod-listras { position: absolute; right: -110px; top: -40px; width: 320px; height: 200px; pointer-events: none; opacity: .5; }
[dir] .oc-rod-listras { background: repeating-linear-gradient(-63.4deg, transparent 0 22px, rgba(247, 147, 26, .16) 22px 30px, transparent 30px 52px, rgba(247, 147, 26, .07) 52px 56px, transparent 56px 78px); }
.oc-rod-in { position: relative; max-width: 1240px; box-sizing: border-box; }
[dir] .oc-rod-in { margin: 0 auto; padding: 46px 28px 26px; }
.oc-rod-topo { display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); gap: 36px 28px; }

/* marca, aviso de KYC, status */
.oc-rod-marca { display: block; width: 112px; text-decoration: none; }
.oc-rod-marca svg { display: block; width: 112px; height: auto; }
.oc-rod-tag { color: #8a8a8a; font-size: 11.5px; line-height: 1.6; max-width: 300px; }
[dir] .oc-rod-tag { margin: 18px 0 0; padding: 0; }
.oc-rod-tag a { color: #f7931a; text-decoration: none; }
.oc-rod-tag a:hover { text-decoration: underline; }
.oc-rod-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; color: #cfcfcf; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: border-color .15s ease; }
[dir] .oc-rod-status { margin: 18px 0 0; padding: 6px 12px 6px 10px; border: 1px solid #1e1e1e; background: #0a0a0a; }
[dir] .oc-rod-status:hover { border-color: #f7931a; }
.oc-rod-status i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
[dir] .oc-rod-status i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

/* colunas */
.oc-rod-col-t { display: flex; align-items: center; gap: 8px; color: #f7931a; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
[dir] .oc-rod-col-t { margin: 4px 0 14px; padding: 0; }
.oc-rod-col-t b { width: 8px; height: 8px; flex: 0 0 auto; transform: skewX(-26.6deg); border-radius: 1px; }
[dir] .oc-rod-col-t b { background: #f7931a; }
.oc-rod-col a { display: block; width: fit-content; color: #9a9a9a; font-size: 13px; line-height: 1.55; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
[dir] .oc-rod-col a { padding: 4px 0; margin: 0; border-bottom: 1px solid transparent; }
[dir] .oc-rod-col a:hover { color: #fff; border-bottom-color: #f7931a; }

/* aviso de risco, recolhido */
.oc-rod-sep { height: 1px; }
[dir] .oc-rod-sep { background: #141414; margin: 34px 0 0; }
[dir] .oc-rod-risco { margin: 0; padding: 14px 0 0; }
.oc-rod-risco summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; color: #8a8a8a; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; }
[dir] .oc-rod-risco summary { padding: 6px 0; margin: 0; }
.oc-rod-risco summary::-webkit-details-marker { display: none; }
[dir] .oc-rod-risco summary::before { content: ''; width: 0; height: 0; border-left: 6px solid #f7931a; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; }
[dir] .oc-rod-risco[open] summary::before { transform: rotate(90deg); }
.oc-rod-risco summary:hover { color: #fff; }
.oc-rod-risco p { color: #6a6a6a; font-size: 11px; line-height: 1.65; max-width: 920px; }
[dir] .oc-rod-risco p { margin: 8px 0 0; padding: 0; }

/* barra final */
.oc-rod-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #6a6a6a; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; }
[dir] .oc-rod-base { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid #141414; }
.oc-rod-base-l { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.oc-rod-base-l a { color: #6a6a6a; text-decoration: none; white-space: nowrap; }
.oc-rod-base-l a:hover { color: #fff; }

@media (max-width: 640px) {
  [dir] .oc-rod-in { padding: 36px 18px 22px; }
  .oc-rod-topo { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .oc-rod-brand { grid-column: 1 / -1; }
  .oc-rod-tag { max-width: none; }
  .oc-rod-listras { width: 220px; height: 140px; right: -80px; }
  .oc-rod-base { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-rod-col a, .oc-rod-status, .oc-rod-risco summary::before { transition: none; }
}

/* ── 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; }
}