#pagenav {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    list-style: none;
    padding: 0;
  }
  
  #pagenav .page-item {
    margin: 0 5px;
  }
  
  #pagenav .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #d32f2f;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  #pagenav .page-item .page-link:hover {
    background-color: #fdecea;
    border-color: #d32f2f;
    color: #b71c1c;
  }
  

  #pagenav .page-item  .disabled {
    background-color: #e9ecef; /* 浅灰色背景 */
  border-color: #ced4da;    /* 边框浅灰色 */
  color: #6c757d;          /* 字体深灰色 */
  cursor: not-allowed;     /* 禁用鼠标点击 */
  pointer-events: none;    /* 禁用交互事件 */
  opacity: 1;              /* 颜色保持清晰 */
  box-shadow: none;        /* 禁用状态无多余阴影 */
  }
  
  
  #pagenav .page-item.active .page-link {
    background-color: #d32f2f;
    color: #fff;
    border-color: #b71c1c;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.25);
  }
  
  #pagenav .page-item .page-link svg {
    margin-right: 4px;
  }
  
  #pagenav .page-item .page-link svg:last-of-type {
    margin-right: 0;
    margin-left: 4px;
  }
  
  /* Responsive Design */
  @media (max-width: 576px) {
    #pagenav {
      flex-wrap: wrap;
    }
  
    #pagenav .page-item {
      flex: 1 1 auto;
      margin: 3px 0;
    }
  
    #pagenav .page-item .page-link {
      padding: 0.5rem;
    }
  }