🎨 fix(theme): align UI controls with global radius tokens

Remove hard-coded and capped border radius overrides so shared controls and feature actions consistently follow the active theme radius.

- Replace fixed radius utilities with semantic theme-aware radius tokens
- Remove redundant `rounded-full` and pixel-based overrides from header, toolbar, Playground, and utility actions
- Drop unused `StatusBadge` rounded prop usage
- Keep existing component behavior intact while improving global theme consistency

web/default/src/lib/theme-radius.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+export function resolveThemeRadiusPx(
+  cssVariable = '--radius-md'
+): number | undefined {
+  if (typeof document === 'undefined') return undefined
+
+  const probe = document.createElement('div')
+  probe.style.borderRadius = `var(${cssVariable})`
+  probe.style.pointerEvents = 'none'
+  probe.style.position = 'absolute'
+  probe.style.visibility = 'hidden'
+
+  document.documentElement.appendChild(probe)
+  const resolvedRadius = getComputedStyle(probe).borderTopLeftRadius
+  probe.remove()
+
+  const parsedRadius = Number.parseFloat(resolvedRadius)
+  return Number.isFinite(parsedRadius) ? parsedRadius : undefined
+}
+
+export function useThemeRadiusPx(
+  cssVariable = '--radius-md',
+  refreshKey?: string
+): number | undefined {
+  const [radius, setRadius] = useState<number | undefined>()
+
+  useEffect(() => {
+    setRadius(resolveThemeRadiusPx(cssVariable))
+  }, [cssVariable, refreshKey])
+
+  return radius
+}