.sp-pagination {
  --sp-text: #b8bcc8;
  --sp-control: #1c1c24;
  --sp-border: #353640;
  --sp-hover: #2b2c38;
  --sp-active: #6961cf;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  color: var(--sp-text);
  font-size: 13px;
  line-height: 1;
}
.sp-pagination .sp-total { margin-right: 4px; white-space: nowrap; }
.sp-pagination .sp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.sp-pagination .sp-size-label { display: inline-flex; align-items: center; margin-right: 4px; }
.sp-pagination select.sp-size,
.sp-pagination input.sp-jump {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--sp-border);
  border-radius: 5px;
  background: var(--sp-control);
  color: var(--sp-text);
  font: inherit;
  outline-offset: 2px;
}
.sp-pagination select.sp-size { width: 106px; cursor: pointer; }
.sp-pagination input.sp-jump { width: 48px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.sp-pagination input.sp-jump::-webkit-inner-spin-button,
.sp-pagination input.sp-jump::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sp-pagination .sp-button,
.sp-pagination .sp-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--sp-control);
  color: var(--sp-text);
  font: inherit;
}
.sp-pagination .sp-button { cursor: pointer; }
.sp-pagination .sp-button:hover:not(:disabled):not(.is-active) { background: var(--sp-hover); }
.sp-pagination .sp-button.is-active { background: var(--sp-active); border-color: var(--sp-active); color: #fff; font-weight: 600; }
.sp-pagination .sp-button:disabled { opacity: .4; cursor: not-allowed; }
.sp-pagination .sp-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sp-pagination .sp-jump-label { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; white-space: nowrap; }
.tkt-panel .tkt-footer { padding: 0; border-top: 0; }
.tkt-panel .sp-pagination { padding: 16px 20px; border-top: 1px solid var(--line); }
html[data-theme="light"] .sp-pagination {
  --sp-text: #4a5668;
  --sp-control: #f1f4f8;
  --sp-border: #d4ddea;
  --sp-hover: #e7edf7;
  --sp-active: #245bd6;
}
html[data-theme="light"] .sp-pagination select.sp-size,
html[data-theme="light"] .sp-pagination input.sp-jump { background: #fff; color: #334154; }
@media(max-width: 600px) {
  .sp-pagination { justify-content: flex-start; gap: 6px; }
  .sp-pagination .sp-jump-label { margin-left: 4px; }
}