:root{
    --paper:#F5F3EC;
    --grid-line: rgba(15,80,90,0.055);
    --ink:#1B2430;
    --ink-soft:#5B6472;
    --ink-faint:#8A93A0;
    --line:#DAD6C8;
    --line-strong:#C7C2B0;
    --card-bg:#FFFFFF;
    --accent:#0F6E6E;
    --accent-ink:#0A4F4F;
    --accent-bg:#E7F1EF;
    --warn:#B23A2F;
    --warn-bg:#FBEAE8;
    --radius:10px;
    --shadow: 0 1px 2px rgba(20,30,40,0.04), 0 4px 14px rgba(20,30,40,0.05);
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    font-family:var(--font-ui);
    color:var(--ink);
    background-color:var(--paper);
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 28px 28px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:var(--accent-ink); }
  h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; }
  .mono{ font-family:var(--font-mono); }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .page{ max-width:1120px; margin:0 auto; padding:28px 20px 60px; }

  /* ---------- Header ---------- */
  .site-header{
    position:relative;
    display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between;
    padding-bottom:22px; margin-bottom:26px;
    border-bottom:1px solid var(--line-strong);
  }
  .eyebrow{
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--accent-ink); margin:0 0 8px;
  }
  .site-header h1{ font-size:clamp(28px,4vw,38px); letter-spacing:-0.01em; margin-bottom:8px; }
  .dek{ margin:0; max-width:52ch; color:var(--ink-soft); font-size:15px; }

  .header-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; align-self:flex-end; }
  .clear-btn{
    font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); background:none;
    border:none; padding:2px 2px; cursor:pointer; text-decoration:underline;
  }
  .clear-btn:hover{ color:var(--warn); }

  .tabs{ display:flex; gap:2px; align-self:flex-end; }
  .tab-btn{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em;
    background:#EDEAE0; color:var(--ink-soft); border:1px solid var(--line-strong); border-bottom:none;
    padding:9px 16px 8px; border-radius:7px 7px 0 0; cursor:pointer;
    position:relative; top:1px;
  }
  .tab-btn.active{ background:var(--card-bg); color:var(--ink); font-weight:600; box-shadow: 0 -2px 0 var(--accent) inset; }
  .tab-btn:hover:not(.active){ background:#E4E0D3; }

  main{ position:relative; z-index:1; }
  .tab-panel[hidden]{ display:none; }

  /* ---------- Cards / layout ---------- */
  .card{
    background:var(--card-bg); border:1px solid var(--line);
    border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;
    box-shadow:var(--shadow);
  }
  .card h2{ font-size:16px; margin-bottom:14px; }
  .card h2 .count{ font-family:var(--font-mono); font-weight:400; font-size:12px; color:var(--ink-faint); }

  .calc-grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap:22px; align-items:start; }
  .calc-side{ position:sticky; top:20px; }
  @media (max-width: 880px){
    .calc-grid{ grid-template-columns: 1fr; }
    .calc-side{ position:static; }
  }

  .setup-fields{ display:flex; flex-wrap:wrap; gap:16px; }
  .setup-fields label{
    display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-soft); font-weight:500;
    flex:1 1 140px;
  }
  .setup-fields input{ font-family:var(--font-mono); font-size:15px; }
  .unit{ font-family:var(--font-mono); color:var(--ink-faint); font-weight:400; font-size:11px; }

  input[type=number], input[type=text], input[type=search], textarea{
    font-family:var(--font-ui); font-size:14px; color:var(--ink);
    background:#FCFBF8; border:1px solid var(--line-strong); border-radius:6px;
    padding:9px 10px; width:100%;
  }
  input:focus, textarea:focus{ border-color:var(--accent); }
  textarea{ font-family:var(--font-mono); font-size:12.5px; resize:vertical; min-height:64px; line-height:1.45; }

  /* ---------- Part rows (combobox) ---------- */
  .part-row{
    border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:12px; background:#FCFBF8;
    position:relative;
  }
  .part-row:last-child{ margin-bottom:0; }
  .part-row-acceptor{ background:var(--accent-bg); border-color:var(--accent); }
  .part-row-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
  .part-row-label{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
  .row-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
  .link-btn{
    background:none; border:none; padding:0; font-family:var(--font-ui); font-size:12px; color:var(--accent-ink);
    text-decoration:underline; cursor:pointer;
  }
  .remove-btn{
    background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px;
  }
  .remove-btn:hover{ color:var(--warn); }
  .duplicate-btn{
    background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:2px 4px;
    flex:0 0 auto;
  }
  .duplicate-btn:hover{ color:var(--accent-ink); }

  .combo-wrap{ position:relative; }
  .combo-input-row{ display:flex; gap:8px; }
  .combo-input-row input{ flex:1 1 auto; }
  .conc-input{ width:120px; flex:0 0 120px; }
  .combo-panel{
    position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0;
    background:#fff; border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow);
    max-height:280px; overflow-y:auto; padding:4px;
  }
  .combo-panel[hidden]{ display:none; }
  .combo-item{
    display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:6px; cursor:pointer; font-size:13px;
  }
  .combo-item:hover, .combo-item.active{ background:var(--accent-bg); }
  .combo-item .ci-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .combo-item .ci-len{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .combo-empty{ padding:10px; font-size:12.5px; color:var(--ink-faint); }

  .selected-chip{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--ink-soft); }
  .selected-chip .chip-len{ font-family:var(--font-mono); color:var(--ink-faint); }

  .cat-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block; }
  .cat-pill{
    display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px;
    padding:2px 7px; border-radius:20px; background:#EFEDE4; color:var(--ink-soft); white-space:nowrap;
  }

  .custom-fields{ display:flex; flex-direction:column; gap:8px; }
  .custom-fields .conc-row{ display:flex; gap:8px; }
  .custom-fields .conc-row input{ flex:1 1 0; min-width:0; }

  .btn-add{
    font-family:var(--font-mono); font-size:12.5px; color:var(--accent-ink); background:var(--accent-bg);
    border:1px dashed var(--accent); border-radius:7px; padding:9px 14px; cursor:pointer; width:100%; margin-top:4px;
  }
  .btn-add:hover{ background:#DCEDEA; }

  .assembly-name-input{ font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); background:#F2F0E8; }

  /* ---------- Assembly cards ---------- */
  .assembly-card{
    border:1px solid var(--line-strong); border-radius:9px; background:#FAF9F4; margin-bottom:14px; overflow:hidden;
  }
  .assembly-card:last-child{ margin-bottom:0; }
  .assembly-head{
    display:flex; align-items:center; gap:10px; padding:12px 14px; background:#F2F0E8;
    border-bottom:1px solid var(--line);
  }
  .assembly-collapse{
    background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:12px; padding:2px 4px; line-height:1;
    flex:0 0 auto;
  }
  .assembly-name{ flex:1 1 auto; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .assembly-body{ padding:14px; }
  .assembly-body .part-row{ margin-bottom:10px; }
  .assembly-subhead{
    display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:11px;
    color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin:14px 0 8px;
  }
  .assembly-subhead .count{ font-weight:400; text-transform:none; letter-spacing:0; }
  .assembly-results{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .assembly-results .results-table{ margin-bottom:0; }

  /* ---------- Checkbox cells ---------- */
  .results-table td.chk{ width:24px; text-align:center; padding-left:8px; }
  .results-table th:last-child{ width:24px; }
  .row-check{ width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }

  #mm-batch-caption{ margin-top:8px; margin-bottom:10px; }
  #download-csv-btn{ margin-top:12px; }

  .mm-toggle-row{ margin-bottom:14px; }
  .mm-calc-hint{ font-size:10px; color:var(--ink-faint); white-space:nowrap; margin-right:8px; display:inline-block; }
  .mm-settings-row{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .mm-settings-row .field-label{ margin-bottom:10px; }

  /* ---------- Header logo ---------- */
  .title-row{ display:flex; align-items:center; gap:14px; }
  .site-logo{ height:56px; width:auto; display:block; flex:0 0 auto; }

  /* ---------- Segmented mode toggle ---------- */
  .mode-toggle{ display:inline-flex; border:1px solid var(--line-strong); border-radius:7px; overflow:hidden; }
  .mode-btn{
    font-family:var(--font-mono); font-size:11px; padding:5px 10px; background:#fff; color:var(--ink-soft);
    border:none; cursor:pointer;
  }
  .mode-btn + .mode-btn{ border-left:1px solid var(--line-strong); }
  .mode-btn.active{ background:var(--ink); color:#fff; }

  .calc-mode-select{
    font-family:var(--font-mono); font-size:10.5px; padding:4px 6px; border:1px solid var(--line-strong);
    border-radius:6px; background:#fff; color:var(--ink-soft); max-width:150px;
  }
  .calc-mode-forced{
    font-family:var(--font-mono); font-size:10.5px; padding:4px 8px; border:1px dashed var(--line-strong);
    border-radius:6px; color:var(--ink-faint); background:#F2F0E8; cursor:help;
  }

  /* ---------- Radio rows (buffer type / calc mode) ---------- */
  .radio-row{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
  .field-label{ display:block; font-size:12.5px; color:var(--ink-soft); font-weight:500; margin-bottom:8px; }
  .radio-option{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); cursor:pointer; }
  .radio-option input{ width:auto; accent-color:var(--accent); }
  .calc-mode-row{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

  /* ---------- Master mix fields ---------- */
  .mm-field{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .mm-field:last-child{ border-bottom:none; }
  .mm-field-input{ display:flex; align-items:center; gap:8px; }
  .mm-field-input input{ width:90px; font-family:var(--font-mono); text-align:right; }
  .reset-link{
    background:none; border:none; padding:0; font-family:var(--font-mono); font-size:10.5px; color:var(--accent-ink);
    text-decoration:underline; cursor:pointer; white-space:nowrap;
  }

  /* ---------- Results ---------- */
  .results-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .results-table th{
    text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-faint); font-weight:500; padding-bottom:6px; border-bottom:1px solid var(--line-strong);
  }
  .results-table td{ padding:7px 4px; border-bottom:1px solid var(--line); vertical-align:top; }
  .results-table tr:last-child td{ border-bottom:none; }
  .results-table td.num{ font-family:var(--font-mono); text-align:right; white-space:nowrap; }
  .results-table td.rname{ max-width:220px; overflow:hidden; text-overflow:ellipsis; }
  .results-table tr.subtotal td{ padding-top:10px; }
  .results-table tr.divider td{ border-bottom:1px solid var(--line-strong); padding:0; }
  .results-table tr.total td{ font-weight:600; padding-top:10px; border-top:1px solid var(--line-strong); border-bottom:none; }
  .results-table td.dim{ color:var(--ink-faint); }
  .results-table .neg{ color:var(--warn); font-weight:600; }

  .warning{
    margin:12px 0 0; padding:10px 12px; border-radius:7px; background:var(--warn-bg); color:var(--warn);
    font-size:12.5px; line-height:1.45;
  }
  .note{ margin:10px 0 0; font-size:12px; color:var(--ink-faint); line-height:1.5; }

  .cycling-enzyme-field{
    display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:12.5px; color:var(--ink-soft);
  }
  .cycling-enzyme-field select{
    font-family:var(--font-mono); font-size:12px; padding:4px 6px; border:1px solid var(--line-strong);
    border-radius:6px; background:#fff; color:var(--ink); max-width:170px;
  }

  .cycling-table{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:12.5px; margin-top:4px; }
  .cycling-table col.col-temp{ width:42px; }
  .cycling-table col.col-time{ width:48px; }
  .cycling-table col.col-cyc{ width:52px; }
  .cycling-table th{
    font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-faint); font-weight:500; text-align:left; padding:5px 4px; border-bottom:1px solid var(--line-strong);
  }
  .cycling-table th:not(:first-child){ text-align:right; }
  .cycling-table td{ font-family:var(--font-mono); padding:5px 4px; border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cycling-table tr:last-child td{ border-bottom:none; }
  .cyc-temp-static{ text-align:right; color:var(--ink-soft); }
  .cyc-input{
    font-family:var(--font-mono); font-size:12px; padding:3px 3px; border:1px solid var(--line-strong);
    border-radius:5px; background:#fff; text-align:right; width:100%; min-width:0; box-sizing:border-box;
  }

  .cycling-total-box{
    margin-top:12px; padding:10px 12px; background:var(--accent-bg); border:1px solid var(--accent); border-radius:8px;
  }
  .cycling-total-label{
    display:block; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--accent-ink); margin-bottom:2px;
  }
  .cycling-total-value{ display:block; font-family:var(--font-mono); font-size:21px; font-weight:700; color:var(--ink); line-height:1.2; }
  .cycling-total-sub{ display:block; font-size:11px; color:var(--ink-faint); margin-top:4px; line-height:1.4; }

  /* ---------- Cycling evidence charts (efficiency/accuracy vs. cycle count) ---------- */
  .cyc-evidence{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .cyc-chart-title{ font-size:12px; color:var(--ink-soft); font-weight:500; margin:12px 0 2px; }
  .cyc-chart-title:first-of-type{ margin-top:4px; }
  .cyc-chart-title .unit{ font-weight:400; color:var(--ink-faint); }
  .cyc-chart{ width:100%; height:auto; display:block; }
  .cyc-axis-line{ stroke:var(--line-strong); stroke-width:1; }
  .cyc-grid-line{ stroke:var(--grid-line); stroke-width:1; }
  .cyc-axis-label{ font-family:var(--font-mono); font-size:8.5px; fill:var(--ink-faint); }
  .cyc-ref-line{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:2 2; }
  .cyc-band{ fill:var(--accent); fill-opacity:0.12; stroke:none; }
  .cyc-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
  .cyc-dot{ fill:var(--card-bg); stroke:var(--accent); stroke-width:1.6; }
  .cyc-dot-end{ fill:var(--accent); }
  .cyc-value-label{ font-family:var(--font-mono); font-size:10px; font-weight:600; fill:var(--ink); }

  .cyc-chart-legend{ display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 2px; font-size:11px; color:var(--ink-soft); }
  .cyc-legend-item{ display:inline-flex; align-items:center; gap:5px; }
  .legend-swatch{ display:inline-block; width:14px; flex:0 0 auto; }
  .legend-line{ height:2px; background:var(--accent); border-radius:1px; }
  .legend-band{ height:10px; background:var(--accent); opacity:.18; border-radius:2px; }
  .legend-dash{ height:0; border-top:1px dashed var(--ink-faint); }

  .cyc-data-details{ margin-top:8px; }
  .cyc-data-details summary{ cursor:pointer; color:var(--accent-ink); font-family:var(--font-mono); font-size:11px; }
  .cyc-data-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px; }
  .cyc-data-table th{
    text-align:left; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-faint); font-weight:500; padding:4px 6px; border-bottom:1px solid var(--line-strong);
  }
  .cyc-data-table td{ padding:4px 6px; border-bottom:1px solid var(--line); font-family:var(--font-mono); }
  .cyc-data-table tr:last-child td{ border-bottom:none; }

  .cycling-settings{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
  .mm-field-inline{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
  .mm-field-inline input{ width:48px; font-family:var(--font-mono); text-align:right; }

  /* ---------- My saved parts ---------- */
  .my-parts-card{ margin-bottom:20px; }
  .my-parts-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .my-parts-heading h2{ margin-bottom:0; }
  .my-parts-io{ display:flex; gap:8px; }
  .my-parts-form{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .my-parts-form input{ flex:1 1 160px; min-width:120px; }
  .my-parts-form input#mp-len{ flex:0 1 120px; }
  .my-parts-form .btn-add{ flex:0 0 auto; width:auto; margin-top:0; padding:9px 16px; }
  .my-parts-table{ margin-top:14px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .my-parts-table th{
    text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-faint); font-weight:500; padding:8px 12px; border-bottom:1px solid var(--line-strong); background:#FAF9F4;
  }
  .my-parts-table td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px; }
  .my-parts-table tr:last-child td{ border-bottom:none; }

  /* ---------- Database tab ---------- */
  .db-controls{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:16px; }
  #db-search{ max-width:320px; }
  .db-filters{ display:flex; flex-wrap:wrap; gap:6px; }
  .filter-chip{
    font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:20px; cursor:pointer;
    border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px;
  }
  .filter-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

  .db-table-wrap{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .db-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .db-table th{
    text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-faint); font-weight:500; padding:10px 14px; border-bottom:1px solid var(--line-strong); background:#FAF9F4;
    position:sticky; top:0;
  }
  .db-table td{ padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .db-table tbody tr:hover{ background:#FAF9F4; }
  .db-table td.dname{ font-weight:500; }
  .db-table td.dlen{ font-family:var(--font-mono); color:var(--ink-soft); white-space:nowrap; }
  .db-table td.ddetails{ color:var(--ink-soft); font-size:12px; }
  .db-table td.dactions{ white-space:nowrap; text-align:right; }
  .db-table-scroll{ max-height:64vh; overflow-y:auto; }

  .icon-btn{
    font-family:var(--font-mono); font-size:11px; background:#fff; border:1px solid var(--line-strong);
    border-radius:6px; padding:5px 9px; cursor:pointer; color:var(--ink-soft); margin-left:6px;
  }
  .icon-btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
  .db-count{ font-size:12px; color:var(--ink-faint); margin:12px 2px 0; }

  .site-footer{ margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }