/* Verso Radar UI — camada compartilhada (identidade Ateliê/Verso).
 * Regras do jogo:
 *  - Este arquivo é o VISUAL: tokens, reset, componentes .lf-* e ícones.
 *  - Classes de ESTADO acopladas a JS (.vista .on .acao .score .plano etc.)
 *    ficam nas páginas — nunca entram no namespace .lf-*.
 *  - O <style> local de cada página vem DEPOIS do link deste arquivo e vence;
 *    página migrada deleta o :root local e passa a ler os tokens daqui.
 *  - Mudou algo em /static? Bumpa o ?v=N em TODAS as páginas (um único N
 *    projeto-wide — grep "static/.*v=" tem que devolver um valor só). */

:root {
  /* superfícies — identidade Ateliê (Verso): porcelana quente no fundo, o
   * cartão quase-branco existe por contraste de temperatura, não por borda. */
  --bg: #f5f1ea;        /* porcelana — fundo geral */
  --bg2: #fbf8f3;       /* sidebar, topbar mobile */
  --card: #fffdfa;      /* cartão */
  --card2: #f5f1ea;     /* campo de formulário, poço, cabeçalho de tabela */
  --line: #e5ded2;      /* borda padrão */
  /* sombra: quente e rasa — no porcelana a elevação é sussurro, não drama */
  --sh: 0 1px 2px rgba(18, 21, 28, 0.05), 0 4px 14px rgba(18, 21, 28, 0.05);
  /* tinta */
  --txt: #12151c;       /* grafite */
  --mut: #6b6459;       /* cinza-pedra — 5,6:1 no porcelana */
  /* marca: jade — acento ÚNICO da identidade (~2% da tela).
   * Diferente do âmbar antigo, o jade É legível como texto (5,3:1 no
   * porcelana), então --acc e --acc-txt convergem. */
  --acc: #0e7a5b;
  --acc-ink: #ffffff;   /* texto sobre jade */
  --acc-txt: #0e7a5b;   /* jade como tinta */
  --gold: #8a6100;      /* alias legado (badge Sem site, faixa Anúncio) */
  --info: #4c6685;      /* azul-pedra utilitário (links secundários, viz) */
  /* semânticos */
  --ok: #0e7a5b;        /* verde = jade: um verde só na tela */
  --warn: #a15600;
  --err: #b14a28;       /* terracota — o vermelho da identidade */
  /* tipografia */
  --display: "Geist", sans-serif;
  --body: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  /* geometria */
  --r: 16px;
  --r-s: 11px;
  /* largura útil do miolo: em tela grande o conteúdo ocupa o espaço em vez
   * de virar uma coluna estreita com meia tela vazia. Toda página do app usa
   * "main { max-width: var(--maxw) }" — mexeu aqui, mexeu em todas. */
  --maxw: 1560px;
  --pad-x: 34px;
  --side-w: 252px;
  --side-bg: var(--bg2);
  --side-line: #eae3d7;
}

/* No celular a margem de 34px come 17% da tela — aperta pra 18px. */
@media (max-width: 720px) { :root { --pad-x: 18px; } }

/* ---------- reset/base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--acc) 30%, transparent); }
:focus-visible {
  outline: 2px solid var(--acc-txt);
  outline-offset: 2px;
}
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- botões ---------- */
.lf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-s); border: 0; cursor: pointer;
  background: var(--acc); color: var(--acc-ink);
  font: 600 15px/1.2 var(--body);
  transition: filter 0.15s, transform 0.05s;
}
/* `display:inline-flex` ganha do [hidden] do navegador — sem esta linha,
   `botao.hidden = true` no JS não esconde nada e o botão fica na tela pra
   sempre. Aconteceu com o Parar da prospecção. */
.lf-btn[hidden] { display: none; }
.lf-btn:hover { filter: brightness(1.08); }
.lf-btn:active { transform: translateY(1px); }
.lf-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.lf-btn--ghost {
  background: none; color: var(--txt); border: 1px solid var(--line);
}
.lf-btn--ghost:hover {
  filter: none; border-color: color-mix(in srgb, var(--acc) 55%, var(--line));
}
.lf-btn--mini { padding: 8px 15px; font-size: 14px; border-radius: 8px; }
/* ação destrutiva: discreta, perigo só no hover (preferência do Bruno) */
.lf-btn--perigo { background: none; color: var(--mut); border: 1px solid var(--line); }
.lf-btn--perigo:hover {
  filter: none; color: var(--err);
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
}

