redesign: 2x2 single-page layout, copyright top, 16px font, FEA→MeMo

frontend/index.html

@@ -7,169 +7,171 @@
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
 <style>
 :root {
-  --bg:       #EEF1F8;
-  --surface:  #FFFFFF;
-  --border:   #D8DDED;
-  --ink:      #0A0E1F;
-  --ink2:     #4A5270;
-  --ink3:     #8A91AD;
-  --teal:     #4F46E5;
-  --teal-l:   #EFEEFD;
-  --teal-d:   #3730A3;
-  --coral:    #7C3AED;
-  --coral-l:  #F5F3FF;
-  --r:        10px;
-  --shadow:   0 1px 4px rgba(10,14,31,0.07);
-  --shadow-md:0 4px 16px rgba(10,14,31,0.12);
+  --bg:        #EEF1F8;
+  --surface:   #FFFFFF;
+  --border:    #D8DDED;
+  --ink:       #0A0E1F;
+  --ink2:      #4A5270;
+  --ink3:      #8A91AD;
+  --teal:      #4F46E5;
+  --teal-l:    #EFEEFD;
+  --teal-d:    #3730A3;
+  --coral:     #7C3AED;
+  --coral-l:   #F5F3FF;
+  --r:         10px;
+  --shadow:    0 1px 4px rgba(10,14,31,0.07);
+  --shadow-md: 0 4px 16px rgba(10,14,31,0.12);
 }
-
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
+html, body { height: 100%; }
 body {
   background: var(--bg);
   color: var(--ink);
   font-family: 'DM Sans', -apple-system, sans-serif;
   font-size: 16px;
-  line-height: 1.65;
-  min-height: 100vh;
+  line-height: 1.6;
 }
 
-/* ── Page ───────────────────────────── */
 .page {
-  max-width: 700px;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 4rem 1.5rem 6rem;
+  padding: 1.25rem 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
-/* ── Header ─────────────────────────── */
-header {
-  margin-bottom: 3rem;
-  position: relative;
+/* Copyright bar */
+.copyright-bar {
+  font-size: 12px;
+  color: var(--ink3);
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
 }
+.copyright-bar a { color: var(--ink2); text-decoration: none; }
+.copyright-bar a:hover { color: var(--ink); }
 
+/* Header */
+header {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 1.25rem;
+  flex-wrap: wrap;
+}
+.header-left { flex: 0 0 auto; }
 .header-tag {
-  display: inline-block;
-  font-family: 'DM Sans', sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--coral);
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
+  display: block;
 }
-
 header h1 {
   font-family: 'Playfair Display', Georgia, serif;
-  font-size: 3rem;
+  font-size: 2.2rem;
   font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.01em;
+  line-height: 1.15;
   color: var(--ink);
-  margin-bottom: 0.3rem;
 }
-
 header h1 em {
   font-style: italic;
   font-weight: 400;
   color: var(--teal);
 }
-
+.header-rule {
+  width: 32px; height: 3px;
+  background: var(--coral);
+  border-radius: 2px;
+  margin-top: 0.4rem;
+}
 .header-sub {
-  font-size: 14px;
+  font-size: 16px;
   color: var(--ink2);
-  line-height: 1.7;
-  max-width: 480px;
-  margin-top: 0.75rem;
+  line-height: 1.6;
+  flex: 1;
+  min-width: 180px;
 }
 
-.header-rule {
-  width: 48px;
-  height: 3px;
-  background: var(--coral);
-  border-radius: 2px;
-  margin-top: 1.5rem;
+/* 2x2 grid */
+.main-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.25rem;
+  flex: 1;
 }
 
-/* ── Section title ───────────────────── */
-.section-label {
-  font-size: 10px;
+/* Column cards */
+.col-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 1.25rem;
+  box-shadow: var(--shadow);
+}
+.col-label {
+  font-size: 11px;
   font-weight: 600;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--ink3);
-  margin-bottom: 1.5rem;
-  margin-top: 2.5rem;
+  margin-bottom: 0.85rem;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
-
-.section-label::after {
+.col-label::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--border);
 }
 
