<nav class="pagination" aria-label="Pagination">
  <button class="page-btn page-prev" aria-label="Previous">← Prev</button>

  <div class="page-numbers">
    <button class="page-num">1</button>
    <button class="page-num active" aria-current="page">2</button>
    <button class="page-num">3</button>
    <span class="page-ellipsis">...</span>
    <button class="page-num">8</button>
  </div>

  <button class="page-btn page-next">Next →</button>
</nav>

<style>
.pagination { display: flex; align-items: center; gap: 0.5rem; }
.page-numbers { display: flex; align-items: center; gap: 0.25rem; }
.page-btn {
  padding: 0.5rem 0.875rem; border: 1px solid var(--border);
  border-radius: 0.5rem; background: var(--surface); color: var(--text);
  font-size: 0.875rem; cursor: pointer; transition: all 0.15s;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-num {
  width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  border: 1px solid transparent; background: none;
  font-size: 0.875rem; cursor: pointer; color: var(--text);
  transition: all 0.15s;
}
.page-num:hover { background: var(--border); }
.page-num.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.page-ellipsis { color: var(--muted); padding: 0 0.25rem; font-size: 0.875rem; }
</style>