/* ══════════════════════════════════════════════════════
   Nature palette
   Primary #1E3A5F  Accent #2FA4A9  BG #F7F9FB
══════════════════════════════════════════════════════ */
:root{
  --p:   #1E3A5F; --p2:  #2a5080;
  --a:   #2FA4A9; --a2:  #1f7d82; --as: #D6F0F1;
  --bg:  #F7F9FB; --sur: #FFFFFF;
  --bd:  #E3E8EF; --bd2: #F0F4F8;
  --t1:  #1A1D21; --t2:  #5B6470; --t3: #9AA2AB;
  --ok:  #2E7D32; --oks: #E8F5E9;
  --err: #C62828; --ers: #FFEBEE;
  --r:   7px; --r2: 5px;
  --sh:  0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh2: 0 4px 14px rgba(0,0,0,.09);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--t1);line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--a);text-decoration:none}
button{cursor:pointer;font-family:inherit;font-size:13px}
input,select{font-family:inherit;font-size:12px}

.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* ── HEADER ──────────────────────────────────────────── */
.site-header{background:var(--sur);border-bottom:1px solid var(--bd);
  position:sticky;top:0;z-index:200;box-shadow:var(--sh)}
.hdr-inner{max-width:1280px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;gap:20px;height:56px}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-mark{width:32px;height:32px;border-radius:7px;
  background:linear-gradient(135deg,var(--a),var(--p));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12px;letter-spacing:.3px}
.logo-mark.sm{width:26px;height:26px;font-size:10px}
.logo-name{font-weight:600;font-size:15px;color:var(--p)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav-a{padding:5px 11px;border-radius:var(--r2);font-size:13px;color:var(--t2);transition:.15s}
.nav-a:hover{background:var(--bg);color:var(--t1)}
.nav-a.active{background:var(--as);color:var(--a2);font-weight:500}
.btn-ghost{padding:5px 13px;border-radius:var(--r2);border:1px solid var(--bd);
  background:transparent;color:var(--t1);transition:.15s}
.btn-ghost:hover{border-color:var(--a);color:var(--a)}
.btn-accent{padding:5px 13px;border-radius:var(--r2);border:none;
  background:var(--a);color:#fff;font-weight:500;transition:.15s}
.btn-accent:hover{background:var(--a2)}

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);
  z-index:299;display:none;backdrop-filter:blur(2px)}
.sidebar-overlay.show{display:block}
.file-sidebar{position:fixed;top:0;right:0;bottom:0;width:320px;
  background:var(--sur);border-left:1px solid var(--bd);
  z-index:300;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:-4px 0 24px rgba(0,0,0,.12)}
.file-sidebar.open{transform:translateX(0)}
.sb-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;border-bottom:1px solid var(--bd)}
.sb-title{display:flex;align-items:center;gap:7px;
  font-weight:600;font-size:13px;color:var(--p)}
.sb-close{width:26px;height:26px;border-radius:5px;border:none;
  background:transparent;color:var(--t3);display:flex;align-items:center;justify-content:center;transition:.15s}
.sb-close:hover{background:var(--bd2);color:var(--t1)}
.sb-search-wrap{display:flex;align-items:center;gap:7px;
  margin:10px 12px 4px;padding:6px 10px;
  background:var(--bg);border:1px solid var(--bd);border-radius:var(--r2)}
.sb-search-wrap svg{color:var(--t3);flex-shrink:0}
.sb-search{border:none;background:transparent;color:var(--t1);width:100%;outline:none;font-size:12px}
/* Finder-style list */
.sb-list{flex:1;overflow-y:auto;padding:4px 0}
.sb-empty{padding:24px 16px;text-align:center;color:var(--t3);font-size:12px}
.sb-item{display:grid;grid-template-columns:28px 1fr auto 20px;
  align-items:center;gap:6px;padding:5px 10px 5px 12px;
  transition:background .1s;cursor:default;user-select:none}
.sb-item:hover{background:var(--bd2)}
.sb-item:hover .sb-item-del{opacity:1}
.sb-item-icon{width:24px;height:24px;border-radius:4px;
  background:var(--as);display:flex;align-items:center;justify-content:center;
  color:var(--a2);font-size:9px;font-weight:700;text-transform:uppercase;flex-shrink:0}