-/* ── Optional block ──────────────────── */
-.opt-block {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--r);
-  padding: 1.25rem 1.5rem;
-  box-shadow: var(--shadow);
-  margin-bottom: 2.5rem;
-  display: flex;
-  gap: 1.25rem;
-  align-items: flex-start;
-}
-
+/* Optional block */
 .opt-tag {
   background: var(--coral-l);
   color: var(--coral);
   border: 1px solid #E8C4B3;
   font-size: 9px;
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 3px 7px;
   border-radius: 4px;
-  margin-top: 3px;
-  white-space: nowrap;
+  display: inline-block;
+  margin-bottom: 0.5rem;
 }
-
-.opt-inner { flex: 1; }
-
 .opt-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);
-  margin-bottom: 0.15rem;
+  margin-bottom: 0.25rem;
 }
-
 .opt-desc {
-  font-size: 14px;
+  font-size: 16px;
   color: var(--ink2);
   margin-bottom: 0.85rem;
+  line-height: 1.5;
 }
 
-/* ── Slider ──────────────────────────── */
+/* Slider */
 .slider-row {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
-
 .slider-val {
   font-family: 'Playfair Display', serif;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   font-weight: 700;
   color: var(--teal);
   min-width: 58px;
   text-align: right;
   letter-spacing: -0.02em;
 }
-
 input[type="range"] {
   flex: 1;
   -webkit-appearance: none;
@@ -179,7 +181,6 @@ input[type="range"] {
   outline: none;
   cursor: pointer;
 }
-
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 18px; height: 18px;
@@ -188,157 +189,89 @@ input[type="range"]::-webkit-slider-thumb {
   cursor: pointer;
   border: 3px solid var(--surface);
   box-shadow: 0 0 0 2px var(--teal);
-  transition: box-shadow 0.15s;
-}
-
-input[type="range"]::-webkit-slider-thumb:hover {
-  box-shadow: 0 0 0 4px rgba(45,106,106,0.2);
 }
-
 .slider-labels {
   display: flex;
   justify-content: space-between;
-  font-size: 11px;
+  font-size: 12px;
   color: var(--ink3);
   margin-top: 0.4rem;
 }
-
 .slider-note {
-  font-size: 11px;
+  font-size: 13px;
   color: var(--ink3);
   margin-top: 0.5rem;
 }
 
-/* ── Step row ────────────────────────── */
-.step {
-  display: flex;
-  gap: 1.25rem;
-  margin-bottom: 1.25rem;
-  animation: fadeUp 0.35s ease both;
-}
-
-.step:nth-child(1) { animation-delay: 0.04s; }
-.step:nth-child(2) { animation-delay: 0.08s; }
-.step:nth-child(3) { animation-delay: 0.12s; }
-.step:nth-child(4) { animation-delay: 0.16s; }
-
+/* Steps */
 .step-num {
-  width: 30px; height: 30px;
-  min-width: 30px;
+  width: 28px; height: 28px;
   border-radius: 7px;
   background: transparent;
   border: 2px solid var(--ink);
   color: var(--ink);
   font-size: 13px;
   font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 2px;
+  display: inline-flex; align-items: center; justify-content: center;
   font-family: 'DM Sans', sans-serif;
+  margin-bottom: 0.5rem;
   transition: all 0.2s;
 }
-
 .step-num.done {
   background: var(--teal);
   border-color: var(--teal);
   color: #fff;
 }
-
-.step-content { flex: 1; }
-
 .step-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 0.2rem;
 }
-
 .step-desc {
-  font-size: 14px;
+  font-size: 16px;
   color: var(--ink2);
   margin-bottom: 0.75rem;
   line-height: 1.5;
 }
 
-/* ── Card ────────────────────────────── */
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--r);
-  padding: 1.1rem 1.25rem;
-  box-shadow: var(--shadow);
-}
-
-/* ── Drop zone ───────────────────────── */
+/* Drop zone */
 .drop-zone {
   border: 1.5px dashed var(--border);
   border-radius: 8px;
-  padding: 2rem 1.5rem;
+  padding: 1.5rem 1rem;
   text-align: center;
   cursor: pointer;
   position: relative;
   transition: all 0.15s;
   background: var(--bg);
 }
-
 .drop-zone:hover {
   border-color: var(--teal);
   background: var(--teal-l);
 }
-
 .drop-zone input[type="file"] {
   position: absolute; inset: 0;
   opacity: 0; cursor: pointer;
   width: 100%; height: 100%;
 }
