Make import export panel collapsible

index.html

@@ -47,11 +47,15 @@
         <button id="resetBuild" type="button" class="secondary">Reset current build</button>
       </section>
 
-      <section class="card import-export" aria-labelledby="import-export-heading">
+      <details class="card import-export">
-        <div>
+        <summary>
-          <h2 id="import-export-heading">Import / Export</h2>
+          <span>
+            <strong id="import-export-heading">Import / Export</strong>
+            <small>Back up, share, or restore a build as JSON.</small>
+          </span>
+        </summary>
+        <div class="import-export-body" aria-labelledby="import-export-heading">
           <p>Back up or share the current build as JSON. Paste JSON directly or upload a saved file to import.</p>
-        </div>
           <div class="io-actions">
             <button id="copyExport" type="button">Generate / Copy JSON</button>
             <button id="downloadExport" type="button" class="secondary">Download JSON</button>
@@ -63,7 +67,8 @@
           </div>
           <textarea id="jsonTransfer" rows="8" spellcheck="false" placeholder="Generated export JSON appears here. You can also paste JSON here and click Import pasted JSON."></textarea>
           <p id="importExportStatus" class="status" role="status"></p>
-      </section>
+        </div>
+      </details>
 
       <section class="summary-grid" aria-label="Build summary">
         <article class="metric"><span>Total damage base</span><strong id="totalDamage">0</strong></article>

styles.css

@@ -115,9 +115,31 @@ h3 { margin-bottom: 0; }
 
 .import-export {
   display: grid;
-  gap: 0.9rem;
   margin-bottom: 1rem;
 }
+.import-export summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.import-export summary::-webkit-details-marker { display: none; }
+.import-export summary::after {
+  content: "▾";
+  color: var(--accent);
+  font-size: 1.1rem;
+  transition: transform 0.18s ease;
+}
+.import-export:not([open]) summary::after { transform: rotate(-90deg); }
+.import-export summary strong { display: block; font-size: 1.15rem; }
+.import-export summary small { display: block; color: var(--muted); margin-top: 0.2rem; }
+.import-export-body {
+  display: grid;
+  gap: 0.9rem;
+  margin-top: 0.9rem;
+}
 .import-export p { color: var(--muted); margin-bottom: 0; }
 .io-actions {
   display: flex;