Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown

2026-04-23 08:48:11 -05:00
parent 4d19363d58
commit 628a6765f4
32 changed files with 11663 additions and 287 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -43,5 +43,11 @@
  },
  "engines": {
    "node": ">=20.0.0"
+  },
+  "overrides": {
+    "serialize-javascript": "^7.0.3",
+    "vite-plugin-pwa": {
+      "vite": "$vite"
+    }
  }
 }
--- a/server.js
+++ b/server.js
@@ -4,7 +4,7 @@ import multer from 'multer';
 import { v4 as uuidv4 } from 'uuid';
 import sharp from 'sharp';
 import { createCanvas, loadImage } from 'canvas';
-import { fileURLToPath } from 'module';
+import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import { mkdirSync, existsSync, writeFileSync } from 'fs';

@@ -38,6 +38,14 @@ app.use('/exports', express.static(exportsDir));
 if (IS_PRODUCTION) {
  const clientDist = join(__dirname, 'dist');
  app.use(express.static(clientDist));
+} else {
+  // Dev UX: backend doesn't serve the SPA; Vite does.
+  app.get('/', (_req, res) => {
+    res
+      .status(302)
+      .set('Location', 'http://localhost:5173/')
+      .send('Redirecting to Vite dev server...');
+  });
 }

 // Map MIME types to file extensions
