@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
:root {
  --bg:#080d12; --bg2:#0e1620; --bg3:#16202e; --bg4:#1e2d3e; --bg5:#253446;
  --bd:#253040; --bd2:#2e3f52;
  --t:#b8d0e6; --td:#5a7a98; --tb:#deeeff;
  --teal:#00c9b1; --td2:#006f62; --tb2:#00f0d0;
  --amber:#f5a623; --red:#ef4444; --green:#22c55e; --blue:#38bdf8; --purple:#a78bfa;
  --ff:'IBM Plex Sans',sans-serif; --fm:'IBM Plex Mono',monospace; --r:5px;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--ff);background:var(--bg);color:var(--t);font-size:13px;min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px;}

/* ── GLOBAL PAGE HEADER ── */
#global-header{background:var(--bg2);border-bottom:2px solid var(--teal);}
#header-main{display:flex;align-items:center;justify-content:space-between;padding:18px 28px 14px;flex-wrap:wrap;gap:12px;}
#site-title{font-family:var(--fm);font-size:24px;font-weight:600;color:var(--teal);letter-spacing:.06em;line-height:1;}
#site-title em{color:var(--tb);font-style:normal;font-weight:300;}
#site-tagline{font-size:12px;color:var(--td);margin-top:5px;font-family:var(--fm);}
#howto-toggle{font-family:var(--fm);font-size:11px;font-weight:500;padding:6px 14px;border-radius:var(--r);border:1px solid var(--td2);background:transparent;color:var(--teal);cursor:pointer;transition:all .15s;white-space:nowrap;}
#howto-toggle:hover{background:rgba(0,201,177,.08);border-color:var(--teal);}

/* ── HOW TO USE PANEL ── */
#howto-panel{border-top:1px solid var(--bd);padding:20px 28px 22px;background:var(--bg3);display:none;animation:howtoSlide .2s ease;}
@keyframes howtoSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#howto-panel > h3{font-family:var(--fm);font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-weight:500;}
.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:700px){.howto-grid{grid-template-columns:1fr;}}
@media(max-width:1100px){
  #cv-root .layout-cards-row{flex-wrap:wrap;}
  #cv-root .layout-cards-row .card{flex:1 1 220px;}
  #cv-root .layout-main-row{flex-direction:column;}
  #cv-root .layout-sidebar{width:100%;}
}
.howto-section{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;}
.howto-section h4{font-family:var(--fm);font-size:12px;color:var(--tb);margin-bottom:10px;font-weight:600;display:flex;align-items:center;gap:7px;}
.step-badge{background:var(--teal);color:var(--bg);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;font-family:var(--fm);}
.howto-section ul{list-style:none;color:var(--t);font-size:12px;line-height:1.8;}
.howto-section li{padding-left:14px;position:relative;}
.howto-section li::before{content:'›';color:var(--teal);position:absolute;left:0;font-weight:700;}
.howto-section code{font-family:var(--fm);font-size:11px;color:var(--teal);background:var(--bg3);padding:1px 5px;border-radius:3px;}
.howto-note{margin-top:14px;font-size:11px;color:var(--td);font-family:var(--fm);padding:10px 14px;background:rgba(0,201,177,.04);border-left:2px solid var(--td2);border-radius:0 var(--r) var(--r) 0;}

/* ── TAB BAR ── */
#tab-bar{display:flex;padding:0 20px;gap:2px;background:var(--bg2);border-top:1px solid var(--bd);}
.tab-btn{font-family:var(--fm);font-size:12px;font-weight:500;padding:11px 22px;border:none;background:transparent;color:var(--td);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;letter-spacing:.02em;}
.tab-btn:hover{color:var(--teal);}
.tab-btn.active{color:var(--teal);border-bottom-color:var(--teal);}

/* ── PRINT OVERRIDES ── */
@media print{
  #global-header,#cv-root{display:none!important;}
  #el-root{display:block!important;}
}

/* ══ PLATE CONVERTER — scoped under #cv-root ══ */



*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--t);font-family:var(--ff);font-size:13px;min-height:100vh;overflow-x:hidden;}