/* ---------- formulário ---------- */
.lf-label {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 600; color: var(--mut);
}
.lf-input, .lf-select, .lf-textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--card2);
  color: var(--txt); font: 400 15px/1.35 var(--body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* iOS da zoom automatico em input focado com fonte < 16px */
@media (pointer: coarse) {
  .lf-input, .lf-select, .lf-textarea { font-size: 16px; }
}
.lf-input:focus, .lf-select:focus, .lf-textarea:focus {
  outline: none; border-color: var(--acc-txt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-txt) 15%, transparent);
}
/* --mut puro, sem transparencia: o color-mix 70% resolvia em #8992a0 sobre
 * --card2, 2,93:1 — abaixo do minimo de 4,5:1. Placeholder e' texto. */
.lf-input::placeholder, .lf-textarea::placeholder { color: var(--mut); }

/* ---------- tabela ---------- */
.lf-tabela-wrap {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); overflow: auto; box-shadow: var(--sh);
}
.lf-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.lf-tabela th {
  text-align: left; padding: 12px 18px; background: var(--card2);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mut); white-space: nowrap;
}
.lf-tabela td { padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.lf-tabela tbody tr { transition: background 0.12s; }
.lf-tabela tbody tr:hover { background: color-mix(in srgb, var(--txt) 3%, transparent); }
.lf-tabela .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- selos, chips ---------- */
.lf-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: var(--mut); border: 1px solid var(--line); white-space: nowrap;
}
.lf-selo--ok   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 45%, transparent);   background: color-mix(in srgb, var(--ok) 9%, transparent); }
.lf-selo--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.lf-selo--err  { color: var(--err);  border-color: color-mix(in srgb, var(--err) 45%, transparent);  background: color-mix(in srgb, var(--err) 9%, transparent); }
.lf-selo--acc  { color: var(--acc-txt);  border-color: color-mix(in srgb, var(--acc) 45%, transparent);  background: color-mix(in srgb, var(--acc) 9%, transparent); }
.lf-selo--info { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 9%, transparent); }
.lf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-size: 14px;
  background: var(--card2); border: 1px solid var(--line); color: var(--txt);
}

/* ---------- cartões e números ---------- */
.lf-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; box-shadow: var(--sh);
}
.lf-kpi .v {
  font-family: var(--display); font-weight: 800; font-size: 32px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lf-kpi .l {
  margin-top: 3px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut);
}
.lf-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- cabeçalho de página (substitui o <header> morto) ---------- */
.lf-topo { margin: 0 0 26px; }
.lf-topo h1 {
  font-family: var(--display); font-size: 28px; font-weight: 800;
  letter-spacing: -0.6px; margin: 0 0 6px;
}
.lf-topo p { margin: 0; color: var(--mut); font-size: 17px; line-height: 1.5; }

/* ---------- estado vazio ---------- */
.lf-vazio {
  padding: 44px 24px; text-align: center;
  color: var(--mut); font-size: 15px;
}

/* ---------- spinner ---------- */
.lf-spin {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--mut) 35%, transparent);
  border-top-color: var(--acc-txt);
  animation: lf-rot 0.8s linear infinite; vertical-align: -2px;
}
@keyframes lf-rot { to { transform: rotate(360deg); } }

/* ---------- progresso (assinatura: a "varredura") ---------- */
.lf-progress {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--mut) 16%, transparent);
}
.lf-progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease; position: relative;
}
.lf-progress--viva > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-100%);
  animation: lf-varre 1.6s ease-in-out infinite;
}
@keyframes lf-varre { to { transform: translateX(100%); } }
/* blip: ponto vivo ao lado de qualquer coisa rodando/ao vivo */
.lf-blip {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc); vertical-align: 1px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent);
  animation: lf-pulso 2s ease-out infinite;
}
.lf-blip--ok { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
@keyframes lf-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-spin, .lf-progress--viva > i::after, .lf-blip { animation: none; }
}