--- a/src/App.css
+++ b/src/App.css
@@ -1 +1,37 @@
-/* App-level styles — project styles go here */
+.canvas-header {
+  position: absolute;
+  top: 20px;
+  text-align: center;
+}
+
+.canvas-header h1 {
+  margin: 0 0 0.25rem 0;
+  font-size: 20px;
+  color: var(--text-primary);
+}
+
+.canvas-header p {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.canvas-toolbar {
+  position: absolute;
+  top: 100px;
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  justify-content: center;
+}
+
+.layers-panel-wrapper {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  max-width: 400px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  box-shadow: var(--shadow-md);
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DesignCanvas } from './components/canvas/DesignCanvas';
 import { Sidebar } from './components/sidebar/Sidebar';
 import { LayersPanel } from './components/panels/LayersPanel';
@@ -10,9 +10,12 @@ import { useDesignEditor } from './hooks/useDesignEditor';
 import { useExport } from './hooks/useExport';
 import { useTemplate } from './hooks/useTemplate';
 import { TEMPLATES } from './constants/templates';
+import './App.css';

 function App() {
  const [editingElement, setEditingElement] = useState(null);
+  const canvasContainerRef = useRef(null);
+  const propertiesPanelRef = useRef(null);

  const {
    elements, selectedId, addElement, updateElement, deleteElement,
@@ -22,8 +25,8 @@ function App() {
  const { exporting, progress, exportDesign, error, clearExport } = useExport();

  const {
-    currentTemplate, currentTemplateId, assignedSlots,
-    loadTemplate, clearTemplate, getSlots, assignImageToSlot, getDragBoundFunc, isSlotFilled,
+    currentTemplate, assignedSlots,
+    loadTemplate, clearTemplate, assignImageToSlot, getDragBoundFunc,
  } = useTemplate(TEMPLATES);

  const selectedElement = elements.find((el) => el.id === selectedId);
@@ -53,6 +56,21 @@ function App() {
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [selectedId, deleteElement, undo, redo, canUndo, canRedo]);

+  // Deselect when clicking outside the canvas
+  useEffect(() => {
+    const handleMouseDown = (e) => {
+      if (
+        selectedId
+        && canvasContainerRef.current && !canvasContainerRef.current.contains(e.target)
+        && propertiesPanelRef.current && !propertiesPanelRef.current.contains(e.target)
+      ) {
+        deselectAll();
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [selectedId, deselectAll]);
+
  const handleAddTemplate = (templateId) => {
    if (templateId === 'freeform') { clearTemplate(); return; }
    const success = loadTemplate(templateId);
@@ -85,15 +103,15 @@ function App() {
      />

      <div className="canvas-area">
-        <div style={{ marginBottom: '1rem', textAlign: 'center' }}>
-          <h1 style={{ margin: '0 0 0.25rem 0', fontSize: '20px', color: 'var(--text-primary)' }}>Apparel Designer</h1>
-          <p style={{ margin: 0, fontSize: '12px', color: 'var(--text-secondary)' }}>T-shirt customization editor</p>
+        <div className="canvas-header">
+          <h1>Apparel Designer</h1>
+          <p>T-shirt customization editor</p>
        </div>

-        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', justifyContent: 'center' }}>
-          <button onClick={() => canUndo && undo()} disabled={!canUndo} className="icon-btn" style={{ opacity: canUndo ? 1 : 0.5 }}>↶ Undo</button>
-          <button onClick={() => canRedo && redo()} disabled={!canRedo} className="icon-btn" style={{ opacity: canRedo ? 1 : 0.5 }}>↷ Redo</button>
-          <button onClick={() => exportDesign(elements, 'tshirt-design', currentTemplate)} disabled={exporting || elements.length === 0} className="export-btn" style={{ opacity: elements.length === 0 ? 0.5 : 1 }}>
+        <div className="canvas-toolbar">
+          <button onClick={() => canUndo && undo()} disabled={!canUndo} className="icon-btn">↶ Undo</button>
+          <button onClick={() => canRedo && redo()} disabled={!canRedo} className="icon-btn">↷ Redo</button>
+          <button onClick={() => exportDesign(elements, 'tshirt-design', currentTemplate)} disabled={exporting || elements.length === 0} className="export-btn">
            {exporting ? `Exporting... ${progress}%` : '⬇ Export HD'}
          </button>
        </div>
@@ -105,29 +123,64 @@ function App() {
          </div>
        )}

+        <div ref={canvasContainerRef}>
        <DesignCanvas
          elements={elements} selectedId={selectedId}
          onSelect={selectElement} onDeselect={deselectAll}
          onUpdate={(id, attrs) => updateElement(id, attrs)} onCommit={commitHistory}
          currentTemplate={currentTemplate} assignedSlots={assignedSlots} getDragBoundFunc={getDragBoundFunc}
        />
+        </div>

-        <div style={{ marginTop: '1.5rem', width: '100%', maxWidth: '400px', background: 'var(--bg-primary)', borderRadius: 'var(--radius-md)', padding: '1rem', boxShadow: 'var(--shadow-md)' }}>
+        <div className="layers-panel-wrapper">
          <LayersPanel elements={elements} selectedId={selectedId} onSelect={selectElement} onDelete={deleteElement} />
        </div>
      </div>

+      <div ref={propertiesPanelRef}>
      <PropertiesPanel
        element={selectedElement}
        onUpdate={(attrs) => updateElement(selectedId, attrs)}
        onDelete={deleteElement}
        onEditPhoto={(el) => setEditingElement(el)}
      />
+      </div>

      {editingElement && (
        <PhotoPreEditor
          imageSrc={editingElement.src}
-          onComplete={(url) => { updateElement(editingElement.id, { src: url }); setEditingElement(null); }}
+          onComplete={(url) => {
+            const img = new window.Image();
+            img.onload = () => {
+              const oldWidth = editingElement.width || 100;
+              const oldHeight = editingElement.height || 100;
+              const newAspect = img.naturalWidth / img.naturalHeight;
+              const oldAspect = oldWidth / oldHeight;
+
+              let newWidth, newHeight;
+              if (Math.abs(newAspect - oldAspect) < 0.01) {
+                newWidth = oldWidth;
+                newHeight = oldHeight;
+              } else {
+                const area = oldWidth * oldHeight;
+                newWidth = Math.sqrt(area * newAspect);
+                newHeight = newWidth / newAspect;
+              }
+
+              updateElement(editingElement.id, {
+                src: url,
+                width: Math.round(newWidth),
+                height: Math.round(newHeight),
+                crop: undefined,
+              });
+              setEditingElement(null);
+            };
+            img.onerror = () => {
+              updateElement(editingElement.id, { src: url });
+              setEditingElement(null);
+            };
+            img.src = url;
+          }}
          onClose={() => setEditingElement(null)}
        />
      )}
--- a/src/components/PWAInstall.jsx
+++ b/src/components/PWAInstall.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import '../styles/PWAInstall.css';

 export function PWAInstall() {
  const [deferredPrompt, setDeferredPrompt] = useState(null);
@@ -30,17 +31,17 @@ export function PWAInstall() {
      {showInstall && (
        <div className="pwa-install-banner">
          <p>Install Apparel Designer for offline access!</p>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
+          <div className="pwa-install-actions">
            <button onClick={handleInstall} className="install-btn">Install</button>
            <button onClick={() => setShowInstall(false)} className="dismiss-btn">Later</button>
          </div>
        </div>
      )}
      {updateAvailable && (
-        <div style={{ position: 'fixed', bottom: '1rem', left: '50%', transform: 'translateX(-50%)', background: 'var(--accent)', color: '#fff', padding: '0.75rem 1.5rem', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)', zIndex: 9999, display: 'flex', alignItems: 'center', gap: '1rem', fontSize: '13px' }}>
+        <div className="pwa-update-banner">
          <span>🔄 New version available!</span>
-          <button onClick={handleUpdate} style={{ padding: '0.375rem 0.75rem', background: '#fff', color: 'var(--accent)', border: 'none', borderRadius: 'var(--radius-sm)', fontWeight: '600', fontSize: '12px', cursor: 'pointer' }}>Refresh</button>
-          <button onClick={() => { setUpdateAvailable(false); setNewWorker(null); }} style={{ padding: '0.375rem 0.5rem', background: 'transparent', color: '#fff', border: 'none', cursor: 'pointer', fontSize: '16px', opacity: 0.8 }}>✕</button>
+          <button onClick={handleUpdate} className="refresh-btn">Refresh</button>
+          <button onClick={() => { setUpdateAvailable(false); setNewWorker(null); }} className="close-btn">✕</button>
        </div>
      )}
    </>
--- a/src/components/canvas/DesignCanvas.jsx
+++ b/src/components/canvas/DesignCanvas.jsx
@@ -4,42 +4,117 @@ import { ImageElement } from './ImageElement';
 import { TextElement } from './TextElement';
 import { TemplateLayer } from './TemplateLayer';
 import { SlotPlaceholder, SlotBoundsGuide } from './SlotPlaceholder';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import '../../styles/DesignCanvas.css';

 const CANVAS_SIZE = 300;
+const HANDLE_PADDING = 40;

 export const DesignCanvas = memo(function DesignCanvas({
  elements, selectedId, onSelect, onDeselect, onUpdate, onCommit,
  currentTemplate, assignedSlots, getDragBoundFunc,
 }) {
  const slots = currentTemplate?.slots || [];
+  const stageSize = CANVAS_SIZE + HANDLE_PADDING * 2;
+
+  const constrainTransform = useCallback((oldBox, newBox) => {
+    // During rotation the drag-bound func handles containment
+    if (Math.abs(oldBox.rotation - newBox.rotation) > 0.001) return newBox;
+
+    const cos = Math.cos(newBox.rotation);
+    const sin = Math.sin(newBox.rotation);
+
+    function getCorners({ x, y, width: w, height: h }) {
+      return [
+        [x, y],
+        [x + w * cos, y + w * sin],
+        [x + w * cos - h * sin, y + w * sin + h * cos],
+        [x - h * sin, y + h * cos],
+      ];
+    }
+
+    const nc = getCorners(newBox);
+    const inBounds = nc.every(
+      ([cx, cy]) => cx >= 0 && cx <= CANVAS_SIZE && cy >= 0 && cy <= CANVAS_SIZE
+    );
+    if (inBounds) return newBox;
+
+    // With constant rotation, every corner coordinate is linear in t (0→old, 1→new).
+    // Find the largest t where all corners stay within [0, CANVAS_SIZE].
+    const oc = getCorners(oldBox);
+    let maxT = 1;
+
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 2; j++) {
+        const a = oc[i][j];
+        const delta = nc[i][j] - a;
+        if (Math.abs(delta) < 0.001) continue;
+        const limit = delta > 0 ? CANVAS_SIZE : 0;
+        const t = (limit - a) / delta;
+        if (t > 0 && t < maxT) maxT = t;
+      }
+    }
+
+    if (maxT < 0.001) return oldBox;
+
+    return {
+      x: oldBox.x + (newBox.x - oldBox.x) * maxT,
+      y: oldBox.y + (newBox.y - oldBox.y) * maxT,
+      width: oldBox.width + (newBox.width - oldBox.width) * maxT,
+      height: oldBox.height + (newBox.height - oldBox.height) * maxT,
+      rotation: newBox.rotation,
+    };
+  }, []);
+
+  // Regular function so Konva can bind `this` to the dragged node,
+  // letting us read width/height/rotation to compute the rotated bounding box.
+  const canvasDragBound = useCallback(function (pos) {
+    const w = this.width();
+    const h = this.height();
+    const rad = (this.rotation() * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+
+    const cornersX = [0, w * cos, w * cos - h * sin, -h * sin];
+    const cornersY = [0, w * sin, w * sin + h * cos, h * cos];
+
+    const minX = Math.min(...cornersX);
+    const maxX = Math.max(...cornersX);
+    const minY = Math.min(...cornersY);
+    const maxY = Math.max(...cornersY);
+
+    return {
+      x: Math.max(HANDLE_PADDING - minX, Math.min(pos.x, HANDLE_PADDING + CANVAS_SIZE - maxX)),
+      y: Math.max(HANDLE_PADDING - minY, Math.min(pos.y, HANDLE_PADDING + CANVAS_SIZE - maxY)),
+    };
+  }, []);

  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
+    <div className="design-canvas-wrapper">
      <TShirtSVG size={CANVAS_SIZE} />
+      <div className={`design-canvas-border${selectedId ? ' selected' : ''}`} />
      <Stage
-        width={CANVAS_SIZE} height={CANVAS_SIZE}
+        width={stageSize} height={stageSize}
        onClick={onDeselect} onTap={onDeselect}
-        style={{
-          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
-          border: selectedId ? '2px solid #38bdf8' : '1px dashed #cbd5e1',
-          borderRadius: '8px', background: 'rgba(255, 255, 255, 0.5)',
-        }}
+        className="design-canvas-stage"
      >
-        <Layer>
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING}>
          {currentTemplate && <TemplateLayer template={currentTemplate} canvasSize={CANVAS_SIZE} />}
        </Layer>
-        <Layer listening={false}>
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING} listening={false}>
          {slots.map((slot) => <SlotBoundsGuide key={slot.id} slot={slot} />)}
        </Layer>
-        <Layer>
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING}>
          {elements.map((el) => {
            if (el.type === 'image') {
              return (
                <ImageElement key={el.id} id={el.id} x={el.x} y={el.y} width={el.width} height={el.height}
                  rotation={el.rotation} src={el.src} crop={el.crop} isSelected={el.id === selectedId}
-                  onSelect={() => onSelect(el.id)} onUpdate={(attrs) => onUpdate(el.id, attrs)} onCommit={onCommit}
-                  dragBoundFunc={el.slotId ? getDragBoundFunc?.(el.slotId, { width: el.width, height: el.height }) : null}
+                  onSelect={() => (el.id === selectedId ? onDeselect?.() : onSelect(el.id))}
+                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
+                  onCommit={onCommit}
+                  dragBoundFunc={canvasDragBound}
+                  transformBoundFunc={constrainTransform}
                />
              );
            }
@@ -47,18 +122,22 @@ export const DesignCanvas = memo(function DesignCanvas({
              return (
                <TextElement key={el.id} id={el.id} x={el.x} y={el.y} text={el.text} fontSize={el.fontSize}
                  fontFamily={el.fontFamily} fill={el.fill} rotation={el.rotation} isSelected={el.id === selectedId}
-                  onSelect={() => onSelect(el.id)} onUpdate={(attrs) => onUpdate(el.id, attrs)} onCommit={onCommit}
+                  onSelect={() => (el.id === selectedId ? onDeselect?.() : onSelect(el.id))}
+                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
+                  onCommit={onCommit}
+                  dragBoundFunc={canvasDragBound}
+                  transformBoundFunc={constrainTransform}
                />
              );
            }
            return null;
          })}
        </Layer>
-        <Layer listening={false}>
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING} listening={false}>
          {slots.map((slot) => <SlotPlaceholder key={slot.id} slot={slot} isEmpty={!assignedSlots?.[slot.id]} />)}
        </Layer>
      </Stage>
-      <div style={{ position: 'absolute', bottom: '-40px', left: '50%', transform: 'translateX(-50%)', fontSize: '12px', color: 'var(--text-secondary)', textAlign: 'center', whiteSpace: 'nowrap' }}>
+      <div className="design-canvas-info">
        Design Area: 15" × 15" • Export: 4500 × 4500px @ 300 DPI
      </div>
    </div>
--- a/src/components/canvas/ImageElement.jsx
+++ b/src/components/canvas/ImageElement.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, memo } from 'react';
+import { useEffect, useRef, memo, useCallback } from 'react';
 import { Image, Transformer } from 'react-konva';
 import useImage from 'use-image';

@@ -8,28 +8,46 @@ function URLImage({ src, innerRef, ...props }) {
 }

 export const ImageElement = memo(function ImageElement({
-  id,
+  id: _id,
  x = 0,
  y = 0,
  width = 100,
  height = 100,
  rotation = 0,
  src,
+  crop,
  isSelected,
  onSelect,
  onUpdate,
  onCommit,
+  dragBoundFunc,
+  transformBoundFunc,
 }) {
  const shapeRef = useRef(null);
  const trRef = useRef(null);

-  useEffect(() => {
-    if (isSelected && trRef.current && shapeRef.current) {
-      trRef.current.nodes([shapeRef.current]);
-      trRef.current.getLayer().batchDraw();
-    }
+  const attachTransformer = useCallback(() => {
+    if (!isSelected) return;
+    const transformer = trRef.current;
+    const shape = shapeRef.current;
+    if (!transformer || !shape) return;
+
+    transformer.nodes([shape]);
+    transformer.getLayer()?.batchDraw();
  }, [isSelected]);

+  const setTransformerRef = useCallback(
+    (node) => {
+      trRef.current = node;
+      attachTransformer();
+    },
+    [attachTransformer]
+  );
+
+  useEffect(() => {
+    attachTransformer();
+  }, [attachTransformer]);
+
  return (
    <>
      <URLImage
@@ -40,9 +58,21 @@ export const ImageElement = memo(function ImageElement({
        height={height}
        rotation={rotation}
        src={src}
+        crop={
+          crop
+            ? { x: crop.sx, y: crop.sy, width: crop.sWidth, height: crop.sHeight }
+            : undefined
+        }
        draggable
-        onClick={onSelect}
-        onTap={onSelect}
+        dragBoundFunc={dragBoundFunc}
+        onClick={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
+        onTap={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
        onDragEnd={(e) => {
          onUpdate({ x: e.target.x(), y: e.target.y() });
          onCommit?.();
@@ -66,10 +96,11 @@ export const ImageElement = memo(function ImageElement({
      />
      {isSelected && (
        <Transformer
-          ref={trRef}
+          ref={setTransformerRef}
+          keepRatio
          boundBoxFunc={(oldBox, newBox) => {
-            if (newBox.width < 20 || newBox.height < 20) return oldBox;
-            return newBox;
+            if (Math.abs(newBox.width) < 20 || Math.abs(newBox.height) < 20) return oldBox;
+            return transformBoundFunc ? transformBoundFunc(oldBox, newBox) : newBox;
          }}
          anchorSize={8}
          anchorCornerRadius={4}
--- a/src/components/canvas/TShirtSVG.jsx
+++ b/src/components/canvas/TShirtSVG.jsx
@@ -1,10 +1,12 @@
+import '../../styles/TShirtSVG.css';
+
 export function TShirtSVG({ size = 300 }) {
  const padding = size * 0.1;
  const innerSize = size - padding * 2;

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
-      style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', pointerEvents: 'none', zIndex: 0 }}>
+      className="tshirt-svg">
      <path d={`M ${padding} ${padding + innerSize * 0.15} L ${padding + innerSize * 0.15} ${padding} L ${size - padding - innerSize * 0.15} ${padding} L ${size - padding} ${padding + innerSize * 0.15} L ${size - padding} ${size - padding} L ${padding} ${size - padding} Z`}
        fill="none" stroke="var(--border)" strokeWidth="2" strokeDasharray="4,4" />
      <rect x={size * 0.3} y={size * 0.25} width={size * 0.4} height={size * 0.35} fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.5" />
--- a/src/components/canvas/TextElement.jsx
+++ b/src/components/canvas/TextElement.jsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef, memo } from 'react';
+import { useEffect, useRef, memo, useCallback } from 'react';
 import { Text, Transformer } from 'react-konva';

 export const TextElement = memo(function TextElement({
-  id,
+  id: _id,
  x = 0,
  y = 0,
  text = '',
@@ -14,17 +14,34 @@ export const TextElement = memo(function TextElement({
  onSelect,
  onUpdate,
  onCommit,
+  dragBoundFunc,
+  transformBoundFunc,
 }) {
  const textRef = useRef(null);
  const trRef = useRef(null);

-  useEffect(() => {
-    if (isSelected && trRef.current && textRef.current) {
-      trRef.current.nodes([textRef.current]);
-      trRef.current.getLayer().batchDraw();
-    }
+  const attachTransformer = useCallback(() => {
+    if (!isSelected) return;
+    const transformer = trRef.current;
+    const node = textRef.current;
+    if (!transformer || !node) return;
+
+    transformer.nodes([node]);
+    transformer.getLayer()?.batchDraw();
  }, [isSelected]);

+  const setTransformerRef = useCallback(
+    (node) => {
+      trRef.current = node;
+      attachTransformer();
+    },
+    [attachTransformer]
+  );
+
+  useEffect(() => {
+    attachTransformer();
+  }, [attachTransformer]);
+
  return (
    <>
      <Text
@@ -37,8 +54,15 @@ export const TextElement = memo(function TextElement({
        fill={fill}
        rotation={rotation}
        draggable
-        onClick={onSelect}
-        onTap={onSelect}
+        dragBoundFunc={dragBoundFunc}
+        onClick={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
+        onTap={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
        onDragEnd={(e) => {
          onUpdate({ x: e.target.x(), y: e.target.y() });
          onCommit?.();
@@ -60,8 +84,9 @@ export const TextElement = memo(function TextElement({
      />
      {isSelected && (
        <Transformer
-          ref={trRef}
+          ref={setTransformerRef}
          enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
+          boundBoxFunc={transformBoundFunc}
          anchorSize={8}
          anchorCornerRadius={4}
          borderStroke="#38bdf8"
--- a/src/components/editor/PhotoPreEditor.jsx
+++ b/src/components/editor/PhotoPreEditor.jsx
@@ -1,8 +1,10 @@
-import { useState, useEffect, useRef } from 'react';
-import FilerobotImageEditor from 'react-filerobot-image-editor';
+import { useEffect, useRef } from 'react';
+import FilerobotImageEditor, { TABS } from 'react-filerobot-image-editor';
+import { StyleSheetManager } from 'styled-components';
+import isPropValid from '@emotion/is-prop-valid';
+import '../../styles/PhotoPreEditor.css';

 export function PhotoPreEditor({ imageSrc, onComplete, onClose }) {
-  const [saving, setSaving] = useState(false);
  const modalContentRef = useRef(null);
  const previousFocusRef = useRef(null);

@@ -16,28 +18,78 @@ export function PhotoPreEditor({ imageSrc, onComplete, onClose }) {
    };
  }, [onClose]);

-  const handleComplete = (editedImageObject) => {
-    setSaving(true);
-    editedImageObject.exportAsync({ quality: 1, mimeType: 'image/png' })
-      .then((blob) => { setSaving(false); onComplete(URL.createObjectURL(blob)); })
-      .catch((error) => { console.error('Export failed:', error); setSaving(false); onClose(); });
+  const base64ToBlob = (base64DataUrl) => {
+    const [header, data] = base64DataUrl.split(',');
+    const mimeMatch = header?.match(/data:(.*?);base64/);
+    const mime = mimeMatch?.[1] || 'image/png';
+    const binary = atob(data || '');
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return new Blob([bytes], { type: mime });
+  };
+
+  const handleSave = async (savedImageData) => {
+    try {
+      // Prefer base64 when available (works without CORS/network).
+      if (savedImageData?.imageBase64) {
+        const blob = base64ToBlob(savedImageData.imageBase64);
+        onComplete(URL.createObjectURL(blob));
+        return;
+      }
+
+      // Fallback to canvas when provided by the library.
+      if (savedImageData?.imageCanvas instanceof HTMLCanvasElement) {
+        const blob = await new Promise((resolve) =>
+          savedImageData.imageCanvas.toBlob(resolve, savedImageData.mimeType || 'image/png', savedImageData.quality),
+        );
+        if (blob) onComplete(URL.createObjectURL(blob));
+        else throw new Error('Canvas export failed');
+        return;
+      }
+
+      // Final fallback: cloudimageUrl (fetch then blob).
+      if (savedImageData?.cloudimageUrl) {
+        const res = await fetch(savedImageData.cloudimageUrl);
+        const blob = await res.blob();
+        onComplete(URL.createObjectURL(blob));
+        return;
+      }
+
+      throw new Error('No export data returned from image editor');
+    } catch (error) {
+      console.error('Export failed:', error);
+      onClose();
+    }
  };

  return (
    <div className="filerobot-overlay" role="dialog" aria-modal="true" aria-labelledby="photo-editor-title">
      <div className="filerobot-container" ref={modalContentRef} role="document">
+        <StyleSheetManager
+          // Filerobot/@scaleflex styled-components pass a bunch of styling props to DOM nodes (e.g. isPhoneScreen).
+          // Filtering them here prevents noisy React console warnings.
+          shouldForwardProp={(prop, element) => (typeof element === 'string' ? isPropValid(prop) : true)}
+        >
          <FilerobotImageEditor
-          source={imageSrc} onSave={handleComplete} onClose={onClose}
-          annotationsCommon={{ fill: '#ff0000', stroke: '#000000', strokeWidth: 0 }}
-          annotations={['Text', 'Rectangle', 'Ellipse', 'Line', 'Pen', 'Eraser']}
-          tabs={['adjust', 'filters', 'finetune', 'annotate', 'watermark']}
-          defaultTabId="adjust"
+            source={imageSrc}
+            onBeforeSave={() => false}
+            onSave={handleSave}
+            onClose={() => onClose()}
+            tabsIds={[TABS.ADJUST, TABS.FILTERS, TABS.FINETUNE]}
+            defaultTabId={TABS.ADJUST}
+            Crop={{ autoResize: true, defaultSizePercentage: 1, ratio: 'custom' }}
            theme={{ accentColor: '#38bdf8', palettePrimary: '#38bdf8' }}
-          saveButtonProps={{ label: saving ? 'Exporting...' : 'Use Edited Image' }}
-          closeOnSave
+            forceToPngInEllipticalCrop
+            closeAfterSave
+            defaultSavedImageName="edited-image"
+            defaultSavedImageType="png"
+            defaultSavedImageQuality={1}
+            savingPixelRatio={4}
+            previewPixelRatio={4}
          />
+        </StyleSheetManager>
      </div>
-      <h2 id="photo-editor-title" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>Photo Editor</h2>
+      <h2 id="photo-editor-title" className="sr-only">Photo Editor</h2>
    </div>
  );
 }
--- a/src/components/panels/LayersPanel.jsx
+++ b/src/components/panels/LayersPanel.jsx
@@ -1,31 +1,27 @@
 import { memo } from 'react';
+import '../../styles/LayersPanel.css';

 export const LayersPanel = memo(function LayersPanel({ elements, selectedId, onSelect, onDelete }) {
  const getIcon = (el) => el.type === 'image' ? (el.bgRemoved ? '🖼️' : '📷') : el.type === 'text' ? '📝' : '🎨';
  const getName = (el) => el.type === 'image' ? (el.bgRemoved ? 'Image (BG ✓)' : 'Image') : el.type === 'text' ? (el.text?.substring(0, 20) || 'Text') : 'Sticker';

  if (elements.length === 0) {
-    return <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '12px' }}>No elements yet. Add images, text, or stickers to your design.</div>;
+    return <div className="layers-empty">No elements yet. Add images, text, or stickers to your design.</div>;
  }

  return (
    <div>
-      <h3 style={{ margin: '0 0 0.75rem 0', fontSize: '12px', fontWeight: '600', color: 'var(--text-secondary)', textTransform: 'uppercase' }}>Layers ({elements.length})</h3>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      <h3 className="layers-title">Layers ({elements.length})</h3>
+      <div className="layers-list">
        {elements.map((element) => (
          <div key={element.id} onClick={() => onSelect(element.id)}
-            style={{
-              display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem',
-              background: selectedId === element.id ? 'var(--accent-bg)' : 'transparent',
-              border: `1px solid ${selectedId === element.id ? 'var(--accent)' : 'var(--border)'}`,
-              borderRadius: 'var(--radius-sm)', cursor: 'pointer',
-            }}>
-            <span style={{ fontSize: '14px' }}>{getIcon(element)}</span>
-            <span style={{ flex: 1, fontSize: '12px', color: selectedId === element.id ? 'var(--accent)' : 'var(--text-primary)', fontWeight: selectedId === element.id ? '600' : '400', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            className={`layers-item${selectedId === element.id ? ' selected' : ''}`}>
+            <span className="layers-item-icon">{getIcon(element)}</span>
+            <span className={`layers-item-name${selectedId === element.id ? ' selected' : ''}`}>
              {getName(element)}
            </span>
            <button onClick={(e) => { e.stopPropagation(); onDelete(element.id); }}
-              style={{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '14px', color: 'var(--text-muted)' }}>
+              className="layers-item-delete">
              ×
            </button>
          </div>
--- a/src/components/panels/PropertiesPanel.jsx
+++ b/src/components/panels/PropertiesPanel.jsx
@@ -1,14 +1,15 @@
 import { memo } from 'react';
 import { BackgroundRemovalButton } from '../sidebar/BackgroundRemovalButton';
+import '../../styles/PropertiesPanel.css';

 export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate, onDelete, onEditPhoto }) {
  if (!element) {
    return (
      <div className="properties-panel">
-        <div style={{ padding: '1rem', borderBottom: '1px solid var(--border)' }}>
-          <h3 style={{ margin: 0, fontSize: '14px', fontWeight: '600', color: 'var(--text-primary)' }}>Properties</h3>
+        <div className="properties-panel__header">
+          <h3 className="properties-panel__title">Properties</h3>
        </div>
-        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', color: 'var(--text-muted)', fontSize: '12px', textAlign: 'center' }}>
+        <div className="properties-panel__empty">
          Select an element to edit its properties
        </div>
      </div>
@@ -19,57 +20,53 @@ export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate
  const handleSizeChange = (axis, value) => onUpdate({ [axis]: Math.max(20, parseFloat(value) || 20) });
  const handleRotationChange = (value) => onUpdate({ rotation: Math.max(-180, Math.min(180, parseFloat(value) || 0)) });

-  const inputStyle = { width: '100%', padding: '0.5rem', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', fontSize: '13px' };
-  const labelStyle = { display: 'block', fontSize: '11px', fontWeight: '600', color: 'var(--text-secondary)', marginBottom: '0.5rem', textTransform: 'uppercase' };
-
  return (
    <div className="properties-panel">
-      <div style={{ padding: '1rem', borderBottom: '1px solid var(--border)' }}>
-        <h3 style={{ margin: 0, fontSize: '14px', fontWeight: '600', color: 'var(--text-primary)' }}>Properties</h3>
+      <div className="properties-panel__header">
+        <h3 className="properties-panel__title">Properties</h3>
      </div>

-      <div style={{ flex: 1, overflow: 'auto', padding: '1rem' }}>
-        {/* Element type badge */}
-        <div style={{ display: 'inline-block', padding: '4px 8px', background: 'var(--accent-bg)', borderRadius: 'var(--radius-sm)', fontSize: '11px', fontWeight: '600', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: '1rem' }}>
+      <div className="properties-panel__body">
+        <div className="properties-panel__type-badge">
          {element.type}
        </div>

        {/* Position */}
-        <div style={{ marginBottom: '1rem' }}>
-          <label style={labelStyle}>Position</label>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <div style={{ flex: 1 }}>
-              <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>X</label>
-              <input type="number" value={Math.round(element.x)} onChange={(e) => handlePositionChange('x', e.target.value)} style={inputStyle} />
+        <div className="properties-panel__section">
+          <label className="properties-panel__label">Position</label>
+          <div className="properties-panel__row">
+            <div className="properties-panel__field">
+              <label className="properties-panel__axis-label">X</label>
+              <input type="number" value={Math.round(element.x)} onChange={(e) => handlePositionChange('x', e.target.value)} className="properties-panel__input" />
            </div>
-            <div style={{ flex: 1 }}>
-              <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>Y</label>
-              <input type="number" value={Math.round(element.y)} onChange={(e) => handlePositionChange('y', e.target.value)} style={inputStyle} />
+            <div className="properties-panel__field">
+              <label className="properties-panel__axis-label">Y</label>
+              <input type="number" value={Math.round(element.y)} onChange={(e) => handlePositionChange('y', e.target.value)} className="properties-panel__input" />
            </div>
          </div>
        </div>

        {/* Size (for images and stickers) */}
        {(element.type === 'image' || element.type === 'sticker') && (
-          <div style={{ marginBottom: '1rem' }}>
-            <label style={labelStyle}>Size</label>
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
-              <div style={{ flex: 1 }}>
-                <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>W</label>
-                <input type="number" value={Math.round(element.width)} onChange={(e) => handleSizeChange('width', e.target.value)} style={inputStyle} />
+          <div className="properties-panel__section">
+            <label className="properties-panel__label">Size</label>
+            <div className="properties-panel__row">
+              <div className="properties-panel__field">
+                <label className="properties-panel__axis-label">W</label>
+                <input type="number" value={Math.round(element.width)} onChange={(e) => handleSizeChange('width', e.target.value)} className="properties-panel__input" />
              </div>
-              <div style={{ flex: 1 }}>
-                <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>H</label>
-                <input type="number" value={Math.round(element.height)} onChange={(e) => handleSizeChange('height', e.target.value)} style={inputStyle} />
+              <div className="properties-panel__field">
+                <label className="properties-panel__axis-label">H</label>
+                <input type="number" value={Math.round(element.height)} onChange={(e) => handleSizeChange('height', e.target.value)} className="properties-panel__input" />
              </div>
            </div>
          </div>
        )}

-        {/* Edit Photo button */}
-        {element.type === 'image' && onEditPhoto && (
-          <div style={{ marginBottom: '1rem' }}>
-            <button onClick={() => onEditPhoto(element)} style={{ width: '100%', padding: '0.75rem', border: '1px solid var(--accent)', borderRadius: 'var(--radius-md)', background: 'var(--accent-bg)', color: 'var(--accent)', fontSize: '13px', fontWeight: '600', cursor: 'pointer' }}>
+        {/* Edit Photo button (user uploads only, not stickers) */}
+        {element.type === 'image' && !element.emoji && onEditPhoto && (
+          <div className="properties-panel__section">
+            <button onClick={() => onEditPhoto(element)} className="properties-panel__edit-btn">
              ✏️ Edit Photo
            </button>
          </div>
@@ -78,25 +75,25 @@ export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate
        {/* Text-specific controls */}
        {element.type === 'text' && (
          <>
-            <div style={{ marginBottom: '1rem' }}>
-              <label style={labelStyle}>Font Size: {Math.round(element.fontSize)}px</label>
-              <input type="range" min="12" max="120" value={element.fontSize} onChange={(e) => onUpdate({ fontSize: parseInt(e.target.value, 10) })} style={{ width: '100%' }} />
+            <div className="properties-panel__section">
+              <label className="properties-panel__label">Font Size: {Math.round(element.fontSize)}px</label>
+              <input type="range" min="12" max="120" value={element.fontSize} onChange={(e) => onUpdate({ fontSize: parseInt(e.target.value, 10) })} className="properties-panel__range" />
            </div>
-            <div style={{ marginBottom: '1rem' }}>
-              <label style={labelStyle}>Color</label>
-              <input type="color" value={element.fill} onChange={(e) => onUpdate({ fill: e.target.value })} style={{ width: '100%', height: '36px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', padding: '2px' }} />
+            <div className="properties-panel__section">
+              <label className="properties-panel__label">Color</label>
+              <input type="color" value={element.fill} onChange={(e) => onUpdate({ fill: e.target.value })} className="properties-panel__color-input" />
            </div>
          </>
        )}

        {/* Rotation */}
-        <div style={{ marginBottom: '1rem' }}>
-          <label style={labelStyle}>Rotation: {Math.round(element.rotation)}°</label>
-          <input type="range" min="-180" max="180" value={element.rotation} onChange={(e) => handleRotationChange(e.target.value)} style={{ width: '100%' }} />
+        <div className="properties-panel__section">
+          <label className="properties-panel__label">Rotation: {Math.round(element.rotation)}°</label>
+          <input type="range" min="-180" max="180" value={element.rotation} onChange={(e) => handleRotationChange(e.target.value)} className="properties-panel__range" />
        </div>

-        {/* Background Removal (for images) */}
-        {element.type === 'image' && (
+        {/* Background Removal (user uploads only, not stickers) */}
+        {element.type === 'image' && !element.emoji && (
          <BackgroundRemovalButton
            selectedElement={element}
            onUpdate={(_id, attrs) => onUpdate(attrs)}
@@ -104,7 +101,7 @@ export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate
        )}

        {/* Delete */}
-        <button onClick={() => onDelete(element.id)} style={{ width: '100%', padding: '0.75rem', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--error)', color: '#fff', fontSize: '13px', fontWeight: '600', cursor: 'pointer', marginTop: '1rem' }}>
+        <button onClick={() => onDelete(element.id)} className="properties-panel__delete-btn">
          Delete Element
        </button>
      </div>
--- a/src/components/sidebar/Sidebar.jsx
+++ b/src/components/sidebar/Sidebar.jsx
@@ -3,6 +3,7 @@ import { UploadTab } from './UploadTab';
 import { StickersTab } from './StickersTab';
 import { TextTab } from './TextTab';
 import { TemplatesTab } from './TemplatesTab';
+import '../../styles/Sidebar.css';

 const TABS = [
  { id: 'upload', label: 'Upload', icon: '📁' },
@@ -26,21 +27,16 @@ export function Sidebar({ onAddImage, onAddSticker, onAddText, onAddTemplate, on

  return (
    <div className="sidebar">
-      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)', background: 'var(--bg-primary)' }}>
+      <div className="sidebar-tabs">
        {TABS.map((tab) => (
          <button key={tab.id} onClick={() => setActiveTab(tab.id)}
-            style={{
-              flex: 1, padding: '12px 8px', border: 'none', background: 'transparent', cursor: 'pointer',
-              fontSize: '11px', fontWeight: activeTab === tab.id ? '600' : '400',
-              color: activeTab === tab.id ? 'var(--accent)' : 'var(--text-secondary)',
-              borderBottom: activeTab === tab.id ? '2px solid var(--accent)' : '2px solid transparent',
-            }}>
-            <div style={{ fontSize: '16px', marginBottom: '2px' }}>{tab.icon}</div>
+            className={`sidebar-tab-btn${activeTab === tab.id ? ' active' : ''}`}>
+            <div className="sidebar-tab-icon">{tab.icon}</div>
            {tab.label}
          </button>
        ))}
      </div>
-      <div style={{ flex: 1, overflow: 'auto', padding: '1rem' }}>{renderTabContent()}</div>
+      <div className="sidebar-content">{renderTabContent()}</div>
    </div>
  );
 }
--- a/src/components/sidebar/StickersTab.jsx
+++ b/src/components/sidebar/StickersTab.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { STICKERS, STICKER_CATEGORIES } from '../../constants/stickers';
+import '../../styles/StickersTab.css';

 export function StickersTab({ onAddSticker }) {
  const [activeCategory, setActiveCategory] = useState('all');
@@ -29,24 +30,20 @@ export function StickersTab({ onAddSticker }) {

  return (
    <div>
-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>Stickers</h3>
-      <div style={{ display: 'flex', gap: '6px', marginBottom: '1rem', flexWrap: 'wrap' }}>
+      <h3 className="stickers-title">Stickers</h3>
+      <div className="stickers-categories">
        {STICKER_CATEGORIES.map((cat) => (
          <button key={cat} onClick={() => setActiveCategory(cat)}
-            style={{
-              padding: '6px 12px', border: `1px solid ${activeCategory === cat ? 'var(--accent)' : 'var(--border)'}`,
-              borderRadius: 'var(--radius-xl)', background: activeCategory === cat ? 'var(--accent)' : 'var(--bg-primary)',
-              color: activeCategory === cat ? '#fff' : 'var(--text-secondary)', fontSize: '11px', cursor: 'pointer', textTransform: 'capitalize',
-            }}
+            className={`stickers-category-btn${activeCategory === cat ? ' active' : ''}`}
          >
            {cat}
          </button>
        ))}
      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '8px' }}>
+      <div className="stickers-grid">
        {filteredStickers.map((sticker, index) => (
          <button key={index} onClick={() => handleAddSticker(sticker.emoji)}
-            style={{ aspectRatio: '1', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--bg-primary)', fontSize: '28px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            className="sticker-btn"
          >
            {sticker.emoji}
          </button>
--- a/src/components/sidebar/TemplatesTab.jsx
+++ b/src/components/sidebar/TemplatesTab.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { TEMPLATES, TEMPLATE_CATEGORIES } from '../../constants/templates';
+import '../../styles/TemplatesTab.css';

 function getCategoryEmoji(category) {
  const emojis = {
@@ -52,60 +53,48 @@ export function TemplatesTab({ onAddTemplate, onSlotImageUpload }) {

  return (
    <div>
-      <input id="slot-file-input" type="file" accept="image/*" onChange={handleFileChange} style={{ display: 'none' }} />
+      <input id="slot-file-input" type="file" accept="image/*" onChange={handleFileChange} className="templates-hidden-input" />

-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>Templates</h3>
+      <h3 className="templates-title">Templates</h3>

-      <div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: '1rem', lineHeight: '1.4' }}>
+      <div className="templates-description">
        Choose a template to get started or design freely.
      </div>

-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      <div className="templates-list">
        {templates.map((template) => (
          <button
            key={template.id}
            onClick={() => handleSelectTemplate(template)}
-            style={{
-              display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem',
-              border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
-              background: template.id === selectedTemplateId ? 'var(--bg-secondary)' : 'var(--bg-primary)',
-              cursor: 'pointer', textAlign: 'left', transition: 'all 0.15s ease',
-            }}
+            className={`template-btn${template.id === selectedTemplateId ? ' selected' : ''}`}
          >
-            <div style={{
-              width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              background: 'var(--bg-tertiary)', borderRadius: 'var(--radius-sm)', fontSize: '24px',
-            }}>
+            <div className="template-thumbnail">
              {template.thumbnail}
            </div>
-            <div style={{ flex: 1 }}>
-              <div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)' }}>{template.name}</div>
-              <div style={{ fontSize: '11px', color: 'var(--text-muted)' }}>{template.description}</div>
+            <div className="template-info">
+              <div className="template-name">{template.name}</div>
+              <div className="template-desc">{template.description}</div>
            </div>
            {template.hasSlots && (
-              <span style={{ fontSize: '10px', padding: '2px 6px', background: 'var(--accent)', color: '#fff', borderRadius: '4px', fontWeight: '600' }}>SLOTS</span>
+              <span className="template-slots-badge">SLOTS</span>
            )}
          </button>
        ))}
      </div>

      {selectedTemplateId && selectedTemplateId !== 'freeform' && slots.length > 0 && (
-        <div style={{ marginTop: '1rem', padding: '1rem', background: 'var(--bg-tertiary)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)' }}>
-          <h4 style={{ margin: '0 0 0.75rem 0', fontSize: '12px', fontWeight: '600', color: 'var(--text-primary)' }}>Template Slots</h4>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        <div className="template-slots-section">
+          <h4 className="template-slots-title">Template Slots</h4>
+          <div className="template-slots-list">
            {slots.map((slot) => (
              <button
                key={slot.id}
                onClick={() => handleSlotClick(slot.id)}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem',
-                  border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)',
-                  background: 'var(--bg-primary)', cursor: 'pointer', fontSize: '12px', color: 'var(--text-primary)',
-                }}
+                className="template-slot-btn"
              >
-                <span style={{ fontSize: '16px' }}>📷</span>
+                <span className="template-slot-icon">📷</span>
                <span>{slot.label}</span>
-                <span style={{ fontSize: '10px', color: 'var(--text-muted)', marginLeft: 'auto' }}>
+                <span className="template-slot-dimensions">
                  {slot.bounds.width}×{slot.bounds.height}
                </span>
              </button>
--- a/src/components/sidebar/TextTab.jsx
+++ b/src/components/sidebar/TextTab.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { FONTS } from '../../constants/fonts';
+import '../../styles/TextTab.css';

 export function TextTab({ onAddText }) {
  const [text, setText] = useState('Your text here');
@@ -11,43 +12,40 @@ export function TextTab({ onAddText }) {
    onAddText({ type: 'text', x: 150, y: 150, text, fontFamily, fontSize, fill, rotation: 0 });
  };

-  const labelStyle = { display: 'block', fontSize: '11px', fontWeight: '600', color: 'var(--text-secondary)', marginBottom: '0.5rem', textTransform: 'uppercase' };
-  const inputStyle = { width: '100%', padding: '0.75rem', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', fontSize: '14px', fontFamily: 'var(--font-body)' };
-
  return (
    <div>
-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>Add Text</h3>
+      <h3 className="text-tab-title">Add Text</h3>

-      <div style={{ marginBottom: '1rem' }}>
-        <label style={labelStyle}>Text Content</label>
-        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} style={{ ...inputStyle, resize: 'vertical' }} />
+      <div className="text-tab-field">
+        <label className="text-tab-label">Text Content</label>
+        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} className="text-tab-textarea" />
      </div>

-      <div style={{ marginBottom: '1rem' }}>
-        <label style={labelStyle}>Font</label>
-        <select value={fontFamily} onChange={(e) => setFontFamily(e.target.value)} style={{ ...inputStyle, fontSize: '13px', fontFamily, cursor: 'pointer', background: 'var(--bg-primary)' }}>
+      <div className="text-tab-field">
+        <label className="text-tab-label">Font</label>
+        <select value={fontFamily} onChange={(e) => setFontFamily(e.target.value)} className="text-tab-select" style={{ fontFamily }}>
          {FONTS.map((font) => <option key={font.family} value={font.family}>{font.name}</option>)}
        </select>
      </div>

-      <div style={{ marginBottom: '1rem' }}>
-        <label style={labelStyle}>Font Size: {fontSize}px</label>
-        <input type="range" min="12" max="120" value={fontSize} onChange={(e) => setFontSize(parseInt(e.target.value, 10))} style={{ width: '100%' }} />
+      <div className="text-tab-field">
+        <label className="text-tab-label">Font Size: {fontSize}px</label>
+        <input type="range" min="12" max="120" value={fontSize} onChange={(e) => setFontSize(parseInt(e.target.value, 10))} className="text-tab-range" />
      </div>

-      <div style={{ marginBottom: '1rem' }}>
-        <label style={labelStyle}>Color</label>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-          <input type="color" value={fill} onChange={(e) => setFill(e.target.value)} style={{ width: '40px', height: '40px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', padding: '2px' }} />
-          <input type="text" value={fill} onChange={(e) => setFill(e.target.value)} style={{ flex: 1, padding: '0.75rem', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', fontSize: '13px', fontFamily: 'var(--font-mono)' }} />
+      <div className="text-tab-field">
+        <label className="text-tab-label">Color</label>
+        <div className="text-tab-color-group">
+          <input type="color" value={fill} onChange={(e) => setFill(e.target.value)} className="text-tab-color-input" />
+          <input type="text" value={fill} onChange={(e) => setFill(e.target.value)} className="text-tab-color-text" />
        </div>
      </div>

-      <div style={{ padding: '1rem', background: 'var(--bg-primary)', borderRadius: 'var(--radius-md)', marginBottom: '1rem', textAlign: 'center' }}>
-        <div style={{ fontFamily, fontSize: `${fontSize * 0.5}px`, color: fill, wordBreak: 'break-word' }}>{text}</div>
+      <div className="text-tab-preview">
+        <div className="text-tab-preview-text" style={{ fontFamily, fontSize: `${fontSize * 0.5}px`, color: fill }}>{text}</div>
      </div>

-      <button onClick={handleAddText} style={{ width: '100%', padding: '0.875rem', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--accent)', color: '#fff', fontSize: '14px', fontWeight: '600', cursor: 'pointer' }}>
+      <button onClick={handleAddText} className="text-tab-submit">
        Add Text to Canvas
      </button>
    </div>
--- a/src/components/sidebar/UploadTab.jsx
+++ b/src/components/sidebar/UploadTab.jsx
@@ -1,10 +1,19 @@
 import { useRef, useState } from 'react';
+import '../../styles/UploadTab.css';

 export function UploadTab({ onAddImage }) {
  const fileInputRef = useRef(null);
  const [isDragging, setIsDragging] = useState(false);
  const [isUploading, setIsUploading] = useState(false);

+  const getImageSize = (src) =>
+    new Promise((resolve, reject) => {
+      const img = new window.Image();
+      img.onload = () => resolve({ width: img.naturalWidth || img.width, height: img.naturalHeight || img.height });
+      img.onerror = () => reject(new Error('Failed to load image'));
+      img.src = src;
+    });
+
  const handleFiles = async (files) => {
    const file = files[0];
    if (!file) return;
@@ -19,7 +28,28 @@ export function UploadTab({ onAddImage }) {
      const response = await fetch('/api/upload', { method: 'POST', body: formData });
      if (!response.ok) throw new Error('Upload failed');
      const data = await response.json();
-      onAddImage({ type: 'image', x: 75, y: 75, width: 150, height: 150, rotation: 0, src: data.preview.url, originalUrl: data.original.url });
+
+      // Preserve aspect ratio by fitting the image into a 150×150 box.
+      const { width: naturalW, height: naturalH } = await getImageSize(data.preview.url);
+      const maxSide = 150;
+      const scale = Math.min(maxSide / naturalW, maxSide / naturalH, 1);
+      const width = Math.max(20, Math.round(naturalW * scale));
+      const height = Math.max(20, Math.round(naturalH * scale));
+
+      // Canvas is 300×300; start roughly centered.
+      const x = Math.round((300 - width) / 2);
+      const y = Math.round((300 - height) / 2);
+
+      onAddImage({
+        type: 'image',
+        x,
+        y,
+        width,
+        height,
+        rotation: 0,
+        src: data.preview.url,
+        originalUrl: data.original.url,
+      });
    } catch (error) {
      console.error('Upload error:', error);
      alert('Failed to upload image. Please try again.');
@@ -30,16 +60,16 @@ export function UploadTab({ onAddImage }) {

  return (
    <div>
-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>Upload Image</h3>
+      <h3 className="upload-tab-title">Upload Image</h3>
      <div onClick={() => fileInputRef.current?.click()} onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }} onDragLeave={(e) => { e.preventDefault(); setIsDragging(false); }} onDrop={(e) => { e.preventDefault(); setIsDragging(false); handleFiles(e.dataTransfer.files); }}
-        style={{ border: `2px dashed ${isDragging ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 'var(--radius-md)', padding: '2rem 1rem', textAlign: 'center', cursor: 'pointer', background: isDragging ? 'var(--accent-bg)' : 'var(--bg-primary)', marginBottom: '1rem' }}>
-        <div style={{ fontSize: '32px', marginBottom: '0.5rem' }}>📁</div>
-        <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>Click to upload or drag and drop</div>
-        <div style={{ fontSize: '11px', color: 'var(--text-muted)' }}>JPEG, PNG, WebP (max 20MB)</div>
+        className={`upload-dropzone${isDragging ? ' dragging' : ''}`}>
+        <div className="upload-dropzone-icon">📁</div>
+        <div className="upload-dropzone-text">Click to upload or drag and drop</div>
+        <div className="upload-dropzone-hint">JPEG, PNG, WebP (max 20MB)</div>
      </div>
-      <input ref={fileInputRef} type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => handleFiles(e.target.files)} style={{ display: 'none' }} />
-      {isUploading && <div style={{ padding: '0.75rem', background: 'var(--accent-bg)', borderRadius: 'var(--radius-sm)', fontSize: '12px', color: 'var(--accent)', textAlign: 'center' }}>Uploading...</div>}
-      <div style={{ marginTop: '1rem', padding: '0.75rem', background: 'var(--bg-primary)', borderRadius: 'var(--radius-sm)', fontSize: '11px', color: 'var(--text-muted)', lineHeight: '1.4' }}>
+      <input ref={fileInputRef} type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => handleFiles(e.target.files)} className="upload-hidden-input" />
+      {isUploading && <div className="upload-status">Uploading...</div>}
+      <div className="upload-tip">
        <strong>Tip:</strong> After uploading, you can remove the background using the background removal tool in the properties panel.
      </div>
    </div>
--- a/src/hooks/useBackgroundRemoval.js
+++ b/src/hooks/useBackgroundRemoval.js
@@ -1,9 +1,10 @@
 import { useState, useCallback, useRef } from 'react';
-import { AutoModel, AutoProcessor, RawImage } from '@huggingface/transformers';
+import { AutoModel, AutoProcessor, RawImage, env } from '@huggingface/transformers';

 export function useBackgroundRemoval() {
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState(0);
+  const [hasModel, setHasModel] = useState(false);
  const modelRef = useRef(null);
  const processorRef = useRef(null);

@@ -14,6 +15,10 @@ export function useBackgroundRemoval() {
    setProgress(0);

    try {
+      // Reduce ONNX Runtime Web console noise (node assignment warnings, etc.).
+      // Note: depending on ONNX Runtime build/version, some warnings may still appear.
+      env.backends.onnx.logLevel = 'error';
+
      modelRef.current = await AutoModel.from_pretrained('briaai/RMBG-1.4', {
        dtype: 'q8',
        device: navigator.gpu ? 'webgpu' : 'wasm',
@@ -26,6 +31,7 @@ export function useBackgroundRemoval() {

      setProgress(50);
      setLoading(false);
+      setHasModel(true);
      return true;
    } catch (error) {
      console.error('Failed to load background removal model:', error);
@@ -83,7 +89,7 @@ export function useBackgroundRemoval() {
  return {
    loading,
    progress,
-    hasModel: !!(modelRef.current),
+    hasModel,
    loadModel,
    removeBackground,
  };
--- a/src/hooks/useDesignEditor.js
+++ b/src/hooks/useDesignEditor.js
@@ -6,11 +6,18 @@ const DEBOUNCE_DELAY_MS = 300;
 export function useDesignEditor() {
  const [elements, setElements] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
  const historyRef = useRef([]);
  const historyIndexRef = useRef(-1);
  const historyTimerRef = useRef(null);
  const pendingChangesRef = useRef(null);

+  const syncUndoRedo = useCallback(() => {
+    setCanUndo(historyIndexRef.current > 0);
+    setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
+  }, []);
+
  const saveToHistory = useCallback((newElements) => {
    if (historyIndexRef.current < historyRef.current.length - 1) {
      historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
@@ -18,7 +25,8 @@ export function useDesignEditor() {
    historyRef.current.push(JSON.stringify(newElements));
    if (historyRef.current.length > MAX_HISTORY) { historyRef.current.shift(); }
    else { historyIndexRef.current++; }
-  }, []);
+    syncUndoRedo();
+  }, [syncUndoRedo]);

  const flushPendingChanges = useCallback(() => {
    if (pendingChangesRef.current) { saveToHistory(pendingChangesRef.current); pendingChangesRef.current = null; }
@@ -27,9 +35,6 @@ export function useDesignEditor() {

  useEffect(() => { return () => { if (historyTimerRef.current) clearTimeout(historyTimerRef.current); }; }, []);

-  const canUndo = historyIndexRef.current > 0;
-  const canRedo = historyIndexRef.current < historyRef.current.length - 1;
-
  const addElement = useCallback((element) => {
    flushPendingChanges();
    const newElement = { ...element, id: `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` };
@@ -59,14 +64,28 @@ export function useDesignEditor() {
  const commitHistory = useCallback(() => flushPendingChanges(), [flushPendingChanges]);

  const undo = useCallback(() => {
-    if (historyIndexRef.current > 0) { historyIndexRef.current--; setElements(JSON.parse(historyRef.current[historyIndexRef.current])); setSelectedId(null); }
-  }, []);
+    if (historyIndexRef.current > 0) {
+      historyIndexRef.current--;
+      setElements(JSON.parse(historyRef.current[historyIndexRef.current]));
+      setSelectedId(null);
+      syncUndoRedo();
+    }
+  }, [syncUndoRedo]);

  const redo = useCallback(() => {
-    if (historyIndexRef.current < historyRef.current.length - 1) { historyIndexRef.current++; setElements(JSON.parse(historyRef.current[historyIndexRef.current])); setSelectedId(null); }
-  }, []);
+    if (historyIndexRef.current < historyRef.current.length - 1) {
+      historyIndexRef.current++;
+      setElements(JSON.parse(historyRef.current[historyIndexRef.current]));
+      setSelectedId(null);
+      syncUndoRedo();
+    }
+  }, [syncUndoRedo]);

-  const initializeHistory = useCallback(() => { historyRef.current = [JSON.stringify([])]; historyIndexRef.current = 0; }, []);
+  const initializeHistory = useCallback(() => {
+    historyRef.current = [JSON.stringify([])];
+    historyIndexRef.current = 0;
+    syncUndoRedo();
+  }, [syncUndoRedo]);

  return { elements, selectedId, addElement, updateElement, deleteElement, selectElement, deselectAll, commitHistory, undo, redo, canUndo, canRedo, initializeHistory };
 }
--- a/src/index.css
+++ b/src/index.css
@@ -33,112 +33,357 @@
  -moz-osx-font-smoothing: grayscale;
 }

-* { box-sizing: border-box; }
-body { margin: 0; min-height: 100vh; }
-#root { min-height: 100vh; display: flex; flex-direction: column; }
-button { font-family: inherit; cursor: pointer; outline: none; }
-button:focus-visible { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent); }
-input, textarea, select { font-family: inherit; }
+* {
+  box-sizing: border-box;
+}

-.editor-layout { display: flex; flex: 1; overflow: hidden; }
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+button:focus-visible {
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent);
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+}
+
+.editor-layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}

 .sidebar {
-  width: 320px; background: var(--bg-secondary); border-right: 1px solid var(--border);
-  display: flex; flex-direction: column; overflow: hidden;
+  width: 320px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }

 .canvas-area {
-  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
-  background: var(--bg-tertiary); overflow: auto; padding: 2rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-tertiary);
+  overflow: auto;
+  padding: 2rem;
 }

 .properties-panel {
-  width: 280px; background: var(--bg-secondary); border-left: 1px solid var(--border);
-  display: flex; flex-direction: column; overflow: hidden;
+  width: 280px;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }

 .icon-btn {
-  padding: 0.5rem 0.75rem; background: var(--bg-primary); border: 1px solid var(--border);
-  border-radius: var(--radius-sm); font-size: 0.75rem; cursor: pointer; transition: all 0.2s; color: var(--text-secondary);
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--text-secondary);
+}
+
+.icon-btn:hover:not(:disabled) {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
-.icon-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: white; }
-.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

 .export-btn {
-  padding: 0.5rem 1rem; background: linear-gradient(135deg, #22c55e, #16a34a); color: white;
-  border: none; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500;
-  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.export-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.export-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
-.export-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
-.export-btn:disabled { opacity: 0.6; cursor: not-allowed; }

 .export-error {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 0.75rem 1rem; background: #fef2f2; border: 1px solid #fecaca;
-  border-radius: var(--radius-md); color: #dc2626; font-size: 0.875rem;
-  margin-bottom: 1rem; width: 100%; max-width: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius-md);
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  width: 100%;
+  max-width: 400px;
 }
-.export-error p { margin: 0; }
-.close-error { background: transparent; border: none; color: #dc2626; cursor: pointer; font-size: 1.25rem; padding: 0; line-height: 1; }

-.bg-removal-container { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
-.bg-removal-btn {
-  width: 100%; padding: 0.75rem; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white;
-  border: none; border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: all 0.2s;
-  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+.export-error p {
+  margin: 0;
+}
+
+.close-error {
+  background: transparent;
+  border: none;
+  color: #dc2626;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0;
+  line-height: 1;
+}
+
+.bg-removal-container {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.bg-removal-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, #8b5cf6, #ec4899);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.bg-removal-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.bg-removal-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.bg-removal-hint {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin: 0.5rem 0 0 0;
+  line-height: 1.4;
 }
-.bg-removal-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
-.bg-removal-btn:disabled { opacity: 0.7; cursor: not-allowed; }
-.bg-removal-hint { font-size: 0.7rem; color: var(--text-muted); margin: 0.5rem 0 0 0; line-height: 1.4; }

 .spinner-small {
-  width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
-@keyframes spin { to { transform: rotate(360deg); } }

 .filerobot-overlay {
-  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0, 0, 0, 0.8); display: flex; align-items: center;
-  justify-content: center; z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.filerobot-container {
+  width: 90%;
+  height: 90%;
+  background: #1e1e1e;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
 }
-.filerobot-container { width: 90%; height: 90%; background: #1e1e1e; border-radius: var(--radius-lg); overflow: hidden; }

 .pwa-install-banner {
-  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
-  background: var(--bg-primary); border: 1px solid var(--accent); border-radius: var(--radius-lg);
-  padding: 1rem 1.5rem; box-shadow: var(--shadow-lg); z-index: 1000;
-  display: flex; align-items: center; gap: 1rem; animation: slideUp 0.3s ease-out;
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-primary);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.5rem;
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.pwa-install-banner p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.install-btn {
+  padding: 0.5rem 1rem;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.dismiss-btn {
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  cursor: pointer;
 }
-@keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
-.pwa-install-banner p { margin: 0; font-size: 0.875rem; color: var(--text-primary); }
-.install-btn { padding: 0.5rem 1rem; background: var(--accent); color: white; border: none; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; cursor: pointer; }
-.dismiss-btn { padding: 0.5rem 1rem; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.75rem; cursor: pointer; }

 .offline-indicator {
-  position: fixed; top: 0; left: 0; right: 0;
-  background: linear-gradient(135deg, #f59e0b, #d97706); color: white;
-  padding: 0.5rem 1rem; text-align: center; font-size: 12px; font-weight: 500;
-  z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: white;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
  box-shadow: var(--shadow-md);
 }

@media (max-width: 1200px) and (min-width: 768px) {
-  .sidebar { width: 280px; }
-  .properties-panel { width: 240px; }
-  .canvas-area { padding: 1.5rem; }
+  .sidebar {
+    width: 280px;
+  }
+
+  .properties-panel {
+    width: 240px;
+  }
+
+  .canvas-area {
+    padding: 1.5rem;
+  }
 }

@media (max-width: 767px) {
-  .editor-layout { flex-direction: column; }
-  .sidebar { width: 100%; height: auto; max-height: 50vh; border-right: none; border-bottom: 1px solid var(--border); }
-  .canvas-area { padding: 1rem; width: 100%; }
-  .properties-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 40vh; }
-  .pwa-install-banner { left: 10px; right: 10px; transform: none; width: auto; flex-direction: column; text-align: center; }
+  .editor-layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    height: auto;
+    max-height: 50vh;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .canvas-area {
+    padding: 1rem;
+    width: 100%;
+  }
+
+  .properties-panel {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--border);
+    max-height: 40vh;
+  }
+
+  .pwa-install-banner {
+    left: 10px;
+    right: 10px;
+    transform: none;
+    width: auto;
+    flex-direction: column;
+    text-align: center;
+  }
 }

@media (max-width: 480px) {
-  .sidebar { max-height: 40vh; }
-  .canvas-area { padding: 0.5rem; }
-  button { min-height: 44px; }
+  .sidebar {
+    max-height: 40vh;
+  }
+
+  .canvas-area {
+    padding: 0.5rem;
+  }
+
+  button {
+    min-height: 44px;
+  }
 }
--- a/src/styles/DesignCanvas.css
+++ b/src/styles/DesignCanvas.css
@@ -0,0 +1,41 @@
+.design-canvas-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.design-canvas-border {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 300px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.5);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.design-canvas-border.selected {
+  border: 2px solid #38bdf8;
+}
+
+.design-canvas-stage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.design-canvas-info {
+  position: absolute;
+  bottom: -200px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-align: center;
+  white-space: nowrap;
+}
--- a/src/styles/LayersPanel.css
+++ b/src/styles/LayersPanel.css
@@ -0,0 +1,69 @@
+.layers-empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.layers-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+}
+
+.layers-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.layers-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.layers-item.selected {
+  background: var(--accent-bg);
+  border-color: var(--accent);
+}
+
+.layers-item-icon {
+  font-size: 14px;
+}
+
+.layers-item-name {
+  flex: 1;
+  font-size: 12px;
+  color: var(--text-primary);
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.layers-item-name.selected {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.layers-item-delete {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--text-muted);
+}
--- a/src/styles/PWAInstall.css
+++ b/src/styles/PWAInstall.css
@@ -0,0 +1,42 @@
+.pwa-install-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.pwa-update-banner {
+  position: fixed;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--accent);
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 13px;
+}
+
+.pwa-update-banner .refresh-btn {
+  padding: 0.375rem 0.75rem;
+  background: #fff;
+  color: var(--accent);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.pwa-update-banner .close-btn {
+  padding: 0.375rem 0.5rem;
+  background: transparent;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  opacity: 0.8;
+}
--- a/src/styles/PhotoPreEditor.css
+++ b/src/styles/PhotoPreEditor.css
@@ -0,0 +1,7 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
--- a/src/styles/PropertiesPanel.css
+++ b/src/styles/PropertiesPanel.css
@@ -0,0 +1,113 @@
+.properties-panel__header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.properties-panel__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.properties-panel__empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.properties-panel__body {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.properties-panel__type-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  background: var(--accent-bg);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+}
+
+.properties-panel__section {
+  margin-bottom: 1rem;
+}
+
+.properties-panel__label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+}
+
+.properties-panel__axis-label {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.properties-panel__row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.properties-panel__field {
+  flex: 1;
+}
+
+.properties-panel__input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+}
+
+.properties-panel__range {
+  width: 100%;
+}
+
+.properties-panel__color-input {
+  width: 100%;
+  height: 36px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 2px;
+}
+
+.properties-panel__edit-btn {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-md);
+  background: var(--accent-bg);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.properties-panel__delete-btn {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--error);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 1rem;
+}
--- a/src/styles/Sidebar.css
+++ b/src/styles/Sidebar.css
@@ -0,0 +1,34 @@
+.sidebar-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+}
+
+.sidebar-tab-btn {
+  flex: 1;
+  padding: 12px 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+}
+
+.sidebar-tab-btn.active {
+  font-weight: 600;
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.sidebar-tab-icon {
+  font-size: 16px;
+  margin-bottom: 2px;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}
--- a/src/styles/StickersTab.css
+++ b/src/styles/StickersTab.css
@@ -0,0 +1,47 @@
+.stickers-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.stickers-categories {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.stickers-category-btn {
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 11px;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+
+.stickers-category-btn.active {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #fff;
+}
+
+.stickers-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+}
+
+.sticker-btn {
+  aspect-ratio: 1;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--bg-primary);
+  font-size: 28px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/styles/TShirtSVG.css
+++ b/src/styles/TShirtSVG.css
@@ -0,0 +1,8 @@
+.tshirt-svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 0;
+}
--- a/src/styles/TemplatesTab.css
+++ b/src/styles/TemplatesTab.css
@@ -0,0 +1,118 @@
+.templates-hidden-input {
+  display: none;
+}
+
+.templates-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.templates-description {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+
+.templates-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.template-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s ease;
+}
+
+.template-btn.selected {
+  background: var(--bg-secondary);
+}
+
+.template-thumbnail {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-size: 24px;
+}
+
+.template-info {
+  flex: 1;
+}
+
+.template-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.template-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.template-slots-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.template-slots-section {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+}
+
+.template-slots-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.template-slots-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.template-slot-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.template-slot-icon {
+  font-size: 16px;
+}
+
+.template-slot-dimensions {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
--- a/src/styles/TextTab.css
+++ b/src/styles/TextTab.css
@@ -0,0 +1,99 @@
+.text-tab-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.text-tab-field {
+  margin-bottom: 1rem;
+}
+
+.text-tab-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+}
+
+.text-tab-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-family: var(--font-body);
+}
+
+.text-tab-textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-family: var(--font-body);
+  resize: vertical;
+}
+
+.text-tab-select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  cursor: pointer;
+  background: var(--bg-primary);
+}
+
+.text-tab-range {
+  width: 100%;
+}
+
+.text-tab-color-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.text-tab-color-input {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 2px;
+}
+
+.text-tab-color-text {
+  flex: 1;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+
+.text-tab-preview {
+  padding: 1rem;
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.text-tab-preview-text {
+  word-break: break-word;
+}
+
+.text-tab-submit {
+  width: 100%;
+  padding: 0.875rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
--- a/src/styles/UploadTab.css
+++ b/src/styles/UploadTab.css
@@ -0,0 +1,59 @@
+.upload-tab-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.upload-dropzone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-md);
+  padding: 2rem 1rem;
+  text-align: center;
+  cursor: pointer;
+  background: var(--bg-primary);
+  margin-bottom: 1rem;
+}
+
+.upload-dropzone.dragging {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.upload-dropzone-icon {
+  font-size: 32px;
+  margin-bottom: 0.5rem;
+}
+
+.upload-dropzone-text {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+
+.upload-dropzone-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.upload-hidden-input {
+  display: none;
+}
+
+.upload-status {
+  padding: 0.75rem;
+  background: var(--accent-bg);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--accent);
+  text-align: center;
+}
+
+.upload-tip {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: var(--bg-primary);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}