.pager { margin-top: 20px; display: flex; justify-content: flex-end; }
.pager:empty { margin-top: 0; }
.pager-in { display: flex; align-items: center; gap: 8px; }
.pager-btn {
  min-width: 38px; height: 38px; padding: 0 12px; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14); border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: rgba(30, 50, 80, .72);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pager-btn:hover { background: rgba(var(--brand-rgb), .08); border-color: rgba(var(--brand-rgb), .35); color: var(--brand-text); }
.pager-btn.is-on, .pager-btn.is-on:hover {
  background: var(--brand-gradient); border-color: var(--brand-primary); color: #ffffff;
}
.pager-btn:disabled { cursor: default; color: rgba(30, 50, 80, .32); background: #ffffff; border-color: rgba(13, 38, 90, .08); }
.pager-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.pager-gap {
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: rgba(30, 50, 80, .4); user-select: none;
}