@font-face {
  font-family:'IBM Plex Sans';
  src:url('../fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight:100 700;font-style:normal;
}
@font-face {
  font-family:'IBM Plex Sans';
  src:url('../fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight:100 700;font-style:italic;
}
@font-face {
  font-family:'IBM Plex Serif';
  src:url('../fonts/IBMPlexSerif-SemiBold.ttf') format('truetype');
  font-weight:600;font-style:normal;
}
:root {
  --bg:#0f1117;--surface:#1a1d27;--card:#21253a;--border:#2e3352;
  --accent:#4f8ef7;--accent2:#34d399;--text:#e2e8f0;--muted:#8892aa;
  --input-bg:#161927;--result-bg:#1e2d4a;--error:#f87171;--success:#34d399;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}
header{background:linear-gradient(135deg,#1a1d27,#0d1526);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-size:1.4rem;font-weight:700;font-family:'IBM Plex Sans',sans-serif;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.logo-sub{font-size:0.7rem;color:var(--muted);letter-spacing:.5px;}
.lang-btn{padding:6px 14px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-size:.8rem;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:all .15s;}
.lang-btn:hover{border-color:var(--accent);color:var(--accent);}
.layout{display:flex;min-height:calc(100vh - 61px);}
nav{width:210px;background:var(--surface);border-right:1px solid var(--border);padding:16px 0;flex-shrink:0;}
.nav-section{padding:5px 16px;font-size:.6rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-top:10px;}
.nav-btn{display:flex;align-items:center;gap:9px;width:100%;padding:9px 18px;background:none;border:none;border-left:3px solid transparent;color:var(--muted);font-size:.85rem;cursor:pointer;text-align:left;transition:all .15s;}
.nav-btn:hover{color:var(--text);background:rgba(255,255,255,.04);}
.nav-btn.active{color:var(--accent);background:rgba(79,142,247,.1);border-left-color:var(--accent);}
.nav-icon{font-size:.95rem;width:18px;text-align:center;}
main{flex:1;padding:28px 32px;max-width:840px;}
.panel{display:none;} .panel.active{display:block;}
.panel-title{font-size:1.35rem;font-weight:700;margin-bottom:5px;}
.panel-desc{color:var(--muted);font-size:.85rem;margin-bottom:22px;}
.formula-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;margin-bottom:20px;font-family:'Courier New',monospace;font-size:.88rem;color:var(--accent2);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.field{display:flex;flex-direction:column;gap:5px;}
label{font-size:.77rem;color:var(--muted);font-weight:500;letter-spacing:.3px;}
.input-row{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--input-bg);transition:border-color .15s;}
.input-row:focus-within{border-color:var(--accent);}
.input-row input{flex:1;background:none;border:none;padding:9px 11px;color:var(--text);font-size:.92rem;outline:none;min-width:0;}
.input-row input[type=text]{flex:1;background:none;border:none;padding:9px 11px;color:var(--text);font-size:.92rem;outline:none;min-width:0;}
.unit-sel{background:var(--card);border:none;border-left:1px solid var(--border);color:var(--muted);padding:0 6px;font-size:.75rem;cursor:pointer;outline:none;flex-shrink:0;width:68px;min-width:0;}
select{background:var(--input-bg);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:9px 11px;font-size:.88rem;outline:none;cursor:pointer;width:100%;}
.btn-row{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.calc-btn{padding:10px 24px;background:linear-gradient(135deg,var(--accent),#3b6fd4);border:none;border-radius:7px;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;}
.calc-btn:hover{opacity:.9;transform:translateY(-1px);}
.reset-btn{padding:10px 18px;background:transparent;border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:.88rem;cursor:pointer;transition:all .15s;}
.reset-btn:hover{border-color:var(--muted);color:var(--text);}
.result-box{margin-top:20px;background:var(--result-bg);border:1px solid rgba(79,142,247,.3);border-radius:var(--radius);padding:18px;display:none;}
.result-box.visible{display:block;}
.result-box.error{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.06);}
.result-title{font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:12px;}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.result-item{background:rgba(255,255,255,.04);border-radius:7px;padding:12px;}
.result-label{font-size:.72rem;color:var(--muted);margin-bottom:3px;}
.result-value{font-size:1.3rem;font-weight:700;color:var(--accent2);}
.result-unit{font-size:.75rem;color:var(--muted);margin-left:3px;}
.error-text{color:var(--error);font-size:.88rem;}
.info-note{background:rgba(79,142,247,.07);border:1px solid rgba(79,142,247,.18);border-radius:7px;padding:11px 14px;font-size:.8rem;color:var(--muted);margin-top:14px;line-height:1.6;}
.serial-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.serial-table th{background:var(--card);padding:9px 11px;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);border-bottom:1px solid var(--border);}
.serial-table td{padding:9px 11px;border-bottom:1px solid rgba(46,51,82,.5);}
.serial-table tr:hover td{background:rgba(255,255,255,.02);}
.tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:.7rem;font-weight:600;background:rgba(79,142,247,.15);color:var(--accent);}
.divider{border:none;border-top:1px solid var(--border);margin:20px 0;}
.steps-list{list-style:none;counter-reset:steps;}
.steps-list li{counter-increment:steps;padding:9px 0 9px 36px;position:relative;border-bottom:1px solid var(--border);font-size:.87rem;}
.steps-list li::before{content:counter(steps);position:absolute;left:0;top:7px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;}
.pcr-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.pcr-table th{background:var(--card);padding:8px 11px;text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);border-bottom:1px solid var(--border);}
.pcr-table td{padding:8px 11px;border-bottom:1px solid rgba(46,51,82,.5);}
.pcr-table input{background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font-size:.85rem;outline:none;padding:2px 4px;}
.pcr-table input:focus{border-bottom-color:var(--accent);}
.add-row-btn{margin-top:8px;padding:6px 14px;background:transparent;border:1px dashed var(--border);border-radius:6px;color:var(--muted);font-size:.8rem;cursor:pointer;transition:all .15s;}
.add-row-btn:hover{border-color:var(--accent);color:var(--accent);}
.del-btn{background:none;border:none;color:var(--error);cursor:pointer;font-size:.95rem;padding:0 4px;opacity:.45;transition:opacity .15s;}
.del-btn:hover{opacity:1;}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;padding:6px;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .2s;}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;}
.nav-backdrop.open{display:block;}
.dilution-numerator{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;}
@media(max-width:700px){
  .hamburger{display:flex;}
  nav{position:fixed;top:0;left:0;height:100%;width:230px;z-index:100;transform:translateX(-100%);transition:transform .25s ease;padding-top:16px;}
  nav.open{transform:translateX(0);}
  main{padding:16px;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .dilution-numerator{display:flex;flex-direction:column;align-items:stretch;gap:10px;}
  .dilution-times{display:none;}
  .dilution-bar{display:none;}
  .dilution-denominator{max-width:100%!important;margin:0!important;}
}