/* extension-based tints */
.sb-item-icon.fastq{background:#d6f0f1;color:#1f7d82}
.sb-item-icon.fa   {background:#e8f5e9;color:#2e7d32}
.sb-item-icon.bam  {background:#fff3e0;color:#e65100}
.sb-item-icon.vcf  {background:#f3e5f5;color:#7b1fa2}
.sb-item-icon.gz   {background:#fce4ec;color:#c62828}
.sb-item-name{font-size:12px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item-size{font-size:11px;color:var(--t3);white-space:nowrap}
.sb-item-del{width:18px;height:18px;border-radius:3px;border:none;
  background:transparent;color:var(--t3);opacity:0;
  display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
.sb-item-del:hover{background:var(--ers);color:var(--err)}
.sb-foot{padding:10px 14px;border-top:1px solid var(--bd);
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--t2)}

/* ── MAIN / LAYOUT ───────────────────────────────────── */
.main{flex:1;padding:28px 0 60px}
.page-hd{margin-bottom:18px}
.page-hd h1{font-size:21px;font-weight:600;color:var(--p)}
.page-hd p{font-size:13px;color:var(--t2);margin-top:3px}

/* ── UPLOAD BAR ──────────────────────────────────────── */
.upload-bar{display:flex;align-items:center;
  background:var(--sur);border:1px solid var(--bd);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:18px;overflow:hidden;min-height:66px}
.upload-left{display:flex;align-items:center;gap:12px;
  padding:12px 18px;flex:1;cursor:pointer;transition:background .15s}
.upload-left:hover{background:var(--bg)}
.upload-bar.drag-over .upload-left{background:var(--as);outline:2px dashed var(--a);outline-offset:-3px}
.upload-ico{width:38px;height:38px;border-radius:9px;background:var(--as);
  display:flex;align-items:center;justify-content:center;color:var(--a);flex-shrink:0}
.upload-text{display:flex;flex-direction:column;gap:1px}
.upload-title{font-size:13px;font-weight:500;color:var(--t1)}
.upload-sub{font-size:11px;color:var(--t2)}
.upload-pill-area{display:flex;align-items:center;gap:10px;padding:0 12px;flex-shrink:0}
.upload-pill{display:flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:14px;background:var(--a);color:#fff;
  font-size:12px;font-weight:600}
.pill-toggle{font-size:12px;color:var(--a);background:none;border:none;
  text-decoration:underline;padding:0;transition:color .15s}
.pill-toggle:hover{color:var(--a2)}
.upload-sep{width:1px;background:var(--bd);align-self:stretch;flex-shrink:0}
.upload-alts{display:flex;gap:6px;padding:0 14px;flex-shrink:0}
.alt-btn{display:flex;align-items:center;gap:6px;padding:6px 11px;
  background:var(--bg);border:1px solid var(--bd);border-radius:var(--r2);
  color:var(--t2);font-size:12px;transition:.15s;white-space:nowrap}
.alt-btn:hover{border-color:var(--a);color:var(--t1)}

/* ── TWO-COL ─────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.col-l{display:flex;flex-direction:column;gap:18px}
.h-full{height:100%}

/* ── CARD ────────────────────────────────────────────── */
.card{background:var(--sur);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--bd2)}
.card-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--p)}
.card-badge{padding:2px 9px;border-radius:11px;background:var(--as);color:var(--a2);font-size:11px;font-weight:500}
.card-bd{padding:16px}

/* ── PIPELINE DROPDOWN ───────────────────────────────── */
.dd-wrap{position:relative}
.pipeline-dd{width:100%;padding:9px 32px 9px 12px;border:1px solid var(--bd);
  border-radius:var(--r2);font-size:13px;color:var(--t1);background:var(--sur);
  appearance:none;cursor:pointer;font-weight:500;transition:border-color .15s}
.pipeline-dd:focus{outline:none;border-color:var(--a)}
.dd-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--t2)}
/* Info panel */
.pip-info{margin-top:12px;padding:12px 14px;background:var(--bg);
  border:1px solid var(--bd);border-radius:var(--r2);animation:fadeUp .18s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pip-info-hd{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pip-badge{width:38px;height:38px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(135deg,var(--a),var(--p));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:10px;font-weight:700}
.pip-badge.align{background:linear-gradient(135deg,#7b4fa0,#4a2370)}
.pip-badge.rna  {background:linear-gradient(135deg,#2fa460,#1a6e40)}
.pip-badge.var  {background:linear-gradient(135deg,#e67e22,#a04000)}
.pip-badge.star { background: linear-gradient(135deg, #0284c7, #015a96); } /* sky blue */
.pip-badge.bwa  { background: linear-gradient(135deg, #be185d, #881040); } /* rose */
.pip-name{font-size:13px;font-weight:600;color:var(--p)}
.pip-steps{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.pip-step{padding:2px 8px;border-radius:3px;background:var(--p);color:#fff;font-size:10px;font-weight:500}
.pip-desc{font-size:12px;color:var(--t2);line-height:1.65}

/* ── PACKAGE TABS ────────────────────────────────────── */
.pkg-tabs{display:flex;gap:0;border-bottom:1px solid var(--bd);background:var(--bg)}
.pkg-tab{display:flex;align-items:center;gap:6px;padding:9px 16px;
  border:none;background:transparent;color:var(--t2);font-size:12px;font-weight:500;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;cursor:pointer}
.pkg-tab:hover{color:var(--t1)}
.pkg-tab.active{color:var(--a);border-bottom-color:var(--a)}
.pkg-dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0}
/* Panel */
.pkg-panel{display:none;padding:16px}
.pkg-panel.active{display:block}
/* 2-col param grid */
.param-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.param-item{display:flex;flex-direction:column;gap:5px}
.param-item label{font-size:11px;color:var(--t2);font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.param-disabled{opacity:.45;cursor:not-allowed}
.param-disabled input,.param-disabled select{cursor:not-allowed}
.req-star{color:#e55;font-size:12px;margin-left:2px}
.p-in:required:placeholder-shown{border-color:#e8856a}
.p-in{padding:6px 10px;border:1px solid var(--bd);border-radius:var(--r2);
  color:var(--t1);background:var(--sur);transition:border-color .15s}
.p-in:focus{outline:none;border-color:var(--a)}
.p-sel{width:100%;padding:6px 10px;border:1px solid var(--bd);border-radius:var(--r2);
  color:var(--t1);background:var(--sur);transition:border-color .15s}
.p-sel:focus{outline:none;border-color:var(--a)}

/* ── SAMPLE ASSIGNMENT ───────────────────────────────── */
.sample-cols{display:grid;grid-template-columns:22px 1fr 1fr 1fr 1fr 26px;
  gap:7px;padding:0 8px 7px;font-size:10px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t3);font-weight:600;border-bottom:1px solid var(--bd2);margin-bottom:8px}
.sample-row{display:grid;grid-template-columns:22px 1fr 1fr 1fr 1fr 26px;
  gap:7px;align-items:center;padding:7px 8px;
  border:1px solid var(--bd2);border-radius:var(--r2);
  background:var(--bg);margin-bottom:7px;transition:border-color .15s}
.sample-row:hover{border-color:var(--a)}
.sample-row:last-child{margin-bottom:0}
.s-num{font-size:11px;color:var(--t3);font-weight:600;text-align:center}
.s-sel{width:100%;padding:5px 7px;border:1px solid var(--bd);border-radius:var(--r2);
  font-size:12px;color:var(--t1);background:var(--sur);transition:border-color .15s}
.s-sel:focus{outline:none;border-color:var(--a)}
.s-sel.loaded{border-color:var(--ok);background:var(--oks);color:var(--ok)}
.s-name{width:100%;padding:5px 7px;border:1px solid var(--bd);border-radius:var(--r2);
  font-size:12px;color:var(--t1);background:var(--sur)}
.s-name:focus{outline:none;border-color:var(--a)}
.s-cond{width:100%;padding:5px 7px;border:1px solid var(--bd);border-radius:var(--r2);
  font-size:12px;color:var(--t1);background:var(--sur)}
.s-cond:focus{outline:none;border-color:var(--a)}
.s-del{width:22px;height:22px;border:none;border-radius:4px;
  background:transparent;color:var(--t3);font-size:12px;transition:.15s;
  display:flex;align-items:center;justify-content:center}
.s-del:hover{background:var(--ers);color:var(--err)}

/* Reference row */
.ref-row{display:flex;align-items:center;gap:9px;margin-top:12px;
  padding:9px 12px;background:var(--as);border:1px solid var(--a);border-radius:var(--r2)}
.ref-label{display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--p);white-space:nowrap;text-transform:uppercase;letter-spacing:.4px}
.ref-sel{flex:1;padding:5px 9px;border:1px solid var(--bd);border-radius:var(--r2);
  font-size:12px;color:var(--t1);background:var(--sur)}
.ref-sel:focus{outline:none;border-color:var(--a)}

/* Run row */
.run-row{display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--bd2)}
.run-meta{display:flex;flex-direction:column;gap:3px}
#run-summary{font-size:12px;color:var(--t2)}
.run-pipe-badge{font-size:11px;padding:2px 8px;border-radius:4px;
  background:var(--as);color:var(--a2);width:fit-content}
.btn-run{display:flex;align-items:center;gap:7px;padding:9px 22px;
  background:linear-gradient(135deg,var(--a),var(--p));color:#fff;
  border:none;border-radius:var(--r2);font-size:13px;font-weight:600;
  box-shadow:var(--sh2);transition:opacity .15s}
.btn-run:hover{opacity:.88}

.merge-toggle{display:flex;align-items:flex-start;gap:8px;
  padding:8px 10px;border:1px solid var(--bd);border-radius:var(--r2);
  background:var(--sur);cursor:pointer;min-width:160px;transition:border-color .15s}
.merge-toggle:hover{border-color:var(--a)}
.merge-cb{display:none}
.merge-box{width:15px;height:15px;min-width:15px;border:1.5px solid var(--bd);
  border-radius:3px;margin-top:1px;transition:.15s;
  display:flex;align-items:center;justify-content:center}
.merge-cb:checked + .merge-box{background:var(--a);border-color:var(--a)}
.merge-cb:checked + .merge-box::after{content:"✓";font-size:10px;color:#fff;line-height:1}
.merge-text{display:flex;flex-direction:column;gap:2px}
.merge-title{font-size:12px;font-weight:600;color:var(--t1)}
.merge-sub{font-size:10px;color:var(--t3);line-height:1.4}
.merge-row{padding:10px 0;border-top:1px solid var(--bd2);margin-top:8px}


/* ── FOOTER ──────────────────────────────────────────── */
.footer{background:var(--p);color:rgba(255,255,255,.75);margin-top:auto}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:36px;padding:44px 32px 28px}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:15px}
.footer-brand p{font-size:12px;color:rgba(255,255,255,.55);line-height:1.6;max-width:250px}
.footer-copy{font-size:11px;color:rgba(255,255,255,.35)!important;margin-top:4px}
.footer-col{display:flex;flex-direction:column;gap:7px}
.footer-col h4{font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  color:rgba(255,255,255,.35);margin-bottom:3px}
.footer-col a{font-size:12px;color:rgba(255,255,255,.65);transition:color .15s}
.footer-col a:hover{color:var(--a)}
.footer-btm{border-top:1px solid rgba(255,255,255,.1);padding:12px 32px;
  font-size:11px;color:rgba(255,255,255,.3);text-align:center}

/* ── TOAST ───────────────────────────────────────────── */
#toast-wrap{position:fixed;bottom:22px;right:22px;z-index:9999;
  display:flex;flex-direction:column;gap:7px}
.toast{padding:10px 16px;border-radius:var(--r2);color:#fff;font-size:12px;
  box-shadow:var(--sh2);animation:slideIn .2s ease;max-width:320px;
  display:flex;align-items:center;gap:8px}
.toast.info   {background:var(--p);border-left:3px solid var(--a)}
.toast.success{background:#1b5e20;border-left:3px solid #4caf50}
.toast.warn   {background:#7a5200;border-left:3px solid #ed8b00}
.toast.error  {background:#7f0000;border-left:3px solid var(--err)}
@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ── RESULTS (shared) ────────────────────────────────── */
.results-hero{background:var(--p);color:#fff;padding:26px 0}
.results-hero h1{font-size:20px;font-weight:600}
.results-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:7px}
.results-meta-item{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.7)}
.results-meta-item strong{color:#fff}
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:11px;font-size:11px;font-weight:600}
.status-badge.done{background:var(--oks);color:var(--ok)}
.status-badge.running{background:#fff3e0;color:#e65100}
.results-tabs{background:var(--sur);border-bottom:1px solid var(--bd);padding:0 32px;display:flex}
.results-tab{padding:13px 16px;font-size:13px;color:var(--t2);cursor:pointer;
  border-bottom:2px solid transparent;transition:.15s}
.results-tab:hover{color:var(--t1)}
.results-tab.active{color:var(--a);border-bottom-color:var(--a);font-weight:500}

/* ── DYNAMIC PARAM PANELS ────────────────────────────── */
.params-blurb{
  padding:11px 14px;margin:0 16px 0;
  background:var(--bd2);border:1px solid var(--bd);border-radius:var(--r2);
  font-size:12px;color:var(--t2);line-height:1.65;margin-bottom:0;
  border-bottom:none;border-radius:var(--r2) var(--r2) 0 0;
}
.params-dynamic{padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.params-empty{font-size:12px;color:var(--t3);text-align:center;padding:20px 0}
.pkg-block{border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden}
.pkg-block-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--bd2)
}
.pkg-block-label{font-size:12px;font-weight:700;color:var(--p);letter-spacing:.3px}
.pkg-block-link{
  font-size:11px;color:var(--a);text-decoration:none;
  padding:2px 7px;border:1px solid var(--bd);border-radius:3px;
  background:var(--sur);transition:.15s
}
.pkg-block-link:hover{border-color:var(--a);background:var(--as)}
.pkg-block-desc{
  padding:8px 12px;font-size:11px;color:var(--t2);
  background:var(--sur);border-bottom:1px dashed var(--bd2);line-height:1.6
}
.pkg-block .param-grid{padding:10px 12px}

/* spacing fixes */
.params-blurb{
  margin:16px 16px 12px;
  border:1px solid var(--bd);
  border-radius:var(--r2);
  border-bottom:1px solid var(--bd);  /* restore bottom border */
}
.params-dynamic{padding:0 16px 16px;gap:10px}

.btn-reset-params{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r2);
  border:1px solid var(--bd);background:var(--sur);
  color:var(--t2);font-size:11px;transition:.15s
}
.btn-reset-params:hover{border-color:var(--a);color:var(--a)}

/* ══════════════════════════════════════════════════════
   EEP additions — append to bottom of style.css
══════════════════════════════════════════════════════ */

/* ── Workflow stepper ─────────────────────────────── */
.wf-bar {
  display: flex; align-items: stretch;
  background: var(--sur); border: 1px solid var(--bd);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  margin-bottom: 22px;
}
.wf-step {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-right: 1px solid var(--bd);
  color: var(--t3); transition: background .18s;
}
.wf-step:last-child { border-right: none; }
.wf-step.active { background: var(--as); color: var(--a2); }
.wf-step.done   { background: #f0fff4; color: var(--ok); }
.wf-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; border: 1.5px solid currentColor;
}
.wf-step.active .wf-num { background: var(--a);  color: #fff; border-color: var(--a); }
.wf-step.done   .wf-num { background: var(--ok); color: #fff; border-color: var(--ok); }
.wf-text  { display: flex; flex-direction: column; gap: 1px; }
.wf-label { font-size: 12px; font-weight: 600; }
.wf-sub   { font-size: 10px; opacity: .7; }

/* ── Section blocks ───────────────────────────────── */
.section-block {
  background: var(--sur); border: 1px solid var(--bd);
  border-radius: var(--r); box-shadow: var(--sh);
  margin-bottom: 18px; overflow: hidden;
}
.section-block.locked { opacity: .45; pointer-events: none; transition: opacity .3s; }
.section-block.locked.unlocked { opacity: 1; pointer-events: auto; }
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--bg); border-bottom: 1px solid var(--bd);
}
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--p);
}
.section-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 9px; border-radius: 10px;
  background: var(--as); color: var(--a2);
}
.section-bd { padding: 18px; }
.step-pill {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.step-hint { font-size: 12px; color: var(--t3); font-style: italic; margin: 0; }

/* ── Instruction banner ───────────────────────────── */
.instr-banner {
  background: var(--bd2); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 14px 18px; margin-bottom: 18px;
}
.instr-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--p); margin-bottom: 12px;
}
.instr-steps { display: flex; gap: 0; }
.instr-step {
  display: flex; align-items: flex-start; gap: 9px; flex: 1;
  padding-right: 16px; margin-right: 16px;
  border-right: 1px dashed var(--bd);
}
.instr-step:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.instr-n {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--a); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.instr-head { font-size: 12px; font-weight: 600; color: var(--p); margin-bottom: 3px; }
.instr-sub  { font-size: 11px; color: var(--t2); line-height: 1.55; }

/* ── Upload two-col ───────────────────────────────── */
.upload-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px;
}
@media (max-width: 760px) { .upload-two-col { grid-template-columns: 1fr; } }
.upload-panel { display: flex; flex-direction: column; gap: 8px; }
.upload-panel-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--p);
}
.upload-drop-row { display: flex; gap: 8px; align-items: stretch; }
.upload-drop {
  flex: 1; height: 38px; box-sizing: border-box;
  border: 2px dashed var(--bd); border-radius: var(--r2);
  background: var(--bg); display: flex;
  align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.upload-drop:hover, .upload-drop.drag-over { border-color: var(--a); background: var(--as); }
.upload-drop-text { font-size: 13px; font-weight: 500; color: var(--t1); }
.upload-browse-btn { height: 38px; white-space: nowrap; }
.upload-panel { display: flex; flex-direction: column; gap: 8px; }
.file-list-panel {
  height: 200px; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bd); border-radius: var(--r2); background: var(--sur);
}
.file-list-panel .sb-list { flex: 1; overflow-y: auto; padding: 4px 0; }

/* ── YAML panel ───────────────────────────────────── */
.yaml-panel { display: flex; flex-direction: column; gap: 8px; }
.yaml-top-row { display: flex; gap: 8px; }
.yaml-file-lbl { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.yaml-ta {
  width: 100%; height: 200px; resize: none; overflow-y: auto;
  padding: 10px 12px; border: 1px solid var(--bd); border-radius: var(--r2);
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11.5px;
  color: var(--t1); background: var(--sur); line-height: 1.65;
  transition: border-color .15s; box-sizing: border-box;
}
.yaml-ta:focus { outline: none; border-color: var(--a); }
.yaml-actions { display: flex; justify-content: flex-end; }
/* Uniform button height in upload area */
.yaml-top-row .btn-run,
.yaml-top-row label.btn-run,
.yaml-actions .btn-run { height: 38px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }

/* ── Small buttons ────────────────────────────────── */
.btn-outline-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid var(--bd); border-radius: var(--r2);
  background: var(--sur); color: var(--t1); font-size: 12px;
  cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap;
}
.btn-outline-sm:hover { border-color: var(--a); color: var(--a); }
.btn-run-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px; border: none; border-radius: var(--r2);
  background: linear-gradient(135deg, var(--a), var(--p));
  color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; box-shadow: var(--sh); transition: opacity .15s;
}
.btn-run-sm:hover { opacity: .88; }

/* ── Sample table ─────────────────────────────────── */
.sample-table-hd {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--p);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--bd2);
}
.sample-table-count {
  font-size: 11px; font-weight: 500; padding: 1px 8px;
  border-radius: 10px; background: var(--as); color: var(--a2);
}
.sample-table-scroll { overflow-x: auto; }
.sample-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.sample-tbl thead th {
  text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--t3);
  background: var(--bg); border-bottom: 2px solid var(--bd);
}
.sample-tbl tbody td { padding: 8px 12px; border-bottom: 1px solid var(--bd2); color: var(--t1); }
.sample-tbl tbody tr:last-child td { border-bottom: none; }
.sample-tbl tbody tr:hover td { background: var(--bg); }
.file-ok      { color: var(--ok); font-size: 11px; }
.file-missing { color: var(--err); font-size: 11px; font-weight: 600; }
.cond-chip {
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: var(--as); color: var(--a2);
}
.yn-yes { color: var(--ok); font-weight: 600; font-size: 11px; }
.yn-no  { color: var(--t3); font-size: 11px; }
.pass-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.pass-chip.good { background: var(--oks); color: var(--ok); }
.pass-chip.warn { background: #fffbeb; color: #92400e; }
.pass-chip.bad  { background: var(--ers); color: var(--err); }

/* ── Step nudge ───────────────────────────────────── */
.step-nudge {
  display: none; align-items: center; gap: 10px;
  margin-top: 14px; padding: 9px 14px;
  background: var(--as); border: 1px solid var(--a);
  border-radius: var(--r2); font-size: 12px; color: var(--a2);
}
.nudge-btn {
  border: none; background: var(--a); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: var(--r2); cursor: pointer; transition: background .15s;
}
.nudge-btn:hover { background: var(--a2); }

/* ── QC footer row ────────────────────────────────── */
.qc-footer-row {
  display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap;
}

/* ── Progress bar ─────────────────────────────────── */
.progress-label { font-size: 11px; color: var(--t2); margin-bottom: 5px; font-weight: 500; }
.progress-track { height: 5px; background: var(--bd); border-radius: 99px; overflow: hidden; }
.progress-bar {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--a), var(--p));
  transition: width .6s ease;
}

/* ── Pre-processing inside card ───────────────────── */
.preproc-row {
  display: flex; align-items: flex-start; gap: 0;
}
.preproc-group { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.preproc-sep { width: 1px; background: var(--bd2); align-self: stretch; margin: 0 18px; }
.preproc-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t3); margin-bottom: 2px;
}
.radio-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--t1); cursor: pointer;
}
.radio-lbl input[type=radio] { accent-color: var(--a); }
.radio-hint { color: var(--t3); font-size: 11px; }

