/* 容器样式 - 自适应宽度 */
    .kingdee-fi-ernavigationbar {
      list-style: none;
      display: flex;
      align-items: center;
      margin: 20px auto 20px auto;
      padding: 0;
      position: relative;
      width: 100%;
       /*max-width: 1200px; 最大宽度限制 */
      box-sizing: border-box;
    }

    /* 步骤项样式 - 平均分配宽度 */
    .kingdee-fi-ernavigationbar li {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      flex: 1; /* 平均分配可用宽度 */
      min-width: 80px; /* 最小宽度，防止过度压缩 */
      z-index: 2;
      box-sizing: border-box;
    }

    /* 步骤圆圈样式 */
    .kingdee-fi-ernavigationbar .step-circle {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ccc; /* 默认灰色 */
      color: #fff;
      cursor: pointer;
      transition: background-color 0.3s ease;
      position: relative;
      z-index: 2; /* 确保圆圈在线条上方 */
    }

    /* 步骤标题样式 */
    .kingdee-fi-ernavigationbar .step-text {
      margin-top: 5px; 
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      font-weight: normal; 
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }


  .kingdee-fi-ernavigationbar .step-number {
    font-size: 20px;
    font-weight: bold; 

  }

    /* 连接线样式 - 修复显示问题，确保与圆圈紧密接触 */
    .kingdee-fi-ernavigationbar li:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 23px; /* 与圆圈中心对齐（30px高度的一半） */
      left: 50%; /* 从当前步骤的中心开始 */
      width: 100%; /* 延伸到下一个步骤 */
      height: 2px;
      background-color: #ccc;
      z-index: 1; /* 确保线条在圆圈下方但在背景上方 */
      transform: translateX(0); /* 重置变换 */
    }

    /* 调整最后一个连接线的范围，不超出容器 */
    .kingdee-fi-ernavigationbar li:last-child::before {
      content: none;
    }

    /* 当前选中节点样式 */
    .kingdee-fi-ernavigationbar li.active .step-circle {
      background-color:  var(--kd-cq-theme-color);
    }

    .kingdee-fi-ernavigationbar li.active .step-text {
      font-weight: bold; /* 标题加粗 */
    }

    /* 已完成节点样式 */
    .kingdee-fi-ernavigationbar li.completed .step-circle {
      background-color:  var(--kd-cq-theme-color);
    }

    /* 连接线颜色跟随已完成状态 */
    .kingdee-fi-ernavigationbar li.completed:not(:last-child)::after {
      background-color:  var(--kd-cq-theme-color);
    }

    /* 勾选图标样式 */
    .kingdee-fi-ernavigationbar .check-icon {
      display: none;
    }

    .kingdee-fi-ernavigationbar li.completed .check-icon {
      display: inline;
    }

    .kingdee-fi-ernavigationbar li.completed .step-number {
      display: none;
    }

    .kingdee-fi-ernavigationbar-bottom {
      height: 10px; 
    }