.data-pagination {
  --pagination-bg: color-mix(in srgb, var(--card, #fff) 94%, var(--purple, #6a37d3) 6%);
  --pagination-border: var(--line, rgba(127, 102, 174, .24));
  --pagination-text: var(--muted, #736b7f);
  --pagination-button-bg: var(--card, #fff);
  --pagination-button-border: var(--line, rgba(127, 102, 174, .24));
  --pagination-button-text: var(--ink, #211a2c);
  --pagination-button-disabled-bg: color-mix(in srgb, var(--card, #fff) 96%, #81778c 4%);
  --pagination-button-disabled-border: color-mix(in srgb, var(--line, #ddd) 82%, #81778c 18%);
  --pagination-button-disabled-text: #8a8192;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--pagination-border) !important;
  border-radius: 10px;
  background: var(--pagination-bg) !important;
  color: var(--pagination-text) !important;
  font-size: 12px;
  font-weight: 700;
}
.data-pagination[hidden] { display: none !important; }
.data-pagination__info {
  min-width: 0;
  color: inherit !important;
}
.data-pagination__actions { display: inline-flex; align-items: center; gap: 6px; }
.data-pagination .data-pagination__actions > button {
  width: auto;
  min-width: 58px;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--pagination-button-border) !important;
  border-radius: 8px;
  background: var(--pagination-button-bg) !important;
  color: var(--pagination-button-text) !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none !important;
  white-space: nowrap;
  opacity: 1;
}
.data-pagination .data-pagination__actions > button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--purple, #6a37d3) 58%, var(--line, #ddd)) !important;
  background: color-mix(in srgb, var(--card, #fff) 88%, var(--purple, #6a37d3) 12%) !important;
  color: var(--purple, #6a37d3) !important;
  transform: none;
}
.data-pagination .data-pagination__actions > button:disabled {
  cursor: not-allowed;
  border-color: var(--pagination-button-disabled-border) !important;
  background: var(--pagination-button-disabled-bg) !important;
  color: var(--pagination-button-disabled-text) !important;
  opacity: 1 !important;
}

html[data-admin-theme="dark"] .data-pagination {
  --pagination-bg: #1b191f;
  --pagination-border: var(--admin-line, #34313a);
  --pagination-text: #c4bdca;
  --pagination-button-bg: #28252d;
  --pagination-button-border: var(--admin-line-strong, #45404b);
  --pagination-button-text: #f0eaf4;
  --pagination-button-disabled-bg: #201e24;
  --pagination-button-disabled-border: #39353f;
  --pagination-button-disabled-text: #958d9d;
  color-scheme: dark;
}
html[data-admin-theme="dark"] .data-pagination .data-pagination__actions > button:hover:not(:disabled) {
  border-color: #765f9c !important;
  background: #332a40 !important;
  color: #e5d4ff !important;
}

@media (max-width: 680px) {
  .data-pagination { align-items: flex-start; flex-direction: column; }
  .data-pagination__actions { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .data-pagination .data-pagination__actions > button { width: 100%; min-width: 0; padding: 0 6px; }
}