/* ── Pipeline steps vis ───────────────────────────── */
.pipeline-steps-vis {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--bd);
  border-radius: var(--r2); margin-top: 10px;
}
.pipe-step-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; background: var(--p); color: #fff;
  border-radius: 4px; font-size: 11px; font-weight: 500;
}
.pipe-step-n {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.2); display: flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 700;
}
.pipe-step-arrow { color: var(--t3); font-size: 13px; }
.pip-steps { display: none; } 

/* ══════════════════════════════════════════════════════
   EEP additions — append to bottom of style.css
══════════════════════════════════════════════════════ */

/* ── Unified button variants ──────────────────────── */
/* Primary .btn-run already defined in style.css       */
/* Secondary variant — outlined teal                  */
.btn-run.btn-secondary {
  background: transparent;
  color: var(--a2);
  border: 1.5px solid var(--a);
  box-shadow: none;
}
.btn-run.btn-secondary:hover { background: var(--a); color: #fff; opacity: 1; }

/* Small size modifier */
.btn-run.btn-sm {
  padding: 4px 12px;
  font-size: 11px;
  gap: 5px;
}

/* ── Workflow stepper ─────────────────────────────── */
.wf-bar {
  display: flex; align-items: stretch;
  background: var(--sur); border: 1px solid var(--bd);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  margin-bottom: 22px;
}
.wf-step {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-right: 1px solid var(--bd);
  color: var(--t3); transition: background .18s;
}
.wf-step:last-child { border-right: none; }
.wf-step.active { background: var(--as); color: var(--a2); }
.wf-step.done   { background: #f0fff4; color: var(--ok); }
.wf-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; border: 1.5px solid currentColor;
}
.wf-step.active .wf-num { background: var(--a);  color: #fff; border-color: var(--a); }
.wf-step.done   .wf-num { background: var(--ok); color: #fff; border-color: var(--ok); }
.wf-text  { display: flex; flex-direction: column; gap: 1px; }
.wf-label { font-size: 12px; font-weight: 600; }
.wf-sub   { font-size: 10px; opacity: .7; }

/* ── Section blocks ───────────────────────────────── */
.section-block {
  background: var(--sur); border: 1px solid var(--bd);
  border-radius: var(--r); box-shadow: var(--sh);
  margin-bottom: 18px; overflow: hidden;
}
.section-block.locked   { opacity: .45; pointer-events: none; transition: opacity .3s; }
.section-block.unlocked { opacity: 1;   pointer-events: auto; }
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--bg); border-bottom: 1px solid var(--bd);
}
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--p);
}
.section-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 9px; border-radius: 10px;
  background: var(--as); color: var(--a2);
}
.section-bd { padding: 18px; }
.step-pill {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.step-hint { font-size: 12px; color: var(--t3); font-style: italic; margin: 0; }

/* ── Instruction banner ───────────────────────────── */
.instr-banner {
  background: var(--bd2); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 14px 18px; margin-bottom: 18px;
}
.instr-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--p); margin-bottom: 12px;
}
.instr-steps { display: flex; gap: 0; }
.instr-step {
  display: flex; align-items: flex-start; gap: 9px; flex: 1;
  padding-right: 16px; margin-right: 16px;
  border-right: 1px dashed var(--bd);
}
.instr-step:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.instr-n {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--a); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.instr-head { font-size: 12px; font-weight: 600; color: var(--p); margin-bottom: 3px; }
.instr-sub  { font-size: 11px; color: var(--t2); line-height: 1.55; }

