/* ============================================================
 * pagination-common.css
 * 全站统一编号分页组件（玻璃拟态 + 暗黑霓虹）
 * 用法：
 *   <div class="pg-pagination" id="myPagination"></div>
 *   <script src="pagination-common.js"></script>
 *   <script>PG.render(document.getElementById('myPagination'), {
 *     totalItems, pageSize, currentPage, onPageChange
 *   });</script>
 *
 * 主题色全部用 --pg-* 变量封装，可被外部覆盖（譬如新页面配色）
 * ============================================================ */

.pg-pagination {
  --pg-bg:           rgba(31, 23, 48, 0.55);
  --pg-bg-hover:     rgba(31, 23, 48, 0.85);
  --pg-border:       rgba(255, 204, 0, 0.18);
  --pg-border-hover: rgba(255, 204, 0, 0.45);
  --pg-text:         #a99fb6;
  --pg-text-hover:   #ffcc00;
  --pg-active-bg:    #ffcc00;
  --pg-active-text:  #000;
  --pg-active-glow:  rgba(255, 204, 0, 0.4);
  --pg-disabled-op:  0.35;
  --pg-ellipsis:     #6f6478;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 22px 0;
  flex-wrap: wrap;
}

.pg-page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  background: var(--pg-bg);
  color: var(--pg-text);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pg-page-btn:hover:not(:disabled):not(.active) {
  color: var(--pg-text-hover);
  border-color: var(--pg-border-hover);
  background: var(--pg-bg-hover);
}
.pg-page-btn.active {
  background: var(--pg-active-bg);
  color: var(--pg-active-text);
  border-color: var(--pg-active-bg);
  font-weight: 700;
  box-shadow: 0 0 12px var(--pg-active-glow);
  cursor: default;
}
.pg-page-btn:disabled {
  opacity: var(--pg-disabled-op);
  cursor: not-allowed;
}

.pg-ellipsis {
  min-width: 38px;
  text-align: center;
  color: var(--pg-ellipsis);
  user-select: none;
}