@twick/studio 0.14.5 → 0.14.6

package/dist/index.mjs

@@ -471,20 +471,18 @@ function Toolbar({ selectedTool, setSelectedTool }) {
   const handleToolSelect = (toolId) => {
     setSelectedTool(toolId);
   };
-  return /* @__PURE__ */ jsx("div", { className: "w-16 bg-neutral/80 border-r border-gray-300/50 flex flex-col items-center py-4 space-y-3 justify-start backdrop-blur-md shadow-lg", children: toolCategories.map((tool) => {
+  return /* @__PURE__ */ jsx("div", { className: "sidebar", children: toolCategories.map((tool) => {
     const Icon2 = getIcon$1(tool.icon);
     const isSelected = selectedTool === tool.id;
     return /* @__PURE__ */ jsxs(
-      "button",
+      "div",
       {
         onClick: () => handleToolSelect(tool.id),
-        className: `
-              toolbar-btn group ${isSelected ? "active" : ""}
-            `,
+        className: `toolbar-btn ${isSelected ? "active" : ""}`,
         title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
         children: [
-          /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] mt-1 transition-opacity duration-200", children: tool.name })
+          /* @__PURE__ */ jsx(Icon2, { className: "icon-sm" }),
+          /* @__PURE__ */ jsx("span", { className: "toolbar-label", children: tool.name })
         ]
       },
       tool.id
@@ -515,20 +513,20 @@ const StudioHeader = ({
       setVideoResolution({ width: 720, height: 1280 });
     }
   }, [orientation]);
-  return /* @__PURE__ */ jsxs("header", { className: "h-14 bg-neutral-800/90 border-b border-gray-600/50 flex items-center justify-between px-4 backdrop-blur-md shadow-lg", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Clapperboard, { className: "w-8 h-8 text-purple-400" }),
-      /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold text-gradient-purple", children: "Twick Studio" })
+  return /* @__PURE__ */ jsxs("header", { className: "header", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-container", children: /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
+      /* @__PURE__ */ jsx(Clapperboard, { className: "icon-lg accent-purple" }),
+      /* @__PURE__ */ jsx("h1", { className: "text-gradient", children: "Twick Studio" })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
-          className: "btn btn-ghost w-32",
+          className: "btn-ghost",
           title: "Load Project",
           onClick: onLoadProject,
           children: [
-            /* @__PURE__ */ jsx(File, { className: "w-4 h-4 mr-2" }),
+            /* @__PURE__ */ jsx(File, { className: "icon-sm" }),
             "Load Project"
           ]
         }
@@ -536,11 +534,11 @@ const StudioHeader = ({
       /* @__PURE__ */ jsxs(
         "button",
         {
-          className: "btn btn-ghost w-32",
+          className: "btn-ghost",
           title: "Save Draft",
           onClick: onSaveProject,
           children: [
-            /* @__PURE__ */ jsx(Save, { className: "w-4 h-4 mr-2" }),
+            /* @__PURE__ */ jsx(Save, { className: "icon-sm" }),
             "Save Draft"
           ]
         }
@@ -548,11 +546,11 @@ const StudioHeader = ({
       /* @__PURE__ */ jsxs(
         "button",
         {
-          className: "btn btn-primary w-32",
+          className: "btn-primary",
           title: "Export",
           onClick: onExportVideo,
           children: [
-            /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-2" }),
+            /* @__PURE__ */ jsx(Download, { className: "icon-sm" }),
             "Export"
           ]
         }
@@ -629,14 +627,14 @@ function SubtitlesPanel() {
       (sub) => sub.id === id ? { ...sub, [field]: value } : sub
     ));
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-72 h-full bg-neutral-800/80 border-l border-gray-600/50 p-3 overflow-y-auto overflow-x-hidden backdrop-blur-md shadow-lg", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-white mb-6", children: "Subtitles" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mb-6", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("h3", { className: "panel-title", children: "Subtitles" }),
+    /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: handleGenerate,
-          className: "flex-1 bg-neutral-700 hover:bg-neutral-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500/20",
+          className: "btn-primary",
           children: "Generate"
         }
       ),
@@ -644,19 +642,19 @@ function SubtitlesPanel() {
         "button",
         {
           onClick: handleAdd,
-          className: "flex-1 bg-neutral-700 hover:bg-neutral-600 text-white font-medium py-2 px-4 rounded-lg border-2 border-purple-500 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500/20",
+          className: "btn-primary",
           children: "Add"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: subtitles.map((subtitle) => /* @__PURE__ */ jsxs(
+    ] }) }),
+    subtitles.map((subtitle) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "bg-neutral-700/50 border border-gray-600 rounded-lg p-3",
+        className: "panel-section",
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mb-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Start" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "label-small", children: "Start" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -665,12 +663,12 @@ function SubtitlesPanel() {
                   step: "0.1",
                   value: subtitle.start,
                   onChange: (e) => handleUpdateSubtitle(subtitle.id, "start", Number(e.target.value)),
-                  className: "w-full bg-neutral-800/80 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
+                  className: "input-dark"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "End" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "label-small", children: "End" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -679,56 +677,61 @@ function SubtitlesPanel() {
                   step: "0.1",
                   value: subtitle.end,
                   onChange: (e) => handleUpdateSubtitle(subtitle.id, "end", Number(e.target.value)),
-                  className: "w-full bg-neutral-800/80 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
+                  className: "input-dark"
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              placeholder: "subtitle",
-              value: subtitle.text,
-              onChange: (e) => handleUpdateSubtitle(subtitle.id, "text", e.target.value),
-              className: "w-full bg-neutral-800/80 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 placeholder-gray-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Subtitle Text" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "Enter subtitle text",
+                value: subtitle.text,
+                onChange: (e) => handleUpdateSubtitle(subtitle.id, "text", e.target.value),
+                className: "input-dark"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-container justify-between", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => handleDelete(subtitle.id),
-                className: "p-2 text-red-400 hover:text-red-300 hover:bg-red-500/20 rounded-lg transition-all duration-200",
+                className: "btn-danger",
                 title: "Delete subtitle",
-                children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx(Trash2, { className: "icon-sm" })
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => handleSave(subtitle.id),
-                className: "p-2 text-green-400 hover:text-green-300 hover:bg-green-500/20 rounded-lg transition-all duration-200",
+                className: "btn-primary",
                 title: "Save subtitle",
-                children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx(Check, { className: "icon-sm" })
               }
             )
           ] })
         ]
       },
       subtitle.id
-    )) }),
-    subtitles.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-gray-400", children: [
-      /* @__PURE__ */ jsx("p", { children: "No subtitles yet" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: 'Click "Add" to create your first subtitle' })
-    ] })
+    )),
+    subtitles.length === 0 && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
+      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "No subtitles yet" }),
+      /* @__PURE__ */ jsx("p", { className: "empty-state-subtext", children: 'Click "Add" to create your first subtitle' })
+    ] }) }) })
   ] });
 }
 const FileInput = ({
   acceptFileTypes,
   onFileLoad,
   buttonText,
-  id
+  id,
+  className,
+  icon
 }) => {
   const onFileChange = (e) => {
     var _a;
@@ -757,13 +760,13 @@ const FileInput = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "file-input-container", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         type: "file",
         accept: acceptFileTypes.join(","),
-        className: "absolute w-0.1 h-0.1 opacity-0 overflow-hidden -z-10",
+        className: "file-input-hidden",
         id,
         onChange: onFileChange
       }
@@ -772,9 +775,9 @@ const FileInput = ({
       "label",
       {
         htmlFor: id,
-        className: "w-full btn btn-primary flex items-center justify-center gap-2 py-2",
+        className: className || "btn-primary file-input-label",
         children: [
-          /* @__PURE__ */ jsx(Upload, { className: "w-4 h-4" }),
+          icon || /* @__PURE__ */ jsx(Upload, { className: "icon-sm" }),
           buttonText ?? "Upload"
         ]
       }
@@ -965,7 +968,7 @@ const SearchInput = ({
   searchQuery,
   setSearchQuery
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "search-container", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -973,60 +976,12 @@ const SearchInput = ({
         placeholder: "Search media...",
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.target.value),
-        className: "w-full pl-8 pr-3 py-2 bg-neutral-700/80 border border-gray-600 rounded-lg text-gray-100 text-sm placeholder-gray-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm shadow-sm"
+        className: "input search-input w-full"
       }
     ),
-    /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 hover:text-gray-300 z-10 pointer-events-none" })
+    /* @__PURE__ */ jsx(Search, { className: "search-icon" })
   ] });
 };