/* duplicate yaml-panel block removed — see first definition above */

/* ── Sample table ─────────────────────────────────── */
.sample-table-hd {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--p);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--bd2);
}
.sample-table-count {
  font-size: 11px; font-weight: 500; padding: 1px 8px;
  border-radius: 10px; background: var(--as); color: var(--a2);
}
.sample-table-scroll { overflow-x: auto; }
.sample-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.sample-tbl thead th {
  text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--t3);
  background: var(--bg); border-bottom: 2px solid var(--bd);
}
.sample-tbl tbody td { padding: 8px 12px; border-bottom: 1px solid var(--bd2); color: var(--t1); }
.sample-tbl tbody tr:last-child td { border-bottom: none; }
.sample-tbl tbody tr:hover td { background: var(--bg); }
.file-ok      { color: var(--ok); font-size: 11px; }
.file-missing { color: var(--err); font-size: 11px; font-weight: 600; }
.cond-chip {
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: var(--as); color: var(--a2);
}
.yn-yes { color: var(--ok); font-weight: 600; font-size: 11px; }
.yn-no  { color: var(--t3); font-size: 11px; }
.pass-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.pass-chip.good { background: var(--oks); color: var(--ok); }
.pass-chip.warn { background: #fffbeb; color: #92400e; }
.pass-chip.bad  { background: var(--ers); color: var(--err); }

/* ── Step action row (replaces nudge + separate btns) */
.step-action-row {
  display: flex; align-items: stretch; gap: 10px;
  justify-content: flex-end; margin-top: 14px;
}
.step-action-row .btn-run,
.run-bar .btn-run {
  height: 38px; box-sizing: border-box; padding-top: 0; padding-bottom: 0;
}

/* ── Pre-processing inside card ───────────────────── */
.preproc-row { display: flex; align-items: flex-start; gap: 0; }
.preproc-group { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.preproc-sep { width: 1px; background: var(--bd2); align-self: stretch; margin: 0 18px; }
.preproc-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t3); margin-bottom: 2px;
}
.radio-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t1); cursor: pointer; }
.radio-lbl input[type=radio] { accent-color: var(--a); }
.radio-hint { color: var(--t3); font-size: 11px; }