#cv-root /* ─ HEADER ─ */
header{background:var(--bg2);border-bottom:1px solid var(--bd);padding:0 20px;height:50px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:200;}
#cv-root .logo{font-family:var(--fm);font-size:14px;font-weight:600;color:var(--teal);letter-spacing:.05em;white-space:nowrap;}
#cv-root .logo em{color:var(--td);font-style:normal;font-weight:400;}
#cv-root .steps{display:flex;gap:3px;margin-left:auto;}
#cv-root .sp{font-family:var(--fm);font-size:10px;padding:4px 11px;border-radius:20px;border:1px solid var(--bd);color:var(--td);cursor:pointer;transition:all .12s;white-space:nowrap;}
#cv-root .sp.active{background:var(--teal);border-color:var(--teal);color:var(--bg);font-weight:600;}
#cv-root .sp.done{border-color:var(--td2);color:var(--teal);}
#cv-root .sp:hover:not(.active){border-color:var(--td2);color:var(--teal);}
#cv-root .undo-btns{display:flex;gap:4px;margin-left:8px;}
#cv-root .ub{background:var(--bg3);border:1px solid var(--bd);border-radius:4px;color:var(--td);padding:3px 9px;font-family:var(--fm);font-size:11px;cursor:pointer;transition:all .12s;}
#cv-root .ub:hover:not(:disabled){background:var(--bg4);color:var(--tb);}
#cv-root .ub:disabled{opacity:.3;cursor:not-allowed;}

#cv-root /* ─ PANELS ─ */
.panel{display:none;padding:22px;max-width:1500px;margin:0 auto;animation:fi .18s ease;}
#cv-root .panel.active{display:block;}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

#cv-root /* ─ TYPE ─ */
h2{font-family:var(--fm);font-size:17px;color:var(--tb);margin-bottom:5px;font-weight:600;}
#cv-root h3{font-family:var(--fm);font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-weight:500;}
#cv-root .sub{color:var(--td);font-size:12px;margin-bottom:20px;}

#cv-root /* ─ CARD ─ */
.card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:18px;}
#cv-root .card+.card,#cv-root .card+.row{margin-top:12px;}

#cv-root /* ─ FORM ─ */
label,#cv-root .lbl{display:block;font-family:var(--fm);font-size:10px;color:var(--td);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;}
#cv-root input[type=text],#cv-root input[type=number],#cv-root select,#cv-root textarea{
  background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);
  color:var(--tb);font-family:var(--fm);font-size:12px;padding:7px 11px;
  outline:none;transition:border-color .12s;width:100%;
}
#cv-root input:focus,#cv-root select:focus{border-color:var(--teal);}
#cv-root select option{background:var(--bg3);}
#cv-root .fg{margin-bottom:12px;}
#cv-root .row{display:flex;gap:10px;flex-wrap:wrap;}
#cv-root .row .fg{flex:1;min-width:140px;}

