/* dt.geneticker.com — overlay on the shared Geneticker theme (styles.css, imported
   verbatim from Cipher). This sheet (1) sets DT's own accent so it reads as a sibling
   of Cipher (teal) / Decipher (indigo) / Locus (cyan) / Swap (violet) — DT is a deep
   INDIGO-VIOLET — and (2) adds every component the workbench needs: the entity rail,
   the parameter grid, the node canvas, the 3D stage, dense tables and the honesty
   chips.

   DARK-MODE RULE (see darkmode-token-traps): every token and every hard-coded
   accent-rgba rule is declared THREE times — light :root, explicit
   [data-theme="dark"], and the @media prefers-dark block. Both dark blocks are
   byte-identical. Add to all three or the theme flip will miss one path.

   NOTE: locus.css uses --amber-ink / --red-ink / --blue-ink / --violet-ink but
   nothing in the estate ever defines them, so those rules silently fall through to
   the inherited colour. DT defines them below rather than inherit that bug. */

/* ================================================================ accent + tokens */
:root {
  --dt:      #4f46e5;            /* indigo-600 — DT accent (AA on white as text) */
  --dt-h:    #4338ca;            /* indigo-700 */
  --dt-on:   #ffffff;
  --dt-soft: rgba(79,70,229,.10);
  --dt-line: rgba(79,70,229,.38);
  --teal:    #4f46e5;            /* remap the family token so .brand/.eyebrow/.btn-teal inherit DT indigo */
  --teal-h:  #4338ca;

  /* readable "ink" variants of the status hues, for text on a tinted chip */
  --blue-ink:   #1557b0;
  --green-ink:  #0b7a43;
  --amber-ink:  #a35a00;
  --red-ink:    #b3261e;
  --violet-ink: #6d28d9;
  --indigo:     #4f46e5;
  --plum:       #7c3aed;
  --cyan:       #0e7490;
  --pink:       #be185d;

  /* entity-kind accents — one source of truth for cards, badges, sockets, nodes */
  --k-protein:   #0e7490;
  --k-structure: #0f766e;
  --k-antibody:  #be185d;
  --k-nucleic:   #1557b0;
  --k-molecule:  #a35a00;
  --k-vaccine:   #6d28d9;
  --k-epigenome: #0b7a43;
  --k-system:    #b3261e;
  --k-subject:   #4f46e5;
  --k-cohort:    #7c3aed;

  /* deliberately dark stages in BOTH themes — a molecular scene and a node graph
     read better on a dark ground, and flipping them would break depth cueing */
  --stage-bg:   #0b1020;
  --stage-grid: rgba(255,255,255,.055);
  --stage-line: rgba(255,255,255,.13);
  --stage-ink:  #c8cfe0;

  --zone-good: rgba(13,144,79,.10);
  --zone-mid:  rgba(227,116,0,.10);
  --zone-bad:  rgba(217,48,37,.10);
}
:root[data-theme="dark"] {
  --dt:      #8b83ff;
  --dt-h:    #a99fff;
  --dt-on:   #14122b;
  --dt-soft: rgba(139,131,255,.14);
  --dt-line: rgba(139,131,255,.48);
  --teal:    #8b83ff;
  --teal-h:  #a99fff;

  --blue-ink:   #8ab4f8;
  --green-ink:  #5bd68e;
  --amber-ink:  #f5b955;
  --red-ink:    #ff8f85;
  --violet-ink: #c4b5fd;
  --indigo:     #8b83ff;
  --plum:       #c4b5fd;
  --cyan:       #22d3ee;
  --pink:       #f472b6;

  --k-protein:   #22d3ee;
  --k-structure: #2dd4bf;
  --k-antibody:  #f472b6;
  --k-nucleic:   #8ab4f8;
  --k-molecule:  #f5b955;
  --k-vaccine:   #c4b5fd;
  --k-epigenome: #5bd68e;
  --k-system:    #ff8f85;
  --k-subject:   #8b83ff;
  --k-cohort:    #d8b4fe;

  --stage-bg:   #080b16;
  --stage-grid: rgba(255,255,255,.05);
  --stage-line: rgba(255,255,255,.12);
  --stage-ink:  #c8cfe0;

  --zone-good: rgba(40,180,99,.12);
  --zone-mid:  rgba(245,166,35,.10);
  --zone-bad:  rgba(255,107,94,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dt:      #8b83ff;
    --dt-h:    #a99fff;
    --dt-on:   #14122b;
    --dt-soft: rgba(139,131,255,.14);
    --dt-line: rgba(139,131,255,.48);
    --teal:    #8b83ff;
    --teal-h:  #a99fff;

    --blue-ink:   #8ab4f8;
    --green-ink:  #5bd68e;
    --amber-ink:  #f5b955;
    --red-ink:    #ff8f85;
    --violet-ink: #c4b5fd;
    --indigo:     #8b83ff;
    --plum:       #c4b5fd;
    --cyan:       #22d3ee;
    --pink:       #f472b6;

    --k-protein:   #22d3ee;
    --k-structure: #2dd4bf;
    --k-antibody:  #f472b6;
    --k-nucleic:   #8ab4f8;
    --k-molecule:  #f5b955;
    --k-vaccine:   #c4b5fd;
    --k-epigenome: #5bd68e;
    --k-system:    #ff8f85;
    --k-subject:   #8b83ff;
    --k-cohort:    #d8b4fe;

    --stage-bg:   #080b16;
    --stage-grid: rgba(255,255,255,.05);
    --stage-line: rgba(255,255,255,.12);
    --stage-ink:  #c8cfe0;

    --zone-good: rgba(40,180,99,.12);
    --zone-mid:  rgba(245,166,35,.10);
    --zone-bad:  rgba(255,107,94,.12);
  }
}

/* Re-tint the places the shared sheet hard-codes Cipher's teal rgba. */
.brand .logo { background: linear-gradient(135deg, var(--dt), #7c3aed); }
.side-item.active { background: var(--dt-soft); color: var(--dt-h); }
.side-item.active .si-badge { background: var(--dt-soft); color: var(--dt-h); }
:root[data-theme="dark"] .side-item.active { background: var(--dt-soft); color: var(--dt-h); }
:root[data-theme="dark"] .side-item.active .si-badge { background: var(--dt-soft); color: var(--dt-h); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side-item.active { background: var(--dt-soft); color: var(--dt-h); }
  :root:not([data-theme="light"]) .side-item.active .si-badge { background: var(--dt-soft); color: var(--dt-h); }
}

/* ================================================================ shell / views */
.content { flex: 1; min-width: 0; }
.view { display: none; }
.view.show { display: block; animation: dt-fade .14s ease; }
@keyframes dt-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }

/* DT runs wide — simulation panels are two- and three-column. */
.shell { max-width: 1520px; }

/* The sidebar is long (18 tabs), so it is grouped. The label is a plain heading,
   not a button — screen readers must not read it as navigable. */
.side-group { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink3); padding: 14px 12px 5px; }
.side-nav .side-item:first-child { margin-top: 0; }

.dt-offline-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--dt-line); background: var(--dt-soft); color: var(--dt-h); font-family: var(--display); font-weight: 600; font-size: 12px; white-space: nowrap; }
.dt-offline-chip .material-icons-outlined { font-size: 15px; }
@media (max-width: 700px) { .dt-offline-chip span:last-child { display: none; } }