/* ---------- details/fold ---------- */
.lf-fold {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  box-shadow: var(--sh);
}
.lf-fold > summary {
  padding: 15px 20px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 9px;
}
.lf-fold > summary::-webkit-details-marker { display: none; }
.lf-fold > summary::before {
  content: ""; width: 0.9em; height: 0.9em; flex: none;
  background: currentColor;
  -webkit-mask: var(--lf-ic-seta) center / contain no-repeat;
  mask: var(--lf-ic-seta) center / contain no-repeat;
  transition: transform 0.15s; color: var(--acc-txt);
}
.lf-fold[open] > summary::before { transform: rotate(90deg); }
.lf-fold > .corpo { padding: 0 20px 20px; }

/* ---------- abas (uma busca, duas visões: Leads | Ranking) ---------- */
.lf-tabs {
  display: flex; gap: 4px; margin: 0 2px 14px;
  border-bottom: 1px solid var(--line);
}
.lf-tabs .lf-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 11px 17px 12px; font: 600 15px var(--body); color: var(--mut);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s;
}
.lf-tabs .lf-tab:hover { color: var(--txt); }
.lf-tabs .lf-tab.on { color: var(--txt); border-bottom-color: var(--acc-txt); }
.lf-tabs .lf-tab .n {
  color: var(--mut); font-weight: 500; font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 14px; margin-left: 5px;
}
.lf-tabs .lf-tab.on .n { color: var(--acc-txt); }

/* ---------- modal ---------- */
.lf-modal-back {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(19, 25, 38, 0.42);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.lf-modal {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  max-width: min(600px, 94vw); max-height: 88vh; overflow: auto;
  box-shadow: 0 18px 50px rgba(19, 25, 38, 0.18);
  padding: 20px; width: 100%;
}

/* ---------- confirmação (window.lfConfirmar) ----------
 * Um clique em ação de lote pode custar dezenas de créditos. O confirm() do
 * navegador não mostra QUANTO — e é esse número que faz a pessoa parar. */
.lf-conf { max-width: min(440px, 94vw); padding: 26px 26px 22px; }
.lf-conf h3 {
  font-family: var(--display); font-size: 19px; margin: 0 0 8px; letter-spacing: -0.2px;
}
.lf-conf p { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.6; }
.lf-conf-custo {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--acc) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--acc) 38%, var(--line));
}
.lf-conf-custo b {
  font: 600 17px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--acc-txt);
}
.lf-conf-custo span { font-size: 13px; color: var(--mut); }
.lf-conf-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* ---------- escolha entre opções (window.lfEscolher) ----------
 * Duas saídas legítimas, não uma pergunta de sim/não: cada opção é um botão
 * de largura cheia com o que ela entrega escrito embaixo do nome. */
.lf-opcoes { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
.lf-opcao {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--card2); color: var(--txt);
  font-family: var(--body); transition: border-color 0.15s, background 0.15s;
}
.lf-opcao:hover { border-color: var(--acc-txt); background: var(--card); }
.lf-opcao:focus-visible {
  outline: none; border-color: var(--acc-txt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-txt) 15%, transparent);
}
.lf-opcao b { display: block; font: 600 15px/1.3 var(--body); }
.lf-opcao span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--mut); }

