/* GENOME LAB — приборная панель секвенатора. Светло-синяя палитра. */

:root {
  --bg: #ccd6e4;
  --panel: #d6dfeb;
  --panel-2: #c2cedd;
  --inset: #b6c4d6;
  --line: #93a6bd;
  --line-soft: #a9b9cb;
  --ink: #16243a;
  --ink-mid: #3c5273;
  --ink-dim: #67799a;
  --accent: #17549b;
  --accent-soft: #4a7fc0;
  --ok: #14654a;
  --warn: #8a5712;
  --err: #8e2f1e;
  --mythic: #6a2a8d;
  --legendary: #8a5712;
  --epic: #17549b;
  --rare: #14654a;
  --common: #67799a;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; display: flex; flex-direction: column; padding: 0 26px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
em { font-style: italic; }

/* цифры и последовательности — только они моноширинные */
.mono, .num, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------- masthead ---------------- */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  padding: 26px 0 14px;
  border-bottom: 2px solid var(--ink);
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand .mark { width: 34px; height: 34px; flex-shrink: 0; display: block; image-rendering: pixelated; }

h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1;
}
.tagline { margin: 5px 0 0; color: var(--ink-mid); font-size: 13.5px; }

.head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ---------- collection bar ---------- */
.collection-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: flex-end;
}
.collection-bar:empty { display: none; }
.cb-label {
  font-size: 12px; color: var(--ink-mid);
  border-right: 1px solid var(--line); padding-right: 14px;
}
.cb-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 10px; background: var(--panel);
  color: var(--accent); white-space: nowrap;
}
.cb-link:hover { border-color: var(--accent); background: var(--panel-2); text-decoration: none; }
/* .ico красится фоном через маску — без background-color иконка невидима. */
.cb-link .ico {
  width: 13px; height: 13px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.cb-link .ext {
  width: 9px; height: 9px; flex-shrink: 0;
  background: currentColor; opacity: 0.6;
  -webkit-mask: url('/icons/external.svg') center/contain no-repeat;
  mask: url('/icons/external.svg') center/contain no-repeat;
}

.ico-magiceden { -webkit-mask-image: url('/icons/magiceden.svg'); mask-image: url('/icons/magiceden.svg'); }
.ico-tensor { -webkit-mask-image: url('/icons/tensor.svg'); mask-image: url('/icons/tensor.svg'); }
.ico-solana { -webkit-mask-image: url('/icons/solana.svg'); mask-image: url('/icons/solana.svg'); }
.ico-x { -webkit-mask-image: url('/icons/x.svg'); mask-image: url('/icons/x.svg'); }

/* метка «minted» отделяется от ссылок с обеих сторон */
.collection-bar .cb-label { border-left: 1px solid var(--line); padding-left: 14px; }

.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tabs a {
  padding: 7px 15px;
  color: var(--ink-mid);
  border: 1px solid transparent;
  border-bottom: none;
  font-size: 13px;
  letter-spacing: 0.01em;
  border-radius: 3px 3px 0 0;
}
.tabs a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.tabs a.on {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--accent);
}

/* ---------------- views ---------------- */
.view { flex: 1 0 auto; padding: 18px 0 26px; display: flex; flex-direction: column; gap: 14px; }
.view[hidden] { display: none; }

/* ---------------- readouts (приборы) ---------------- */
.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}

.readout {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 14px 12px;
  position: relative;
  overflow: hidden;
}
.readout .rk {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: block;
  margin-bottom: 3px;
}
.readout .rv {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.readout .ru { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; display: block; }
.readout.live .rv { color: var(--accent); }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 20px; margin-top: 6px; }
.spark i { flex: 1; background: var(--accent-soft); opacity: 0.55; border-radius: 1px 1px 0 0; }

.pulse-dot {
  position: absolute; top: 11px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}
.pulse-dot.busy { background: var(--accent); animation: pulse 1.15s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.2; transform: scale(0.82); } }

/* ---------------- instrument panels ---------------- */
.instrument {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  min-width: 0;
}

.inst-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 3px 3px 0 0;
}
.inst-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  font-weight: 600;
}
.inst-note { font-size: 12px; color: var(--ink-dim); }
.inst-link { font-size: 12px; }

.pad { padding: 14px 16px; }
.pad p { margin: 0 0 10px; }
.pad p:last-child { margin-bottom: 0; }
.muted { color: var(--ink-dim); font-size: 12.5px; }

.bench-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.bench-main, .bench-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------------- run track (замена pipeline) ---------------- */
.run-track { display: flex; align-items: stretch; padding: 0; }

.run-stage {
  flex: 1;
  padding: 13px 14px 14px;
  border-right: 1px solid var(--line-soft);
  position: relative;
  min-width: 0;
  transition: background 0.25s;
}
.run-stage:last-child { border-right: none; }
.run-stage .rs-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  display: block;
}
.run-stage .rs-l { font-size: 13.5px; margin-top: 1px; display: block; }
.run-stage .rs-s { font-size: 11.5px; color: var(--ink-dim); display: block; margin-top: 1px; }
.run-stage .bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: transparent;
}
.run-stage.done { background: rgba(23, 84, 155, 0.05); }
.run-stage.done .bar { background: var(--line); }
.run-stage.active { background: rgba(23, 84, 155, 0.11); }
.run-stage.active .rs-l { font-weight: 600; color: var(--accent); }
.run-stage.active .bar { background: var(--accent); animation: sweep 1.5s ease-in-out infinite; }
@keyframes sweep { 0%,100% { opacity: 1; } 50% { opacity: 0.32; } }

/* ---------------- reasoning + typing ---------------- */
.reasoning {
  padding: 15px 17px;
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-mid);
  white-space: pre-wrap;
}
.type-caret {
  display: inline-block;
  width: 8px; height: 15px;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1.05s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------------- tags ---------------- */
.tag {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  background: var(--inset);
  white-space: nowrap;
}
.tag.verified { border-color: var(--ok); color: var(--ok); }
.tag.computed { border-color: var(--accent); color: var(--accent); }
.tag.inferred { border-color: var(--warn); color: var(--warn); }
.tag.extinct  { border-color: var(--err); color: var(--err); }

.r-common { color: var(--common); border-color: var(--common); }
.r-rare { color: var(--rare); border-color: var(--rare); }
.r-epic { color: var(--epic); border-color: var(--epic); }
.r-legendary { color: var(--legendary); border-color: var(--legendary); }
.r-mythic { color: var(--mythic); border-color: var(--mythic); }

.legend > div { display: flex; gap: 10px; align-items: baseline; margin-bottom: 7px; font-size: 12.5px; }

/* ---------- who runs the bench ---------- */
.models { display: flex; flex-direction: column; gap: 9px; margin-bottom: 11px; }
.model-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  align-items: baseline;
  border-left: 2px solid var(--accent); padding-left: 10px;
}
.mdl {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--accent); white-space: nowrap;
}
.mdl-role { font-size: 12.5px; color: var(--ink-mid); line-height: 1.45; }

