perf: defer shared utility styles

src/components/DropZone.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState, type ReactNode } from "react";
+import "../styles/components/dropzone.css";
 
 interface DropZoneProps {
   accept?: string;

src/components/EmptyState.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import "../styles/components/empty-state.css";
 
 interface EmptyStateProps {
   icon?: ReactNode;

src/components/Skeleton.tsx

@@ -1,4 +1,5 @@
 import type { CSSProperties } from "react";
+import "../styles/components/skeleton.css";
 
 interface SkeletonProps {
   width?: string | number;

src/components/StudioToolLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import "../styles/pages/studio-layout.css";
 
 interface StudioToolLayoutProps {
   toolstrip?: ReactNode;

src/features/size-template/SizeTemplatePage.tsx

@@ -9,6 +9,7 @@ import {
 import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import type { WebViewKey } from "../../types";
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "../ecommerce/ImageMentionMenu";
+import "../../styles/pages/size-template.css";
 
 interface SizeTemplatePageProps {
   isAuthenticated?: boolean;

src/styles/index.css

@@ -4,13 +4,8 @@
 @import "./components/primitives.css";
 @import "./components/legacy-components.css";
 @import "./pages/more-tools.css";
-@import "./pages/studio-layout.css";
-@import "./pages/size-template.css";
 @import "./components/recharge-modal.css";
-@import "./components/dropzone.css";
-@import "./components/skeleton.css";
 @import "./components/toast.css";
-@import "./components/empty-state.css";
 @import "./components/page-transition.css";
 @import "./components/motion.css";
 @import "./themes/dark-green.css";