/* ── Pipeline steps vis ───────────────────────────── */
.pipeline-steps-vis {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--bd);
  border-radius: var(--r2); margin-top: 10px;
}
.pipe-step-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; background: var(--p); color: #fff;
  border-radius: 4px; font-size: 11px; font-weight: 500;
}
.pipe-step-n {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.2); display: flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 700;
}
.pipe-step-arrow { color: var(--t3); font-size: 13px; }
.pip-steps { display: none; }

/* Reference section — expanded layout */

.ref-row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.ref-controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ref-paste-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ref-seq-ta {
  width: 100%;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.55;
  resize: vertical;
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 8px 10px;
  color: var(--t1);
  background: var(--bg);
  box-sizing: border-box;
  transition: border-color .15s;
}
.ref-seq-ta:focus { outline: none; border-color: var(--a); }

.ref-analyze-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ref-scan-result {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ref-scan-chip {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--as);
  color: var(--a);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.ref-scan-rec {
  font-size: 11px;
  font-weight: 500;
  color: var(--ok);
}

.ref-upload-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.ref-filename {
  font-size: 12px;
  font-weight: 500;
  color: var(--ok);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 8px;
  background: var(--oks);
  border-radius: var(--r2);
  border: 1px solid var(--ok);
}

.ref-clear-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--t3);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  flex-shrink: 0;
}

.ref-clear-btn:hover {
  background: var(--ers);
  color: var(--err);
}

.ref-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ref-type-badge.ref-type-nt {
  background: #dbeafe;
  color: #1d4ed8;
}

.ref-type-badge.ref-type-aa {
  background: #fce7f3;
  color: #9d174d;
}

.ref-builtin-wrap {
  display: flex;
  align-items: center;
}

.ref-builtin-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  background: var(--bg);
  color: var(--t1);
  cursor: pointer;
  max-width: 220px;
}

.run-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 14px 20px;
  background: var(--sur);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  box-shadow: var(--sh);
}