/* ---------------- source links with icons ---------------- */
.src { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.src .ext {
  width: 10px; height: 10px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('/icons/external.svg') center/contain no-repeat;
  mask: url('/icons/external.svg') center/contain no-repeat;
  opacity: 0.75;
}
.src .ico {
  width: 12px; height: 12px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.ico-dna { -webkit-mask-image: url('/icons/dna.svg'); mask-image: url('/icons/dna.svg'); }
.ico-uniprot { -webkit-mask-image: url('/icons/uniprot.svg'); mask-image: url('/icons/uniprot.svg'); }
.ico-pdb { -webkit-mask-image: url('/icons/pdb.svg'); mask-image: url('/icons/pdb.svg'); }
.ico-molecule { -webkit-mask-image: url('/icons/molecule.svg'); mask-image: url('/icons/molecule.svg'); }
.ico-fold { -webkit-mask-image: url('/icons/fold.svg'); mask-image: url('/icons/fold.svg'); }
.ico-wiki { -webkit-mask-image: url('/icons/wiki.svg'); mask-image: url('/icons/wiki.svg'); }
.ico-taxonomy { -webkit-mask-image: url('/icons/taxonomy.svg'); mask-image: url('/icons/taxonomy.svg'); }

/* иконка чуть крупнее в футере и заметных ссылках */
.sources .src .ico, .inst-head .src .ico { width: 13px; height: 13px; }

.sources { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------- scale ---------------- */
.scale { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 10px; }
.scale-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 9px; align-items: center; font-size: 12px; }
.scale-row .sr-k { font-family: var(--mono); color: var(--ink-dim); }
.scale-row .sr-bar { height: 7px; background: var(--inset); border-radius: 2px; overflow: hidden; }
.scale-row .sr-bar i { display: block; height: 100%; }

/* ---------------- lists ---------------- */
.scroll-list { max-height: 268px; overflow-y: auto; padding: 8px 12px; }
.sp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  padding: 2px 0; font-size: 12.5px; align-items: baseline;
}
.sp-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row .acc { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.sp-row.ext .nm { color: var(--err); }

/* ---------------- log ---------------- */
.wide { flex-shrink: 0; }
.log-scroll { max-height: 300px; overflow-y: auto; padding: 8px 14px; }
.log-line {
  display: grid;
  grid-template-columns: 70px 88px minmax(0, 1fr);
  gap: 14px;
  padding: 3px 0;
  align-items: baseline;
  font-size: 13px;
}
.log-line + .log-line { border-top: 1px solid rgba(147, 166, 189, 0.22); }
.log-line .t { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.log-line .s { font-family: var(--mono); font-size: 11px; color: var(--ink-mid); }
.log-line .m { color: var(--ink); overflow-wrap: anywhere; }
.log-line.ok .m { color: var(--ok); }
.log-line.warn .m { color: var(--warn); }
.log-line.err .m { color: var(--err); }
.log-detail {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* ---------------- creature cards ---------------- */
.creatures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
  padding: 13px;
}
.wide-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2);
  display: flex; flex-direction: column;
  min-width: 0; cursor: pointer;
  transition: border-color 0.14s, transform 0.14s;
  overflow: hidden;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }

.card .thumb {
  aspect-ratio: 1;
  background: var(--inset);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.card .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card .thumb .pending { color: var(--ink-dim); font-size: 11.5px; text-align: center; padding: 12px; }

/* бейдж «на чейне» поверх портрета */
.card .thumb { position: relative; }
.on-chain {
  position: absolute; left: 7px; bottom: 7px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(214, 223, 235, 0.93);
  border: 1px solid var(--line);
  border-radius: 2px; padding: 1px 6px;
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  pointer-events: none;
}
.on-chain .ico {
  width: 10px; height: 10px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('/icons/solana.svg') center/contain no-repeat;
  mask: url('/icons/solana.svg') center/contain no-repeat;
}

/* блок NFT в модалке */
.nft-box {
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--inset); padding: 10px 12px;
}
.nft-id {
  font-size: 11px; color: var(--ink-dim);
  overflow-wrap: anywhere; margin-bottom: 8px;
}
.nft-links { display: flex; gap: 7px; flex-wrap: wrap; }

.card .meta { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.card .serial {
  display: flex; justify-content: space-between; gap: 7px; align-items: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
}
.card .name { font-weight: 650; font-size: 14px; line-height: 1.25; }
.card .latin { color: var(--ink-mid); font-size: 11.5px; font-style: italic; }
.card .nums {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 2px;
}

/* ---------------- filters ---------------- */
/* ---------- collection panel (archive) ---------- */
.collection-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
  margin: 13px 13px 0; padding: 13px 15px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 3px; background: var(--panel-2);
}
.collection-panel:empty { display: none; }
.cp-title { font-weight: 650; font-size: 15px; }
.cp-sub { color: var(--ink-mid); font-size: 12.5px; margin-top: 2px; max-width: 62ch; }
.cp-addr { font-size: 11px; color: var(--ink-dim); margin-top: 6px; overflow-wrap: anywhere; }
.cp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cp-count { font-size: 12.5px; color: var(--ink-mid); }
.cp-count strong { font-family: var(--mono); font-size: 19px; color: var(--accent); }

@media (max-width: 820px) {
  .collection-panel { grid-template-columns: minmax(0, 1fr); }
  .cp-right { align-items: flex-start; }
}

.filters {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.fgroup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.flabel {
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-dim); margin-right: 2px;
}
.chip {
  border: 1px solid var(--line); background: var(--inset); color: var(--ink-mid);
  border-radius: 2px; padding: 3px 11px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.chip:hover { border-color: var(--accent-soft); color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
select, .check {
  border: 1px solid var(--line); background: var(--inset); color: var(--ink);
  border-radius: 2px; padding: 3px 8px; font-size: 12px; font-family: inherit;
}
.check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

/* ---------------- molecules ---------------- */
.mol-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px; padding: 13px;
}
.mol-grid > .mol { grid-template-rows: auto 1fr; display: grid; }
.mol {
  border: 1px solid var(--line); border-radius: 3px; background: #eef3f8;
  overflow: hidden;
}
.mol .struct {
  aspect-ratio: 1.35; background: #fff; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.mol .struct img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mol .mm { padding: 9px 11px 11px; background: var(--panel-2); }
.mol .mname { font-weight: 650; font-size: 13.5px; }
.mol .mrole { color: var(--ink-mid); font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
.mol .mform {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  margin-top: 5px; display: flex; justify-content: space-between; gap: 8px;
}

/* ---------------- structures ---------------- */
.struct-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 11px; padding: 13px;
}
.struct-card {
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.struct-card .st-top {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
}
.struct-card .st-title { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.struct-card .st-org { font-size: 11.5px; font-style: italic; color: var(--ink-mid); }
.struct-card .st-foot {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
}
.plddt { display: flex; align-items: center; gap: 6px; }
.plddt .pbar { width: 54px; height: 6px; background: var(--inset); border-radius: 2px; overflow: hidden; }
.plddt .pbar i { display: block; height: 100%; background: var(--ok); }

/* ---------------- tree ---------------- */
.picker { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 12px; }
.picker select { min-width: 190px; padding: 5px 9px; font-size: 13px; }
.pair-readout {
  border: 1px solid var(--line); border-radius: 3px; background: var(--inset);
  padding: 13px 15px; min-height: 62px;
}
.clades { padding: 4px 14px 14px; }
.clade { margin-bottom: 16px; }
.clade h3 {
  margin: 0 0 7px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mid); font-weight: 600;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 4px;
}
.clade .nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.node {
  border: 1px solid var(--line); border-radius: 2px; background: var(--panel-2);
  padding: 3px 10px; font-size: 12.5px; cursor: pointer;
}
.node:hover { border-color: var(--accent); color: var(--accent); }
.node.ext { border-color: var(--err); color: var(--err); }
.node.sel { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------- vanished ---------------- */
.vanished-list { padding: 13px; display: flex; flex-direction: column; gap: 10px; }
.vrow {
  border: 1px solid var(--line); border-left: 3px solid var(--err); border-radius: 3px;
  background: var(--panel-2); padding: 12px 15px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start;
}
.vrow .vname { font-weight: 650; font-size: 15px; }
.vrow .vlat { font-style: italic; color: var(--ink-mid); font-size: 12.5px; }
.vrow .vmeta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); margin-top: 5px; }
.vrow .vlinks { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 12px; }

/* ---------------- modal ---------------- */
.modal {
  position: fixed; inset: 0; background: rgba(18, 32, 52, 0.6);
  display: none; align-items: center; justify-content: center; padding: 26px; z-index: 60;
}
.modal.open { display: flex; }
.modal-inner {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  max-width: 920px; width: 100%; max-height: 90vh; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}
.modal-inner .img-side { border-right: 1px solid var(--line); background: var(--inset); }
.modal-inner .img-side img { width: 100%; height: auto; object-fit: contain; display: block; }
.modal-inner .info { padding: 18px 20px 22px; min-width: 0; }
.modal-inner h3 { margin: 0 0 1px; font-size: 23px; letter-spacing: -0.02em; }
.modal-inner .lat { color: var(--ink-mid); font-style: italic; margin-bottom: 13px; }
.modal-inner .close {
  float: right; cursor: pointer; color: var(--ink-mid); font-size: 12px;
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 8px; background: var(--inset);
}
.kv { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 5px 12px; margin: 14px 0; font-size: 12.5px; }
.kv .k { color: var(--ink-dim); }
.sec-label {
  margin: 16px 0 7px; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-dim); display: flex; gap: 8px; align-items: center;
}
.trait { border-left: 2px solid var(--line); padding-left: 11px; margin-bottom: 9px; font-size: 12.5px; }
.trait .tn { color: var(--ink); }
.trait .tf { color: var(--ink-dim); font-size: 11.5px; }
.mut {
  display: inline-block; border: 1px solid var(--line-soft); border-radius: 2px;
  padding: 1px 6px; margin: 0 4px 4px 0; font-family: var(--mono); font-size: 11px;
  color: var(--ink-mid); background: var(--inset);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--inset); }
::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

footer {
  margin-top: auto; flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 14px 0 18px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--ink-dim); font-size: 12.5px;
}

@media (max-width: 1150px) {
  .bench-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  body { padding: 0 14px; }
  h1 { font-size: 26px; }
  .masthead { align-items: flex-start; }
  .run-track { flex-wrap: wrap; }
  .run-stage { flex: 1 1 33%; border-bottom: 1px solid var(--line-soft); }
  .modal-inner { grid-template-columns: minmax(0, 1fr); }
  .modal-inner .img-side { border-right: none; border-bottom: 1px solid var(--line); }
  .log-line { grid-template-columns: 60px minmax(0, 1fr); gap: 8px; }
  .log-line .s { display: none; }
}