.tab-status { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ================================================================ sections */
.dt-sec { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.dt-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line2); background: var(--panel2); }
.dt-sec-head h2 { font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: -.1px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.dt-sec-head h2 .material-icons-outlined { font-size: 18px; color: var(--dt); }
.dt-sec-body { padding: 16px; }
.dt-sec.tight .dt-sec-body { padding: 0; }
.dt-note { font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.dt-note + .dt-note { margin-top: 8px; }
.dt-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.dt-cols.two { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.dt-split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1100px) { .dt-split { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ badges + flags */
.kind-badge { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; flex: none; background: var(--panel2); color: var(--ink2); }
.kind-badge.protein   { background: color-mix(in srgb, var(--k-protein) 13%, transparent);   color: var(--k-protein); }
.kind-badge.structure { background: color-mix(in srgb, var(--k-structure) 13%, transparent); color: var(--k-structure); }
.kind-badge.antibody  { background: color-mix(in srgb, var(--k-antibody) 13%, transparent);  color: var(--k-antibody); }
.kind-badge.nucleic   { background: color-mix(in srgb, var(--k-nucleic) 13%, transparent);   color: var(--k-nucleic); }
.kind-badge.molecule  { background: color-mix(in srgb, var(--k-molecule) 13%, transparent);  color: var(--k-molecule); }
.kind-badge.vaccine   { background: color-mix(in srgb, var(--k-vaccine) 13%, transparent);   color: var(--k-vaccine); }
.kind-badge.epigenome { background: color-mix(in srgb, var(--k-epigenome) 13%, transparent); color: var(--k-epigenome); }
.kind-badge.system    { background: color-mix(in srgb, var(--k-system) 13%, transparent);    color: var(--k-system); }
.kind-badge.subject   { background: color-mix(in srgb, var(--k-subject) 13%, transparent);   color: var(--k-subject); }
.kind-badge.cohort    { background: color-mix(in srgb, var(--k-cohort) 13%, transparent);    color: var(--k-cohort); }

.qc-flag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.qc-flag .material-icons-outlined { font-size: 14px; }
.qc-flag.pass { background: rgba(13,144,79,.12); color: var(--green-ink); }
.qc-flag.warn { background: rgba(227,116,0,.13); color: var(--amber-ink); }
.qc-flag.fail { background: rgba(217,48,37,.12); color: var(--red-ink); }
.qc-flag.info { background: var(--panel2); color: var(--ink2); }

/* The honesty chip — attached to every approximated number in the product. */
.dt-honesty { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .2px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; cursor: help; vertical-align: middle; }
.dt-honesty .material-icons-outlined { font-size: 13px; }
.dt-honesty.measured     { background: rgba(13,144,79,.12);  color: var(--green-ink); }
.dt-honesty.derived      { background: rgba(26,115,232,.12); color: var(--blue-ink); }
.dt-honesty.estimated    { background: rgba(227,116,0,.13);  color: var(--amber-ink); }
.dt-honesty.illustrative { background: rgba(217,48,37,.11);  color: var(--red-ink); }

.dt-method { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink3); line-height: 1.55; }
.dt-method .material-icons-outlined { font-size: 14px; flex: none; margin-top: 1px; }
.dt-method b { color: var(--ink2); font-weight: 600; }

/* ================================================================ stat tiles */
.dt-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.dt-stat { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); min-width: 0; }
.dt-stat .ds-label { font-size: 10.5px; font-family: var(--display); font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--ink3); }
.dt-stat .ds-value { font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 3px; line-height: 1.25; overflow-wrap: anywhere; }
.dt-stat .ds-sub { font-size: 11.5px; color: var(--ink2); margin-top: 3px; line-height: 1.45; }
.dt-stat.good { border-color: rgba(13,144,79,.4);  background: var(--zone-good); }
.dt-stat.warn { border-color: rgba(227,116,0,.42); background: var(--zone-mid); }
.dt-stat.bad  { border-color: rgba(217,48,37,.38); background: var(--zone-bad); }
.dt-stat.info { border-color: var(--dt-line); background: var(--dt-soft); }
.dt-stat.good .ds-value { color: var(--green-ink); }
.dt-stat.warn .ds-value { color: var(--amber-ink); }
.dt-stat.bad  .ds-value { color: var(--red-ink); }

/* ================================================================ controls */
.gb-select, .gb-input { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: var(--mono); font-size: 12px; max-width: 100%; }
.gb-input:focus, .gb-select:focus { outline: none; border-color: var(--dt); box-shadow: 0 0 0 1px var(--dt); }
.gb-input.wide { min-width: 240px; }
textarea.gb-input { font-size: 12px; line-height: 1.55; width: 100%; resize: vertical; min-height: 96px; }

.dt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); margin-top: 16px; }
.dt-toolbar .sp { flex: 1; }
.dt-picker { display: inline-flex; align-items: center; gap: 7px; }
.dt-picker .material-icons-outlined { font-size: 17px; color: var(--ink3); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: none; background: var(--panel); color: var(--ink2); font-family: var(--display); font-weight: 600; font-size: 12px; padding: 7px 12px; }
.seg button + button { border-left: 1px solid var(--line2); }
.seg button.on { background: var(--dt-soft); color: var(--dt-h); }

