🎨 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/features/pricing/components/dynamic-pricing-breakdown.tsx

@@ -179,7 +179,7 @@ export function DynamicPricingBreakdown({
     return (
       <section className='min-w-0 py-4'>
         <div className='mb-3 flex items-center gap-2'>
-          <span className='inline-flex size-6 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
+          <span className='inline-flex size-6 items-center justify-center rounded-lg bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
             <TagIcon className='size-3.5' />
           </span>
           <div>
@@ -212,7 +212,7 @@ export function DynamicPricingBreakdown({
   return (
     <section className='min-w-0 py-3 sm:py-4'>
       <div className='mb-3 flex items-start gap-2 sm:mb-4'>
-        <span className='mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
+        <span className='mt-0.5 inline-flex size-6 items-center justify-center rounded-lg bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
           <TagIcon className='size-3.5' />
         </span>
         <div>

web/default/src/features/pricing/components/loading-skeleton.tsx

@@ -67,7 +67,7 @@ function FilterBarSkeleton() {
           {[80, 90, 75, 85, 70].map((width, i) => (
             <Skeleton
               key={i}
-              className='h-8 rounded-full'
+              className='h-8 rounded-lg'
               style={{ width: `${width}px` }}
             />
           ))}

web/default/src/features/pricing/components/model-details-apps.tsx

@@ -41,7 +41,7 @@ function RankBadge(props: { rank: number }) {
   return (
     <span
       className={cn(
-        'inline-flex size-7 shrink-0 items-center justify-center rounded-full font-mono text-xs font-bold tabular-nums',
+        'inline-flex size-7 shrink-0 items-center justify-center rounded-md font-mono text-xs font-bold tabular-nums',
         palette
       )}
     >

web/default/src/features/pricing/components/model-details-charts.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from 'react'
 import { VChart } from '@visactor/react-vchart'
 import { useTranslation } from 'react-i18next'
+import { useThemeRadiusPx } from '@/lib/theme-radius'
 import { useChartTheme } from '@/lib/use-chart-theme'
 import { cn } from '@/lib/utils'
 import { VCHART_OPTION } from '@/lib/vchart'
+import { useThemeCustomization } from '@/context/theme-customization-provider'
 import type { LatencyTimePoint, UptimeDayPoint } from '../lib/mock-stats'
 
 function formatHourLabel(iso: string): string {
@@ -246,6 +248,11 @@ export function ThroughputBarChart(props: {
 }) {
   const { t } = useTranslation()
   const { resolvedTheme, themeReady } = useChartTheme()
+  const { customization } = useThemeCustomization()
+  const barRadius = useThemeRadiusPx(
+    '--radius-sm',
+    `${customization.preset}:${customization.radius}`
+  )
 
   const filtered = useMemo(
     () => props.rows.filter((r) => r.throughput_tps > 0),
@@ -261,7 +268,10 @@ export function ThroughputBarChart(props: {
       xField: 'throughput_tps',
       yField: 'group',
       bar: {
-        style: { fill: '#6366f1', cornerRadius: 2 },
+        style: {
+          fill: '#6366f1',
+          ...(barRadius == null ? {} : { cornerRadius: barRadius }),
+        },
       },
       label: {
         visible: true,
@@ -294,7 +304,7 @@ export function ThroughputBarChart(props: {
         },
       },
     }
-  }, [filtered, t])
+  }, [barRadius, filtered, t])
 
   if (filtered.length === 0) {
     return null

web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx

@@ -87,7 +87,7 @@ export function UptimeSparkline(props: UptimeSparklineProps) {
               render={
                 <div
                   className={cn(
-                    'rounded-[1px] transition-opacity hover:opacity-80',
+                    'rounded-sm transition-opacity hover:opacity-80',
                     barWidth,
                     containerHeight,
                     'flex items-end'
@@ -97,7 +97,7 @@ export function UptimeSparkline(props: UptimeSparklineProps) {
             >
               <div
                 className={cn(
-                  'w-full rounded-[1px]',
+                  'w-full rounded-sm',
                   colourFor(day.uptime_pct),
                   heightFor(day.uptime_pct)
                 )}

web/default/src/features/pricing/components/pricing-sidebar.tsx

@@ -95,7 +95,7 @@ function FilterChip(props: {
       {(props.option.suffix || props.option.count != null) && (
         <span
           className={cn(
-            'rounded-full px-1.5 py-0.5 text-[10px]',
+            'rounded-md px-1.5 py-0.5 text-[10px]',
             props.active
               ? 'bg-background text-foreground'
               : 'bg-muted text-muted-foreground'

web/default/src/features/pricing/components/pricing-toolbar.tsx

@@ -154,7 +154,7 @@ export function PricingToolbar(props: PricingToolbarProps) {
             <Filter className='size-4' />
             {t('Filter')}
             {props.activeFilterCount > 0 && (
-              <Badge className='ml-0.5 size-5 justify-center rounded-full p-0 text-[10px]'>
+              <Badge className='ml-0.5 size-5 justify-center p-0 text-[10px]'>
                 {props.activeFilterCount}
               </Badge>
             )}