body {
        background-color: #f5f7fa;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      }
      .header {
        background: linear-gradient(135deg, #ff5e62 0%, #ff9966 100%);
        color: white;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(255, 94, 98, 0.3);
      }
      .header-title {
        font-size: 18px;
        font-weight: bold;
        margin: 0;
      }
      .header .col-xs-2 a {
        color:#fff;
        font-size:20px;
      }
      .search-container {
        background: white;
        padding: 15px;
        margin: 10px auto;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }
      #searchModal .modal-dialog{
        margin: 0 auto; 
        display: flex;
        align-items: center;
        min-height: calc(100vh - 1rem);
        justify-content: center;
      }
      .info-card {
        background: white;
        border-radius: 12px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      }
      .info-header {
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
      }
      .info-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
      }
      .info-meta {
        font-size: 12px;
        color: #999;
      }
      .info-content {
        padding: 15px;
      }
      .info-profile {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
      }
      .profile-tag {
        background-color: #f8f9fa;
        color: #666;
        padding: 4px 10px;
        border-radius: 15px;
        font-size: 12px;
        border: 1px solid #e9ecef;
      }
      .info-desc {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .info-requirements {
        background-color: #f8f9fa;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 15px;
      }
      .requirements-title {
        font-size: 13px;
        font-weight: 600;
        color: #ff5e62;
        margin-bottom: 8px;
      }
      .requirement-item {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
      }
      .info-footer {
        padding: 12px 15px;
        background-color: #fafafa;
        border-top: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .info-contact {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .btn-contact {
        background: linear-gradient(135deg, #ff5e62 0%, #ff9966 100%);
        color: white;
        border: none;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
      }
      .btn-contact:hover {
        opacity: 0.9;
        transform: scale(1.05);
      }
      .btn-contact.disabled {
        background: #ccc;
        cursor: not-allowed;
      }
      .img-preview {
        display: flex;
        gap: 8px;
        overflow-x: auto;
      }
      .img-item {
        width: 60px;
        height: 60px;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
      }
      .img-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .certify-badge {
        background-color: #ff5e62;
        color: white;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        margin-left: 5px;
      }
      .loading-container {
        text-align: center;
        padding: 20px;
        color: #999;
        display: none;
      }
      .pull-refresh-tip {
        text-align: center;
        padding: 10px;
        color: #999;
        font-size: 12px;
        display: none;
      }
      .loading-spinner {
        width: 24px;
        height: 24px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: inline-block;
        margin-right: 8px;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      /* 固定筛选容器样式 */
      .sticky-filter-container {
        position: sticky;
        top: 60px; /* 与header高度配合 */
        background: white;
        z-index: 999;
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      
      /* 优化筛选选择框样式 - 手机友好 */
      .filter-container select {
        /* 增大点击区域 */
        height: 45px;
        padding: 0 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: white;
        /* 优化字体显示 */
        font-size: 14px;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        color: #333;
        /* 美化下拉箭头 */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
      }
      
      /* 解决文字显示不全问题 */
      .filter-container .form-control {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      /* 筛选和重置按钮样式 */
      .filter-btn {
        background: linear-gradient(135deg, #ff5e62 0%, #ff9966 100%);
        color: white;
        border: none;
        padding: 10px 24px;
        border-radius: 22px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 80px;
      }
      .filter-btn:hover {
        opacity: 0.9;
        transform: scale(1.05);
      }
      .reset-btn {
        background: #f8f9fa;
        color: #666;
        border: 1px solid #e9ecef;
        padding: 10px 24px;
        border-radius: 22px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 80px;
      }
      .reset-btn:hover {
        background: #e9ecef;
      }
/* 切换按钮样式 */
      .info-tabs {
          display: flex;
          margin: 10px 0;
          background-color: #f5f5f5;
          border-radius: 5px;
          overflow: hidden;
      }
      
      .tab-btn {
          flex: 1;
          padding: 10px 0;
          border: none;
          background: none;
          font-size: 16px;
          color: #666;
          cursor: pointer;
          transition: all 0.3s ease;
      }
      
      .tab-btn.active {
          background-color: #2196F3;
          color: white;
      }
      
      .tab-btn:active {
          opacity: 0.8;
      }
      
      /* 响应式调整 */
      @media (max-width: 768px) {
          .info-tabs {
              margin: 8px 0;
          }
          
          .tab-btn {
              padding: 8px 0;
              font-size: 14px;
          }
      }
      /* 初始样式保持不变，新增固定定位相关样式 */
.info-tabs {
  /* 保留你原有的边框样式，新增以下属性 */
  position: relative; /* 为后续固定定位做过渡 */
  z-index: 999; /* 固定时避免被其他内容遮挡 */
  background: white; /* 固定时背景色覆盖下方内容 */
  width: 100%; /* 确保固定后宽度占满屏幕 */
}

/* 滚动时添加的固定定位类 */
.info-tabs.fixed {
  position: fixed; /* 固定到顶部 */
  top: 55px; /* 距离顶部0px */
  left: 0; /* 距离左侧0px */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选：添加阴影增强层次感 */
  margin-top:0px;
}

/* 可选：给页面顶部加一个占位符，避免固定后内容突然上移 */
.fixed-placeholder {
  height: 40px; /* 高度与 info-tabs 一致（根据你的按钮高度调整） */
  display: none; /* 默认隐藏 */
}
#infoModal .modal-body {
  max-height: 80vh !important; /* 限制模态框最大高度为屏幕的80% */
  overflow-y: auto !important; /* 垂直方向自动出现滚动条 */
  touch-action: auto !important; /* 移动端允许触摸滚动 */
}
.count {
  display: inline-block;
  padding: 0 6px; /* 用 padding 替代固定宽高，适配不同数字长度 */
  height: 20px;
  line-height: 20px; /* 垂直居中 */
  text-align: center;
  background: #ff5502;
  color: #fff;
  font-size: 12px; /* 稍大一点，让数量更清晰 */
  border-radius: 3px; /* 小方角，和标签按钮风格统一 */
  margin-left: 6px; /* 增加间距，避免拥挤 */
  vertical-align: middle;
  font-weight: 500; /* 加粗数字，突出总量 */
}

/* 激活态标签（匹配信息被选中时）优化 */
.tab-btn.active .count {
  background: #fff;
  color: #ff5502;
  border: 1px solid #ff5502; /* 边框呼应，更协调 */
}