#cv-root /* ─ BUTTON ─ */
.btn{font-family:var(--fm);font-size:11px;font-weight:500;padding:7px 16px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
#cv-root .primary{background:var(--teal);color:var(--bg);border-color:var(--teal);}
#cv-root .primary:hover{background:var(--tb2);}
#cv-root .secondary{background:transparent;color:var(--teal);border-color:var(--td2);}
#cv-root .secondary:hover{background:rgba(0,201,177,.07);border-color:var(--teal);}
#cv-root .ghost{background:var(--bg3);color:var(--t);border-color:var(--bd);}
#cv-root .ghost:hover{background:var(--bg4);}
#cv-root .danger{background:transparent;color:var(--red);border-color:rgba(239,68,68,.3);}
#cv-root .danger:hover{background:rgba(239,68,68,.07);}
#cv-root .btn.sm{padding:4px 10px;font-size:10px;}
#cv-root .btn:disabled{opacity:.35;cursor:not-allowed;}
#cv-root .brow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}

#cv-root /* ─ UPLOAD ─ */
.dz{border:2px dashed var(--bd);border-radius:8px;padding:50px 30px;text-align:center;cursor:pointer;transition:all .18s;background:var(--bg2);}
#cv-root .dz:hover,#cv-root .dz.over{border-color:var(--teal);background:rgba(0,201,177,.03);}
#cv-root .dz .ic{font-size:36px;margin-bottom:10px;opacity:.5;}
#cv-root .dz h3{font-size:14px;color:var(--tb);text-transform:none;letter-spacing:0;margin-bottom:5px;}
#cv-root #fi{display:none;}

#cv-root /* ─ ALERT ─ */
.alert{padding:9px 13px;border-radius:var(--r);font-family:var(--fm);font-size:11px;margin-bottom:10px;display:flex;gap:8px;align-items:flex-start;}
#cv-root .a-ok{background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.3);color:var(--green);}
#cv-root .a-warn{background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.3);color:var(--amber);}
#cv-root .a-err{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.3);color:var(--red);}
#cv-root .a-info{background:rgba(0,201,177,.06);border:1px solid var(--td2);color:var(--teal);}

#cv-root /* ─ BADGE ─ */
.badge{display:inline-block;font-family:var(--fm);font-size:9px;padding:2px 7px;border-radius:10px;font-weight:600;}
#cv-root .bt{background:rgba(0,201,177,.12);color:var(--teal);border:1px solid var(--td2);}
#cv-root .ba{background:rgba(245,166,35,.12);color:var(--amber);border:1px solid rgba(245,166,35,.3);}

#cv-root /* ─ TABS ─ */
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--bd);margin-bottom:14px;}
#cv-root .tab{font-family:var(--fm);font-size:11px;padding:6px 14px;border:1px solid transparent;border-bottom:none;cursor:pointer;color:var(--td);background:none;border-radius:4px 4px 0 0;transition:all .12s;}
#cv-root .tab.active{background:var(--bg3);color:var(--teal);border-color:var(--bd);border-bottom-color:var(--bg3);}
#cv-root .tab:hover:not(.active){color:var(--teal);}

#cv-root /* ──────────────────────────────────────────
   STEP 2 LAYOUT
────────────────────────────────────────── */
.layout-shell{display:flex;flex-direction:column;gap:14px;}
#cv-root .layout-main-row{display:flex;gap:14px;align-items:flex-start;}
#cv-root .layout-left{flex:1;min-width:0;}
#cv-root .layout-sidebar{width:280px;flex-shrink:0;}
#cv-root .layout-cards-row{display:flex;flex-wrap:nowrap;gap:10px;}
#cv-root .layout-cards-row .card{flex:1 1 0;min-width:0;}

#cv-root /* toolbar above grid */
.toolbar{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:10px 12px;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#cv-root .toolbar .sep{width:1px;height:20px;background:var(--bd);flex-shrink:0;}
#cv-root .tool-label{font-family:var(--fm);font-size:10px;color:var(--td);text-transform:uppercase;letter-spacing:.06em;}

#cv-root /* plate grid */
.plate-wrap{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:14px;overflow-x:auto;position:relative;}
#cv-root .grid{display:grid;grid-template-columns:22px repeat(12,38px);grid-template-rows:20px repeat(8,38px);gap:3px;user-select:none;}
#cv-root .wh{display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:10px;color:var(--td);}
#cv-root .well{
  width:38px;height:38px;border-radius:50%;border:2px solid var(--bd);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--fm);font-size:6.5px;font-weight:600;
  transition:transform .08s,box-shadow .08s;position:relative;
  color:rgba(255,255,255,.75);background:var(--bg4);
  overflow:hidden;
}
#cv-root .well:hover{transform:scale(1.12);z-index:3;}
#cv-root .well.sel{box-shadow:0 0 0 2.5px #fff;z-index:4;}
#cv-root .well.drag-sel{box-shadow:0 0 0 2.5px var(--amber);z-index:4;}

