simplify upload UI: remove numbered boxes, generic drop text, remove file format hints, fix col-label font size

frontend/index.html

@@ -464,16 +464,15 @@ input[type="range"]::-webkit-slider-thumb {
     <!-- Top-right: Step 1 -->
     <div class="col-card">
       <div class="col-label">Step 1</div>
-      <div class="step-num" id="num1">1</div>
       <div class="step-title">Prefixed model files</div>
       <div class="step-desc">One .xlsx per species — output from Step 4 of the Metabolic Community Pipeline.</div>
       <div class="drop-zone" id="dropModel">
         <input type="file" id="fileModel" accept=".xlsx" multiple onchange="handleFiles('model', this.files)"/>
         <span class="drop-icon">📄</span>
         <div class="drop-text">
-          <strong>Drop model file here</strong>
+          <strong>Drop file here</strong>
           or click to browse
-          <small>.xlsx only · one per species, select multiple</small>
+          
         </div>
       </div>
       <div class="file-chips" id="chipsModel"></div>
@@ -483,16 +482,15 @@ input[type="range"]::-webkit-slider-thumb {
     <!-- Bottom-left: Step 2 -->
     <div class="col-card">
       <div class="col-label">Step 2</div>
-      <div class="step-num" id="num2">2</div>
       <div class="step-title">Identifier mapping files</div>
       <div class="step-desc">One .xlsx per species, in the same order as model files — output from Step 3 of the Pipeline.</div>
       <div class="drop-zone" id="dropMapping">
         <input type="file" id="fileMapping" accept=".xlsx" multiple onchange="handleFiles('mapping', this.files)"/>
         <span class="drop-icon">📄</span>
         <div class="drop-text">
-          <strong>Drop mapping file here</strong>
+          <strong>Drop file here</strong>
           or click to browse
-          <small>.xlsx only · one per species, select multiple</small>
+          
         </div>
       </div>
       <div class="file-chips" id="chipsMapping"></div>
@@ -503,16 +501,15 @@ input[type="range"]::-webkit-slider-thumb {
     <!-- Bottom-right: Step 3 -->
     <div class="col-card">
       <div class="col-label">Step 3</div>
-      <div class="step-num" id="num3">3</div>
       <div class="step-title">Combined gene expression CSV</div>
       <div class="step-desc">Normalised gene expression counts for all species and samples from your metatranscriptomics data.</div>
       <div class="drop-zone" id="dropExpr">
         <input type="file" id="fileExpr" accept=".csv" onchange="handleFiles('expr', this.files)"/>
         <span class="drop-icon">📄</span>
         <div class="drop-text">
-          <strong>Drop gene expression CSV here</strong>
+          <strong>Drop file here</strong>
           or click to browse
-          <small>.csv only · single file</small>
+          
         </div>
       </div>
       <div class="file-chips" id="chipsExpr"></div>
@@ -601,7 +598,7 @@ function handleFiles(type, files) {
   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('');
-  document.getElementById(num).classList.add('done');
+  const el = document.getElementById(num); if (el) el.classList.add('done');
   checkPrefixMatch();
 }