-const inputStyles = {
-  // Base container styles for form groups
-  container: "mb-6",
-  // Label styles
-  label: {
-    base: "block text-sm font-semibold text-gray-300 mb-2",
-    small: "block text-xs text-gray-400 mb-1"
-  },
-  // Text input and select styles
-  input: {
-    base: "w-full bg-neutral-700/50 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm",
-    small: "bg-neutral-700/50 border border-gray-600 rounded-lg text-white text-xs px-2 py-1 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
-  },
-  // Range input styles
-  range: {
-    base: "flex-1 h-2 bg-neutral-600 rounded-full appearance-none cursor-pointer slider-thumb",
-    gradient: "flex-1 h-2 bg-gradient-to-r from-purple-500 to-neutral-600 rounded-full appearance-none cursor-pointer slider-thumb",
-    container: "flex items-center gap-3",
-    value: "text-white text-sm font-medium min-w-[50px]"
-  },
-  // Color input styles
-  color: {
-    container: "flex items-center gap-2",
-    picker: "w-6 h-6 rounded border border-gray-600 cursor-pointer",
-    preview: "flex-1 h-8 rounded-lg border border-gray-600"
-  },
-  // Toggle button styles
-  toggle: {
-    base: "w-10 h-10 rounded-lg border-2 transition-all duration-200 hover:bg-purple-400 hover:text-white",
-    active: "bg-purple-600 border-purple-500 text-white",
-    inactive: "bg-transparent border-gray-600 text-gray-400 hover:border-gray-500"
-  },
-  // Radio button styles
-  radio: {
-    base: "w-4 h-4 text-purple-600 bg-neutral-700 border-gray-600 focus:ring-purple-500 focus:ring-2",
-    label: "text-sm text-gray-300",
-    container: "flex items-center gap-2"
-  },
-  // Action button styles
-  button: {
-    primary: "w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500/20"
-  },
-  // Panel container styles
-  panel: {
-    container: "w-72 h-full bg-neutral-800/80 border-l border-gray-600/50 p-4 overflow-y-auto overflow-x-hidden backdrop-blur-md shadow-lg",
-    title: "text-xl font-bold text-white mb-6"
-  }
-};
 const useAudioPreview = () => {
   const [playingAudio, setPlayingAudio] = useState(null);
   const audioRef = useRef(null);
@@ -1073,33 +1028,35 @@ const AudioPanel = ({
   acceptFileTypes
 }) => {
   const { playingAudio, togglePlayPause } = useAudioPreview();
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
-    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Audio Library" }),
-    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Audio Library" }),
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       SearchInput,
       {
         searchQuery,
         setSearchQuery: onSearchChange
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       FileInput,
       {
         id: "audio-upload",
         acceptFileTypes,
         onFileLoad: onFileUpload,
-        buttonText: "Upload"
+        buttonText: "Import media",
+        className: "btn-primary w-full",
+        icon: /* @__PURE__ */ jsx(Upload, { className: "icon-sm" })
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (items || []).map((item) => {
-        var _a;
+    /* @__PURE__ */ jsxs("div", { className: "media-content", children: [
+      /* @__PURE__ */ jsx("div", { className: "media-list", children: (items || []).map((item) => {
+        var _a, _b;
         return /* @__PURE__ */ jsx(
           "div",
           {
             onDoubleClick: () => onItemSelect(item),
-            className: "audio-item group relative cursor-pointer p-3 bg-neutral-700/50 rounded-lg hover:bg-neutral-700/80 transition-all duration-200 border border-transparent hover:border-purple-500/30",
-            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            className: "media-list-item",
+            children: /* @__PURE__ */ jsxs("div", { className: "media-list-content", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -1107,12 +1064,12 @@ const AudioPanel = ({
                     e.stopPropagation();
                     togglePlayPause(item);
                   },
-                  className: "w-8 h-8 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white transition-all duration-200 flex-shrink-0",
-                  children: playingAudio === item.id ? /* @__PURE__ */ jsx(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Play, { className: "w-4 h-4" })
+                  className: "media-action-btn",
+                  children: playingAudio === item.id ? /* @__PURE__ */ jsx(Pause, { className: "icon-sm" }) : /* @__PURE__ */ jsx(Play, { className: "icon-sm" })
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: `w-10 h-10 rounded-lg ${playingAudio === item.id ? "bg-purple-500/40" : "bg-purple-500/20"} flex items-center justify-center flex-shrink-0 transition-colors duration-200`, children: /* @__PURE__ */ jsx(Volume2, { className: `w-5 h-5 ${playingAudio === item.id ? "text-purple-300" : "text-purple-400"}` }) }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-gray-100 truncate", children: (_a = item.metadata) == null ? void 0 : _a.title }) }),
+              /* @__PURE__ */ jsx("div", { className: `media-list-icon ${playingAudio === item.id ? "active" : ""}`, children: /* @__PURE__ */ jsx(Volume2, { className: "icon-sm" }) }),
+              /* @__PURE__ */ jsx("div", { className: "media-list-title", children: ((_a = item.metadata) == null ? void 0 : _a.title) || ((_b = item.metadata) == null ? void 0 : _b.name) }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -1120,8 +1077,8 @@ const AudioPanel = ({
                     e.stopPropagation();
                     onItemSelect(item, true);
                   },
-                  className: "w-6 h-6 rounded-full bg-purple-500/60 hover:bg-purple-500 flex items-center justify-center text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex-shrink-0",
-                  children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" })
+                  className: "media-action-btn",
+                  children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
                 }
               )
             ] })
@@ -1129,10 +1086,10 @@ const AudioPanel = ({
           item.id
         );
       }) }),
-      items.length === 0 && /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
-        /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "No audio files found" }),
-        searchQuery && /* @__PURE__ */ jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+      items.length === 0 && /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsx(WandSparkles, { className: "empty-state-icon" }),
+        /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "No audio files found" }),
+        searchQuery && /* @__PURE__ */ jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
       ] }) })
     ] })
   ] });