#cv-root /* well type colors — base */
.wt-blank{background:#1e133a;border-color:#7c3aed;color:#c4b5fd;}
#cv-root .wt-pbs{background:#0f2040;border-color:#1d4ed8;color:#93c5fd;}
#cv-root .wt-posctrl{background:#0a2a18;border-color:#15803d;color:#86efac;}
#cv-root .wt-negctrl{background:#2a0f0f;border-color:#b91c1c;color:#fca5a5;}
#cv-root .wt-unused{background:var(--bg3);border-color:var(--bd);color:var(--td);opacity:.35;}

#cv-root /* sample wells get group color via inline style */
.wt-sample{border-width:2px;}

/* partition SVG overlay */
#cv-root .partition-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:2;overflow:visible;}
/* partition legend swatch */
#cv-root .part-legend-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0;border-width:2px;border-style:solid;display:inline-block;}

#cv-root .wlabel{font-size:6px;font-weight:700;max-width:34px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:center;line-height:1.2;}
#cv-root .wdil{font-size:5.5px;opacity:.8;text-align:center;}

#cv-root /* legend */
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
#cv-root .li{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-size:10px;color:var(--td);}
#cv-root .ld{width:11px;height:11px;border-radius:50%;flex-shrink:0;}

#cv-root /* ─ GROUP MANAGER ─ */
.gm-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);
  margin-bottom:6px;cursor:pointer;transition:border-color .12s;
}
#cv-root .gm-item:hover{border-color:var(--bd2);}
#cv-root .gm-item.active-group{border-color:var(--teal);}
#cv-root .gm-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
#cv-root .gm-name{font-family:var(--fm);font-size:11px;color:var(--tb);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#cv-root .gm-count{font-family:var(--fm);font-size:10px;color:var(--td);}

#cv-root /* sample chips */
.sample-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
#cv-root .sc{
  font-family:var(--fm);font-size:10px;padding:3px 8px;border-radius:12px;
  border:1px solid var(--bd);color:var(--t);background:var(--bg4);
  cursor:pointer;transition:all .12s;
}
#cv-root .sc.active-sample{color:var(--bg);font-weight:600;}
#cv-root .sc:hover{border-color:var(--bd2);}

#cv-root /* assign panel tabs */
.ap-tab{font-family:var(--fm);font-size:10px;padding:5px 12px;border-radius:3px;cursor:pointer;color:var(--td);transition:all .12s;}
#cv-root .ap-tab.active{background:var(--bg4);color:var(--tb);}

#cv-root /* type buttons */
.tbtn{
  font-family:var(--fm);font-size:10px;padding:5px 11px;border-radius:4px;
  border:1px solid var(--bd);color:var(--td);background:var(--bg3);
  cursor:pointer;transition:all .1s;
}
#cv-root .tbtn.active{font-weight:600;color:var(--bg);}
#cv-root .tbtn[data-t=blank].active{background:#7c3aed;border-color:#7c3aed;}
#cv-root .tbtn[data-t=pbs].active{background:#1d4ed8;border-color:#1d4ed8;}
#cv-root .tbtn[data-t=posctrl].active{background:#15803d;border-color:#15803d;}
#cv-root .tbtn[data-t=negctrl].active{background:#b91c1c;border-color:#b91c1c;}
#cv-root .tbtn[data-t=unused].active{background:#4b5563;border-color:#4b5563;}

#cv-root /* wl chip */
.wc{padding:4px 13px;border-radius:20px;border:1px solid var(--bd);font-family:var(--fm);font-size:11px;color:var(--td);cursor:pointer;background:var(--bg3);transition:all .12s;}
#cv-root .wc.sel2{background:var(--teal);border-color:var(--teal);color:var(--bg);font-weight:600;}

#cv-root /* toggle */
.tog{display:flex;align-items:center;gap:8px;cursor:pointer;}
#cv-root .ts{position:relative;width:36px;height:19px;flex-shrink:0;}
#cv-root .ts input{opacity:0;width:0;height:0;}
#cv-root .tsl{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--bd);border-radius:20px;transition:.18s;cursor:pointer;}
#cv-root .tsl:before{content:'';position:absolute;height:13px;width:13px;left:2px;bottom:2px;background:var(--td);border-radius:50%;transition:.18s;}
#cv-root .ts input:checked+.tsl{background:var(--td2);border-color:var(--teal);}
#cv-root .ts input:checked+.tsl:before{transform:translateX(17px);background:var(--tb2);}
#cv-root .tlb{font-family:var(--fm);font-size:11px;color:var(--t);}