+.drop-icon { font-size: 1.4rem; margin-bottom: 0.3rem; display: block; }
+.drop-text { font-size: 16px; color: var(--ink2); line-height: 1.5; }
+.drop-text strong { color: var(--ink); display: block; font-weight: 600; }
+.drop-text small { color: var(--ink3); font-size: 13px; margin-top: 2px; display: block; }
 
-.drop-icon {
-  font-size: 1.5rem;
-  margin-bottom: 0.4rem;
-  display: block;
-}
-
-.drop-text {
-  font-size: 15px;
-  color: var(--ink2);
-  line-height: 1.6;
-}
-
-.drop-text strong {
-  color: var(--ink);
-  display: block;
-  font-weight: 600;
-}
-
-.drop-text small {
-  color: var(--ink3);
-  font-size: 11px;
-  margin-top: 2px;
-  display: block;
-}
-
-/* ── File chips ──────────────────────── */
-.file-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-top: 0.65rem;
-}
-
+/* File chips */
+.file-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
 .chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
+  display: inline-flex; align-items: center; gap: 5px;
   background: var(--teal-l);
   border: 1px solid #B2D4D4;
   color: var(--teal-d);
   padding: 3px 10px;
   border-radius: 100px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
 }
-
 .mismatch-warning {
   display: flex;
   align-items: flex-start;
@@ -348,19 +281,27 @@ input[type="range"]::-webkit-slider-thumb:hover {
   border-radius: 8px;
   padding: 0.75rem 1rem;
   margin-top: 0.75rem;
-  font-size: 13px;
+  font-size: 14px;
   color: #9A3412;
   line-height: 1.5;
 }
 
-/* ── Run section ─────────────────────��─ */
-.run-section {
-  margin-top: 2.5rem;
+/* Bottom bar */
+.bottom-bar {
+  margin-top: 1.25rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.25rem;
+  align-items: center;
+}
+.run-col {
+  display: flex;
+  justify-content: center;
+  grid-column: 1 / -1;
 }
-
 .btn-run {
-  width: 100%;
-  padding: 1rem 1.25rem;
+  width: 40%;
+  padding: 0.65rem 1.25rem;
   background: var(--ink);
   color: var(--bg);
   border: none;
@@ -370,44 +311,33 @@ input[type="range"]::-webkit-slider-thumb:hover {
   font-weight: 600;
   cursor: pointer;
   transition: all 0.15s;
-  letter-spacing: 0.01em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
 }
-
 .btn-run:hover:not(:disabled) {
   background: var(--teal);
   box-shadow: var(--shadow-md);
   transform: translateY(-1px);
 }
+.btn-run:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
 
-.btn-run:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  transform: none;
+/* Progress */
+.progress-section {
+  display: none;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 0.9rem 1.25rem;
+  box-shadow: var(--shadow);
+  flex-direction: column;
+  grid-column: 1 / -1;
 }
-
-/* ── Progress ────────────────────────── */
 .progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 13px;
-  margin-bottom: 0.5rem;
+  display: flex; justify-content: space-between; align-items: center;
+  font-size: 16px; margin-bottom: 0.5rem;
 }
-
 .progress-label { font-weight: 600; color: var(--ink); }
 .progress-pct   { color: var(--ink2); font-variant-numeric: tabular-nums; }
-
-.progress-track {
-  height: 5px;
-  background: var(--border);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
+.progress-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
 .progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--teal), #4A9F9F);
@@ -415,89 +345,66 @@ input[type="range"]::-webkit-slider-thumb:hover {
   transition: width 0.45s ease;
   width: 0%;
 }
-
 .log-box { display: none; }
 
-/* ── Results ─────────────────────────── */
-.stats-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.65rem;
-  margin-bottom: 1rem;
+/* Results */
+.results-section {
+  display: none;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 0.9rem 1.25rem;
+  box-shadow: var(--shadow);
+  align-items: center;
+  gap: 1.25rem;
+  grid-column: 1 / -1;
 }
-
+.stats-row { display: flex; gap: 1rem; }
 .stat-box {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 8px;
-  padding: 1rem 1.1rem;
+  padding: 0.5rem 1rem;
 }
-
 .stat-val {
   font-family: 'Playfair Display', serif;
-  font-size: 2rem;
+  font-size: 1.6rem;
   font-weight: 700;
   color: var(--ink);
   line-height: 1;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.15rem;
   letter-spacing: -0.02em;
 }
-
 .stat-label {
-  font-size: 11px;
+  font-size: 12px;
   color: var(--ink2);
   font-weight: 500;
   text-transform: uppercase;
-  letter-spacing: 0.07em;
+  letter-spacing: 0.05em;
 }
-
 .btn-download {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding: 0.9rem 1.25rem;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 0.7rem 1.25rem;
   background: var(--teal-l);
   color: var(--teal-d);
   border: 1.5px solid var(--teal);
   border-radius: var(--r);
   font-family: 'DM Sans', sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  text-decoration: none;
+  font-size: 16px; font-weight: 600;
+  cursor: pointer; text-decoration: none; white-space: nowrap;
   transition: all 0.15s;
 }
-
 .btn-download:hover:not(:disabled) {
   background: var(--teal);
   color: white;
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
+.btn-download:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
 
-.btn-download:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  transform: none;
-}
-
-/* Download progress bar */
-.download-progress-wrap {
-  margin-top: 0.65rem;
-  display: none;
-}
-
+.download-progress-wrap { margin-top: 0.65rem; display: none; }
 .download-progress-wrap.show { display: block; }
-
-.download-progress-track {
-  height: 4px;
-  background: var(--border);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
+.download-progress-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
 .download-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--teal), #6B8FCF);
@@ -505,47 +412,19 @@ input[type="range"]::-webkit-slider-thumb:hover {
   width: 0%;
   transition: width 0.3s ease;
 }
-
-.download-progress-label {
-  font-size: 12px;
-  color: var(--ink2);
-  margin-top: 0.3rem;
-  text-align: center;
-}
-
+.download-progress-label { font-size: 13px; color: var(--ink2); margin-top: 0.3rem; text-align: center; }
 @keyframes indeterminate {
   0%   { left: -40%; width: 40%; }
   60%  { left: 100%; width: 40%; }
   100% { left: 100%; width: 40%; }
 }
-
 .download-progress-fill.indeterminate {
   position: relative;
   width: 40%;
   animation: indeterminate 1.4s ease infinite;
 }
 
-/* ── Footer ──────────────────────────── */
-footer {
-  margin-top: 4rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--border);
-  font-size: 11px;
-  color: var(--ink3);
-  line-height: 1.9;
-}
-
-footer a { color: var(--ink2); text-decoration: none; }
-footer a:hover { color: var(--ink); }
-
-/* ── Animations ──────────────────────── */
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0);    }
-}
-
 .hidden { display: none !important; }