@@ -1176,59 +1133,53 @@ function ImagePanel({
   onFileUpload,
   acceptFileTypes
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
-    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Image Library" }),
-    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Image Library" }),
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       SearchInput,
       {
         searchQuery,
         setSearchQuery: onSearchChange
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       FileInput,
       {
         id: "image-upload",
         acceptFileTypes,
         onFileLoad: onFileUpload,
-        buttonText: "Upload"
+        buttonText: "Import media",
+        className: "btn-primary w-full",
+        icon: /* @__PURE__ */ jsx(Upload, { className: "icon-sm" })
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 auto-rows-fr", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs("div", { className: "media-content", children: [
+      /* @__PURE__ */ jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
         "div",
         {
           onDoubleClick: () => onItemSelect(item),
-          className: "media-item-compact group relative cursor-pointer overflow-hidden hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-200",
+          className: "media-item",
           children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: item.url,
-                alt: "",
-                className: "h-full w-full object-cover transition-transform group-hover:scale-105"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black bg-opacity-0 transition-opacity group-hover:bg-opacity-20" }),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("img", { src: item.url, alt: "", className: "media-item-content" }),
+            /* @__PURE__ */ jsx("div", { className: "media-actions", children: /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: (e) => {
                   e.stopPropagation();
                   onItemSelect(item, true);
                 },
-                className: "w-5 h-5 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white text-xs",
-                children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" })
+                className: "media-action-btn",
+                children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
               }
             ) })
           ]
         },
         item.id
       )) }),
-      items.length === 0 && /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
-        /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "No images found" }),
-        searchQuery && /* @__PURE__ */ jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+      items.length === 0 && /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsx(WandSparkles, { className: "empty-state-icon" }),
+        /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "No images found" }),
+        searchQuery && /* @__PURE__ */ jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
       ] }) })
     ] })
   ] });
@@ -1311,37 +1262,39 @@ function VideoPanel({
   acceptFileTypes
 }) {
   const { playingVideo, togglePlayPause } = useVideoPreview();
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
-    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Video Library" }),
-    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Video Library" }),
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       SearchInput,
       {
         searchQuery,
         setSearchQuery: onSearchChange
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       FileInput,
       {
         id: "video-upload",
         acceptFileTypes,
         onFileLoad: onFileUpload,
-        buttonText: "Upload"
+        buttonText: "Import media",
+        className: "btn-primary w-full",
+        icon: /* @__PURE__ */ jsx(Upload, { className: "icon-sm" })
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 auto-rows-fr", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs("div", { className: "media-content", children: [
+      /* @__PURE__ */ jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
         "div",
         {
           onDoubleClick: () => onItemSelect(item),
-          className: "media-item-compact group relative cursor-pointer overflow-hidden hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-200",
+          className: "media-item",
           children: [
             /* @__PURE__ */ jsx(
               "video",
               {
                 src: item.url,
                 poster: item.thumbnail,
-                className: `h-full w-full object-cover transition-transform ${playingVideo === item.id ? "scale-105" : "group-hover:scale-105"}`,
+                className: "media-item-content",
                 ref: (el) => {
                   if (el) {
                     el.addEventListener("ended", () => {
@@ -1351,8 +1304,8 @@ function VideoPanel({
                 }
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: `absolute inset-0 bg-black transition-opacity ${playingVideo === item.id ? "bg-opacity-30" : "bg-opacity-0 group-hover:bg-opacity-20"}` }),
-            /* @__PURE__ */ jsxs("div", { className: "absolute top-1 right-1 flex gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "media-duration", children: "0:13" }),
+            /* @__PURE__ */ jsxs("div", { className: "media-actions", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -1364,8 +1317,8 @@ function VideoPanel({
                       togglePlayPause(item, videoEl);
                     }
                   },
-                  className: `w-6 h-6 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white text-xs ${playingVideo === item.id ? "opacity-100" : "opacity-0 group-hover:opacity-100"} transition-opacity duration-200`,
-                  children: playingVideo === item.id ? /* @__PURE__ */ jsx(Pause, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(Play, { className: "w-3 h-3" })
+                  className: "media-action-btn",
+                  children: playingVideo === item.id ? /* @__PURE__ */ jsx(Pause, { className: "icon-sm" }) : /* @__PURE__ */ jsx(Play, { className: "icon-sm" })
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -1375,8 +1328,8 @@ function VideoPanel({
                     e.stopPropagation();
                     onItemSelect(item, true);
                   },
-                  className: "w-6 h-6 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200",
-                  children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" })
+                  className: "media-action-btn",
+                  children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
                 }
               )
             ] })
@@ -1384,10 +1337,10 @@ function VideoPanel({
         },
         item.id
       )) }),
-      items.length === 0 && /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
-        /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "No videos found" }),
-        searchQuery && /* @__PURE__ */ jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+      items.length === 0 && /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsx(WandSparkles, { className: "empty-state-icon" }),
+        /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "No videos found" }),
+        searchQuery && /* @__PURE__ */ jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
       ] }) })
     ] })
   ] });
@@ -1448,23 +1401,21 @@ function TextPanel({
   setStrokeWidth,
   handleApplyChanges
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
-    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Text Element" }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Text Content" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: textContent,
-          onChange: (e) => setTextContent(e.target.value),
-          className: inputStyles.input.base
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Font Size" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Text" }),
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: textContent,
+        placeholder: "Sample",
+        onChange: (e) => setTextContent(e.target.value),
+        className: "input-dark"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Font Size" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -1473,24 +1424,24 @@ function TextPanel({
             max: "120",
             value: fontSize,
             onChange: (e) => setFontSize(Number(e.target.value)),
