:root {
  --bg: #eef2f6; --panel: #fff; --ink: #1f2b38; --muted: #6b7785; --line: #e3e8ee;
  --accent: #2c7be5; --accent-dk: #1a68d1; --ok: #1f9d55; --run: #2c7be5;
  --fail: #e3342f; --queued: #9aa5b1; --warn: #c05621;
  --hero1: #1b2a4a; --hero2: #2c4a7c;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font-size: 14px;
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; line-height: 1.5; }

/* ---- hero ---- */
.hero { background: linear-gradient(135deg, var(--hero1), var(--hero2)); color: #fff; padding: 30px 24px 34px; }
.hero-inner { max-width: none; margin: 0; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand h1 { margin: 0; font-size: 30px; letter-spacing: .5px; }
.brand .tag { color: #aebfd6; font-size: 14px; }
.lede { max-width: 760px; margin: 12px 0 0; color: #d7e0ee; font-size: 15px; }

/* Two resizable columns split by a draggable .gutter handle:
   #pane-1 configure (collapsible sidebar) · #pane-2 progress+results.
   pane-1's width is an inline flex-basis (set by initSplit() in app.js, persisted to
   localStorage); pane-2 takes the remainder. Recent runs is NOT a column — it is a
   full-width drawer below <main> (see #runs-panel). Full-bleed width (no max-width)
   so it fills wide monitors; align-items: stretch spans the gutter full height. */
main { margin: -18px 0 0; padding: 0 24px 24px; display: flex; align-items: stretch; }
.pane { min-width: 0; }                 /* let flex children shrink below content width */
#pane-1 { flex: 0 0 30%; position: relative; }   /* relative: anchors the hide button */
#pane-2 { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
#form-panel { height: 100%; }                    /* fill the stretched single-card column */

/* ---- collapsible columns: hide button + show tab ---- */
/* hide button = a small light translucent-blue "window" square icon */
.col-hide { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 5px; cursor: pointer;
  background: rgba(44, 123, 229, 0.12); border: 1px solid rgba(44, 123, 229, 0.35);
  color: var(--accent); transition: background .12s, border-color .12s; }
.col-hide:hover { background: rgba(44, 123, 229, 0.22); border-color: var(--accent); }
.col-hide svg { display: block; width: 14px; height: 14px; }
/* window icon shown on the collapsed-state reopen tabs */
.win-icon { width: 16px; height: 16px; flex: 0 0 auto; }
#sidebar-hide { position: absolute; top: 12px; right: 12px; z-index: 2; }  /* float in the configure pane */

/* ---- collapsible sidebar (configure column) ---- */
#sidebar-show { display: none; flex: 0 0 34px; align-self: stretch; cursor: pointer;
  writing-mode: vertical-rl; padding: 12px 0; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--accent); font-size: 13px;
  font-weight: 600; letter-spacing: .5px; }
#sidebar-show:hover { background: #f5f9ff; border-color: var(--accent); }
body.sidebar-collapsed #pane-1,
body.sidebar-collapsed #gutter-1 { display: none; }
/* pin the reopen tab to the top of the column (don't stretch full height) so the
   window icon + label sit at the top when the configure sidebar is hidden */
body.sidebar-collapsed #sidebar-show { display: flex; align-self: flex-start;
  align-items: center; justify-content: flex-start; gap: 6px; }

/* ---- recent-runs (bottom of column 2) ---- */
/* Closed by default: the [hidden] attribute ships in the HTML, and app.js drops it
   only when the topbar's "Recent runs" button opens it. Keeping the default in markup
   means the panel never flashes on load before the JS runs. It sits inside pane-2 as
   the last flex item, so it appears under Results. */
#runs-panel[hidden] { display: none; }
/* square icon-only button (the target-name search magnifier) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0; }
.icon-btn svg { display: block; width: 17px; height: 17px; }

.hero-inner { position: relative; }

/* drag handle between the panes */
.gutter { flex: 0 0 16px; align-self: stretch; position: relative; cursor: col-resize;
  background: transparent; touch-action: none; }
.gutter::before {        /* thin full-height rule */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-50%); background: var(--line); border-radius: 1px; }
.gutter::after {         /* centered grip pill */
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 38px;
  transform: translate(-50%, -50%); background: #c4cfdb; border: 1px solid var(--line);
  border-radius: 4px; transition: background .12s, border-color .12s; }
.gutter:hover::after, .gutter:focus-visible::after, body.col-resizing .gutter::after {
  background: var(--accent); border-color: var(--accent); }
