/* Modal simples para explicar o número de perguntas */
/* Usa as variáveis do seu tema, com fallbacks */
:root{
  --bg:#f7f9fc; --card:#fff; --txt:#0f172a; --muted:#6b7280; --line:#e5e7eb; --primary:#3b82f6;
  --accent:#1d4ed8;            /* azul mais forte do número */
  --alert-bg:#fefce8;          /* amarelo bem claro para aviso (quando 0) */
  --alert-bd:#fde68a;          /* borda do aviso */
  --alert-tx:#92400e;          /* texto do aviso */
}

.qp-root{ position:fixed; inset:0; z-index:120; pointer-events:none; }
.qp-backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.35);
  opacity:0; transition:opacity .18s ease; pointer-events:auto;
}
.qp-modal{
  position:absolute; left:50%; top:calc(var(--topbar-h,72px) + 24px);
  transform:translateX(-50%) translateY(12px);
  width:min(92vw, 520px);
  background:var(--card); color:var(--txt);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 50px rgba(2,6,23,.20);
  opacity:0; transition:transform .22s ease, opacity .22s ease;
  pointer-events:auto;
}

.qp-open .qp-backdrop{ opacity:1; }
.qp-open .qp-modal{ opacity:1; transform:translateX(-50%) translateY(0); }

.qp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 8px; }
.qp-title{ margin:0; font-weight:800; font-size:1.05rem; letter-spacing:.1px; }
.qp-close{
  width:34px; height:34px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
}

.qp-content{ padding:8px 16px 10px; }
.qp-row{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; }
.qp-ic{
  width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center;
  color:#374151;
}
.qp-txt{ font-size:.96rem; line-height:1.35; }
.qp-muted{ color:var(--muted); }

.qp-sep{
  border-top:.5px dashed var(--line);
  margin:0; height:0;
}

/* badge com o número no cabeçalho */
.qp-badge{
  margin-left:auto; padding:5px 10px; border-radius:999px;
  background:#eef2ff; color:var(--accent); border:1px solid var(--line);
  font-weight:900; font-size:.85rem;
}

/* aviso que aparece só quando remaining === 0 */
.qp-alert{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--alert-bg); color:var(--alert-tx);
  border:1px solid var(--alert-bd); border-radius:12px;
  padding:10px 12px; margin:4px 0 10px;
  font-size:.95rem;
}

.qp-foot{ padding:12px 16px 14px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }
.qp-ok{
  border:0; border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer;
  background:var(--primary); color:#fff;
}

@media (max-width:420px){
  .qp-modal{ width:calc(100vw - 24px); }
}