:root {
    --paper: #F1F4EF;
    --card: #FFFFFF;
    --ink: #1B2E26;
    --muted: #5C6E64;
    --line: #D8E0D6;
    --line-soft: #E7ECE5;
    --teal: #0B8E77;
    --teal-dark: #076C5A;
    --teal-soft: #E2F1ED;
    --amber: #A16A0F;
    --amber-soft: #FBF3E2;
    --danger: #A3352B;
    --display: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
    --body: "Segoe UI", system-ui, sans-serif;
    --mono: "Consolas", "Cascadia Mono", monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
  }
  body {
    background: var(--paper);
    background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(27,46,38,.035) 27px 28px);
    color: var(--ink);
    font-family: var(--body);
    font-size: 14.5px;
    line-height: 1.5;
  }
  button { font-family: inherit; font-size: inherit; cursor: pointer; }
  input, select { font-family: inherit; font-size: inherit; color: inherit; }
  input[type="text"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 9px;
    font-family: inherit; font-size: inherit; color: inherit;
  }
  textarea { resize: vertical; }
  input:focus-visible, select:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
  }
  input.falta { border-color: var(--amber); background: var(--amber-soft); }

  /* ---------- topo ---------- */
  .topbar {
    max-width: 1080px; margin: 0 auto; padding: 26px 20px 10px;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between;
  }
  .brand h1 {
    font-family: var(--display);
    font-size: 30px; font-weight: 700; letter-spacing: .01em;
    line-height: 1.1;
  }
  .brand .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
  .brand .sub b { color: var(--teal-dark); font-weight: 600; }
  .presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .presets select { min-width: 170px; }

  /* ---------- funil (assinatura) ---------- */
  .funnel {
    position: sticky; top: 0; z-index: 40;
    background: var(--ink); color: #EDF3EF;
    box-shadow: 0 2px 10px rgba(27,46,38,.25);
  }
  .funnel-inner {
    max-width: 1080px; margin: 0 auto; padding: 10px 20px;
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: center;
  }
  @media (max-width: 720px) {
    .stage .num { font-size: 18px; }
    .stage .cap { font-size: 10px; letter-spacing: .04em; }
  }
  .stage { min-width: 0; }
  .stage .num { font-family: var(--mono); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .stage .cap { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: #9DB3A8; white-space: nowrap; }
  .stage .bar { height: 4px; background: #33493F; border-radius: 2px; margin-top: 5px; overflow: hidden; }
  .stage .bar i { display: block; height: 100%; background: #3ECBAF; border-radius: 2px; width: 0%; transition: width .35s ease; }
  .funnel .arrow { color: #587467; font-size: 18px; font-family: var(--mono); }
  .funnel.vazio .num { color: #587467; }

  /* ---------- seções ---------- */
  main { max-width: 1080px; margin: 0 auto; padding: 18px 20px 60px; }
  section.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 18px;
    overflow: hidden;
  }
  section.card > header {
    display: flex; align-items: baseline; gap: 12px;
    padding: 14px 18px 0;
  }
  .step {
    font-family: var(--display); font-weight: 700; font-size: 15px;
    color: var(--card); background: var(--ink);
    width: 24px; height: 24px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transform: translateY(3px);
  }
  section.card h2 { font-family: var(--display); font-size: 19px; font-weight: 700; }
  section.card .hint { color: var(--muted); font-size: 13px; margin-left: auto; text-align: right; }
  .sec-body { padding: 14px 18px 18px; }

  /* ---------- 1: arquivos ---------- */
  .drop {
    border: 2px dashed var(--line); border-radius: 10px;
    background: var(--paper);
    padding: 26px 16px; text-align: center; color: var(--muted);
    transition: border-color .15s, background .15s;
    cursor: pointer;
  }
  .drop.over { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark); }
  .drop b { color: var(--ink); }
  .filelist { list-style: none; margin-top: 10px; }
  .filelist li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; margin-top: 6px;
    background: var(--card);
  }
  .filelist .fname { font-weight: 600; overflow-wrap: anywhere; }
  .filelist .fmeta { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; margin-left: auto; }
  .filelist .fmap { font-size: 12px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
  .fmap.ok { background: var(--teal-soft); color: var(--teal-dark); }
  .fmap.falta { background: var(--amber-soft); color: var(--amber); }

  /* ---------- 2: campos ---------- */
  .map-scroll { overflow-x: auto; }
  table.mapa { border-collapse: collapse; width: 100%; min-width: 560px; }
  table.mapa th {
    text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line);
    white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  }
  table.mapa td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  table.mapa td input.flabel { width: 140px; font-weight: 600; }
  table.mapa td select { max-width: 210px; width: 100%; }
  table.mapa select.ftipo { width: 92px; }
  .addfield { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

  /* ---------- 3: filtros ---------- */
  .filtro {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; margin-top: 8px;
    background: var(--card);
  }
  .filtro .e { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .filtro label.excl {
    display: inline-flex; gap: 6px; align-items: center;
    font-size: 12.5px; color: var(--teal-dark);
    border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px 3px 7px;
    background: var(--teal-soft); cursor: pointer;
  }
  .filtro input[type="number"], .filtro input[type="text"] { width: 120px; }
  .valpanel {
    flex-basis: 100%;
    border: 1px solid var(--line-soft); border-radius: 8px; background: var(--paper);
    padding: 10px; margin-top: 4px;
  }
  .valpanel .vtools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .valpanel input[type="search"] { flex: 1; min-width: 140px; }
  .valpanel .vlist { max-height: 230px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 14px; }
  .valpanel label { display: flex; gap: 7px; align-items: baseline; padding: 2px 4px; border-radius: 5px; cursor: pointer; }
  .valpanel label:hover { background: var(--teal-soft); }
  .valpanel .vcount { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; }

  /* ---------- 4: saída ---------- */
  .saida-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 720px) { .saida-grid { grid-template-columns: 1fr; } }
  .saida-grid h3 { font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
  .cols { list-style: none; }
  .cols li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
  .cols .updown { margin-left: auto; display: flex; gap: 2px; }
  .cols button { border: 1px solid var(--line); background: var(--card); border-radius: 5px; width: 24px; height: 22px; line-height: 1; color: var(--muted); }
  .cols button:hover { color: var(--ink); border-color: var(--muted); }
  .opt { display: flex; gap: 8px; align-items: center; padding: 4px 0; flex-wrap: wrap; }
  .opt small { color: var(--muted); flex-basis: 100%; margin-left: 24px; }
  .chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  .chips label {
    display: inline-flex; gap: 5px; align-items: center;
    border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px 2px 7px;
    background: var(--card); cursor: pointer; font-size: 13px;
  }
  .chips label.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-dark); }
  .dedup-det { margin-left: 24px; }
  .dedup-det small { margin-left: 0; }
  .baixar-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .baixar-row input[type="text"] { width: 220px; font-family: var(--mono); font-size: 13px; }
  .ext { font-family: var(--mono); color: var(--muted); margin-left: -8px; }

  /* ---------- botões ---------- */
  .btn {
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    border-radius: 7px; padding: 7px 14px; font-weight: 600;
  }
  .btn:hover { border-color: var(--muted); }
  .btn.primario {
    background: var(--teal); border-color: var(--teal); color: #fff;
    font-family: var(--display); font-size: 16px; letter-spacing: .02em; padding: 10px 22px;
  }
  .btn.primario:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
  .btn.primario:disabled { background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
  .btn.mini { padding: 4px 10px; font-weight: 500; font-size: 13px; }
  .btn.remove { border: none; background: none; color: var(--muted); font-size: 16px; padding: 2px 6px; }
  .btn.remove:hover { color: var(--danger); }

  /* ---------- prévia ---------- */
  .previa-scroll { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 8px; }
  table.previa { border-collapse: collapse; width: 100%; font-size: 13px; }
  table.previa th {
    font-family: var(--display); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
    text-align: left; padding: 7px 10px; background: var(--paper); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; white-space: nowrap;
  }
  table.previa td { padding: 5px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
  table.previa td.mono { font-family: var(--mono); font-size: 12.5px; }
  .previa-meta { color: var(--muted); font-size: 13px; margin: 8px 2px; }
  .vazio-msg { color: var(--muted); padding: 18px; text-align: center; }

  footer { max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; color: var(--muted); font-size: 12.5px; }

  /* ---------- abas de modo ---------- */
  .modos { max-width: 1080px; margin: 16px auto 0; padding: 0 20px; display: flex; gap: 8px; }
  .modo {
    font-family: var(--display); font-size: 15px; letter-spacing: .02em; font-weight: 700;
    border: 1px solid var(--line); background: var(--card); color: var(--muted);
    border-radius: 8px; padding: 8px 18px;
  }
  .modo.on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .modo:not(.on):hover { color: var(--ink); border-color: var(--muted); }
  .j-stats { font-family: var(--mono); font-size: 13px; margin: 12px 2px 4px; }
  .j-stats b { color: var(--teal-dark); }
  .filelist .fsel { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
  .filelist .fsel select { max-width: 150px; padding: 3px 6px; font-size: 12.5px; }
  .filelist .updown { display: flex; gap: 2px; }
  .filelist .updown button { border: 1px solid var(--line); background: var(--card); border-radius: 5px; width: 24px; height: 22px; line-height: 1; color: var(--muted); }
  .filelist .updown button:hover { color: var(--ink); border-color: var(--muted); }

  /* ================= acréscimos da Central de Leads ================= */

  /* login */
  body.login { display: grid; place-items: center; min-height: 100vh; }
  .caixa-login {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 28px 30px; width: min(380px, 92vw);
  }
  .caixa-login h1 { font-family: var(--display); font-size: 26px; margin-bottom: 4px; }
  .caixa-login .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
  .caixa-login label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
  .caixa-login input { width: 100%; }
  .caixa-login .btn { width: 100%; margin-top: 18px; }
  .erro-login { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 18px; }

  /* barra de abas (as 5 telas) */
  .modos { flex-wrap: wrap; }
  .modo .badge {
    font-family: var(--mono); font-size: 11px; margin-left: 6px;
    background: var(--teal-soft); color: var(--teal-dark); border-radius: 99px; padding: 1px 7px;
  }
  .modo.on .badge { background: #33493F; color: #9DE8D6; }
  .sair { margin-left: auto; }

  /* estado / avisos */
  .aviso {
    border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 10px;
    background: var(--amber-soft); color: var(--amber); font-size: 13px;
  }
  .aviso.ok { background: var(--teal-soft); color: var(--teal-dark); border-color: var(--teal); }
  .aviso.erro { background: #FBECEA; color: var(--danger); border-color: var(--danger); }
  .carregando { color: var(--muted); font-size: 13px; font-family: var(--mono); }

  /* tabela genérica (base, disparos, configurações) */
  table.grade { border-collapse: collapse; width: 100%; font-size: 13px; }
  table.grade th {
    font-family: var(--display); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
    text-align: left; padding: 7px 10px; background: var(--paper); border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  table.grade td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
  table.grade td.mono, table.grade td.num { font-family: var(--mono); font-size: 12.5px; }
  table.grade td.num { text-align: right; font-variant-numeric: tabular-nums; }

  /* cartões de total da Base */
  .totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .total-card { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; background: var(--paper); }
  .total-card .n { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; }
  .total-card .c { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

  /* linha de removidos, embaixo do funil */
  .removidos { max-width: 1080px; margin: 0 auto; padding: 0 20px 8px; display: flex; gap: 14px; flex-wrap: wrap; }
  .removidos span { font-size: 11.5px; color: #9DB3A8; font-family: var(--mono); }
  .removidos b { color: #EDF3EF; font-weight: 600; }
  .funnel .removidos { padding-bottom: 10px; }