Tighten KPI card layout

resources/js/admin/mobile/components/Primitives.tsx

@@ -213,7 +213,7 @@ export function KpiStrip({
   const { glassSurface, border, textStrong, textMuted, primary, surfaceMuted, surface } = useAdminTheme();
 
   return (
-    <XStack flexWrap="wrap" gap="$1.5">
+    <XStack flexWrap="wrap" gap="$2">
       {items.map((item, index) => {
         const isNeutral = item.tone === 'neutral';
         const iconColor = isNeutral ? textStrong : item.color || primary;
@@ -226,11 +226,11 @@ export function KpiStrip({
             borderRadius={14}
             borderWidth={1}
             borderColor={border}
-            padding="$2"
+            padding="$2.5"
             flexGrow={1}
-            flexBasis="28%"
-            minWidth={96}
-            maxWidth={140}
+            flexBasis="48%"
+            minWidth={150}
+            maxWidth={220}
           >
             <XStack alignItems="center" space="$1">
               <Text
@@ -264,6 +264,7 @@ export function KpiStrip({
                 >
                   {item.label}
                 </Text>
+                <Separator backgroundColor={border} opacity={0.4} width={28} alignSelf="center" />
                 {item.note ? (
                   <Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase">
                     {item.note}