-            className: inputStyles.range.gradient
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
           fontSize,
           "px"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Font" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Font" }),
+      /* @__PURE__ */ jsxs("div", { className: "font-controls", children: [
         /* @__PURE__ */ jsx(
           "select",
           {
             value: selectedFont,
             onChange: (e) => setSelectedFont(e.target.value),
-            className: inputStyles.input.base,
+            className: "select-dark",
             children: fonts.map((font) => /* @__PURE__ */ jsx("option", { value: font, children: font }, font))
           }
         ),
@@ -1498,33 +1449,33 @@ function TextPanel({
           "button",
           {
             onClick: () => setIsBold(!isBold),
-            className: `${inputStyles.toggle.base} ${isBold ? inputStyles.toggle.active : inputStyles.toggle.inactive} min-w-6`,
-            children: /* @__PURE__ */ jsx("span", { className: "font-bold", children: "B" })
+            className: `btn-icon ${isBold ? "btn-icon-active" : ""}`,
+            children: "B"
           }
         ),
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => setIsItalic(!isItalic),
-            className: `${inputStyles.toggle.base} ${isItalic ? inputStyles.toggle.active : inputStyles.toggle.inactive} min-w-6`,
-            children: /* @__PURE__ */ jsx("span", { className: "italic", children: "I" })
+            className: `btn-icon ${isItalic ? "btn-icon-active" : ""}`,
+            children: "I"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Colors" }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: inputStyles.label.small, children: "Text Color" }),
-          /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Colors" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-section", children: [
+        /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Text Color" }),
+          /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
                 type: "color",
                 value: textColor,
                 onChange: (e) => setTextColor(e.target.value),
-                className: inputStyles.color.picker
+                className: "color-picker"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1533,21 +1484,21 @@ function TextPanel({
                 type: "text",
                 value: textColor,
                 onChange: (e) => setTextColor(e.target.value),
-                className: inputStyles.input.small
+                className: "color-text"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: inputStyles.label.small, children: "Stroke Color" }),
-          /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+        /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Stroke Color" }),
+          /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
                 type: "color",
                 value: strokeColor,
                 onChange: (e) => setStrokeColor(e.target.value),
-                className: inputStyles.color.picker
+                className: "color-picker"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1556,34 +1507,33 @@ function TextPanel({
                 type: "text",
                 value: strokeColor,
                 onChange: (e) => setStrokeColor(e.target.value),
-                className: inputStyles.input.small
+                className: "color-text"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: inputStyles.radio.container, children: [
+        /* @__PURE__ */ jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxs("label", { className: "checkbox-label", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "checkbox",
-              id: "applyShadow",
               checked: applyShadow,
               onChange: (e) => setApplyShadow(e.target.checked),
-              className: inputStyles.radio.base
+              className: "checkbox-purple"
             }
           ),
-          /* @__PURE__ */ jsx("label", { htmlFor: "applyShadow", className: inputStyles.radio.label, children: "Apply Shadow" })
-        ] }),
-        applyShadow && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: inputStyles.label.small, children: "Shadow Color" }),
-          /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+          "Apply Shadow"
+        ] }) }),
+        applyShadow && /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Shadow Color" }),
+          /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
                 type: "color",
                 value: shadowColor,
                 onChange: (e) => setShadowColor(e.target.value),
-                className: inputStyles.color.picker
+                className: "color-picker"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1592,16 +1542,16 @@ function TextPanel({
                 type: "text",
                 value: shadowColor,
                 onChange: (e) => setShadowColor(e.target.value),
-                className: inputStyles.input.small
+                className: "color-text"
               }
             )
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Stroke Width" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Stroke Width" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -1611,13 +1561,13 @@ function TextPanel({
             step: 0.1,
             value: strokeWidth,
             onChange: (e) => setStrokeWidth(Number(e.target.value)),
-            className: inputStyles.range.base
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: inputStyles.range.value, children: strokeWidth })
+        /* @__PURE__ */ jsx("span", { className: "slider-value", children: strokeWidth })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: inputStyles.button.primary, children: operation }) })
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
   ] });
 }
 const DEFAULT_TEXT_PROPS = {
@@ -1759,7 +1709,6 @@ function TextPanelContainer(props) {
 function IconPanel({
   icons,
   loading,
-  hasMore,
   totalIcons,
   searchQuery,
   handleSearch,
@@ -1767,44 +1716,30 @@ function IconPanel({
   handleDownloadIcon,
   handleLoadMore
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
-    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Icon Library" }),
-    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
-      /* @__PURE__ */ jsx(
-        Search,
-        {
-          className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 z-10 pointer-events-none"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          placeholder: "Search icons...",
-          value: searchQuery,
-          onChange: (e) => handleSearch(e.target.value),
-          className: `${inputStyles.input.base} pl-8`
-        }
-      )
-    ] }) }),
-    loading && icons.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-purple-500" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      totalIcons > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4 text-sm text-gray-400", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Icon Library" }),
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(SearchInput, { searchQuery, setSearchQuery: handleSearch }) }),
+    /* @__PURE__ */ jsxs("div", { className: "media-content", children: [
+      totalIcons > 0 && /* @__PURE__ */ jsxs("div", { className: "media-count", children: [
         "Showing ",
         icons.length,
         " of ",
         totalIcons,
         " icons"
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3 mb-2 p-2", children: (icons || []).map((icon, index) => /* @__PURE__ */ jsxs("div", { className: "group relative cursor-pointer", children: [
+      loading && icons.length === 0 ? /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
+        /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Loading icons..." })
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "icon-grid", children: (icons || []).map((icon, index) => /* @__PURE__ */ jsxs("div", { className: "icon-item", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             onClick: () => handleSelection(icon),
-            className: "w-16 h-16 flex items-center justify-center bg-neutral-700/50 border border-gray-600 rounded-lg hover:border-purple-500 hover:bg-neutral-700/70 transition-all duration-200 p-2",
+            className: "icon-content",
             dangerouslySetInnerHTML: { __html: icon.svg }
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "icon-actions", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -1812,9 +1747,9 @@ function IconPanel({
                 e.stopPropagation();
                 handleSelection(icon);
               },
-              className: "p-1.5 bg-purple-600 hover:bg-purple-700 rounded transition-colors duration-200",
+              className: "icon-action-btn",
               title: "Add to timeline",
-              children: /* @__PURE__ */ jsx("span", { className: "text-white text-xs", children: "+" })
+              children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1824,30 +1759,27 @@ function IconPanel({
                 e.stopPropagation();
                 handleDownloadIcon(icon);
               },
-              className: "p-1.5 bg-purple-600 hover:bg-purple-700 rounded transition-colors duration-200",
+              className: "icon-action-btn",
               title: "Download SVG",
-              children: /* @__PURE__ */ jsx(Download, { className: "w-3 h-3 text-white" })
+              children: /* @__PURE__ */ jsx(Download, { className: "icon-sm" })
             }
           )
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-10", children: icon.name })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "icon-name", children: icon.name })
       ] }, index)) }),
-      hasMore && /* @__PURE__ */ jsx(
+      !loading && icons.length === 0 && searchQuery && /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "No icons found" }),
+        /* @__PURE__ */ jsx("p", { className: "empty-state-subtext", children: "Try a different search term" })
+      ] }) }),
+      !loading && totalIcons && icons.length < totalIcons && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
         "button",
         {
           onClick: handleLoadMore,
           disabled: loading,
-          className: `${inputStyles.button.primary} disabled:opacity-50 disabled:cursor-not-allowed`,
-          children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }),
-            "Loading..."
-          ] }) : "Load More"
+          className: "btn-primary",
+          children: "Load More Icons"
         }