/* ── ELISA ANALYSER toggle sliders (scoped to #el-root) ── */
#el-root .el-tog{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:6px;}
#el-root .el-ts{position:relative;width:36px;height:19px;flex-shrink:0;}
#el-root .el-ts input{opacity:0;width:0;height:0;}
#el-root .el-tsl{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--bd);border-radius:20px;transition:.18s;cursor:pointer;}
#el-root .el-tsl:before{content:'';position:absolute;height:13px;width:13px;left:2px;bottom:2px;background:var(--td);border-radius:50%;transition:.18s;}
#el-root .el-ts input:checked+.el-tsl{background:var(--td2);border-color:var(--teal);}
#el-root .el-ts input:checked+.el-tsl:before{transform:translateX(17px);background:var(--tb2);}
#el-root .el-ts.sm{width:28px;height:15px;}
#el-root .el-ts.sm .el-tsl:before{height:9px;width:9px;}
#el-root .el-ts.sm input:checked+.el-tsl:before{transform:translateX(13px);}
#el-root .el-tlb{font-family:var(--fm);font-size:11px;color:var(--t);}
#el-root .option-group .el-tog{display:flex;align-items:center;}
#el-root .option-group .el-ts{display:inline-block;}

#cv-root /* scrollbar */
::-webkit-scrollbar{width:5px;height:5px;}
#cv-root ::-webkit-scrollbar-track{background:var(--bg2);}
#cv-root ::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px;}

#cv-root /* table */
.tw{overflow-x:auto;}
#cv-root table{width:100%;border-collapse:collapse;font-family:var(--fm);font-size:11px;}
#cv-root th{background:var(--bg3);border:1px solid var(--bd);padding:7px 10px;text-align:left;color:var(--teal);font-size:10px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}
#cv-root td{border:1px solid var(--bd);padding:6px 10px;color:var(--t);white-space:nowrap;}
#cv-root tr:nth-child(even) td{background:rgba(255,255,255,.015);}
#cv-root tr:hover td{background:rgba(0,201,177,.03);}
#cv-root td.neg{color:var(--red);}
#cv-root td.exp-col{color:var(--td);font-size:10px;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
#cv-root td.dil-col{color:var(--amber);}
#cv-root td.hi{background:rgba(245,166,35,.08) !important;}

#cv-root /* stats */
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
#cv-root .stat{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:12px 16px;min-width:100px;}
#cv-root .stat .v{font-family:var(--fm);font-size:20px;color:var(--teal);font-weight:600;}
#cv-root .stat .l{font-size:10px;color:var(--td);margin-top:2px;}

#cv-root /* divider */
hr{border:none;border-top:1px solid var(--bd);margin:14px 0;}

#cv-root /* color swatch input */
.cswatch{width:28px;height:28px;border-radius:4px;border:1px solid var(--bd);cursor:pointer;padding:2px;background:none;}
#cv-root input[type=color]{width:24px;height:24px;border:none;cursor:pointer;background:none;padding:0;}

#cv-root /* tooltip */
#tt{position:fixed;background:var(--bg5);border:1px solid var(--bd2);border-radius:4px;padding:7px 10px;font-family:var(--fm);font-size:10px;color:var(--tb);pointer-events:none;z-index:9999;display:none;line-height:1.6;max-width:180px;}

#cv-root /* validation list */
.vlist li{font-family:var(--fm);font-size:11px;margin-bottom:5px;padding-left:4px;}
#cv-root .vlist li.ok{color:var(--green);}
#cv-root .vlist li.warn{color:var(--amber);}
#cv-root .vlist li.err{color:var(--red);}

#cv-root code{font-family:var(--fm);color:var(--teal);font-size:11px;}

/* ══ ELISA ANALYSER — scoped under #el-root ══ */





* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--t);
  font-size: 13px;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
}

#el-root /* ── CONTAINER ── */
.container{
  max-width: 1600px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
}

#el-root /* ── HEADER ── */
.header{
  background: var(--bg2);
  border-bottom: 1px solid var(--bd);
  padding: 22px 28px;
  text-align: left;
}