.mini-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--ink2); border-radius: 8px; padding: 4px 9px; font-family: var(--display); font-weight: 600; font-size: 11.5px; }
.mini-btn:hover { border-color: var(--dt-line); color: var(--dt-h); background: var(--dt-soft); }
.mini-btn .material-icons-outlined { font-size: 14px; }
.mini-btn.danger:hover { border-color: rgba(217,48,37,.5); color: var(--red-ink); background: rgba(217,48,37,.08); }

/* ================================================================ parameter grid */
.dt-params { margin-top: 2px; }
.dt-pgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }
.dt-field { min-width: 0; }
.dt-flab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dt-flab label { font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--ink); min-width: 0; }
.dt-unit { font-size: 10.5px; color: var(--ink3); background: var(--panel2); padding: 1px 6px; border-radius: 5px; flex: none; }
.dt-revert { margin-left: auto; border: none; background: none; padding: 0 2px; color: var(--dt); display: grid; place-items: center; border-radius: 5px; flex: none; }
.dt-revert .material-icons-outlined { font-size: 14px; }
.dt-revert:hover { background: var(--dt-soft); }
.dt-fctl input[type=number], .dt-fctl input[type=text], .dt-fctl select { width: 100%; }
.dt-fhelp { font-size: 11px; color: var(--ink3); margin-top: 4px; line-height: 1.5; }
.dt-adv { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.dt-adv > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--ink2); list-style: none; }
.dt-adv > summary::-webkit-details-marker { display: none; }
.dt-adv > summary .material-icons-outlined { font-size: 15px; color: var(--ink3); }
.dt-adv > summary:hover { color: var(--dt-h); }
.dt-adv[open] > summary { margin-bottom: 12px; }

.dt-range { display: flex; align-items: center; gap: 9px; }
.dt-range input[type=range] { flex: 1; min-width: 0; accent-color: var(--dt); }
.dt-range output { font-size: 11.5px; color: var(--ink2); min-width: 46px; text-align: right; flex: none; }

.dt-switch { display: inline-flex; align-items: center; cursor: pointer; }
.dt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dt-sw-track { width: 38px; height: 21px; border-radius: 999px; background: var(--line); position: relative; transition: .16s; display: block; }
.dt-sw-knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .16s; }
.dt-switch input:checked + .dt-sw-track { background: var(--dt); }
.dt-switch input:checked + .dt-sw-track .dt-sw-knob { transform: translateX(17px); }
.dt-switch input:focus-visible + .dt-sw-track { box-shadow: 0 0 0 2px var(--dt-soft), 0 0 0 3px var(--dt); }

/* ================================================================ tables */
.dt-tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.dt-tablewrap.tall { max-height: 460px; }
.dt-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.dt-table th { position: sticky; top: 0; z-index: 1; background: var(--panel2); text-align: left; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink3); padding: 8px 11px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt-table td { padding: 7px 11px; border-bottom: 1px solid var(--line2); color: var(--ink); vertical-align: top; }
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table tbody tr:hover td { background: var(--panel2); }
.dt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-table th.num { text-align: right; }
.dt-table.dense td { padding: 4px 9px; font-size: 12px; }
.dt-table.dense th { padding: 6px 9px; }
.dt-table tr.sel td { background: var(--dt-soft); }