/* ---------- tooltip (o `title` de qualquer tela vira esta bolha) ---------- */
.lf-tip {
  position: fixed; z-index: 1200; max-width: 320px; pointer-events: none;
  background: var(--card); color: var(--txt);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(19, 25, 38, 0.16);
  padding: 10px 13px; font: 400 13.5px/1.55 var(--body);
  opacity: 0; transform: translateY(3px); transition: opacity 0.13s ease, transform 0.13s ease;
}
.lf-tip.on { opacity: 1; transform: none; }
/* a seta é um quadrado girado: duas bordas fazem o contorno casar com a bolha */
.lf-tip::after {
  content: ""; position: absolute; left: var(--seta, 50%); width: 9px; height: 9px;
  margin-left: -4.5px; background: var(--card); transform: rotate(45deg);
}
.lf-tip.acima::after { bottom: -5.5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lf-tip.abaixo::after { top: -5.5px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
@media (hover: none) { .lf-tip { display: none; } }

/* ---------- ícones (mask-image; cor = currentColor) ----------
 * Mesma linguagem do dict IC do user.js: 24px, stroke 1.7, pontas redondas. */
:root {
  --lf-ic-alvo:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23fff' stroke='none'/%3E%3Cpath d='M12 3.5V1.8M12 22.2v-1.7M3.5 12H1.8M22.2 12h-1.7'/%3E%3C/svg%3E");
  --lf-ic-cfg:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 7.5h4M12.5 7.5h8M3.5 16.5h8M16.5 16.5h4'/%3E%3Ccircle cx='10' cy='7.5' r='2.5'/%3E%3Ccircle cx='14' cy='16.5' r='2.5'/%3E%3C/svg%3E");
  --lf-ic-hist:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.2 1.8'/%3E%3C/svg%3E");
  --lf-ic-msg:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-8.5 8.5c-1.5 0-3-.4-4.2-1.1L3 21l1.6-5.3A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E");
  --lf-ic-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 21 21'/%3E%3C/svg%3E");
  --lf-ic-star:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.6 2.5 5.2 5.7.7-4.2 4 1.1 5.6-5.1-2.8-5.1 2.8 1.1-5.6-4.2-4 5.7-.7z'/%3E%3C/svg%3E");
  --lf-ic-ok:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --lf-ic-x:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --lf-ic-seta:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  --lf-ic-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  --lf-ic-doc:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E");
  --lf-ic-mais:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --lf-ic-fone:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5c.8 0 1.5.5 1.8 1.2l1 2.4c.3.7.1 1.5-.4 2L7.7 10.3a12 12 0 0 0 5.9 5.9l1.2-1.2c.5-.5 1.3-.7 2-.4l2.4 1c.7.3 1.2 1 1.2 1.8v2.1c0 1.1-.9 2-2 2C10 21.5 2.5 14 2.5 5.5c0-1.1.9-2 2-2z'/%3E%3C/svg%3E");
  --lf-ic-cred:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v9M9.5 10.1c0-1.1 1.1-1.9 2.5-1.9s2.5.8 2.5 1.9-.9 1.5-2.5 1.9-2.5.8-2.5 1.9 1.1 1.9 2.5 1.9 2.5-.8 2.5-1.9'/%3E%3C/svg%3E");
  --lf-ic-copiar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11.5' height='11.5' rx='2.5'/%3E%3Cpath d='M5.5 15H5A1.5 1.5 0 0 1 3.5 13.5V5A1.5 1.5 0 0 1 5 3.5h8.5A1.5 1.5 0 0 1 15 5v.5'/%3E%3C/svg%3E");
  --lf-ic-site:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.2 2.4 3.3 5.3 3.3 8.5S14.2 18.1 12 20.5c-2.2-2.4-3.3-5.3-3.3-8.5S9.8 5.9 12 3.5z'/%3E%3C/svg%3E");
}
.lf-ic {
  display: inline-block; width: 1.05em; height: 1.05em; flex: none;
  vertical-align: -0.16em; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.lf-ic--alvo  { --ic: var(--lf-ic-alvo); }
.lf-ic--cfg   { --ic: var(--lf-ic-cfg); }
.lf-ic--hist  { --ic: var(--lf-ic-hist); }
.lf-ic--msg   { --ic: var(--lf-ic-msg); }
.lf-ic--busca { --ic: var(--lf-ic-busca); }
.lf-ic--star  { --ic: var(--lf-ic-star); }
.lf-ic--ok    { --ic: var(--lf-ic-ok); }
.lf-ic--x     { --ic: var(--lf-ic-x); }
.lf-ic--seta  { --ic: var(--lf-ic-seta); }
.lf-ic--baixo { --ic: var(--lf-ic-baixo); }
.lf-ic--doc   { --ic: var(--lf-ic-doc); }
.lf-ic--mais  { --ic: var(--lf-ic-mais); }
.lf-ic--fone  { --ic: var(--lf-ic-fone); }
.lf-ic--cred  { --ic: var(--lf-ic-cred); }
.lf-ic--copiar { --ic: var(--lf-ic-copiar); }
.lf-ic--site  { --ic: var(--lf-ic-site); }