chore: replace @emotion/react with Chakra UI v3 native styling

[IamShobe]

Problem

The project currently imports both @emotion/react/@emotion/styled and @chakra-ui/react v3. Chakra UI v3 no longer uses emotion internally — it has its own CSS-in-JS system (Panda CSS / slot recipes). This creates a type-level incompatibility:

• @emotion/react augments the JSX namespace, adding css?: Interpolation<Theme> to all elements
• Chakra UI v3 types its css prop as SystemStyleObject
• These two definitions are structurally incompatible, causing TS2322 errors when spreading Chakra props

Currently worked around via // @ts-expect-error in IconButton.tsx.

Goal

Remove @emotion/react and @emotion/styled as direct dependencies and replace all usages with Chakra UI v3's native styling primitives:

• styled.div\...`→chakra("div", { baseStyle: { ... } })or inlinecssprop with Chakra'sSystemStyleObject`
• css\...`template literals (emotion) → Chakracss` prop or token-based styles
• Global from @emotion/react → Chakra's <Global> or plain <style> tags
• @emotion/cache → remove (only needed to scope emotion styles)

Benefits

• Eliminates the JSX type conflict → removes the @ts-expect-error workaround in IconButton.tsx
• Reduces bundle size (one fewer CSS-in-JS runtime)
• Consistent styling approach across the entire codebase
• Fewer dependency surface area to maintain

Files to audit

grep -r "@emotion" apps/cruncher/src --include="*.ts" --include="*.tsx" -l