-      ),
-      !loading && icons.length === 0 && searchQuery && /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-gray-400", children: [
-        /* @__PURE__ */ jsx("p", { children: "No icons found" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: "Try a different search term" })
-      ] })
+      ) })
     ] })
   ] });
 }
@@ -1973,6 +1905,7 @@ function RectPanel({
   opacity,
   strokeColor,
   lineWidth,
+  operation,
   setCornerRadius,
   setFillColor,
   setOpacity,
@@ -1980,11 +1913,11 @@ function RectPanel({
   setLineWidth,
   handleApplyChanges
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
-    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Rectangle" }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Corner Radius" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Rectangle" }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Corner Radius" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -1993,39 +1926,41 @@ function RectPanel({
             max: "100",
             value: cornerRadius,
             onChange: (e) => setCornerRadius(Number(e.target.value)),
-            className: inputStyles.range.base
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
           cornerRadius,
           "px"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Fill Color" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Fill Color" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "color",
             value: fillColor,
             onChange: (e) => setFillColor(e.target.value),
-            className: inputStyles.color.picker
+            className: "color-picker"
           }
         ),
         /* @__PURE__ */ jsx(
-          "div",
+          "input",
           {
-            className: inputStyles.color.preview,
-            style: { backgroundColor: fillColor }
+            type: "text",
+            value: fillColor,
+            onChange: (e) => setFillColor(e.target.value),
+            className: "color-text"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Opacity" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Opacity" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2034,39 +1969,41 @@ function RectPanel({
             max: "100",
             value: opacity,
             onChange: (e) => setOpacity(Number(e.target.value)),
-            className: inputStyles.range.gradient
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
           opacity,
           "%"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Stroke Color" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Stroke Color" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "color",
             value: strokeColor,
             onChange: (e) => setStrokeColor(e.target.value),
-            className: inputStyles.color.picker
+            className: "color-picker"
           }
         ),
         /* @__PURE__ */ jsx(
-          "div",
+          "input",
           {
-            className: inputStyles.color.preview,
-            style: { backgroundColor: strokeColor }
+            type: "text",
+            value: strokeColor,
+            onChange: (e) => setStrokeColor(e.target.value),
+            className: "color-text"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Line Width" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Line Width" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2075,21 +2012,21 @@ function RectPanel({
             max: "20",
             value: lineWidth,
             onChange: (e) => setLineWidth(Number(e.target.value)),
-            className: inputStyles.range.base
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
           lineWidth,
           "px"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       "button",
       {
         onClick: handleApplyChanges,
-        className: inputStyles.button.primary,
-        children: "Apply Changes"
+        className: "btn-primary w-full",
+        children: operation
       }
     ) })
   ] });
@@ -2140,6 +2077,7 @@ const useRectPanel = ({
     opacity,
     strokeColor,
     lineWidth,
+    operation: selectedElement instanceof RectElement ? "Apply Changes" : "Add Rectangle",
     setCornerRadius,
     setFillColor,
     setOpacity,
@@ -2162,6 +2100,7 @@ function CirclePanel({
   opacity,
   strokeColor,
   lineWidth,
+  operation,
   setRadius,
   setFillColor,
   setOpacity,
@@ -2169,11 +2108,11 @@ function CirclePanel({
   setLineWidth,
   handleApplyChanges
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
-    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Circle" }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Radius" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Circle" }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Radius" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2182,39 +2121,41 @@ function CirclePanel({
             max: "300",
             value: radius,
             onChange: (e) => setRadius(Number(e.target.value)),
-            className: inputStyles.range.base
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
           radius,
           "px"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Fill Color" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Fill Color" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "color",
             value: fillColor,
             onChange: (e) => setFillColor(e.target.value),
-            className: inputStyles.color.picker
+            className: "color-picker"
           }
         ),
         /* @__PURE__ */ jsx(
-          "div",
+          "input",
           {
-            className: inputStyles.color.preview,
-            style: { backgroundColor: fillColor }
+            type: "text",
+            value: fillColor,
+            onChange: (e) => setFillColor(e.target.value),
+            className: "color-text"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Opacity" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Opacity" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2223,39 +2164,41 @@ function CirclePanel({
             max: "100",
             value: opacity,
             onChange: (e) => setOpacity(Number(e.target.value)),
-            className: inputStyles.range.gradient
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
           opacity,
           "%"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Stroke Color" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Stroke Color" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "color",
             value: strokeColor,
             onChange: (e) => setStrokeColor(e.target.value),
-            className: inputStyles.color.picker
+            className: "color-picker"
           }
         ),
         /* @__PURE__ */ jsx(
-          "div",
+          "input",
           {
-            className: inputStyles.color.preview,
-            style: { backgroundColor: strokeColor }
+            type: "text",
+            value: strokeColor,
+            onChange: (e) => setStrokeColor(e.target.value),
+            className: "color-text"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
-      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Line Width" }),
-      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Line Width" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2264,23 +2207,16 @@ function CirclePanel({
             max: "20",
             value: lineWidth,
             onChange: (e) => setLineWidth(Number(e.target.value)),
-            className: inputStyles.range.base
+            className: "slider-purple"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
           lineWidth,
           "px"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleApplyChanges,
-        className: inputStyles.button.primary,
-        children: "Apply Changes"
-      }
-    ) })
+    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
   ] });
 }
 const DEFAULT_CIRCLE_PROPS = {
@@ -2330,6 +2266,7 @@ const useCirclePanel = ({
     opacity,
     strokeColor,
     lineWidth,
+    operation: selectedElement instanceof CircleElement ? "Apply Changes" : "Add Circle",
     setRadius,
     setFillColor,
     setOpacity,
@@ -2434,9 +2371,9 @@ const ElementPanelContainer = ({
       case "subtitle":
         return /* @__PURE__ */ jsx(SubtitlesPanel, {});
       default:
-        return /* @__PURE__ */ jsx("div", { className: inputStyles.panel.container, children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx(WandSparkles, { className: "w-12 h-12 mx-auto mb-4 text-purple-500/50" }),
-          /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "Select a Tool to Begin" })
+        return /* @__PURE__ */ jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
+          /* @__PURE__ */ jsx(WandSparkles, { className: "empty-state-icon" }),
+          /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Select a Tool to Begin" })
         ] }) }) });
     }
   };
@@ -2559,23 +2496,25 @@ function PropsToolbar({
     }
     return sections;
   }, [selectedElement]);
-  if (!selectedElement) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: "w-16 bg-neutral/80 border-l border-gray-300/50 flex flex-col items-center py-4 space-y-3 justify-start backdrop-blur-md shadow-lg", children: availableSections.map((tool) => {
+  useEffect(() => {
+    if (availableSections == null ? void 0 : availableSections.length) {
+      if (availableSections.map((section) => section.id).indexOf(selectedProp) === -1) {
+        setSelectedProp(availableSections[0].id);
+      }
+    }
+  }, [availableSections]);
+  return /* @__PURE__ */ jsx("div", { className: "sidebar", children: availableSections.map((tool) => {
     const Icon2 = getIcon(tool.icon);
     const isSelected = selectedProp === tool.id;
     return /* @__PURE__ */ jsxs(
-      "button",
+      "div",
       {
         onClick: () => setSelectedProp(tool.id),
-        className: `
-              props-toolbar-btn group ${isSelected ? "active" : ""}
-            `,
+        className: `toolbar-btn ${isSelected ? "active" : ""}`,
         title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
         children: [
-          /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] mt-1 transition-opacity duration-200", children: tool.name })
+          /* @__PURE__ */ jsx(Icon2, { className: "icon-sm" }),
+          /* @__PURE__ */ jsx("span", { className: "props-toolbar-label", children: tool.name })
         ]
       },
       tool.id
@@ -2590,79 +2529,75 @@ function ElementProps({ selectedElement, updateElement }) {
       updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Position & Size"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "All Properties" }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Position" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "X" }),
+          /* @__PURE__ */ jsx("label", { className: "label-small", children: "X" }),
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "number",
               value: x ?? 0,
               onChange: (e) => handleUpdateElement({ x: Number(e.target.value) }),
-              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+              className: "input-dark"
             }
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Y" }),
+          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Y" }),
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "number",
               value: y ?? 0,
               onChange: (e) => handleUpdateElement({ y: Number(e.target.value) }),
-              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+              className: "input-dark"
             }
           )
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Opacity"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: "0",
-          max: "100",
-          value: (opacity ?? 1) * 100,
-          onChange: (e) => handleUpdateElement({ opacity: Number(e.target.value) / 100 }),
-          className: "w-full h-1.5 bg-gradient-to-r from-purple-500/30 to-neutral-600/50 rounded-full appearance-none cursor-pointer slider-thumb"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-        /* @__PURE__ */ jsx("span", { children: "0%" }),
-        /* @__PURE__ */ jsx("span", { children: "100%" })
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Opacity" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "100",
+            value: (opacity ?? 1) * 100,
+            onChange: (e) => handleUpdateElement({ opacity: Number(e.target.value) / 100 }),
+            className: "slider-purple"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
+          Math.round((opacity ?? 1) * 100),
+          "%"
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Rotation"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: "0",
-          max: "360",
-          value: rotation ?? 0,
-          onChange: (e) => handleUpdateElement({ rotation: Number(e.target.value) }),
-          className: "w-full h-1.5 bg-gradient-to-r from-purple-500/30 to-neutral-600/50 rounded-full appearance-none cursor-pointer slider-thumb"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-        /* @__PURE__ */ jsx("span", { children: "0°" }),
-        /* @__PURE__ */ jsx("span", { children: "360°" })
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Rotation" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "360",
+            value: rotation ?? 0,
+            onChange: (e) => handleUpdateElement({ rotation: Number(e.target.value) }),
+            className: "slider-purple"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
+          rotation ?? 0,
+          "°"
+        ] })
       ] })
     ] })
   ] });
