:root{
  --azul:#1f3864; --azul2:#2d4f8f; --claro:#f4f6fa; --borda:#dfe4ee;
  --txt:#1b2231; --leve:#6b7488; --ok:#1f7a45; --alerta:#9a6700; --erro:#a4262c;
  --raio:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--txt); background:var(--claro); -webkit-font-smoothing:antialiased;
}
code{background:#e8ecf4;padding:1px 5px;border-radius:5px;font-size:.92em}

/* ---- topo ---- */
.topo{
  background:var(--azul); color:#fff; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.marca{display:flex;align-items:center;gap:12px}
.marca svg{width:30px;height:30px;flex:none}
.marca strong{display:block;font-size:17px;letter-spacing:.2px}
.marca span{display:block;font-size:12.5px;opacity:.75}
.privacidade{display:flex;align-items:center;gap:7px;font-size:12.5px;opacity:.85}
.privacidade svg{width:17px;height:17px;flex:none}

/* ---- abas ---- */
.abas{display:flex;gap:2px;background:var(--azul);padding:0 20px}
.aba{
  appearance:none;border:0;background:transparent;color:#cfd8ea;
  padding:11px 20px;font-size:14.5px;font-weight:600;cursor:pointer;
  border-radius:10px 10px 0 0;
}
.aba:hover{color:#fff;background:rgba(255,255,255,.08)}
.aba.ativa{background:var(--claro);color:var(--azul)}

main{max-width:960px;margin:0 auto;padding:22px 16px 10px}
.painel{display:none}
.painel.ativo{display:block}

/* ---- passos ---- */
.passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.passo{
  display:flex;gap:14px;background:#fff;border:1px solid var(--borda);
  border-radius:var(--raio);padding:18px;
}
.passo.desabilitado{opacity:.45;pointer-events:none}
.num{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;margin-top:2px;
}
.corpo{flex:1;min-width:0}
.corpo h2{margin:2px 0 6px;font-size:16px;color:var(--azul)}
.ajuda{margin:0 0 12px;color:var(--leve);font-size:13.5px}
.leve{color:var(--leve);font-weight:400}

/* ---- área de upload ---- */
.solta{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  border:2px dashed #c3cde0;border-radius:var(--raio);padding:26px 16px;
  cursor:pointer;text-align:center;transition:.15s;background:#fbfcfe;
}
.solta:hover,.solta.arrastando{border-color:var(--azul2);background:#eef3fc}
.solta svg{width:30px;height:30px;color:var(--azul2);margin-bottom:4px}
.solta strong{font-size:14.5px}
.solta span{font-size:12.5px;color:var(--leve)}
.solta.compacta{flex-direction:row;padding:12px 14px;gap:8px;font-size:13.5px}

.info{
  margin-top:10px;padding:10px 12px;border-radius:9px;background:#eef3fc;
  font-size:13.5px;border-left:3px solid var(--azul2);
}
.info.aviso{background:#fff6e0;border-left-color:var(--alerta)}
.info.erro{background:#fdecee;border-left-color:var(--erro)}
.info b{color:var(--azul)}

/* ---- campos ---- */
.campo{margin:10px 0}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
input[type=text],input[type=number],select{
  width:100%;padding:9px 11px;border:1px solid var(--borda);border-radius:9px;
  font-size:14.5px;font-family:inherit;background:#fff;color:var(--txt);
}
input:focus,select:focus{outline:2px solid var(--azul2);outline-offset:-1px;border-color:var(--azul2)}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.origem{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.radio,.check{display:flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.radio input,.check input{width:16px;height:16px;accent-color:var(--azul)}
.check{margin-top:10px}

.colunas{display:flex;flex-wrap:wrap;gap:7px}
.col-chip{
  display:flex;align-items:center;gap:6px;border:1px solid var(--borda);background:#fff;
  padding:6px 11px;border-radius:999px;font-size:13px;cursor:pointer;user-select:none;
}
.col-chip:hover{border-color:var(--azul2)}
.col-chip.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.col-chip input{display:none}
.col-chip em{font-style:normal;opacity:.7;font-size:11.5px}

/* ---- vários markups ---- */
.col-indices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.col-ind{display:flex;align-items:center;gap:8px;font-size:13px}
.col-ind span{flex:none;min-width:66px;font-weight:600;color:var(--azul)}
.col-ind input{padding:7px 9px;font-size:13.5px}
.regra{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.regra input:first-child{flex:1}
.regra input:nth-child(2){width:150px;flex:none}
.regra button{
  appearance:none;border:1px solid var(--borda);background:#fff;color:var(--erro);
  width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1;flex:none;
}
#mk-bloco-multi{
  margin:10px 0 4px;padding:12px;border:1px solid var(--borda);border-radius:var(--raio);background:#fbfcfe;
}
.fixada{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#eaf4ec;border-left:3px solid var(--ok);padding:9px 12px;border-radius:9px;font-size:13.5px;
}
.fixada strong{display:block;color:var(--ok)}
.fixada span{font-size:12px}
.botao.pequeno{padding:6px 13px;font-size:13px;border-radius:8px}

.opcoes{margin-top:12px;border-top:1px solid var(--borda);padding-top:10px}
.opcoes summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--azul2)}

.indice{
  margin-top:12px;display:flex;align-items:baseline;gap:10px;
  background:#eaf4ec;border-left:3px solid var(--ok);padding:9px 12px;border-radius:9px;
}
.indice span{font-size:12.5px;color:var(--leve)}
.indice strong{font-size:17px;font-variant-numeric:tabular-nums;color:var(--ok)}

/* ---- ações ---- */
.acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.botao{
  appearance:none;border:1px solid var(--azul);background:#fff;color:var(--azul);
  padding:10px 20px;border-radius:9px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;
}
.botao:hover:not(:disabled){background:#eef3fc}
.botao.primario{background:var(--azul);color:#fff}
.botao.primario:hover:not(:disabled){background:var(--azul2)}
.botao:disabled{opacity:.4;cursor:default}
.status{font-size:13px;color:var(--leve)}
.status.ok{color:var(--ok);font-weight:600}
.status.erro{color:var(--erro);font-weight:600}

/* ---- prévia ---- */
.previa{margin-top:12px;overflow-x:auto}
.previa table{border-collapse:collapse;font-size:12.5px;width:100%;min-width:420px}
.previa th,.previa td{border:1px solid var(--borda);padding:5px 9px;text-align:right;white-space:nowrap}
.previa th{background:#eef3fc;color:var(--azul);font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
.previa td:first-child,.previa th:first-child{text-align:left}
.previa .venda{color:var(--ok);font-weight:600}
.previa pre{
  background:#fff;border:1px solid var(--borda);border-radius:9px;padding:12px;
  font-size:12px;max-height:260px;overflow:auto;white-space:pre-wrap;margin:0;
}

footer{max-width:960px;margin:0 auto;padding:14px 16px 30px;color:var(--leve);font-size:12.5px}
.oculto{display:none !important}

@media (max-width:640px){
  .grade{grid-template-columns:1fr}
  .topo{padding:12px 14px}
  .abas{padding:0 10px}
  .aba{padding:10px 14px;font-size:13.5px}
  main{padding:16px 10px 6px}
  .passo{padding:14px}
  .privacidade{display:none}
}