.pagination {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-light);
}

.pagination .pages {
  margin-right: .25rem;
  font-size: .875rem;
  color: var(--text-muted);
  user-select: none;
}

.pagination a,
.pagination .pagination_current {
  --btn-padding-x: .75rem;
  --btn-padding-y: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: .75rem;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-main);
  text-decoration: none;
  line-height: 1;
  font-weight: 500;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px var(--shadow-color);
}

.pagination a.pagination_page { color: var(--text-main); }
.pagination a.pagination_page:hover {
  background: var(--highlight-bg);
  border-color: color-mix(in srgb, var(--border-color) 70%, var(--accent) 30%);
  transform: translateY(-1px);
}
.pagination a.pagination_page:active {
  transform: translateY(0);
  box-shadow: none;
}

.pagination .pagination_current {
  background: color-mix(in srgb, var(--accent) 16%, var(--card-bg) 84%);
  border-color: color-mix(in srgb, var(--border-color) 40%, var(--accent) 60%);
  color: var(--text-bright);
  cursor: default;
}

.pagination a.pagination_next {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border-color) 30%);
  color: var(--text-bright);
}
.pagination a.pagination_next:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-soft) 70%, var(--border-color) 30%);
  transform: translateY(-1px);
}
.pagination a.pagination_next:active {
  transform: translateY(0);
  box-shadow: none;
}

.pagination a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white 30%);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}

.pagination a[aria-disabled="true"],
.pagination a.is-disabled {
  pointer-events: none;
  opacity: .45;
  filter: saturate(.6);
}

@media (max-width: 420px) {
  .pagination { padding: .375rem .5rem; gap: .375rem; }
  .pagination .pages { display: none; }
  .pagination a,
  .pagination .pagination_current {
    --btn-padding-x: .625rem;
    --btn-padding-y: .4rem;
    min-width: 2rem;
    font-size: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pagination a,
  .pagination .pagination_current { transition: none; }
}