fix: boxes background not covering full screen

- Use original Aceternity positioning: translate(-40%,-60%) with
  -top-1/4 left-1/4 to cover viewport after skew transform
- Switch from CSS grid to flex layout matching original structure
- Add cross (+) SVG markers at grid intersections
- Use pastel color palette from original, animate opacity per cell
- Increase default rows to 20 for better coverage

src/components/ui/backgrounds/registry.ts

@@ -337,17 +337,17 @@ export const backgroundRegistry: BackgroundDefinition[] = [
         key: 'rows',
         label: 'admin.backgrounds.rows',
         type: 'number',
-        min: 4,
-        max: 20,
-        step: 1,
-        default: 12,
+        min: 10,
+        max: 40,
+        step: 5,
+        default: 20,
       },
       {
         key: 'cols',
         label: 'admin.backgrounds.cols',
         type: 'number',
-        min: 4,
-        max: 20,
+        min: 5,
+        max: 25,
         step: 1,
         default: 12,
       },