-
 ::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@@ -554,18 +433,30 @@ footer a:hover { color: var(--ink); }
 <body>
 <div class="page">
 
+  <!-- Copyright bar -->
+  <div class="copyright-bar">
+    © 2026 A*STAR Bioinformatics Institute &nbsp;·&nbsp;
+    Free for academic research and education &nbsp;·&nbsp;
+    Commercial licensing: <a href="mailto:yeohc@a-star.edu.sg">yeohc@a-star.edu.sg</a>
+  </div>
+
   <!-- Header -->
   <header>
-    <div class="header-tag">MeMo Modelling · A*STAR</div>
-    <h1>Gene Expression<br><em>Bootstrapper</em></h1>
-    <div class="header-rule"></div>
-    <p class="header-sub">Fills in missing expression values for unmapped genes by sampling from the same metabolic subsystem. Output serves as input for FEA.</p>
+    <div class="header-left">
+      <span class="header-tag">MeMo Modelling · A*STAR</span>
+      <h1>Gene Expression <em>Bootstrapper</em></h1>
+      <div class="header-rule"></div>
+    </div>
+    <p class="header-sub">Fills in missing expression values for unmapped genes by sampling from the same metabolic subsystem. Output serves as input for MeMo.</p>
   </header>
 
-  <!-- Optional: batch count -->
-  <div class="opt-block">
-    <div class="opt-tag">Optional</div>
-    <div class="opt-inner">
+  <!-- 2x2 grid -->
+  <div class="main-grid">
+
+    <!-- Top-left: Optional -->
+    <div class="col-card">
+      <div class="col-label">Parameters</div>
+      <div class="opt-tag">Optional</div>
       <div class="opt-title">Bootstrap iterations</div>
       <div class="opt-desc">Number of output CSV files to generate. Default of 1,000 is recommended.</div>
       <div class="slider-row">
