.card1 {
  width: 8%;
  height: 5%;
  position: absolute;
  top: 29.5%;
  left: 63%;
}

.card2 {
  width: 8%;
  height: 5%;
  position: absolute;
  top: 36%;
  left: 65%;
}

.card3 {
  width: 24%;
  height: 15%;
  position: absolute;
  top: 54%;
  left: 49%;
}

.card5 {
  width: 8%;
  height: 5%;
  position: absolute;
  top: 23%;
  left: 57%;
}

.num,
.rate {
  width: 100%;
  height: 100%;
  font-size: 30px;
  font-weight: bold;
  color: #e63946;
  text-align: center;
}

/* 纠纷类型列表容器 */
#disputeTypeList {
  padding: 10px 0;
}

/* 每个条目：图标+文字 水平居中 */
.type-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed #eee;
}

/* 橙色序号图标（和图2的样式完全匹配） */
.rank-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* 图标宽度 */
  height: 30px; /* 图标高度 */
  background: linear-gradient(
    180deg,
    #ff9a3c 0%,
    #ff6b00 100%
  ); /* 橙色渐变，还原图里的质感 */
  color: white; /* 数字颜色 */
  border-radius: 6px; /* 圆角 */
  font-weight: bold;
  font-size: 16px;
  margin-right: 12px; /* 图标和文字的间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 轻微阴影，更立体 */
}

/* 纠纷类型文字样式 */
.rank-text {
  font-size: 18px;
  color: #fff; /* 如果你的背景是棕色，文字用白色；如果是白色背景，改成 #333 即可 */
  font-weight: 500;
}

/* 空数据提示样式 */
.empty-tip {
  color: #999;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
}

/*  */

/* 热力图容器（父容器，相对定位） */
.card4 {
  width: 21.2%;
  height: 36.8%;
  position: absolute;
  top: 44%;
  left: 22%;
  overflow: hidden;
}

/* 地图背景图 */
.heatmap-bg {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持地图比例，不拉伸变形 */
}

/* 圆点+标注的容器（绝对定位，铺满整个地图） */
.heatmap-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 单个圆点+标注的包装器 */
.heatmap-dot-wrapper {
  position: absolute;
  /* 让圆点的中心对准配置的坐标点 */
  transform: translate(-50%, -50%);
}

/* 热力圆点样式（和图4的黄色圆点一致） */
.heatmap-dot {
  width: 45px; /* 圆点大小，可根据地图比例调整 */
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25); /* 轻微阴影，更立体 */
}

/* 带箭头的标注文字 */
.heatmap-label {
  position: absolute;
  /* 标注默认放在圆点右边，你可以改成left/right调整位置 */
  left: 60px; /* 距离圆点的距离 */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7); /* 半透明背景，方便阅读 */
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap; /* 文字不换行 */
}

/* 给标注加箭头（指向圆点） */
.heatmap-label::before {
  content: "";
  position: absolute;
  /* 箭头在标注的左侧，指向圆点 */
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  /* 箭头颜色和标注背景一致 */
  border-right-color: rgba(0, 0, 0, 0.7);
}

/* 空数据提示 */
.empty-tip {
  color: #999;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
}