@charset "utf-8";
/* ============================================================
   Bootstrap 5 分页皮肤样式 (pagination-skins.css)
   依赖：Bootstrap 5（仅使用 .pagination / .page-item / .page-link）
   用法：<ul class="pagination pg-pill"> ... </ul>
   ============================================================ */

/* ---- 皮肤 1：胶囊渐变 Pill / Gradient ---- */
.pagination.pg-pill .page-link {
    border: 1px solid #eef2ff; color: #6366f1;
    margin: 0 4px; border-radius: 999px !important;
    min-width: 40px; text-align: center;
    transition: all .2s ease; background: #fff;
  }
  .pagination.pg-pill .page-item:first-child .page-link,
  .pagination.pg-pill .page-item:last-child  .page-link { border-radius: 999px !important; }
  .pagination.pg-pill .page-item.active .page-link {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent; color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,.4);
  }
  .pagination.pg-pill .page-link:hover:not(.disabled) { background: #eef2ff; }
  
  /* ---- 皮肤 2：圆角填充 Rounded Filled ---- */
  .pagination.pg-rounded .page-link {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 12px !important;
    margin: 0 4px; color: #475569; background: #f1f5f9;
    transition: all .2s ease;
  }
  .pagination.pg-rounded .page-item.active .page-link {
    background: #0ea5e9; color: #fff;
    box-shadow: 0 6px 14px rgba(14,165,233,.35);
    transform: translateY(-2px);
  }
  .pagination.pg-rounded .page-link:hover:not(.disabled) { background: #e2e8f0; color: #0f172a; }
  
  /* ---- 皮肤 3：描边幽灵 Outline Ghost ---- */
  .pagination.pg-ghost .page-link {
    border: 1.5px solid #cbd5e1; color: #334155;
    border-radius: 8px !important; margin: 0 4px;
    transition: all .2s ease;
  }
  .pagination.pg-ghost .page-item.active .page-link {
    background: transparent; border-color: #f43f5e; color: #f43f5e; font-weight: 600;
  }
  .pagination.pg-ghost .page-link:hover:not(.disabled) {
    border-color: #f43f5e; color: #f43f5e; background: #fff1f2;
  }
  
  /* ---- 皮肤 4：柔和 Soft Minimal ---- */
  .pagination.pg-soft .page-link {
    border: none; color: #64748b;
    border-radius: 8px !important; margin: 0 3px;
    padding: .5rem .75rem; transition: all .2s ease;
  }
  .pagination.pg-soft .page-item.active .page-link {
    background: #dbeafe; color: #1d4ed8; font-weight: 600;
  }
  .pagination.pg-soft .page-link:hover:not(.disabled) { background: #f1f5f9; color: #1d4ed8; }
  
  /* ---- 皮肤 5：暗色 Dark ---- */
  .pagination.pg-dark { background:#0f172a; padding:.6rem 1rem; border-radius:14px; width:max-content; }
  .pagination.pg-dark .page-link {
    border: none; color: #94a3b8; background: transparent;
    border-radius: 8px !important; margin: 0 3px; transition: all .2s ease;
  }
  .pagination.pg-dark .page-item.active .page-link {
    background: #22c55e; color: #04210f; font-weight: 700;
  }
  .pagination.pg-dark .page-link:hover:not(.disabled) { background: #1e293b; color: #fff; }
  
  /* ---- 皮肤 6：玻璃拟态 Glassmorphism ---- */
  .pagination.pg-glass .page-link {
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
    color: #fff; border-radius: 12px !important; margin: 0 4px;
    transition: all .2s ease; text-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  .pagination.pg-glass .page-item.active .page-link {
    background: rgba(255,255,255,.9); color: #7c3aed; font-weight: 700; text-shadow: none;
  }
  .pagination.pg-glass .page-link:hover:not(.disabled) { background: rgba(255,255,255,.45); }