@@ -576,86 +467,71 @@ footer a:hover { color: var(--ink); }
       <div class="slider-labels"><span>100</span><span>5,000</span></div>
       <div class="slider-note">Higher values = more robust results, longer processing time.</div>
     </div>
-  </div>
 
-  <!-- Upload steps -->
-  <div class="section-label">Upload your files</div>
-
-  <!-- Step 1 -->
-  <div class="step">
-    <div class="step-num" id="num1">1</div>
-    <div class="step-content">
+    <!-- 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="card">
-        <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>
-            or click to browse
-            <small>.xlsx only · one file per species</small>
-          </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>
+          or click to browse
+          <small>.xlsx only · one file per species</small>
         </div>
-        <div class="file-chips" id="chipsModel"></div>
       </div>
+      <div class="file-chips" id="chipsModel"></div>
     </div>
-  </div>
 
-  <!-- Step 2 -->
-  <div class="step">
-    <div class="step-num" id="num2">2</div>
-    <div class="step-content">
+    <!-- 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="card">
-        <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>
-            or click to browse
-            <small>.xlsx only · one file per species, same order as model</small>
-          </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>
+          or click to browse
+          <small>.xlsx only · one file per species, same order as model</small>
         </div>
-        <div class="file-chips" id="chipsMapping"></div>
-        <div class="mismatch-warning hidden" id="prefixWarning"></div>
       </div>
+      <div class="file-chips" id="chipsMapping"></div>
+      <div class="mismatch-warning hidden" id="prefixWarning"></div>
     </div>
-  </div>
 
-  <!-- Step 3 -->
-  <div class="step">
-    <div class="step-num" id="num3">3</div>
-    <div class="step-content">
+    <!-- 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="card">
-        <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>
-            or click to browse
-            <small>.csv only · single file</small>
-          </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>
+          or click to browse
+          <small>.csv only · single file</small>
         </div>
-        <div class="file-chips" id="chipsExpr"></div>
       </div>
+      <div class="file-chips" id="chipsExpr"></div>
     </div>
-  </div>
 
-  <!-- Run -->
-  <div class="run-section">
-    <button class="btn-run" id="runBtn" onclick="startJob()">
-      Generate Bootstrapped Files
-    </button>
-  </div>
+  </div><!-- /main-grid -->
+
+  <!-- Bottom bar -->
+  <div class="bottom-bar">
+    <div class="run-col">
+      <button class="btn-run" id="runBtn" onclick="startJob()">Generate Bootstrapped Files</button>
+    </div>
 
-  <!-- Progress -->
-  <div class="hidden" id="progressSection">
-    <div class="section-label" style="margin-top:2.5rem">Processing</div>
-    <div class="card">
+    <div class="progress-section hidden" id="progressSection">
       <div class="progress-header">
         <span class="progress-label" id="progressLabel">Starting…</span>
         <span class="progress-pct" id="progressPct">0%</span>
@@ -665,12 +541,8 @@ footer a:hover { color: var(--ink); }
       </div>
       <div class="log-box" id="logBox"></div>
     </div>
-  </div>
 
-  <!-- Results -->
-  <div class="hidden" id="resultsSection">
-    <div class="section-label" style="margin-top:2.5rem">Results</div>
-    <div class="card">
+    <div class="results-section hidden" id="resultsSection">
       <div class="stats-row">
         <div class="stat-box">
           <div class="stat-val" id="statFiles">—</div>
@@ -693,14 +565,7 @@ footer a:hover { color: var(--ink); }
     </div>
   </div>
 
-  <footer>
-    © 2026 A*STAR Bioinformatics Institute &nbsp;·&nbsp;
-    Free for academic research and education &nbsp;·&nbsp;
-    Commercial licensing: <a href="mailto:yeohc@a-star.edu.sg">yeohc@a-star.edu.sg</a>
-  </footer>
-
 </div>
-
 <script>
 const state = { model: [], mapping: [], expr: [] };
 
