Add custom color picker and expand palette

assets/app.js

@@ -9,7 +9,11 @@ const colors = [
     '#7b9189', // Sage teal
     '#aa9a7a', // Wheat linen
     '#5f6d57', // Forest dusk
-    '#b07d6f'  // Terra blush
+    '#b07d6f', // Terra blush
+    '#6d5947', // Walnut
+    '#c4b08a', // Oat
+    '#7c7565', // Stone
+    '#8ca58c'  // Meadow
 ];
 const oldColors = [
     '#b56b54', // Rust/Mushroom
@@ -34,6 +38,7 @@ const importInput = document.getElementById('importFile');
 const motionBtn = document.getElementById('motionBtn');
 const colorOverlay = document.getElementById('colorOverlay');
 const colorGrid = document.getElementById('colorGrid');
+const customColorInput = document.getElementById('customColorInput');
 const saveOverlay = document.getElementById('saveOverlay');
 const saveList = document.getElementById('saveList');
 let pendingSaveSelection = [];
@@ -206,6 +211,12 @@ function openColorPicker(pId, partId) {
     colorGrid.innerHTML = colors.map(c => `
         <button class="color-swatch" style="background:${c}" onclick="setPartColor(${pId}, ${partId}, '${c}'); closeColorPicker();"></button>
     `).join('');
+    if (customColorInput) {
+        customColorInput.value = part.color || project.color || colors[0];
+        customColorInput.oninput = (e) => {
+            setPartColor(pId, partId, e.target.value);
+        };
+    }
     colorOverlay.classList.add('active');
     colorOverlay.dataset.projectId = pId;
     colorOverlay.dataset.partId = partId;

assets/style.css

@@ -163,6 +163,20 @@ h1 {
     gap: 10px;
     margin-bottom: 12px;
 }
+.color-custom {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+.color-custom input[type="color"] {
+    width: 42px;
+    height: 32px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--card-bg);
+    padding: 0;
+}
 .color-swatch {
     height: 44px;
     border-radius: 12px;
@@ -173,6 +187,15 @@ h1 {
 }
 .color-swatch:hover { transform: translateY(-1px) scale(1.02); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8); }
 .color-swatch:active { transform: scale(0.98); }
+.color-swatch.custom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: var(--text);
+    background: linear-gradient(45deg, #f4ead8, #d6cabc);
+    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);
+}
 
 .save-overlay {
     position: fixed;

index.html

@@ -52,6 +52,10 @@
     <div class="color-modal">
         <h3 class="color-title">Pick a color</h3>
         <div class="color-grid" id="colorGrid"></div>
+        <div class="color-custom">
+            <label for="customColorInput">Custom:</label>
+            <input type="color" id="customColorInput" />
+        </div>
         <button class="modal-btn btn-cancel" onclick="closeColorPicker()">Close</button>
     </div>
 </div>