Redesign toolbar as horizontal layout above canvas

- Move DesignerToolbar from sidebar to top of canvas container
- Convert vertical toolbar to horizontal layout with grouped controls
- Add element buttons (Text, Circle, Rectangle, Image) on left
- Inline color pickers for Fill and Stroke with compact design
- Horizontal zoom controls (-, percentage, +, Reset)
- Clear Canvas button positioned on the right
- Use border separators between control groups
- Remove vertical card layout in favor of toolbar-style UI

app/pages/index.vue

@@ -379,26 +379,6 @@ const handleCheckout = async () => {
             @select="handleTemplateSelect"
           />
 
-          <DesignerToolbar
-            :on-add-text="addTextbox"
-            :on-add-circle="() => addShape('circle')"
-            :on-add-rectangle="() => addShape('rect')"
-            :on-clear="clearDesign"
-            :on-import-image="addImageFromFile"
-            :on-fill-change="setActiveFillColor"
-            :on-stroke-change="setActiveStrokeColor"
-            :active-fill="activeFillColor"
-            :active-stroke="activeStrokeColor"
-            :can-style-selection="canStyleSelection"
-            :zoom="zoomLevel"
-            :min-zoom="minZoom"
-            :max-zoom="maxZoom"
-            :on-zoom-change="setZoom"
-            :on-zoom-in="zoomIn"
-            :on-zoom-out="zoomOut"
-            :on-zoom-reset="resetZoom"
-          />
-
           <DesignerPreview
             :preview-url="previewUrl"
             :template-label="templateLabel"
@@ -416,19 +396,40 @@ const handleCheckout = async () => {
 
         <div class="flex flex-col gap-6">
           <div
-            class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black p-6 shadow-2xl shadow-slate-950/60"
+            class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black shadow-2xl shadow-slate-950/60"
           >
-            <DesignerCanvas
-              :size="displaySize"
-              :background-color="selectedTemplate.backgroundColor"
-              :register-canvas="registerCanvas"
-              :unregister-canvas="unregisterCanvas"
+            <DesignerToolbar
+              :on-add-text="addTextbox"
+              :on-add-circle="() => addShape('circle')"
+              :on-add-rectangle="() => addShape('rect')"
+              :on-clear="clearDesign"
+              :on-import-image="addImageFromFile"
+              :on-fill-change="setActiveFillColor"
+              :on-stroke-change="setActiveStrokeColor"
+              :active-fill="activeFillColor"
+              :active-stroke="activeStrokeColor"
+              :can-style-selection="canStyleSelection"
+              :zoom="zoomLevel"
+              :min-zoom="minZoom"
+              :max-zoom="maxZoom"
+              :on-zoom-change="setZoom"
+              :on-zoom-in="zoomIn"
+              :on-zoom-out="zoomOut"
+              :on-zoom-reset="resetZoom"
             />
-            <p class="mt-4 text-sm text-slate-400">
-              Safe zone and bleed guides update automatically when you switch
-              templates. Use the toolbar to layer text, shapes, and imagery
-              inside the circular boundary.
-            </p>
+            <div class="p-6">
+              <DesignerCanvas
+                :size="displaySize"
+                :background-color="selectedTemplate.backgroundColor"
+                :register-canvas="registerCanvas"
+                :unregister-canvas="unregisterCanvas"
+              />
+              <p class="mt-4 text-sm text-slate-400">
+                Safe zone and bleed guides update automatically when you switch
+                templates. Use the toolbar to layer text, shapes, and imagery
+                inside the circular boundary.
+              </p>
+            </div>
           </div>
         </div>
       </section>