/* Páginas do conector MCP: /claude e /chatgpt (uma folha só, as duas mostram o
     mesmo conector). Componentes sobre o ds-v5.css, zero cor
     hardcoded: tudo por var(--*), para valer em claro e escuro.
     Larguras: nada de max-width próprio — quem manda é `.pagina` do ds-v5
     (PADRAO-LARGURA-TOME.md: aresta acompanha o container que a encerra). */

  /* O endereço para colar — é o gesto central da página, então tem peso visual
     de campo, não de código solto no meio do parágrafo. */
  .cl-url{display:flex;align-items:center;gap:10px;margin:18px 0 6px;
    border:1px solid var(--linha);border-radius:11px;background:var(--fundo2);
    padding:13px 14px;flex-wrap:wrap}
  .cl-url code{font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--tinta);
    flex:1;min-width:min(100%,240px);word-break:break-all}
  .cl-url button{border:1px solid var(--linha);background:var(--fundo);color:var(--tinta);
    border-radius:8px;padding:8px 13px;font-family:'Inter',sans-serif;font-size:13px;
    font-weight:600;cursor:pointer;white-space:nowrap}
  .cl-url button:hover{background:var(--hover)}
  .cl-url .ok{color:var(--verm);font-weight:600}

  /* Passos numerados. Grade em telas largas, empilhado no celular. */
  .cl-passos{display:grid;gap:14px;margin:20px 0 6px;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
  .cl-passo{border:1px solid var(--linha);border-radius:12px;padding:16px 17px;background:var(--fundo2)}
  .cl-passo .n{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:999px;
    background:var(--tinta);color:var(--fundo);font-family:'IBM Plex Mono',monospace;
    font-size:12px;font-weight:600;margin-bottom:9px}
  .cl-passo h3{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:700;margin:0 0 5px;color:var(--tinta)}
  .cl-passo p{font-size:13.5px;line-height:1.55;color:var(--tinta2);margin:0}

  /* Exemplos de pergunta: falam mais que qualquer adjetivo sobre a capacidade. */
  .cl-exemplos{display:grid;gap:9px;margin:16px 0 4px}
  .cl-ex{border-left:2px solid var(--verm);padding:9px 0 9px 14px;font-size:14.5px;
    line-height:1.5;color:var(--tinta)}
  .cl-ex span{display:block;font-size:12.8px;color:var(--tinta2);margin-top:3px}

  .cl-nota{border:1px solid var(--linha);border-radius:12px;padding:16px 18px;
    background:var(--fundo2);margin:22px 0 4px}
  .cl-nota h3{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:700;margin:0 0 7px;color:var(--tinta)}
  .cl-nota p{font-size:13.8px;line-height:1.6;color:var(--tinta2);margin:0 0 8px}
  .cl-nota p:last-child{margin-bottom:0}
  /* link dentro da nota: sem isto "na sua conta" e "o caminho no Claude" eram texto corrido */
  .cl-nota a{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--linha2,var(--linha));text-underline-offset:3px}
  .cl-nota a:hover{text-decoration-color:currentColor}