@@ -2695,18 +2630,16 @@ function TextEffects({
     selectedElement.setTextEffect(effect);
     updateElement == null ? void 0 : updateElement(selectedElement);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Text Effect Type"
-      ] }),
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Text Effects" }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Text Effect Type" }),
       /* @__PURE__ */ jsxs(
         "select",
         {
           value: (currentEffect == null ? void 0 : currentEffect.getName()) || "",
           onChange: (e) => handleUpdateEffect({ name: e.target.value }),
-          className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
+          className: "select-dark w-full",
           children: [
             /* @__PURE__ */ jsx("option", { value: "", children: "No Effect" }),
             TEXT_EFFECTS.map((effect) => /* @__PURE__ */ jsx("option", { value: effect.name, children: effect.name.charAt(0).toUpperCase() + effect.name.slice(1) }, effect.name))
@@ -2714,57 +2647,51 @@ function TextEffects({
         }
       )
     ] }),
-    currentEffect && /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Effect Options"
+    currentEffect && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Delay (seconds)" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: "0",
+            max: "5",
+            step: "0.1",
+            value: currentEffect.getDelay() ?? 0,
+            onChange: (e) => handleUpdateEffect({ delay: Number(e.target.value) }),
+            className: "input-dark"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Delay (seconds)" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              min: "0",
-              max: "5",
-              step: "0.1",
-              value: currentEffect.getDelay() ?? 0,
-              onChange: (e) => handleUpdateEffect({ delay: Number(e.target.value) }),
-              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Duration (seconds)" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              min: "0.1",
-              max: "10",
-              step: "0.1",
-              value: currentEffect.getDuration() ?? 1,
-              onChange: (e) => handleUpdateEffect({ duration: Number(e.target.value) }),
-              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Buffer Time (seconds)" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              min: "0.05",
-              max: "1",
-              step: "0.05",
-              value: currentEffect.getBufferTime() ?? 0.1,
-              onChange: (e) => handleUpdateEffect({ bufferTime: Number(e.target.value) }),
-              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
-            }
-          )
-        ] })
+      /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Duration (seconds)" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: "0.1",
+            max: "10",
+            step: "0.1",
+            value: currentEffect.getDuration() ?? 1,
+            onChange: (e) => handleUpdateEffect({ duration: Number(e.target.value) }),
+            className: "input-dark"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Buffer Time (seconds)" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: "0.05",
+            max: "1",
+            step: "0.05",
+            value: currentEffect.getBufferTime() ?? 0.1,
+            onChange: (e) => handleUpdateEffect({ bufferTime: Number(e.target.value) }),
+            className: "input-dark"
+          }
+        )
       ] })
     ] })
   ] });
