fix: accumulate multiple files across uploads, add remove × button

frontend/index.html

@@ -490,7 +490,7 @@ input[type="range"]::-webkit-slider-thumb {
         <div class="drop-text">
           <strong>Drop model file here</strong>
           or click to browse
-          <small>.xlsx only · one file per species</small>
+          <small>.xlsx only · one per species, select multiple</small>
         </div>
       </div>
       <div class="file-chips" id="chipsModel"></div>
@@ -509,7 +509,7 @@ input[type="range"]::-webkit-slider-thumb {
         <div class="drop-text">
           <strong>Drop mapping file here</strong>
           or click to browse
-          <small>.xlsx only · one file per species, same order as model</small>
+          <small>.xlsx only · one per species, select multiple</small>
         </div>
       </div>
       <div class="file-chips" id="chipsMapping"></div>
@@ -616,15 +616,31 @@ function checkPrefixMatch() {
 }
 
 function handleFiles(type, files) {
-  state[type] = Array.from(files);
+  const newFiles = Array.from(files);
+  // Accumulate — skip duplicates by name
+  newFiles.forEach(f => {
+    if (!state[type].find(e => e.name === f.name)) {
+      state[type].push(f);
+    }
+  });
   const key = { model: 'chipsModel', mapping: 'chipsMapping', expr: 'chipsExpr' }[type];
   const num  = { model: 'num1', mapping: 'num2', expr: 'num3' }[type];
   document.getElementById(key).innerHTML =
-    state[type].map(f => `<div class="chip">✓ ${f.name}</div>`).join('');
+    state[type].map(f => `<div class="chip">✓ ${f.name} <span style="cursor:pointer;margin-left:3px" onclick="removeFile('${type}','${f.name}')">×</span></div>`).join('');
   document.getElementById(num).classList.add('done');
   checkPrefixMatch();
 }
 
+function removeFile(type, name) {
+  state[type] = state[type].filter(f => f.name !== name);
+  const key = { model: 'chipsModel', mapping: 'chipsMapping', expr: 'chipsExpr' }[type];
+  const num  = { model: 'num1', mapping: 'num2', expr: 'num3' }[type];
+  document.getElementById(key).innerHTML =
+    state[type].map(f => `<div class="chip">✓ ${f.name} <span style="cursor:pointer;margin-left:3px" onclick="removeFile('${type}','${f.name}')">×</span></div>`).join('');
+  if (!state[type].length) document.getElementById(num).classList.remove('done');
+  checkPrefixMatch();
+}
+
 ['dropModel','dropMapping','dropExpr'].forEach(id => {
   const el = document.getElementById(id);
   el.addEventListener('dragover',  e => { e.preventDefault(); el.style.borderColor = 'var(--teal)'; });