/* ================================================================ entity rail */
.dt-entities { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); margin-top: 16px; }
.ent-card { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); padding: 13px 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ent-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ec, var(--dt)); }
.ent-card.error::before { background: var(--red); }
.ent-head { display: flex; align-items: flex-start; gap: 9px; }
.ent-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--ec, var(--dt)) 13%, transparent); color: var(--ec, var(--dt)); }
.ent-ico .material-icons-outlined { font-size: 18px; }
.ent-name { font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-sub { font-size: 11.5px; color: var(--ink3); margin-top: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ent-note { font-size: 12px; color: var(--ink2); margin-top: 9px; line-height: 1.5; }
.ent-err { font-size: 12px; color: var(--red-ink); margin-top: 9px; line-height: 1.5; background: rgba(217,48,37,.08); border-radius: 8px; padding: 7px 9px; }
.ent-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.ent-x { margin-left: auto; border: none; background: none; color: var(--ink3); border-radius: 6px; display: grid; place-items: center; padding: 2px; flex: none; }
.ent-x .material-icons-outlined { font-size: 17px; }
.ent-x:hover { color: var(--red-ink); background: rgba(217,48,37,.09); }

.dt-prog { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.dt-prog .progress { flex: 1; margin-top: 0; }
.dt-prog .progress > span { background: var(--dt); }
.dt-prog-l { font-size: 11px; color: var(--ink3); flex: none; }

/* ================================================================ stages (canvas hosts) */
.dt-stage { position: relative; border-radius: 12px; overflow: hidden; background: var(--stage-bg); border: 1px solid var(--line); }
.dt-stage canvas { display: block; width: 100%; touch-action: none; }
.dt-stage-overlay { position: absolute; inset: 0; pointer-events: none; }
.dt-stage-hud { position: absolute; left: 11px; bottom: 10px; font-family: var(--mono); font-size: 11px; color: var(--stage-ink); background: rgba(0,0,0,.42); padding: 4px 9px; border-radius: 7px; pointer-events: none; white-space: pre; }
.dt-stage-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dt-stage-tools button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,14,26,.72); color: #dbe2f0; display: grid; place-items: center; }
.dt-stage-tools button:hover { background: rgba(30,38,60,.9); border-color: rgba(255,255,255,.3); }
.dt-stage-tools button.on { background: var(--dt); color: #fff; border-color: transparent; }
.dt-stage-tools button .material-icons-outlined { font-size: 17px; }
.dt-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px; font-size: 11.5px; color: var(--ink2); }
.dt-legend span.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ================================================================ node canvas */
.nc-wrap { position: relative; height: calc(100vh - 214px); min-height: 520px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--stage-bg); }
.nc-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: default; }
.nc-wrap.panning canvas { cursor: grabbing; }
.nc-bar { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.nc-bar > * { pointer-events: auto; }
.nc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(10,14,26,.78); border: 1px solid rgba(255,255,255,.14); color: #dbe2f0; font-family: var(--display); font-size: 12px; font-weight: 600; }
.nc-chip .material-icons-outlined { font-size: 15px; }
.nc-chip:hover { background: rgba(30,38,60,.92); }
.nc-chip.on { background: var(--dt); border-color: transparent; color: #fff; }
.nc-chip.run { background: var(--green); border-color: transparent; color: #fff; }
.nc-mini { position: absolute; right: 10px; bottom: 10px; width: 178px; height: 116px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); background: rgba(6,9,18,.82); overflow: hidden; }
.nc-mini canvas { width: 100%; height: 100%; }
.nc-hint { position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 11px; color: rgba(200,207,224,.72); pointer-events: none; }

/* the search-to-insert palette (Tab key) */
.nc-palette { position: absolute; z-index: 6; width: 330px; max-height: 380px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-lg); overflow: hidden; }
.nc-palette input { border: none; border-bottom: 1px solid var(--line); padding: 10px 12px; font-family: var(--body); font-size: 13px; background: var(--panel); color: var(--ink); outline: none; }
.nc-plist { overflow: auto; }
.nc-pitem { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--line2); }
.nc-pitem:last-child { border-bottom: none; }
.nc-pitem .material-icons-outlined { font-size: 17px; color: var(--ink3); flex: none; }
.nc-pitem.sel, .nc-pitem:hover { background: var(--dt-soft); }
.nc-pt { font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.nc-pd { font-size: 11px; color: var(--ink3); }
.nc-pcat { font-size: 10px; font-family: var(--display); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink3); padding: 7px 12px 3px; background: var(--panel2); }