@@ -2824,18 +2751,16 @@ function Animation({
     selectedElement.setAnimation(animation);
     updateElement == null ? void 0 : updateElement(selectedElement);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Animation Type"
-      ] }),
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Animations" }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Type" }),
       /* @__PURE__ */ jsxs(
         "select",
         {
           value: (currentAnimation == null ? void 0 : currentAnimation.getName()) || "",
           onChange: (e) => handleUpdateAnimation({ name: e.target.value }),
-          className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
+          className: "select-dark w-full",
           children: [
             /* @__PURE__ */ jsx("option", { value: "", children: "No Animation" }),
             ANIMATIONS.map((animation) => /* @__PURE__ */ jsx("option", { value: animation.name, children: animation.name.charAt(0).toUpperCase() + animation.name.slice(1) }, animation.name))
@@ -2843,66 +2768,62 @@ function Animation({
         }
       )
     ] }),
-    currentAnimation && /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Animation Options"
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
-        const animationDef = ANIMATIONS.find(
-          (a) => a.name === currentAnimation.getName()
-        );
-        if (!animationDef || !animationDef.options) return null;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          ((_a = animationDef.options) == null ? void 0 : _a.animate) && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "When to Animate" }),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: currentAnimation.getAnimate(),
-                onChange: (e) => handleUpdateAnimation({
-                  animate: e.target.value
-                }),
-                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
-                children: (_b = animationDef.options) == null ? void 0 : _b.animate.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
-              }
-            )
-          ] }),
-          ((_c = animationDef.options) == null ? void 0 : _c.direction) && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Direction" }),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: currentAnimation.getDirection(),
-                onChange: (e) => handleUpdateAnimation({
-                  direction: e.target.value
-                }),
-                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
-                children: (_d = animationDef.options) == null ? void 0 : _d.direction.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
-              }
-            )
-          ] }),
-          ((_e = animationDef.options) == null ? void 0 : _e.mode) && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Mode" }),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: currentAnimation.getMode(),
-                onChange: (e) => handleUpdateAnimation({
-                  mode: e.target.value
-                }),
-                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
-                children: (_f = animationDef.options) == null ? void 0 : _f.mode.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
-              }
-            )
-          ] }),
-          ((_g = animationDef.options) == null ? void 0 : _g.duration) && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Duration (seconds)" }),
+    currentAnimation && /* @__PURE__ */ jsx(Fragment, { children: (() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+      const animationDef = ANIMATIONS.find(
+        (a) => a.name === currentAnimation.getName()
+      );
+      if (!animationDef || !animationDef.options) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        ((_a = animationDef.options) == null ? void 0 : _a.animate) && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-dark", children: "When to Animate" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: currentAnimation.getAnimate(),
+              onChange: (e) => handleUpdateAnimation({
+                animate: e.target.value
+              }),
+              className: "select-dark w-full",
+              children: (_b = animationDef.options) == null ? void 0 : _b.animate.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+            }
+          )
+        ] }),
+        ((_c = animationDef.options) == null ? void 0 : _c.direction) && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Direction" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: currentAnimation.getDirection(),
+              onChange: (e) => handleUpdateAnimation({
+                direction: e.target.value
+              }),
+              className: "select-dark w-full",
+              children: (_d = animationDef.options) == null ? void 0 : _d.direction.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+            }
+          )
+        ] }),
+        ((_e = animationDef.options) == null ? void 0 : _e.mode) && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Mode" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: currentAnimation.getMode(),
+              onChange: (e) => handleUpdateAnimation({
+                mode: e.target.value
+              }),
+              className: "select-dark w-full",
+              children: (_f = animationDef.options) == null ? void 0 : _f.mode.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+            }
+          )
+        ] }),
+        ((_g = animationDef.options) == null ? void 0 : _g.duration) && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Duration (seconds)" }),
+          /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
-                type: "number",
+                type: "range",
                 min: (_h = animationDef.options) == null ? void 0 : _h.duration[0],
                 max: (_i = animationDef.options) == null ? void 0 : _i.duration[1],
                 step: "0.1",
@@ -2910,16 +2831,19 @@ function Animation({
                 onChange: (e) => handleUpdateAnimation({
                   duration: Number(e.target.value)
                 }),
-                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+                className: "slider-purple"
               }
-            )
-          ] }),
-          ((_j = animationDef.options) == null ? void 0 : _j.interval) && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Interval (seconds)" }),
+            ),
+            /* @__PURE__ */ jsx("span", { className: "slider-value", children: currentAnimation.getDuration() })
+          ] })
+        ] }),
+        ((_j = animationDef.options) == null ? void 0 : _j.interval) && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Interval (seconds)" }),
+          /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
-                type: "number",
+                type: "range",
                 min: (_k = animationDef.options) == null ? void 0 : _k.interval[0],
                 max: (_l = animationDef.options) == null ? void 0 : _l.interval[1],
                 step: "0.1",
@@ -2927,16 +2851,19 @@ function Animation({
                 onChange: (e) => handleUpdateAnimation({
                   interval: Number(e.target.value)
                 }),
-                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+                className: "slider-purple"
               }
-            )
-          ] }),
-          ((_m = animationDef.options) == null ? void 0 : _m.intensity) && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Intensity" }),
+            ),
+            /* @__PURE__ */ jsx("span", { className: "slider-value", children: currentAnimation.getInterval() })
+          ] })
+        ] }),
+        ((_m = animationDef.options) == null ? void 0 : _m.intensity) && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Intensity" }),
+          /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
-                type: "number",
+                type: "range",
                 min: (_n = animationDef.options) == null ? void 0 : _n.intensity[0],
                 max: (_o = animationDef.options) == null ? void 0 : _o.intensity[1],
                 step: "0.1",
@@ -2944,13 +2871,14 @@ function Animation({
                 onChange: (e) => handleUpdateAnimation({
                   intensity: Number(e.target.value)
                 }),
-                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+                className: "slider-purple"
               }
-            )
+            ),
+            /* @__PURE__ */ jsx("span", { className: "slider-value", children: currentAnimation.getIntensity() })
           ] })