#el-root .header h1{
  font-family: var(--fm);
  font-size: 18px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .04em;
  margin-bottom: 4px;
}

#el-root .header p{
  font-size: 12px;
  color: var(--td);
}

#el-root /* ── CONTENT ── */
.content{
  padding: 22px;
  background: var(--bg);
}

#el-root /* ── INPUT SECTION ── */
.input-section{ display: block; }

#el-root /* ── FILE UPLOAD SECTION ── */
.file-upload-section{
  background: var(--bg2);
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  margin-bottom: 18px;
}

#el-root .file-upload-section h3{
  font-family: var(--fm);
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-weight: 500;
}

#el-root /* ── UPLOAD AREA (dz) ── */
.upload-area{
  border: 2px dashed var(--bd);
  border-radius: 8px;
  padding: 44px 24px;
  text-align: center;
  background: var(--bg2);
  cursor: pointer;
  transition: all .18s;
}

#el-root .upload-area:hover,
#el-root .upload-area.dragover{
  border-color: var(--teal);
  background: rgba(0,201,177,.03);
  transform: none;
}

#el-root .upload-icon{
  font-size: 32px;
  margin-bottom: 12px;
  opacity: .45;
  color: var(--teal);
}

#el-root .file-input{ display: none; }

#el-root /* ── SAMPLE INFO ── */
.sample-info{
  margin-top: 18px;
  padding: 14px;
  background: var(--bg3);
  border-radius: var(--r);
  border: 1px solid var(--bd);
}

#el-root .sample-info h4{
  font-family: var(--fm);
  font-size: 10px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
  font-weight: 500;
}

#el-root .sample-info ul{
  color: var(--t);
  font-size: 12px;
  line-height: 1.7;
  padding-left: 16px;
}

#el-root .sample-download{ margin-top: 14px; text-align: center; }

#el-root .sample-download a{
  font-family: var(--fm);
  font-size: 11px;
  color: var(--teal);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--td2);
  border-radius: var(--r);
  transition: all .12s;
  display: inline-block;
}

#el-root .sample-download a:hover{
  background: rgba(0,201,177,.07);
  border-color: var(--teal);
}

#el-root /* ── WARNING DIALOG ── */
.warning-dialog{
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.75);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

#el-root .warning-content{
  background: var(--bg2);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  padding: 28px;
  max-width: 580px;
  max-height: 80vh;
  width: 90%;
  color: var(--t);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow-y: auto;
}

#el-root .warning-content h3{
  font-family: var(--fm);
  font-size: 13px;
  color: var(--amber);
  margin-bottom: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#el-root .warning-details{
  background: var(--bg3);
  padding: 14px;
  border-radius: var(--r);
  margin: 14px 0;
  border: 1px solid var(--bd);
  max-height: 280px;
  overflow-y: auto;
}

#el-root /* ── PARSING RESULTS ── */
.parsing-results{
  background: var(--bg2);
  border: 1px solid var(--teal);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 18px;
  display: none;
}

#el-root .parsing-results h3{
  font-family: var(--fm);
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-weight: 500;
}

#el-root .experiment-matrix{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#el-root .matrix-item{
  background: var(--bg3);
  padding: 14px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
}

#el-root .matrix-item h4{
  font-family: var(--fm);
  font-size: 12px;
  color: var(--tb);
  margin-bottom: 6px;
  font-weight: 600;
}

#el-root .matrix-item .sample-count{
  font-size: 11px;
  color: var(--td);
}

#el-root /* ── STATISTICAL OPTIONS ── */
.statistical-options{
  background: var(--bg2);
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  margin-top: 18px;
}

#el-root .statistical-options h4{
  font-family: var(--fm);
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-weight: 500;
}

#el-root .options-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

#el-root .option-group{
  background: var(--bg3);
  padding: 14px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
}

#el-root .option-group h5{
  font-family: var(--fm);
  font-size: 10px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
  font-weight: 500;
}

#el-root .option-group label{
  display: block;
  color: var(--t);
  font-size: 12px;
  margin-bottom: 7px;
  cursor: pointer;
}

#el-root .option-group input[type="checkbox"]{ margin-right: 6px; }

