Restyle a UI component to match a reference design

Help me restyle an existing UI component to match a reference component, without changing what it does. My component: [PASTE the full source] Framework and styling: [e.g. React + Tailwind, Vue + CSS modules] Reference to match: [PASTE the reference component's source, or describe it - e.g. a component from my design system or a UI library] Things that must not change: [props interface, data fetching, event handlers, analytics calls, test IDs] Work in this order: 1. Analyze my component first - list its props and types, internal state, side effects, context it uses, events it emits, and any test selectors. Confirm this list before changing code. 2. Analyze the reference - structure, class names or tokens, variants, animations, and accessibility attributes (roles, aria-*, keyboard behavior, focus states). 3. Map old to new - a table of each element in my component and its equivalent in the reference; note anything with no equivalent. 4. Refactor the visual layer only - markup, classes, animations, accessibility. Keep the props interface and logic identical. 5. Check behavior - keyboard navigation, focus visibility, screen reader labels, reduced-motion support, dark mode, responsive sizes. Return: the analysis, the mapping table, the updated component code, a short diff summary, and a checklist of what to test manually. If a reference behavior conflicts with existing logic, stop and ask rather than changing the logic.