.record-pagination {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 8px 12px; padding: 12px 0; color: var(--m3-tool-ink, var(--online-m3-tonal-ink, var(--admin-tonal-ink, var(--muted))));
  font-size: 14px; line-height: 20px;
}
.record-pagination label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.record-pagination select, .record-pagination button {
  width: auto; flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 8px 12px; font: inherit;
  border: 1px solid var(--m3-outline, var(--online-m3-outline, var(--line, var(--border))));
  border-radius: 22px; box-shadow: none;
  background: var(--m3-raised, var(--online-m3-raised, var(--surface)));
  color: var(--m3-tool-ink, var(--online-m3-tonal-ink, var(--admin-tonal-ink, var(--ink, var(--text))))); cursor: pointer;
}
.record-pagination button:hover:not(:disabled) { background: var(--m3-tonal, var(--online-m3-tonal, var(--admin-tonal, var(--surface)))); }
.record-pagination :disabled { opacity: .45; cursor: default; }
.record-pagination :focus-visible { outline: 2px solid var(--m3-focus, var(--online-m3-focus, var(--admin-focus, var(--accent)))); outline-offset: 2px; }
.record-pagination-summary { margin-right: auto; font-variant-numeric: tabular-nums; }
.canvas-record-pagination-host { flex: 0 0 auto; padding: 0 16px; }
@media (max-width: 480px) { .record-pagination-summary { flex-basis: 100%; order: -1; } }