/* --- Pagination (dark) + aliases for .page-link markup --- */
.pagination{
  --pg-surface: var(--surface-2, #0f1623);
  --pg-surface-hover: var(--surface-3, #101827);
  --pg-border: var(--border-600, #2a3344);
  --pg-border-hover: var(--border-500, #394359);
  --pg-text: var(--text-100, #e5e7eb);
  --pg-muted: var(--muted-400, #9aa4b2);
  --pg-accent: var(--brand, #60a5fa);

  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-top:1rem; flex-wrap:wrap;
    margin-bottom:1rem;
}
.pagination__stats{ color:var(--pg-muted); font-size:.9rem; white-space:nowrap; }

/* links */
.pagination__link, .page-link{
  min-width:2.25rem; height:2.25rem; padding:0 .55rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.6rem;
  background:var(--pg-surface);
  border:1px solid var(--pg-border);
  color:var(--pg-text); text-decoration:none; line-height:1;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.pagination__link:hover, .page-link:hover{
  background:var(--pg-surface-hover); border-color:var(--pg-border-hover);
}
/* active / disabled */
.pagination__link.is-active, .page-link.active{
  background:var(--pg-accent); border-color:var(--pg-accent); color:#0b1220; cursor:default;
}
.pagination__link.is-disabled, .page-link.disabled{
  opacity:.5; cursor:not-allowed; pointer-events:none;
}

/* ellipsis */
.pagination__ellipsis, .page-ellipsis{
  min-width:2rem; height:2.25rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pg-muted);
}

/* wider prev/next if потрібно додати модифікатор */
.pagination__link--wide, .page-link--wide{ min-width:3.25rem; padding:0 .75rem; }

/* mobile */
@media (max-width:640px){
  .pagination{ gap:.5rem .75rem; }
  .pagination__stats{ order:2; width:100%; text-align:center; }
}