#el-root .option-group select{
  width: 100%;
  padding: 6px 10px;
  background: var(--bg3);
  color: var(--tb);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-family: var(--fm);
  font-size: 11px;
  outline: none;
  transition: border-color .12s;
}

#el-root .option-group select:focus{ border-color: var(--teal); }

#el-root .advanced-export{
  margin-top: 16px;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: var(--r);
}

#el-root .advanced-export h5{
  font-family: var(--fm);
  font-size: 10px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}

#el-root /* side-by-side */
.side-by-side-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

#el-root .outlier-highlight{
  border: 2px solid var(--red) !important;
  background: rgba(239,68,68,.08) !important;
}

#el-root .ec50-results{
  background: var(--bg2);
  border: 1px solid var(--teal);
  border-radius: var(--r);
  padding: 16px;
  margin: 16px 0;
  color: var(--t);
}

#el-root .comparison-mode{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
/* Non-chart children (header banner etc) always span full width */
#el-root .comparison-mode > div:not(.chart-container){
  flex: 0 0 100%;
  width: 100%;
}
#el-root .comparison-mode .chart-container{
  flex: 1 1 calc(50% - 10px);
  min-width: 280px;
  width: auto !important;
  max-width: calc(50% - 10px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#el-root /* ── RESULTS SECTION ── */
.results-section{ display: none; }

#el-root .export-controls{
  background: var(--bg2);
  padding: 18px;
  border-radius: var(--r);
  margin-bottom: 18px;
  text-align: center;
  border: 1px solid var(--bd);
}

#el-root .export-controls h3{
  font-family: var(--fm);
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-weight: 500;
}

#el-root /* ── CHART CONTAINERS ── keep light background for chart readability ── */
.chart-container{
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  border: 1px solid var(--bd);
  color: #333;
  transition: width .2s ease, max-width .2s ease;
}

#el-root .chart-title{
  font-family: var(--fm);
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.4;
  word-wrap: break-word;
  transition: font-size .15s;
}

#el-root .chart-canvas{
  position: relative;
  height: 440px;
  margin-bottom: 18px;
}

#el-root .chart-controls{
  text-align: center;
  margin: 14px 0;
  padding: 10px;
  background: #f0f2f5;
  border-radius: var(--r);
  font-size: 13px;
}

#el-root .cutoff-info{
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--r);
  padding: 12px;
  margin: 14px 0;
  font-size: 13px;
  color: #6d4c00;
}

#el-root .data-summary{
  background: #f8f9ff;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid #e1e8ed;
  margin-top: 14px;
}

#el-root .data-summary h4{
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#el-root /* ── CHART EDITOR ── */
.chart-editor{
  background: #f0f2ff;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid #d1d5db;
  margin-top: 14px;
}

#el-root .chart-editor h4{
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#el-root .editor-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

#el-root .editor-grid label{
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  gap: 4px;
}

#el-root .editor-grid input{
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--fm);
}

#el-root .editor-grid input:focus{
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 3px rgba(102, 126, 234, 0.3);
}

#el-root /* ── STATS TABLE ── */
.stats-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 10px;
}

#el-root .stats-table th, #el-root .stats-table td{
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#el-root .stats-table th{
  background: #f1f3f4;
  font-weight: 600;
  color: #333;
  font-family: var(--fm);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#el-root .significance-marker{ font-weight: bold; color: #d32f2f; }

#el-root .summary-chart{
  background: linear-gradient(135deg, #eaeaea 0%, #f5f5f5 100%);
  color: #333;
  border: 1px solid var(--bd);
}

#el-root .summary-chart .chart-title{ color: #333; }
#el-root .summary-chart .chart-controls{ background: rgba(0,0,0,.04); color: #333; }

#el-root /* ── BUTTONS ── */
.button-group{
  margin-top: 18px;
  text-align: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

#el-root .btn{
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--r);
  border: 1px solid var(--bd2);
  background: var(--bg3);
  color: var(--t);
  cursor: pointer;
  transition: all .12s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-width: auto;
  text-decoration: none;
}

#el-root .btn:hover{
  background: var(--bg4);
  border-color: var(--td);
  transform: none;
  box-shadow: none;
}

