/* pagination.css */

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--f-mono);
  color: var(--c-body);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}
.page-btn:hover { background: var(--c-surface-soft); color: var(--c-ink); }
.page-btn.is-active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); font-weight: 600; }
.page-btn.is-active:hover { background: var(--c-brand-hover); }
.page-btn.is-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.page-btn.is-nav { border-color: var(--c-hairline); background: var(--c-canvas); font-family: var(--f-sans); }
.page-btn.is-nav:hover { border-color: var(--c-hairline-strong); color: var(--c-ink); }
.page-btn:focus-visible { outline: none; box-shadow: var(--s-focus); }
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--c-muted);
  letter-spacing: 0.05em;
  font-family: var(--f-mono);
  user-select: none;
}
.pagination-info {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-muted);
  margin-left: 8px;
}