-        ] });
-      })() })
-    ] })
+        ] })
+      ] });
+    })() })
   ] });
 }
 function PlaybackPropsPanel({
@@ -2964,42 +2892,26 @@ function PlaybackPropsPanel({
       updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-    /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-      "Volume"
-    ] }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "range",
-        min: "0",
-        max: "3",
-        step: 0.1,
-        value: volume ?? 0,
-        onChange: (e) => handleUpdateElement({ volume: Number(e.target.value) }),
-        className: "w-full h-1.5 bg-gradient-to-r from-purple-500/30 to-neutral-600/50 rounded-full appearance-none cursor-pointer slider-thumb"
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-      /* @__PURE__ */ jsx("span", { children: "0" }),
-      /* @__PURE__ */ jsx("span", { children: "3" })
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Playback Properties" }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Volume" }),
+      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "3",
+            step: 0.1,
+            value: volume ?? 0,
+            onChange: (e) => handleUpdateElement({ volume: Number(e.target.value) }),
+            className: "slider-purple"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "slider-value", children: volume ?? 0 })
+      ] })
     ] })
-  ] }) });
-}
-function PropContainer({ title, icon, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "border-b border-gray-600/30 last:border-b-0 bg-gradient-to-b from-neutral-800/40 to-neutral-800/20 backdrop-blur-sm", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-between px-3 py-2.5 text-left text-gray-200 hover:text-white hover:bg-gradient-to-r hover:from-purple-600/20 hover:to-purple-500/10 transition-all duration-200 rounded-none border-l-2 border-transparent hover:border-purple-500/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-purple-400/80", children: icon }),
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title })
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `overflow-x-hidden overflow-y-auto p-1 transition-all duration-300 ease-in-out`,
-        children
-      }
-    )
   ] });
 }
 function PropertiesPanelContainer({
@@ -3008,58 +2920,37 @@ function PropertiesPanelContainer({
   updateElement
 }) {
   if (!selectedElement) {
-    return /* @__PURE__ */ jsx("div", { className: "w-72 h-full bg-gradient-to-b from-neutral-800/90 to-neutral-900/80 border-l border-gray-600/40 overflow-y-auto overflow-x-hidden backdrop-blur-xl shadow-2xl", children: /* @__PURE__ */ jsx("div", { className: "px-3 py-3 border-b border-gray-600/30 bg-gradient-to-r from-purple-600/10 to-transparent", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-white", children: "Select Element to see properties" }) }) });
+    return /* @__PURE__ */ jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsx("div", { className: "properties-header", children: /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Select Element to see properties" }) }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "w-72 h-full bg-gradient-to-b from-neutral-800/90 to-neutral-900/80 border-l border-gray-600/40 overflow-y-hidden overflow-x-hidden backdrop-blur-xl shadow-2xl", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     selectedProp === "element-props" && /* @__PURE__ */ jsx(
-      PropContainer,
+      ElementProps,
       {
-        title: "All Properties",
-        icon: /* @__PURE__ */ jsx(Settings, { className: "w-4 h-4" }),
-        children: /* @__PURE__ */ jsx(
-          ElementProps,
-          {
-            selectedElement,
-            updateElement
-          }
-        )
+        selectedElement,
+        updateElement
       }
     ),
     selectedProp === "playback-props" && /* @__PURE__ */ jsx(
-      PropContainer,
+      PlaybackPropsPanel,
       {
-        title: "Playback Properties",
-        icon: /* @__PURE__ */ jsx(Music, { className: "w-4 h-4" }),
-        children: /* @__PURE__ */ jsx(
-          PlaybackPropsPanel,
-          {
-            selectedElement,
-            updateElement
-          }
-        )
+        selectedElement,
+        updateElement
       }
     ),
     selectedProp === "text-effects" && /* @__PURE__ */ jsx(
-      PropContainer,
+      TextEffects,
       {
-        title: "Text Effects",
-        icon: /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4" }),
-        children: /* @__PURE__ */ jsx(
-          TextEffects,
-          {
-            selectedElement,
-            updateElement
-          }
-        )
+        selectedElement,
+        updateElement
       }
     ),
-    selectedProp === "animations" && /* @__PURE__ */ jsx(PropContainer, { title: "Animations", icon: /* @__PURE__ */ jsx(Zap, { className: "w-4 h-4" }), children: /* @__PURE__ */ jsx(
+    selectedProp === "animations" && /* @__PURE__ */ jsx(
       Animation,
       {
         selectedElement,
         updateElement
       }
-    ) })
+    )
   ] });
 }
 const loadFile = (accept) => {
@@ -3178,7 +3069,7 @@ function TwickStudio({ studioConfig }) {
     }),
     [videoResolution, studioConfig]
   );
-  return /* @__PURE__ */ jsx(MediaProvider, { children: /* @__PURE__ */ jsxs("div", { className: "h-screen w-screen overflow-hidden bg-neutral-900 text-gray-100", children: [
+  return /* @__PURE__ */ jsx(MediaProvider, { children: /* @__PURE__ */ jsxs("div", { className: "studio-container", children: [
     /* @__PURE__ */ jsx(
       StudioHeader,
       {
@@ -3188,7 +3079,7 @@ function TwickStudio({ studioConfig }) {
         onExportVideo
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100vh-56px)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "studio-content", children: [
       /* @__PURE__ */ jsx(
         Toolbar,
         {
@@ -3196,7 +3087,7 @@ function TwickStudio({ studioConfig }) {
           setSelectedTool
         }
       ),
-      /* @__PURE__ */ jsx("aside", { className: "border-r border-gray-600/50 backdrop-blur-md shadow-lg", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         ElementPanelContainer,
         {
           videoResolution,
@@ -3206,8 +3097,8 @@ function TwickStudio({ studioConfig }) {
           addElement,
           updateElement
         }
-      ) }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 flex flex-col bg-neutral-700 main-container", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-1", children: /* @__PURE__ */ jsx(
+      ),
+      /* @__PURE__ */ jsx("main", { className: "main-container", children: /* @__PURE__ */ jsx("div", { className: "canvas-wrapper", children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "canvas-container",
@@ -3217,14 +3108,14 @@ function TwickStudio({ studioConfig }) {
           children: /* @__PURE__ */ jsx(VideoEditor, { editorConfig: twickStudiConfig })
         }
       ) }) }),
-      /* @__PURE__ */ jsx("aside", { className: "border-r border-gray-600/50 backdrop-blur-md shadow-lg", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         PropertiesPanelContainer,
         {
           selectedProp,
           selectedElement,
           updateElement
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsx(
         PropsToolbar,
         {