Final Production Build: Symmetry Fix & Enhanced Copy Support

Author: PIYUSH-MISHRA-00

website/app.js

@@ -217,13 +217,15 @@ document.addEventListener('DOMContentLoaded', () => {
                 const originalText = text.textContent;
 
                 // Success State
-                icon.setAttribute('data-lucide', 'check');
+                const currentIcon = copyBtn.querySelector('[data-lucide]');
+                currentIcon.setAttribute('data-lucide', 'check');
                 text.textContent = 'Copied!';
                 copyBtn.classList.add('success');
                 if (window.lucide) lucide.createIcons();
 
                 setTimeout(() => {
-                    icon.setAttribute('data-lucide', originalIcon);
+                    const newIcon = copyBtn.querySelector('[data-lucide]');
+                    newIcon.setAttribute('data-lucide', originalIcon);
                     text.textContent = originalText;
                     copyBtn.classList.remove('success');
                     if (window.lucide) lucide.createIcons();

website/index.html

@@ -103,7 +103,7 @@ <h1>Let's Build the <span class="cyan-text">Future</span></h1>
                         </div>
                     </div>
 
-                    <div class="output-area" style="margin-top: 20px;">
+                    <div class="output-area">
                         <div class="module-header">
                             <span>Weave Result</span>
                             <button id="copyBtn" class="copy-pill">

website/style.css

@@ -173,7 +173,7 @@ h1, h2, h3, .brand-name {
 
 /* Forms */
 .field-group {
-    margin-bottom: 24px;
+    margin-bottom: 32px;
 }
 
 .field-group label {
@@ -207,7 +207,7 @@ textarea { min-height: 120px; resize: none; }
 .btn-group {
     display: flex;
     gap: 12px;
-    margin-bottom: 24px;
+    margin-bottom: 0; /* Margin handled by output-area top margin */
 }
 
 .btn {
@@ -239,18 +239,13 @@ textarea { min-height: 120px; resize: none; }
     border-color: var(--text-secondary);
 }
 
-/* Copy Pill (Portfolio Style) */
-.copy-pill {
-    background: var(--card-bg);
+/* Results Area */
+.output-area {
+    margin-top: 32px;
+    background: var(--input-bg);
     border: 1px solid var(--border);
-    padding: 8px 16px;
-    border-radius: 99px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    cursor: pointer;
-    transition: all 0.2s;
-    color: var(--text-primary);
+    border-radius: 20px;
+    padding: 24px;
 }
 
 .copy-pill:hover {