#el-root .btn-primary{
  background: var(--teal);
  color: var(--bg);
  border-color: var(--teal);
  font-weight: 600;
}

#el-root .btn-primary:hover{
  background: var(--tb2);
  border-color: var(--tb2);
}

#el-root .btn-warning{
  background: transparent;
  color: var(--amber);
  border-color: rgba(245,166,35,.4);
}

#el-root .btn-warning:hover{
  background: rgba(245,166,35,.08);
  border-color: var(--amber);
}

#el-root .btn:disabled{ opacity: .35; cursor: not-allowed; transform: none; }

#el-root .btn-small{
  padding: 5px 12px;
  font-size: 10px;
}

#el-root /* ── ALERTS ── */
.alert{
  padding: 10px 14px;
  border-radius: var(--r);
  font-family: var(--fm);
  font-size: 11px;
  margin: 10px 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-width: 1px;
  border-style: solid;
}

#el-root .alert-info{
  background: rgba(0,201,177,.06);
  border-color: var(--td2);
  color: var(--teal);
}

#el-root .alert-success{
  background: rgba(34,197,94,.07);
  border-color: rgba(34,197,94,.3);
  color: var(--green);
}

#el-root .alert-warning{
  background: rgba(245,166,35,.07);
  border-color: rgba(245,166,35,.3);
  color: var(--amber);
}

#el-root .alert-error{
  background: rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.3);
  color: var(--red);
}

#el-root /* ── SCROLLBAR ── */
::-webkit-scrollbar{ width: 5px; height: 5px; }
#el-root ::-webkit-scrollbar-track{ background: var(--bg2); }
#el-root ::-webkit-scrollbar-thumb{ background: var(--bg5); border-radius: 3px; }

/* ── PRINT ── */
/* Page size/orientation injected dynamically by printCharts() */
@media print {
  @page { margin: 0.4in; }

  body { background: white !important; color: black !important; font-size: 11px; line-height: 1.4; }

  .container { background: white !important; box-shadow: none !important; border: none !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .header, .content { background: white !important; padding: 8px !important; }

  .export-controls, .input-section, .warning-dialog, .statistical-options,
  .chart-controls, .button-group, .advanced-export, .chart-editor { display: none !important; }

  .chart-container {
    background: white !important;
    page-break-after: always;
    page-break-inside: avoid;
    margin: 0 0 15px 0 !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid #ccc;
  }

  .chart-container:last-of-type { page-break-after: auto; }

  .chart-title { font-size: 14px !important; margin-bottom: 8px !important; color: black !important; font-weight: bold !important; text-align: center !important; }

  .chart-canvas, .chart-canvas canvas { width: 100% !important; height: 400px !important; max-height: 400px !important; display: block !important; }

  .summary-chart .chart-canvas,
  .summary-chart .chart-canvas canvas { height: 430px !important; max-height: 430px !important; }

  .data-summary, .stats-table { margin-top: 12px !important; font-size: 9px !important; page-break-inside: avoid !important; }

  .chart-editor { display: none !important; }

  .stats-table table { width: 100% !important; font-size: 8px !important; }

  .cutoff-info { font-size: 10px !important; background: #f8f8f8 !important; color: black !important; padding: 5px !important; margin: 5px 0 !important; width: 100% !important; }

  .summary-chart { background: white !important; color: black !important; }

  .ec50-results { background: #f9f9f9 !important; color: black !important; border: 1px solid #ccc !important; font-size: 9px !important; }

  h1, h2, h3, h4, h5, h6 { color: black !important; page-break-after: avoid !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .content { padding: 14px; }
  .experiment-matrix { grid-template-columns: 1fr; }
  .button-group { flex-direction: column; align-items: center; }
  .chart-canvas { height: 320px; }
}

#el-root .fade-in{ animation: fadeIn .3s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

#el-root .loading{ text-align: center; padding: 44px; font-size: 16px; color: var(--td); }
#el-root .loading .spinner{
  display: inline-block;
  width: 36px; height: 36px;
  border: 3px solid var(--bd2);
  border-top: 3px solid var(--teal);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 14px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }