:root {
  --vpq-primary: #111111;
  --vpq-text: #333333;
  --vpq-bg: transparent; /* padrão agora é transparente */
  --vpq-btn-bg: var(--vpq-primary);
  --vpq-btn-text: #ffffff;
  --vpq-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --vpq-intro-size: 1.55rem;
  --vpq-qtext-size: 1.25rem;
  
  color: var(--vpq-text);
  background: var(--vpq-bg);
  font-family: var(--vpq-font);
}
.vpq-container {
  font-family: var(--vpq-font);
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
  background: var(--vpq-bg);
  color: var(--vpq-text);
  border-radius: 15px;
  padding: 15px;
}
.vpq-app { min-height: 120px; }
.vpq-intro { font-size: var(--vpq-intro-size); line-height: 1.55; color: var(--vpq-text); margin: 0 0 16px; }
.vpq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;      /* antes era height fixa */
  height: auto;          /* permite crescer com 2 linhas */
  padding: 8px 16px;     /* dá respiro vertical */
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  white-space: normal;    /* <<< permite quebra de linha */
  word-break: break-word; /* quebra palavras muito longas */
  text-align: center;
  flex-wrap: wrap;        /* múltiplas linhas */
}
.vpq-btn-primary { background: var(--vpq-btn-bg); color: var(--vpq-btn-text); border-color: var(--vpq-btn-bg); }
.vpq-btn-ghost { background:#fff; color:#444; }
.vpq-step-question .vpq-qtext { font-size: var(--vpq-qtext-size); font-weight:600; margin:12px 0 16px; color: var(--vpq-text); }
.vpq-link, .vpq-step a{ color: var(--vpq-primary); }
.vpq-options { display:grid; grid-template-columns:1fr; gap:10px; }
.vpq-option .vpq-option-text {
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.vpq-option:hover { border-color: var(--vpq-primary); }
.vpq-progress { display:flex; list-style:none; gap:8px; padding:0; margin:0 0 8px; flex-wrap:wrap; }
.vpq-progress-item { font-size:12px; color:#999; border:1px dashed #ddd; padding:4px 8px; border-radius:999px; }
.vpq-progress-item.done { color:#222; border-style:solid; border-color: var(--vpq-primary); }
.vpq-step-lead .vpq-lead-title { font-size:1.15rem; font-weight:600; margin:8px 0 14px; }
.vpq-field { margin-bottom:10px; }
.vpq-field input { width:100%; height:42px; border-radius:10px; border:1px solid #e5e5e5; padding:0 12px; }
.vpq-actions { display:flex; gap:10px; margin-top:16px; }
.vpq-result-title { font-size:1.25rem; font-weight:700; margin:8px 0 10px; color: var(--vpq-text); }
.vpq-result-desc { color: var(--vpq-text); }
@media (min-width:560px) { .vpq-options { grid-template-columns:1fr 1fr; } }
/* cor primária dinâmica via inline style opcional */
/* ===== Botões de RESPOSTA ===== */
.vpq-option{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; min-height:40px;
  background: var(--vpq-opt-bg, #ffffff);
  color:      var(--vpq-opt-text, #333333);
  border:     var(--vpq-opt-border-w, 1px) solid var(--vpq-opt-border, #e5e5e5);
  border-radius: var(--vpq-opt-radius, 10px);
  white-space: normal; word-break: break-word; text-align: left;
}
.vpq-option:hover{ filter: brightness(1.03); }

/* ===== Barra de PROGRESSO (itens circulares/etiquetas) ===== */
.vpq-progress-item span{
  border: 2px solid var(--vpq-prog-track, #E5E7EB);
  color:  var(--vpq-prog-pending, #9CA3AF);
}
.vpq-progress-item.done span{
  background:   var(--vpq-prog-done, #111111);
  border-color: var(--vpq-prog-done, #111111);
  color: #fff;
}
.vpq-progress-item.current span,
.vpq-progress-item.active span{
  background:   var(--vpq-prog-active, #111111);
  border-color: var(--vpq-prog-active, #111111);
  color:#fff;
}
/* Se houver uma barra "trilho" linear, pinte também */
.vpq-progress-track{ background: var(--vpq-prog-track, #E5E7EB); }
.vpq-progress-fill{  background: var(--vpq-prog-active, #111111); }
/* ===== Barra de PROGRESSO – estilo em pílula sem borda interna ===== */
.vpq-progress-item span{
  display:inline-block;
  padding:6px 12px;
  border-radius: 9999px;
  border: none !important;      /* tira qualquer borda interna */
  outline: 0 !important;         /* tira contorno */
  box-shadow: none !important;
  background: var(--vpq-prog-pending-bg, transparent); /* retângulo inteiro */
  color:      var(--vpq-prog-pending-tx, #9CA3AF);
}

/* Estado ATIVO (etapa atual) */
.vpq-progress-item.current span,
.vpq-progress-item.active  span{
  background: var(--vpq-prog-active-bg, #111111);
  color:      var(--vpq-prog-active-tx, #ffffff);
}

/* Estado CONCLUÍDO */
.vpq-progress-item.done span{
  background: var(--vpq-prog-done-bg, #111111);
  color:      var(--vpq-prog-done-tx, #ffffff);
}

/* Trilho/linha (se houver) */
.vpq-progress-track{ background: var(--vpq-prog-track, #E5E7EB); }
.vpq-progress-fill { background: var(--vpq-prog-active-bg, #111111); }