/* the node inspector drawer */
.nc-insp { position: absolute; right: 0; top: 0; bottom: 0; width: 330px; background: var(--panel); border-left: 1px solid var(--line); overflow: auto; padding: 14px; z-index: 5; box-shadow: var(--shadow-lg); }
.nc-insp h3 { font-family: var(--display); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.nc-insp .sub { font-size: 11.5px; color: var(--ink3); margin-top: 3px; line-height: 1.5; }
.nc-insp .close { margin-left: auto; }
@media (max-width: 760px) { .nc-insp { width: 100%; } }

/* ================================================================ sequence viewer */
.dt-seq { font-family: var(--mono); font-size: 12.5px; line-height: 1.75; letter-spacing: .5px; word-break: break-all; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; max-height: 300px; overflow: auto; }
.dt-seq .r { padding: 0 .5px; border-radius: 2px; cursor: default; }
.dt-seq .r.hit { background: var(--dt-soft); color: var(--dt-h); font-weight: 700; }
.dt-seq .r.cdr { background: rgba(190,24,93,.16); color: var(--k-antibody); font-weight: 700; }
.dt-seq .r.mut { background: rgba(217,48,37,.18); color: var(--red-ink); font-weight: 700; text-decoration: underline; }
.dt-seq .r.epi { background: rgba(109,40,217,.16); color: var(--violet-ink); font-weight: 700; }
.dt-seq .r.me  { background: rgba(11,122,67,.20); color: var(--green-ink); font-weight: 700; }
.dt-seq .ruler { color: var(--ink3); user-select: none; }
.dt-seq-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: var(--ink2); }

/* helix / sheet / coil track under a sequence */
.ss-track { display: flex; height: 13px; margin-top: 6px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.ss-track i { display: block; height: 100%; }
.ss-track i.H { background: var(--red); }
.ss-track i.E { background: var(--blue); }
.ss-track i.C { background: var(--line); }

/* ================================================================ misc */
.dt-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; align-items: baseline; }
.dt-kv dt { color: var(--ink3); white-space: nowrap; }
.dt-kv dd { color: var(--ink); font-family: var(--mono); overflow-wrap: anywhere; }

.dt-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--panel2); color: var(--ink2); font-size: 11.5px; font-family: var(--display); font-weight: 600; }
.dt-pill .material-icons-outlined { font-size: 13px; }

.dt-bar { height: 7px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.dt-bar > span { display: block; height: 100%; background: var(--dt); }
.dt-bar.good > span { background: var(--green); }
.dt-bar.warn > span { background: var(--amber); }
.dt-bar.bad  > span { background: var(--red); }

.dt-warnbox { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(227,116,0,.4); background: var(--zone-mid); font-size: 12.5px; color: var(--ink); line-height: 1.55; }
.dt-warnbox .material-icons-outlined { font-size: 18px; color: var(--amber-ink); flex: none; margin-top: 1px; }
.dt-warnbox.bad { border-color: rgba(217,48,37,.4); background: var(--zone-bad); }
.dt-warnbox.bad .material-icons-outlined { color: var(--red-ink); }
.dt-warnbox.info { border-color: var(--dt-line); background: var(--dt-soft); }
.dt-warnbox.info .material-icons-outlined { color: var(--dt); }

.dt-runs { display: flex; flex-direction: column; gap: 8px; }
.run-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 12.5px; }
.run-row .rk { font-family: var(--mono); font-size: 11px; color: var(--ink3); flex: none; }
.run-row .rl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.run-row.running { border-color: var(--dt-line); background: var(--dt-soft); }
.run-row.error { border-color: rgba(217,48,37,.4); }

/* Print: the Report tab must survive Cmd-P onto a PDF. */
@media print {
  .topbar, .sidebar, .footer-honest, .dt-toolbar, .nc-wrap, .toast-wrap { display: none !important; }
  .shell { display: block; max-width: none; padding: 0; }
  .dt-sec { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}