@@ -764,20 +629,19 @@ async function startJob() {
 
   document.getElementById('runBtn').disabled = true;
   document.getElementById('progressSection').classList.remove('hidden');
+  document.getElementById('progressSection').style.display = 'flex';
   document.getElementById('resultsSection').classList.add('hidden');
   document.getElementById('logBox').innerHTML = '';
   document.getElementById('progressBar').style.width = '0%';
   document.getElementById('progressPct').textContent = '0%';
   document.getElementById('progressLabel').textContent = 'Starting…';
 
-  // Build form data
   const fd = new FormData();
   state.model.forEach(f   => fd.append('model_files',   f));
   state.mapping.forEach(f => fd.append('mapping_files', f));
   fd.append('expr_file',   state.expr[0]);
   fd.append('batch_count', document.getElementById('batchSlider').value);
 
-  // Submit job
   let jobId;
   try {
     const res = await fetch('/api/process', { method: 'POST', body: fd });
@@ -791,18 +655,14 @@ async function startJob() {
     return;
   }
 
-  // Stream progress via SSE
   const sse = new EventSource(`/api/progress/${jobId}`);
 
   sse.onmessage = e => {
     const d = JSON.parse(e.data);
-
     if (d.message) appendLog(d.message, d.type || '');
-
     if (d.progress !== undefined) {
       document.getElementById('progressBar').style.width = d.progress + '%';
       document.getElementById('progressPct').textContent = d.progress + '%';
-      // Show only clean status labels, never raw backend output
       const cleanLabels = ['Starting…', 'Files received. Starting bootstrap…', 'Writing output files…', 'Compressing output files…', 'Processing…'];
       if (d.label && cleanLabels.some(l => d.label.startsWith(l.split('…')[0]))) {
         document.getElementById('progressLabel').textContent = d.label;
@@ -810,20 +670,16 @@ async function startJob() {
         document.getElementById('progressLabel').textContent = 'Processing…';
       }
     }
-
     if (d.status === 'done') {
       sse.close();
-      document.getElementById('statFiles').textContent    = (d.file_count   || '—').toLocaleString();
-      document.getElementById('statSpecies').textContent  =  d.species_count || '—';
+      document.getElementById('statFiles').textContent   = (d.file_count    || '—').toLocaleString();
+      document.getElementById('statSpecies').textContent =  d.species_count || '—';
       document.getElementById('downloadBtn').dataset.jobId = jobId;
+      document.getElementById('progressSection').classList.add('hidden');
       document.getElementById('resultsSection').classList.remove('hidden');
+      document.getElementById('resultsSection').style.display = 'flex';
       document.getElementById('runBtn').disabled = false;
-      // Auto-scroll to download button
-      setTimeout(() => {
-        document.getElementById('downloadBtn').scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }, 300);
     }
-
     if (d.status === 'error') {
       sse.close();
       appendLog('Fatal error: ' + d.error, 'err');
@@ -842,10 +698,10 @@ async function triggerDownload() {
   const jobId = document.getElementById('downloadBtn').dataset.jobId;
   if (!jobId) return;
 
-  const btn       = document.getElementById('downloadBtn');
-  const wrap      = document.getElementById('dlProgressWrap');
-  const fill      = document.getElementById('dlProgressFill');
-  const label     = document.getElementById('dlProgressLabel');
+  const btn   = document.getElementById('downloadBtn');
+  const wrap  = document.getElementById('dlProgressWrap');
+  const fill  = document.getElementById('dlProgressFill');
+  const label = document.getElementById('dlProgressLabel');
 
   btn.disabled    = true;
   btn.textContent = 'Preparing download…';
@@ -861,13 +717,11 @@ async function triggerDownload() {
     let blob;
 
     if (contentLength) {
-      // Real progress from Content-Length
       const total = parseInt(contentLength);
       const chunks = [];
       let received = 0;
       const reader = res.body.getReader();
       fill.classList.remove('indeterminate');
-
       while (true) {
         const { done, value } = await reader.read();
         if (done) break;
@@ -879,7 +733,6 @@ async function triggerDownload() {
       }
       blob = new Blob(chunks, { type: 'application/zip' });
     } else {
-      // No content-length — just show spinner until done
       label.textContent = 'Downloading…';
       blob = await res.blob();
     }
@@ -890,10 +743,8 @@ async function triggerDownload() {
 
     const url = URL.createObjectURL(blob);
     const a   = document.createElement('a');
-    a.href     = url;
-    a.download = 'geneExpr_bootstrapped.zip';
-    document.body.appendChild(a);
-    a.click();
+    a.href = url; a.download = 'geneExpr_bootstrapped.zip';
+    document.body.appendChild(a); a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);