.gutter:hover::before, body.col-resizing .gutter::before { background: var(--accent); }
.gutter:focus-visible { outline: none; }
/* while dragging: lock the cursor and stop text selection across the page */
body.col-resizing { cursor: col-resize; }
body.col-resizing * { user-select: none !important; }
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: 18px; padding: 20px 24px; }
.footer-inner { max-width: none; margin: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-logo { height: 32px; width: auto; }
.footer-meta { line-height: 1.45; }
.footer-built { margin: 0; font-size: 13px; color: var(--ink); }
.footer-built strong { color: var(--accent); }
.footer-tag { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.footer-copy { margin: 0 0 0 auto; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .footer-copy { margin: 6px 0 0; }
}

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 18px 16px; box-shadow: 0 1px 3px rgba(20,40,70,.05); }
h2 { font-size: 16px; margin: 2px 0 10px; display: flex; align-items: center; gap: 9px; }
/* uniform spacing above each numbered configure step (1–4), regardless of what precedes */
#form-panel h2 { margin-top: 20px; }
#form-panel > h2:first-child { margin-top: 0; }
#denovo-extra h2 { margin-top: 0; }  /* step-5 heading sits at the top of its box (box has its own margin) */
h3 { font-size: 13px; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  background: var(--accent); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; }
.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
.muted { color: var(--muted); font-weight: normal; }

label { display: block; margin: 8px 0; font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input[type=text], input[type=number] { padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 13px; width: 100%; }
input[type=number] { width: 5.5em; }
.row input[type=text] { flex: 1; }
/* target field — a textarea so a pasted FASTA keeps its newlines. It starts one line
   tall and grows with the paste (autoGrow() in app.js); monospace so a sequence is
   legible and wraps anywhere rather than overflowing. */
#target, #partner { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; width: 100%; resize: vertical; overflow-y: auto; max-height: 180px;
  line-height: 1.45; font-family: inherit; overflow-wrap: anywhere; }
#target:focus, #partner:focus { outline: none; border-color: var(--accent); }

button { padding: 8px 15px; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  cursor: pointer; font-size: 13px; }
button:hover { background: #eef2f6; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; padding: 9px 22px; }
button.primary:hover { background: var(--accent-dk); }
button.small { font-size: 11px; padding: 3px 9px; }
button.danger { background: var(--fail); color: #fff; border-color: var(--fail); margin-left: auto; font-size: 12px; padding: 4px 12px; }
button.danger:hover { background: #c41f1a; }
.btnlink { padding: 7px 14px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; color: var(--ink); text-decoration: none; }
.btnlink:hover { background: #eef2f6; }
.hidden { display: none !important; }
.mono { font-family: ui-monospace, "DejaVu Sans Mono", monospace; color: var(--muted); font-weight: normal; font-size: 12px; }

.msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.msg.err { color: var(--fail); }
.msg.ok { color: var(--ok); }

/* pipeline-stage cards — each numbered step (1–5) sits in its own bordered box */
.stage-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  margin-top: 14px; background: #fcfdff; }
.stage-card:first-of-type { margin-top: 0; }
.stage-card > h2 { margin-top: 0 !important; }

/* ---- name resolution ---- */
.candidates { border: 1px solid var(--line); border-radius: 7px; margin-top: 6px; max-height: 260px; overflow: auto; }
.candidates .cand { padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px; }
.candidates .cand:last-child { border-bottom: none; }
.candidates .cand:hover { background: #eef4fd; }
.candidates .acc { font-family: ui-monospace, monospace; color: var(--accent); font-weight: 600; }
.candidates .org { color: var(--muted); }
.resolved { margin-top: 6px; font-size: 12px; background: #eef4fd; border-radius: 7px; padding: 7px 10px; }

/* ---- hotspot method ---- */
/* inside the Step-2 stage-card, so no border of its own (avoids a double box) */
.hotspot-method { border: 0; padding: 0; margin: 0; }
.hotspot-method legend { font-size: 13px; font-weight: 600; padding: 0; }
.hotspot-method #hotspots-row { display: block; margin-top: 6px; }

/* ---- pills ---- */
.pill { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; vertical-align: middle; font-weight: 600; }
.pill-req { background: #e7eefb; color: var(--accent-dk); }

/* ---- de-novo config (Steps 3–5) — each stage is its own .stage-card ---- */
.denovo-extra { margin-top: 14px; }
.caution { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--warn); }

.run-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.topn { display: flex; align-items: center; gap: 7px; margin: 0; }
.topn input { width: 4.5em; }

/* ---- progress ---- */
.empty { color: var(--muted); }
.badge { font-size: 11px; padding: 2px 10px; border-radius: 999px; color: #fff; min-width: 62px; text-align: center; text-transform: capitalize; }
.badge.queued { background: var(--queued); }
.badge.running { background: var(--run); }
.badge.done { background: var(--ok); }
.badge.failed { background: var(--fail); }
.badge.unknown, .badge.starting { background: var(--queued); }
.badge.halted { background: var(--warn); }
.badge.skipped { background: var(--queued); opacity: .7; }
.step-label { font-weight: 600; }
.step-detail { color: var(--muted); font-size: 12px; }
.spinner { width: 12px; height: 12px; border: 2px solid #cfd8e0; border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- results ---- */
.gen-at { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: normal; }
.gen-at + .actions { margin-left: 12px; }
.actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
/* border-collapse: separate keeps the sticky header aligned with the body
   (collapse + sticky desyncs column widths in Chrome/Firefox) */
/* Fixed layout + per-column <colgroup> %widths (set in app.js) make the table
   responsive — columns scale with the viewport and never force a horizontal
   scrollbar. Cells wrap rather than overflow. */
table.results { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px;
  table-layout: fixed; }
table.results th, table.results td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 5px 7px; text-align: left; overflow-wrap: anywhere; vertical-align: top; }
table.results th:first-child, table.results td:first-child { border-left: 1px solid var(--line); }
table.results thead th { border-top: 1px solid var(--line); background: var(--ink); color: #fff;
  position: sticky; top: 0; z-index: 1; }
/* Sequence = widest column, monospace, clamped to 2 lines (full text in the
   cell's title tooltip). The long design_id wraps inside its narrow column. */
table.results td.seq { font-family: ui-monospace, "DejaVu Sans Mono", monospace; }
table.results td.seq .clamp2 { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
table.results td.id { word-break: break-all;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 11px; color: var(--muted); }
table.results tr:nth-child(even) td { background: #f7f9fb; }
.tbl-wrap { overflow-x: auto; }   /* safety net; fixed layout shouldn't trigger it */

/* ---- generic grid tables (progress + recent runs) ---- */
table.grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: middle; }
table.grid thead th { background: #eef2f6; color: var(--ink); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .4px; }
table.grid tbody tr:hover { background: #f5f8fb; }
table.grid td.tm, table.grid td.dur { font-family: ui-monospace,"DejaVu Sans Mono",monospace; color: var(--muted); white-space: nowrap; }
table.grid td.dur .eta { color: var(--accent); font-size: 11px; }
table.grid td.step-label { font-weight: 600; }
table.grid td.step-detail { color: var(--muted); }
/* Description cell — accumulated per-stage progress notes (oldest first, newest
   last). Prior notes are muted + bulleted; the final/live line is highlighted. */
table.grid td.step-detail { vertical-align: top; }
.step-detail .note-line { display: block; line-height: 1.45; white-space: normal; }
.step-detail .note-line + .note-line { margin-top: 1px; }
.step-detail .note-prior { color: var(--muted); font-size: 11.5px; }
.step-detail .note-prior::before { content: "• "; opacity: .55; }
.step-detail .note-live { color: var(--run); }
.step-detail .note-final.ok { color: var(--ok); font-weight: 600; }
.step-detail .note-final.err { color: var(--fail); font-weight: 600; }
table.grid td.step-prog code { font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 11px; color: var(--ink, #1a2733); background: #eef2f6; padding: 1px 5px; border-radius: 4px; }
.target-name { font-size: 13px; font-weight: 600; color: var(--accent); margin-left: 6px; }
.pipe-done { margin-top: 10px; font-size: 13px; font-weight: 600; color: #1a7f37; }
.pipe-fail { margin-top: 10px; font-size: 13px; font-weight: 600; color: #b42318; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.pager-arrow { width: 30px; height: 30px; border: 1px solid var(--queued); background: #fff; border-radius: 6px;
  font-size: 18px; line-height: 1; color: var(--accent); cursor: pointer; }
.pager-arrow:hover:not(:disabled) { background: #f5f8fb; border-color: var(--accent); }
.pager-arrow:disabled { color: var(--queued); cursor: default; opacity: .5; }
.pager-info { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.results-count { margin-top: 10px; font-size: 13px; color: var(--ink, #1a2733); }
.results-count strong { color: var(--accent); font-size: 15px; }
.results-note { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---- denovo Step ① interface annotation panel ---- */
.iface-panel { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: #f7f9fb; }
.iface-panel h3 { margin: 0 0 6px; font-size: 13px; color: var(--ink, #1a2733); }
.iface-panel p { margin: 2px 0; font-size: 12.5px; color: var(--ink, #1a2733); }
.iface-panel code { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 12px; }
table.grid.iface { margin-top: 8px; }
table.grid.iface td:first-child { font-family: ui-monospace, "DejaVu Sans Mono", monospace; white-space: nowrap; }
table.grid td.hits { font-family: ui-monospace,"DejaVu Sans Mono",monospace; text-align: right; color: var(--ink, #1a2733); }
table.grid td.run-id { font-family: ui-monospace, monospace; white-space: nowrap; }
tr.run-row-item { cursor: pointer; }
/* active (in-progress) runs are pinned to the top of the list with a left accent */
tr.run-row-item.active { background: rgba(44, 123, 229, 0.06); }
tr.run-row-item.active td:first-child { box-shadow: inset 3px 0 0 var(--run); }
/* per-row delete (✕): muted until row hover, red on its own hover */
table.grid td.run-del-cell { width: 1%; padding: 2px 6px; text-align: center; }
table.grid th.run-sel-cell, table.grid td.run-sel-cell { width: 1%; padding: 2px 6px; text-align: center; }
table.grid .run-sel-cell input { cursor: pointer; margin: 0; }
.run-del { border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 4px; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
tr.run-row-item:hover .run-del { opacity: 1; }
.run-del:hover { background: rgba(224, 36, 31, 0.12); color: var(--fail); }
/* "Clear all" button: small, red text, no fill until hover */
button.btn-danger-text { color: var(--fail); border-color: rgba(224, 36, 31, 0.4); background: #fff; }
button.btn-danger-text:hover { background: rgba(224, 36, 31, 0.1); border-color: var(--fail); }
#pdf-btn { background: var(--ok); color: #fff; border-color: var(--ok); font-weight: 600; }
#pdf-btn:hover { background: #18803f; }

/* recent runs use the shared table.grid styling (see above) */

@media (max-width: 1024px) {
  /* not enough room for 2 side-by-side columns → stack them vertically,
     hide the divider and drop any dragged widths */
  main { flex-direction: column; }
  .gutter { display: none; }
  .pane { flex: 1 1 auto !important; width: auto; }
  #pane-2 { margin-top: 16px; }
  #form-panel { height: auto; }
  #runs-panel { margin: 0 16px 16px; }
  /* when stacked, ignore the desktop sidebar-collapse and hide its show-tab */
  body.sidebar-collapsed #pane-1 { display: block !important; }
  #sidebar-show { display: none !important; }
  /* denser results table on narrow viewports so the fixed %columns stay legible */
  table.results { font-size: 11px; }
  table.results th, table.results td { padding: 4px 5px; }
}

/* ---- folded-model picker (progress panel) ---- */
.fold-models { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.fold-models h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.fold-models h3 .muted { font-weight: 400; font-size: 12px; }
.fold-models table { margin-top: 8px; }
.fold-models tr.sel td { background: rgba(44, 123, 229, 0.07); font-weight: 600; }

/* Phase-1 domain picker */
.site-domains { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.site-domains h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.dom-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.dom-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.dom-row:hover { border-color: var(--accent); }
.dom-row.dom-rec { border-color: var(--accent); background: rgba(44, 123, 229, 0.05); }
.dom-row input { margin-top: 3px; }
.dom-main b { font-size: 13.5px; }
.dom-why { color: var(--muted); font-size: 12px; margin-top: 3px; }
.dom-sub { font-size: 11.5px; margin-top: 3px; }
.dom-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.dom-trim { font-size: 12.5px; color: var(--muted); }
.dom-trim input { width: 120px; margin-left: 6px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 6px; }
.dom-row.dom-grey { background: #f6f7f9; cursor: not-allowed; }
.dom-item.dom-grey { opacity: 0.6; }
.dom-score { font-size: 11.5px; background: #eef1f6; color: #444; padding: 1px 7px;
  border-radius: 5px; margin-left: 4px; cursor: help; }
.dom-rt { font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.dom-caution { font-size: 11.5px; color: #9a5b00; background: #fff6e5;
  border-left: 3px solid #e0a11a; padding: 4px 8px; border-radius: 4px; margin-top: 5px; }
.dom-prov { margin-top: 4px; margin-left: 38px; padding-bottom: 2px; }
.dom-link { font-size: 11px; color: var(--accent); text-decoration: none; margin-right: 4px; }
.dom-link:hover { text-decoration: underline; }
button.secondary { background: #fff; color: var(--accent-dk); border: 1px solid var(--accent);
  font-weight: 600; padding: 9px 18px; }
button.secondary:hover { background: #f0f5ff; }
/* auto-mode per-domain progress feed */
.auto-progress { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.auto-progress h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.auto-item { font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.auto-item .a-skip { color: #9a5b00; }
.auto-item .a-run { color: var(--accent-dk); font-weight: 600; }
.auto-item .a-win { color: #1a7f37; font-weight: 600; }
.auto-item .a-err { color: #b42318; font-weight: 600; }

/* ---- Step 1 PDB upload ---- */
.upload-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.file-btn { display: inline-block; margin: 0; cursor: pointer; font-size: 13px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: var(--accent); font-weight: 600; white-space: nowrap; }
.file-btn:hover { background: #f5f9ff; border-color: var(--accent); }
.upload-info { font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.upload-ok { color: var(--ok); font-weight: 600; }
.upload-detail { margin-top: 4px; padding: 6px 9px; background: #f5f9ff;
  border: 1px solid var(--line); border-radius: 6px; font-size: 12px; line-height: 1.5; }
.upload-detail .muted { display: block; margin-top: 2px; }
/* Step-2 target-chain picker (multimer only) */
#target-chain-row { display: block; margin: 0 0 10px; font-size: 13px; }
#target-chain-row select { margin: 0 8px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; }
#target-chain-hint { font-size: 12px; }
.linkish { border: none; background: none; color: var(--fail); cursor: pointer;
  font-size: 13px; padding: 0 2px; }
#target:disabled { background: #f3f5f8; color: var(--muted); }

/* ---- collapsible per-option explanations (inline ⓘ on each option) ---- */
.hint-collapsible { display: none; }
.hint-collapsible.hint-open { display: block; }
.opt-info { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin: 0 2px; vertical-align: middle;
  border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted);
  cursor: pointer; font-size: 10px; line-height: 1; flex: 0 0 auto; }
.opt-info:hover, .opt-info.on { color: var(--accent); border-color: var(--accent); background: #f5f9ff; }

/* ---- in-page 3D viewer popup (modal overlay + iframe) ---- */
.viewer-modal { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 3vh 3vw;
  background: rgba(15, 25, 40, 0.55); backdrop-filter: blur(2px); }
.viewer-dialog { display: flex; flex-direction: column; width: min(1000px, 94vw);
  height: min(800px, 92vh); background: var(--panel, #fff); border-radius: 12px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: #f6f9fc; }
.viewer-title { font-weight: 600; font-size: 14px; color: var(--ink); flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-close { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 6px;
  line-height: 1; font-size: 15px; cursor: pointer; }
.viewer-close:hover { background: #eef2f6; border-color: var(--accent); color: var(--accent); }
.viewer-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }

/* ---- structure viewer links (progress panel) ---- */
.structures { margin-top: 12px; }
.structures h3 { margin: 0 0 6px; }
.struct-links { display: flex; flex-wrap: wrap; gap: 8px; }
.struct-links button { cursor: pointer; }
/* 3D-view button column in the denovo results table */
.results td.view { text-align: center; padding: 2px; }
.results td.view button { padding: 2px 4px; }
/* opt-in binding-partner checkbox + revealed inputs */
#use-partner-row { margin: 10px 0 6px; font-weight: 500; }
#partner-inputs { margin-left: 2px; }
/* per-run 3D-view button + structure popover (recent-runs list) */
.run-view-cell { text-align: center; position: relative; }
.run-view { cursor: pointer; }
.run-view-menu { position: absolute; right: 0; top: 100%; z-index: 20; display: flex;
  flex-direction: column; gap: 2px; padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(20,40,70,.14);
  white-space: nowrap; }
.run-view-menu button { text-align: left; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.dom-badge { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; font-weight: 600; vertical-align: middle; }
.ev-prior-success { background: #e3f6e8; color: #1a7f37; }
.ev-prior-failure { background: #fde8e8; color: #b42318; }
.ev-untested { background: #eef1f6; color: #555; }
.ev-probe-signal { background: #fff3d6; color: #9a5b00; }