/* ============ SeqKan v1.6.34 · 全局样式 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 13px; color: #1f2937; background: #f4f6fa;
  user-select: none;
}
#app { display: flex; flex-direction: column; height: 100%; }

/* ============ 顶栏 ============ */
.topbar {
  flex-shrink: 0; height: 56px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: linear-gradient(135deg, #1554c1 0%, #2f7dd1 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(21,84,193,.2);
}
/* 上下留出内边距，容纳客服按钮右上角外挂的未读角标，避免被 overflow 裁切 */
.toolbar { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: nowrap; overflow: hidden; padding: 7px 0; }
.tb-btn {
  padding: 4px 7px; border: none; border-radius: 4px;
  background: rgba(255,255,255,.18); color: #fff;
  font-size: 11.5px; cursor: pointer; transition: background .15s; white-space: nowrap;
}
.tb-btn:hover { background: rgba(255,255,255,.3); }
.tb-btn-primary { background: rgba(255,255,255,.35); }
.tb-btn-primary:hover { background: rgba(255,255,255,.5); }
.tb-btn-quick.is-on { background: rgba(255,255,255,.42); font-weight: 600; }
/* 在线版导出下拉（桌面端隐藏，走原生文件菜单） */
.tb-export { display: flex; }
.tb-export[hidden] { display: none; }
.tb-export-menu {
  position: fixed; z-index: 300; min-width: 150px; padding: 4px;
  background: #fff; border: 1px solid #e4e9f2; border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 32, 56, .18);
}
.tb-export-menu[hidden] { display: none; }
.tb-export-menu button {
  display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; text-align: left; font-size: 12.5px; color: #33415c;
  white-space: nowrap; cursor: pointer;
}
.tb-export-menu button:hover { background: #eef4fd; color: #1554c1; }
html[data-theme="dark"] .tb-export-menu { background: #1a2230; border-color: #2a3547; }
html[data-theme="dark"] .tb-export-menu button { color: #cbd5e1; }
html[data-theme="dark"] .tb-export-menu button:hover { background: #22303f; color: #8ec0f5; }
.tb-sep { width: 1px; height: 16px; background: rgba(255,255,255,.3); margin: 0 4px; }
/* 欢迎页（无文件）保留快捷入口左侧的竖线 */
body.no-doc .tb-sep-main { display: block; }
.tb-label { font-size: 11px; opacity: .9; min-width: 36px; text-align: center; }
.topbar-info { display: flex; gap: 8px; }
.info-chip {
  padding: 3px 10px; background: rgba(255,255,255,.2);
  border-radius: 12px; font-size: 11.5px; font-weight: 600;
}

/* ============ 主体 ============ */
.main { flex: 1; display: flex; overflow: hidden; }

/* ============ 左侧边栏 ============ */
.sidebar {
  width: 380px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid #e4e8ee; background: #fff;
}
.tabs {
  flex-shrink: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px; padding: 8px;
  border-bottom: 1px solid #eef1f5; background: #f8fafd;
}
.tab {
  height: 28px; padding: 0 4px; border: 1px solid #e2e8f1; border-radius: 5px;
  background: #fff; font-size: 12px; color: #5b6b80;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: all .15s;
}
.tab:hover { color: #1554c1; background: #f2f7ff; border-color: #c9daf2; }
.tab.active { color: #1554c1; background: #e3ecf9; border-color: #c0d3ed; font-weight: 600; }
.tab-pane { display: none; flex: 1; overflow-y: auto; padding: 12px; }
.tab-pane.active { display: block; }

/* Pane 通用 */
.pane-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pane-head span:first-child { font-weight: 600; color: #1f2937; font-size: 13px; }
.pane-sub { color: #8a94a6; font-size: 11px; }
.pane-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pa-label { font-size: 11px; color: #5b6b80; display: flex; align-items: center; gap: 4px; }
.pa-label input { width: 70px; padding: 2px 4px; border: 1px solid #d5dbe4; border-radius: 3px; font-size: 11px; }

.btn-mini {
  padding: 3px 10px; border: 1px solid #d5dbe4; border-radius: 4px;
  background: #fff; font-size: 11.5px; color: #3b4755; cursor: pointer;
  transition: all .15s;
}
.btn-mini:hover { background: #f4f6fa; border-color: #b7c3d4; }
.btn-mini:disabled { opacity: .4; cursor: not-allowed; }
.btn-mini.btn-primary { background: #1554c1; color: #fff; border-color: #1554c1; }
.btn-mini.btn-primary:hover { background: #0f44a0; }
.btn-mini.btn-danger { color: #c53030; border-color: #e6a3a3; }
.btn-mini.btn-danger:hover { background: #fff0f0; }

/* 序列 pane：纵向拉长，填满下方空白；外层不再滚动，避免与编辑框出现双滚动条 */
.tab-pane[data-pane="seq"].active { display: flex; flex-direction: column; overflow: hidden; }
.seq-editor {
  width: 100%; flex: 1; min-height: 160px; resize: none;
  padding: 10px; border: 1px solid #d5dbe4; border-radius: 5px;
  font-family: "Consolas", "SF Mono", monospace; font-size: 11.5px;
  line-height: 1.6; color: #3b4755; background: #fafbfd;
}

/* 酶切 pane */
.enz-filter { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.enz-filter input, .enz-filter select {
  padding: 4px 8px; border: 1px solid #d5dbe4; border-radius: 4px;
  font-size: 11.5px; background: #fff;
}
.enz-filter input { flex: 1; min-width: 120px; }
.enz-list { max-height: 260px; overflow-y: auto; border: 1px solid #eef1f5; border-radius: 5px; }
.enz-row { padding: 3px 6px; border-bottom: 1px solid #f0f3f8; }
.enz-row:hover { background: #f4f6fa; }
.enz-row.enz-active { background: #eaf2fb; }
.enz-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11.5px; }
.enz-label input { accent-color: #1554c1; }
.enz-name { font-weight: 600; color: #2f7dd1; min-width: 56px; }
.enz-site { font-family: monospace; color: #3b4755; font-size: 10.5px; min-width: 54px; }
.enz-cut { color: #8a94a6; font-size: 10px; margin-left: auto; }
.frag-list { margin-top: 8px; }
.frag-empty { color: #9aa3af; font-size: 11.5px; padding: 10px 0; text-align: center; }
.frag-row { display: flex; gap: 6px; padding: 3px 6px; border-bottom: 1px solid #f0f3f8; font-size: 11.5px; align-items: center; }
.frag-no { color: #9aa3af; font-family: monospace; min-width: 20px; }
.frag-len { font-weight: 600; color: #1554c1; min-width: 80px; }
.frag-enzyme { color: #8a94a6; font-size: 10.5px; font-family: monospace; }

/* 引物 pane */
.primer-inputs { margin-bottom: 8px; }
.primer-inputs textarea {
  width: 100%; padding: 8px; border: 1px solid #d5dbe4; border-radius: 5px;
  font-family: monospace; font-size: 12px;
}
.primer-actions { display: flex; gap: 6px; margin-top: 6px; }
.primer-result {
  border: 1px solid #eef1f5; border-radius: 5px; padding: 10px;
  background: #fafbfd;
}
.prm-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.prm-row b { color: #1554c1; font-family: monospace; }
.prm-warn { font-size: 11px; color: #d97706; margin-top: 4px; }

/* 元件标注 pane */
.feature-list { max-height: 200px; overflow-y: auto; border: 1px solid #eef1f5; border-radius: 5px; margin-bottom: 12px; }
.feat-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #f0f3f8; }
.feat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.feat-info { flex: 1; min-width: 0; }
.feat-lbl { font-weight: 600; font-size: 11.5px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-type { font-weight: 400; color: #8a94a6; font-size: 10px; }
.feat-loc { color: #9aa3af; font-size: 10.5px; font-family: monospace; margin-top: 1px; }
.feature-add { border-top: 1px solid #eef1f5; padding-top: 10px; }
.fa-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.fa-row input, .fa-row select {
  padding: 4px 6px; border: 1px solid #d5dbe4; border-radius: 4px;
  font-size: 11.5px;
}
.fa-row input[type="color"] { width: 28px; height: 24px; padding: 0; border: none; }
.fa-row input { flex: 1; min-width: 0; }
.fa-row input[type="number"] { width: 70px; flex: none; }

/* ORF pane */
.orf-list { max-height: 340px; overflow-y: auto; }
.orf-row { border: 1px solid #eef1f5; border-radius: 5px; padding: 8px; margin-bottom: 6px; background: #fafbfd; }
.orf-head { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; margin-bottom: 3px; }
.orf-no { font-weight: 700; color: #2fa77a; }
.orf-len { color: #1554c1; font-weight: 600; font-family: monospace; }
.orf-frame { color: #8a94a6; font-family: monospace; }
.orf-coord { color: #5b6b80; font-size: 11px; font-family: monospace; margin-bottom: 3px; }
.orf-peptide { color: #3b4755; font-family: monospace; font-size: 10.5px; line-height: 1.5; word-break: break-all; }
.orf-btns { margin-top: 6px; display: flex; gap: 4px; }

/* GC pane */
.gc-canvas { width: 100%; border: 1px solid #eef1f5; border-radius: 5px; background: #fafbfd; }
.gc-stats { margin-top: 8px; font-size: 11.5px; color: #5b6b80; line-height: 1.6; }

/* 翻译 pane */
.trans-list { max-height: 400px; overflow-y: auto; }
.tr-row { border: 1px solid #eef1f5; border-radius: 5px; padding: 8px; margin-bottom: 6px; background: #fafbfd; }
.tr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; }
.tr-label { font-weight: 700; color: #2f7dd1; }
.tr-len { color: #8a94a6; margin-left: auto; font-family: monospace; }
.tr-peptide { font-family: monospace; font-size: 11.5px; line-height: 1.7; color: #3b4755; word-break: break-all; }

/* 阅读框翻译 chip + tip */
.trans-frames { display: flex; gap: 6px; margin-bottom: 8px; }
.frame-chip {
  flex: 1; padding: 6px 4px; font-size: 12px; border: 1px solid #d5dbe4; border-radius: 6px;
  background: #fff; color: #3b4755; cursor: pointer; transition: all .15s;
}
.frame-chip:hover { border-color: #2f7dd1; color: #2f7dd1; }
.frame-chip.active { background: #2f7dd1; border-color: #2f7dd1; color: #fff; font-weight: 700; }
.frame-tip {
  position: fixed; z-index: 9999; max-width: 340px; max-height: 220px; overflow-y: auto;
  background: #fff; border: 1px solid #d5dbe4; border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); pointer-events: none;
}
.frame-tip-title { font-size: 11px; font-weight: 700; color: #2f7dd1; margin-bottom: 4px; }
.frame-tip-seq { font-family: Consolas, Menlo, monospace; font-size: 11px; line-height: 1.7; color: #3b4755; word-break: break-all; }
.trans-preview { font-size: 11.5px; }
.trans-preview-empty { color: #8a94a6; }
.aa-head {
  border: 1px solid #e3e9f2; border-bottom: none; border-radius: 6px 6px 0 0;
  background: #f7fafd; padding: 8px 10px;
}
.aa-head-line { display: flex; align-items: baseline; gap: 8px; }
.aa-head-line b { font-size: 12px; color: #1554c1; }
.aa-head-line span { font-size: 11px; color: #8a94a6; font-family: Consolas, Menlo, monospace; }
.aa-orfs { margin-top: 3px; font-size: 10.5px; line-height: 1.65; color: #6b7280; word-break: break-all; }
.aa-body {
  border: 1px solid #e3e9f2; border-radius: 0 0 6px 6px; background: #fff;
  max-height: 46vh; overflow-y: auto; padding: 6px 8px;
}
.aa-line { display: flex; gap: 8px; font-family: Consolas, Menlo, monospace; font-size: 11px; line-height: 1.9; }
.aa-no { flex: none; width: 34px; text-align: right; color: #b6c0cd; }
.aa-seq { white-space: pre; color: #3b4755; letter-spacing: .2px; }
.aa-foot { margin-top: 8px; }
.aa-res { cursor: pointer; border-radius: 2px; }
.aa-res:hover { background: #dbeafe; }
.aa-res.sel { background: #2563eb; color: #fff; }
.aa-seq .aa-stop,
.aa-seq .aa-start { font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; }
.aa-seq .aa-stop { color: #dc2626; }
.aa-seq .aa-start { color: #15803d; }
.aa-sel {
  margin-top: 6px; padding: 4px 8px; border-radius: 5px; font-size: 11px;
  font-family: Consolas, Menlo, monospace; color: #1554c1;
  background: #eef5ff; border: 1px solid #d7e6fb;
}
/* 翻译面板 ORF 列表 */
.torg-list {
  margin-top: 8px; border: 1px solid #e3e9f2; border-radius: 6px;
  background: #fff; overflow: hidden;
}
.torg-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 9px;
  font-size: 11.5px; cursor: pointer; border-bottom: 1px solid #f0f3f8;
}
.torg-row:last-child { border-bottom: none; }
.torg-row:hover { background: #f4f8ff; }
.torg-row.active { background: #e8f1ff; box-shadow: inset 3px 0 0 #2563eb; }
.torg-len { font-weight: 700; color: #1554c1; min-width: 56px; font-family: Consolas, Menlo, monospace; }
.torg-loc { color: #374151; font-family: Consolas, Menlo, monospace; }
.torg-bp { margin-left: auto; color: #9aa3af; font-size: 10.5px; font-family: Consolas, Menlo, monospace; }
.torg-empty { padding: 10px; text-align: center; color: #9aa3af; font-size: 11.5px; }
.torg-more summary {
  padding: 5px 9px; font-size: 11px; color: #6b7280; cursor: pointer;
  background: #fafbfd; list-style: none;
}
.torg-more summary::-webkit-details-marker { display: none; }
.torg-more summary:hover { color: #1554c1; }
.torg-body .torg-row { padding-left: 18px; }

/* 双酶切 pane */
.digest-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.dr-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.dr-item span { color: #8a94a6; }
.de-select { width: 100%; height: 30px; padding: 0 8px; border: 1px solid #d5dbe4; border-radius: 4px; font-size: 12px; background: #fff; }
.digest-row .btn-mini { flex: none; height: 30px; padding: 0 14px; font-size: 12px; }
.de-list { max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
.de-empty { color: #9aa3af; font-size: 11px; padding: 10px; text-align: center; }
.de-pair {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  border-bottom: 1px solid #f0f3f8; font-size: 11.5px;
}
.de-enzyme { font-family: monospace; color: #2f7dd1; font-weight: 600; }
.de-plus { color: #9aa3af; }
.de-info { margin-left: auto; color: #8a94a6; font-size: 10.5px; }
.de-result { border: 1px solid #eef1f5; border-radius: 5px; padding: 10px; background: #fafbfd; }
.de-result-head { font-weight: 700; color: #1554c1; margin-bottom: 8px; font-size: 12px; }
.de-cols { display: flex; gap: 10px; flex-wrap: wrap; }
.de-col { flex: 1; min-width: 140px; }
.de-col-main { background: #eaf2fb; border-radius: 4px; padding: 6px; }
.de-col-title { font-size: 11px; font-weight: 700; color: #5b6b80; margin-bottom: 3px; }
.de-col ul { list-style: none; padding: 0; margin: 0; }
.de-col li { font-family: monospace; font-size: 11px; padding: 1px 0; color: #3b4755; }

/* 比对 pane */
textarea#alignA, textarea#alignB {
  width: 100%; padding: 8px; border: 1px solid #d5dbe4; border-radius: 5px;
  font-family: monospace; font-size: 12px; margin-bottom: 6px; resize: vertical;
}
.align-species { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.align-species-label { flex: none; font-size: 12px; color: #475569; }
.align-species-select,
.align-species-input {
  flex: 1; min-width: 0; height: 28px; padding: 0 8px;
  border: 1px solid #dbe1ea; border-radius: 6px; background: #fff;
  font-size: 12px; color: #1f2937; box-sizing: border-box;
}
.align-species-select:focus,
.align-species-input:focus { outline: none; border-color: #7aa7e0; box-shadow: 0 0 0 2px rgba(47,125,209,.12); }
.align-species-hint { margin: 0 1px 8px; }
.align-kind { margin-left: auto; align-self: center; padding: 2px 8px; border-radius: 10px; background: #eaf2fb; color: #1554c1; font-size: 11px; line-height: 1.4; }
.align-kind.is-protein { background: #f3e8ff; color: #7c3aed; }
.align-result { margin-top: 8px; border: 1px solid #eef1f5; border-radius: 5px; padding: 10px; background: #fafbfd; }
.al-stats { font-size: 11px; color: #5b6b80; margin-bottom: 4px; }
.al-identity { font-size: 14px; color: #1554c1; font-weight: 700; margin-bottom: 8px; }
.al-block { font-family: monospace; font-size: 10.5px; line-height: 1.5; overflow-x: auto; }
.al-row { display: flex; gap: 0; padding: 2px 0; }
.al-pos { width: 60px; color: #9aa3af; }
.al-a { color: #2f7dd1; }
.al-match { color: #d97706; }
.al-b { color: #2fa77a; }

/* ============ 中部主区域 ============ */
.content {
  flex: 1; position: relative;
  display: flex; flex-direction: column;
  background: #f8fafd; overflow: hidden;
}

/* ---- 主视图 Tab 栏（仿 Addgene 红框部分） ---- */
.view-tabs {
  flex-shrink: 0; display: flex; gap: 0; padding: 10px 20px 0;
  background: #fff; border-bottom: 1px solid #e4e8ee;
}
.view-tab {
  padding: 9px 16px; border: 1px solid transparent; border-bottom: none;
  border-top-left-radius: 6px; border-top-right-radius: 6px;
  background: transparent; font-size: 13px; color: #6b7a8e; font-weight: 500;
  cursor: pointer; transition: all .15s;
  margin-right: 2px;
}
.view-tab:hover { color: #1554c1; background: #f4f8fd; }
.view-tab.active {
  color: #1554c1; background: #f8fafd; border-color: #c0d3ed;
  font-weight: 600; position: relative; top: 1px;
  box-shadow: 0 -2px 6px rgba(21,84,193,.06);
}

/* ---- 视图面板 ---- */
.view-panel {
  display: none; flex: 1; overflow: hidden;
  padding: 16px 20px;
}
.view-panel.active { display: flex; flex-direction: column; }
/* hidden 必须压过 .active 的 display:flex，否则清空序列后旧图谱仍残留 */
.view-panel[hidden] { display: none !important; }

/* ---- 右侧比对结果面板 ---- */
.result-panel { overflow: hidden; }
.result-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 2px 10px; margin-bottom: 10px;
  border-bottom: 1px solid #e6ebf2;
  font-size: 13px; font-weight: 600; color: #1f2d3d;
}
.result-panel-head #resultPanelTitle { margin-right: auto; }
.result-panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 20px; }
.result-panel-body .alq { background: #fff; }

/* ---- 比对结果（BLAST 风格） ---- */
.alq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.alq-title { font-weight: 700; color: #1f2d3d; }
.alq-stats { color: #5b6a7d; font-size: 11.5px; }
.alq-species { padding: 1px 8px; border: 1px solid #c7d2fe; border-radius: 9px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 500; }
.alq-legend { margin-bottom: 10px; font-size: 11px; color: #7a8699; }
.alq-legend .alq-k, .alq-mid .alq-k { color: #7b8794; }
.alq-legend .alq-x, .alq-mid .alq-x { color: #dc2626; }
.alq-legend .alq-gap { color: #2563eb; }
.alq-block { margin-bottom: 12px; border-bottom: 1px dashed #eef1f5; padding-bottom: 8px; }
.alq-row { display: flex; align-items: center; gap: 8px; font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 17px; }
.alq-row .alq-seq { flex: none; white-space: pre; letter-spacing: 0; }
.alq-name { width: 132px; flex: none; font-family: system-ui, "Microsoft YaHei", sans-serif; font-size: 11.5px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.alq-coord { width: 46px; flex: none; text-align: right; color: #94a3b8; font-size: 11px; }
.alq-mid { line-height: 15px; }
.alq-mm { color: #dc2626; font-weight: 700; background: #fdecec; border-radius: 2px; }
.alq-gap { color: #2563eb; }
.alq-warn { margin-left: 8px; padding: 1px 6px; border-radius: 8px; background: #fff7e6; color: #b45309; font-size: 10.5px; border: 1px solid #fcd9a1; }
.alq-empty { padding: 28px 8px; font-size: 12.5px; line-height: 1.9; color: #64748b; }
.alq-unaln .alq-seq { color: #9ca3af; }
.alq-unaln-label { margin: 6px 0 2px; font-size: 11px; color: #9ca3af; }
.alq-legend .alq-unaln-k { color: #9ca3af; }

/* Map 视图特殊：居中 + 白底卡片 */
.view-panel[data-view-panel="map"] {
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.view-panel[data-view-panel="map"].active { display: flex; }

.map-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* 线性视图滚动条：溢出内容可滚 */
.map-wrap.is-linear { align-items: flex-start; justify-content: center; overflow-y: scroll; overflow-x: hidden; padding-top: 10px; }

/* 回到顶部：右缘细长竖条，不遮挡内容 */
.back-to-top {
  position: fixed;
  right: 2px;
  top: 50%;
  width: 16px; height: 88px;
  margin-top: -44px;
  border-radius: 8px;
  border: none;
  background: rgba(100,116,139,.28);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  transition: background .15s, opacity .2s;
  z-index: 9999;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  opacity: 0;
  pointer-events: none;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  background: rgba(21,84,193,.78);
}
.back-to-top:active { background: rgba(15,68,160,.9); }
.map-wrap:not(.is-linear) ~ .back-to-top { display: none; }
.map-wrap.is-linear .map {
  cursor: default;
  max-width: none !important;
  max-height: none !important;
  background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(21,84,193,.08);
}
/* 地图光标：自定义 SVG 手形（深色填充 + 白色描边），避免 WebView2 在白色背景上系统手形描边丢失变成纯白不可见 */
.map {
  width: 100%; height: 100%; max-width: 960px; max-height: 960px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(21,84,193,.08);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%231f2937' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round' d='M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54.26c-.82 0-1.6.33-2.17.92l-2.17 2.17c-.79.79-.79 2.07 0 2.85.4.39.92.6 1.45.6H15.5c1.1 0 2-.9 2-2v-4.75c0-.75.39-1.43 1.04-1.81.2-.11.4-.19.62-.23.5-.1.98-.08 1.43.09l.25-.16zM14 13.5c-1.1 0-2-.9-2-2 0-1.1.9-2 2-2s2 .9 2 2c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E") 13 13, grab;
}
.map:active {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%231f2937' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round' d='M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54.26c-.82 0-1.6.33-2.17.92l-2.17 2.17c-.79.79-.79 2.07 0 2.85.4.39.92.6 1.45.6H15.5c1.1 0 2-.9 2-2v-4.75c0-.75.39-1.43 1.04-1.81.2-.11.4-.19.62-.23.5-.1.98-.08 1.43.09l.25-.16z'/%3E%3C/svg%3E") 13 13, grabbing;
}
.map-wrap:not(.is-linear) .map *:not(.enz-line):not(.primer-mark):not(.feature-arc) { cursor: inherit !important; }
.map-wrap:not(.is-linear) .map .enz-line,
.map-wrap:not(.is-linear) .map .primer-mark,
.map-wrap:not(.is-linear) .map .feature-arc { cursor: pointer !important; }

.hover-info {
  position: absolute; background: #ffffff; color: #2b3a4a; border: 1px solid #c9d2dd; border-radius: 8px;
  padding: 10px 14px; font-size: 12px; line-height: 1.65; pointer-events: none;
  box-shadow: 0 6px 20px rgba(15,32,56,.16); z-index: 20; min-width: 150px; max-width: 300px;
}
.hover-info .hi-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: #1f2937; margin-bottom: 3px; }
.hover-info .hi-dot { width: 9px; height: 9px; border-radius: 2px; border: 1px solid rgba(0,0,0,.25); flex-shrink: 0; }
.hover-info .hi-row { color: #5b6b80; }

/* ============ 线性序列视图（仿 SnapGene） ============ */
.linear-view {
  position: absolute; inset: 0; overflow: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(21,84,193,.08); padding: 34px 18px 80px;
}
.lin-page { min-width: 560px; max-width: 820px; margin: 0 auto; }
.lin-block { position: relative; margin-bottom: 10px; }
.lin-seq {
  position: absolute; font-family: Consolas, "SF Mono", monospace;
  font-size: 12.5px; letter-spacing: .2px; white-space: pre; color: #2b3a4a;
}
.lin-seq-bot { color: #5c6b7d; }
.lin-num { position: absolute; font-family: Consolas, "SF Mono", monospace; font-size: 10px; color: #8a94a6; }
.lin-ell { position: absolute; left: 8px; top: 20px; color: #8a94a6; font-family: Consolas, monospace; font-size: 12.5px; }
.lin-site { position: absolute; font-size: 10.5px; font-weight: 700; color: #1f1f1f; white-space: nowrap; }
.lin-site-line { position: absolute; width: 1.6px; background: #cf3a3a; }
.lin-feat-line { position: absolute; height: 2px; cursor: pointer; }
.lin-feat-name {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: 9.5px; font-weight: 600; cursor: pointer;
}

/* ============ 空状态 ============ */
.empty-state {
  text-align: center; padding: 40px; color: #3b4755;
  max-width: 560px; margin: auto;
}
.empty-logo { font-size: 72px; margin-bottom: 16px; color: #1554c1; }
.empty-state h2 { font-size: 22px; color: #1f2937; margin-bottom: 10px; font-weight: 700; }
.empty-desc { line-height: 1.7; color: #5b6b80; font-size: 13px; margin-bottom: 24px; }
.empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.btn-empty {
  padding: 10px 20px; border: 1px solid #c0d3ed; border-radius: 6px;
  background: #fff; font-size: 13px; color: #1554c1; cursor: pointer;
  transition: all .15s; font-weight: 600;
}
.btn-empty:hover { background: #eaf2fb; border-color: #1554c1; }
.btn-empty-primary { background: #1554c1; color: #fff; border-color: #1554c1; }
.btn-empty-primary:hover { background: #0f44a0; color: #fff; }
.empty-tip { font-size: 11.5px; color: #9aa3af; }

/* ============ 状态栏 ============ */
.statusbar {
  flex-shrink: 0; height: 26px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-top: 1px solid #e4e8ee;
  font-size: 11px; color: #8a94a6;
}
.statusbar .sb-right { color: #b0b8c4; }

/* ============ 顶栏在线客服入口 ============ */
.topbar-info { align-items: center; }
.tb-feedback {
  position: relative;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: rgba(255,255,255,.18);
  color: #fff; cursor: pointer; transition: background .15s;
}
.tb-feedback:hover { background: rgba(255,255,255,.32); }
.tb-feedback:active { background: rgba(255,255,255,.45); }
.tb-feedback svg { width: 16px; height: 16px; display: block; }
.tb-fb-badge {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  box-shadow: 0 0 0 2px rgba(21,84,193,.55);
}
.tb-fb-badge[hidden] { display: none; }

/* 顶栏版本速递：有未安装更新且被稍后提醒时，尾部出现动态下载图标 */
.tb-version {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 9px; margin-left: 2px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 14px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tb-version:hover { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.6); }
.tb-dl { display: inline-flex; width: 15px; height: 15px; animation: tbDl 1.8s ease-in-out infinite; }
.tb-dl[hidden] { display: none; }
.tb-dl svg { width: 15px; height: 15px; display: block; }
@keyframes tbDl {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

/* ============ 在线客服面板（桌面端 / 在线版共用） ============ */
.cs-panel {
  position: fixed; top: 64px; right: 12px; z-index: 9000;
  width: 380px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, .22);
  overflow: hidden;
  animation: csIn .16s ease-out;
}
.cs-panel[hidden] { display: none; }
@keyframes csIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.cs-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px 10px;
  background: linear-gradient(135deg, #1554c1 0%, #2f7dd1 100%);
  color: #fff;
}
.cs-head-info { min-width: 0; }
.cs-title {
  margin: 0; font-size: 14px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-state {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 11px; color: rgba(255,255,255,.82);
}
.cs-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #c3ccd8;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}
.cs-dot.is-online { background: #3ddc84; box-shadow: 0 0 0 2px rgba(61,220,132,.28); }
.cs-close {
  flex-shrink: 0; width: 26px; height: 26px;
  border: 0; border-radius: 7px; background: transparent;
  color: rgba(255,255,255,.85); font-size: 20px; line-height: 1; cursor: pointer;
}
.cs-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.cs-msgs {
  flex: 1; min-height: 140px; overflow-y: auto; padding: 12px;
  background: #f4f6fa; display: flex; flex-direction: column; gap: 10px;
}
.cs-empty {
  margin: auto; padding: 12px; color: #9aa3af;
  font-size: 12px; line-height: 1.7; text-align: center;
}
.cs-empty[hidden] { display: none; }
.cs-row { display: flex; flex-direction: column; max-width: 100%; }
.cs-row.is-visitor { align-items: flex-end; }
.cs-row.is-agent { align-items: flex-start; }
.cs-bubble {
  max-width: 80%; padding: 7px 11px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  user-select: text; -webkit-user-select: text;
}
.cs-row.is-visitor .cs-bubble {
  background: #1554c1; color: #fff; border-bottom-right-radius: 4px;
}
.cs-row.is-agent .cs-bubble {
  background: #fff; color: #1f2937; border: 1px solid #e4e8ee;
  border-bottom-left-radius: 4px;
}
.cs-meta { margin-top: 4px; padding: 0 2px; font-size: 10.5px; color: #9aa3af; }
.cs-meta .cs-read::before { content: ' · '; }
.cs-recall-btn {
  margin-left: 6px; padding: 0; border: 0; background: none;
  font: inherit; color: #2f7dd1; cursor: pointer;
}
.cs-recall-btn:hover { text-decoration: underline; }
.cs-recall-btn:disabled { color: #9aa3af; cursor: default; text-decoration: none; }
.cs-row.is-recall { align-items: center; padding: 2px 0; }
.cs-recall {
  padding: 2px 10px; border-radius: 10px; background: #eef2f7;
  font-size: 11.5px; color: #8b95a5;
}
html[data-theme="dark"] .cs-recall { background: #1c2430; color: #8592a3; }
.cs-fields {
  flex-shrink: 0; padding: 10px 12px 2px;
  border-top: 1px solid #eef1f5; background: #fff;
}
.cs-fields[hidden] { display: none; }
.cs-label { display: block; margin: 0 0 4px; font-size: 11px; color: #5b6b80; }
.cs-input {
  display: block; width: 100%; padding: 7px 9px;
  border: 1px solid #dce0e5; border-radius: 8px;
  background: #fff; color: #111827; font-family: inherit;
  font-size: 12.5px; line-height: 1.5; outline: none;
  user-select: text; -webkit-user-select: text;
  transition: border-color .15s, box-shadow .15s;
}
.cs-fields .cs-input { margin-bottom: 8px; }
.cs-input:focus { border-color: #2f7dd1; box-shadow: 0 0 0 3px rgba(47,125,209,.14); }
.cs-tip { margin: 0 0 8px; font-size: 11px; color: #9aa3af; line-height: 1.6; }
.cs-tools {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 0; background: #fff;
}
.cs-tool {
  height: 25px; padding: 0 10px;
  border: 1px solid #dce0e5; border-radius: 6px;
  background: #fff; color: #4b5563; font-family: inherit;
  font-size: 11.5px; cursor: pointer; flex: none; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.cs-tool:hover { border-color: #2f7dd1; color: #2f7dd1; }
.cs-tool-tip {
  flex: 1; margin-left: auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: #9aa3af;
}
.cs-pending {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 0; padding: 6px 8px;
  border: 1px solid #e4e8ee; border-radius: 8px;
  background: #f7faff; font-size: 11.5px; color: #4b5563;
}
.cs-pending[hidden] { display: none; }
.cs-pending-img {
  flex: none; width: 34px; height: 34px;
  border-radius: 6px; object-fit: cover;
}
.cs-pending-name {
  max-width: 170px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cs-pending-size { color: #9aa3af; }
.cs-pending-x {
  flex: none; margin-left: auto; width: 21px; height: 21px; padding: 0;
  border: 0; border-radius: 50%; background: #e4e8ee; color: #64748b;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.cs-pending-x:hover { background: #dc2626; color: #fff; }
.cs-bubble.has-attach { padding: 4px; }
.cs-bubble.has-attach.has-text { padding: 7px 11px; }
.cs-img-link { display: block; line-height: 0; }
.cs-bubble.has-attach.has-text .cs-img-link { margin-top: 5px; }
.cs-img {
  display: block; max-width: 200px; max-height: 160px;
  border-radius: 8px; object-fit: contain;
}
.cs-row.is-visitor .cs-bubble.has-attach {
  background: #fff; border: 1px solid #e4e8ee; color: #1f2937;
}
.cs-file {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 5px; color: inherit;
}
.cs-file-ico { font-size: 19px; line-height: 1; }
.cs-file-info { display: flex; flex-direction: column; min-width: 0; }
.cs-file-info b {
  max-width: 170px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; font-weight: 600;
}
.cs-file-info small { font-size: 10.5px; color: #9aa3af; }
.cs-compose {
  flex-shrink: 0; display: flex; align-items: stretch; gap: 8px;
  padding: 8px 12px 4px; border-top: 1px solid #eef1f5; background: #fff;
}
.cs-textarea {
  flex: 1; height: 46px; min-height: 40px; max-height: 110px; resize: none;
  padding: 12px;
}
.cs-send {
  flex-shrink: 0; padding: 0 18px;
  border: 0; border-radius: 8px; background: #1554c1; color: #fff;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.cs-send:hover { background: #0f44a0; }
.cs-send:disabled { opacity: .55; cursor: not-allowed; }
.cs-foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 2px 12px 8px; background: #fff;
}
.cs-msg {
  flex: 1; font-size: 11px; color: #9aa3af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-msg.is-err { color: #dc2626; }
.cs-count { font-size: 10.5px; color: #b0b8c4; }

@media (max-width: 520px), (max-height: 560px) {
  .cs-panel {
    top: 60px; right: 8px; left: 8px;
    width: auto; max-width: none;
    max-height: calc(100vh - 68px);
  }
  .cs-msgs { min-height: 60px; }
  .cs-fields { padding-top: 8px; }
  .cs-textarea { height: 42px; }
}

html[data-theme="dark"] .cs-panel { background: #161c25; border-color: #273140; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .cs-msgs { background: #10161f; }
html[data-theme="dark"] .cs-empty,
html[data-theme="dark"] .cs-meta,
html[data-theme="dark"] .cs-tip,
html[data-theme="dark"] .cs-msg,
html[data-theme="dark"] .cs-count { color: #7c8a9c; }
html[data-theme="dark"] .cs-row.is-agent .cs-bubble { background: #1d2632; color: #dbe3ee; border-color: #2c3745; }
html[data-theme="dark"] .cs-fields,
html[data-theme="dark"] .cs-compose,
html[data-theme="dark"] .cs-foot { background: #161c25; border-top-color: #232b36; }
html[data-theme="dark"] .cs-label { color: #aeb9c7; }
html[data-theme="dark"] .cs-input { background: #10161f; border-color: #2c3745; color: #dbe3ee; }
html[data-theme="dark"] .cs-input::placeholder { color: #64707f; }


/* ============ 全局 draging ============ */
body.draging::after {
  content: '松开鼠标导入文件';
  position: fixed; inset: 0;
  background: rgba(21,84,193,.12);
  border: 3px dashed #1554c1;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  color: #1554c1; font-size: 22px; font-weight: 700;
  pointer-events: none;
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cfdb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #aeb8c6; }

/* ============ SVG 文本 ============ */
.sv-mono { font-family: Consolas, "SF Mono", monospace; }
.sv-text { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.feature-arc:hover { filter: brightness(1.08); }

/* ============ 更新提示（仿微信更新弹窗） ============ */
.update-mask {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, .3);
  backdrop-filter: blur(2px);
}
.update-mask[hidden] { display: none; }

.update-card {
  position: relative;
  width: 500px; max-width: calc(100vw - 40px); max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .24);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  animation: updIn .2s ease-out;
}
@keyframes updIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* 背景装饰圆弧 */
.update-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.update-arc { position: absolute; display: block; border-radius: 50%; background: #f1f2f4; }
.update-arc-a { width: 420px; height: 420px; left: -70px; top: -160px; }
.update-arc-b { width: 560px; height: 560px; right: -250px; bottom: -270px; opacity: .8; }

.update-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 28px; height: 28px; padding: 0;
  border: none; background: transparent; color: #9aa0a6;
  font-size: 19px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.update-close:hover { background: #f2f3f5; color: #1d1d1f; }

.update-body {
  position: relative;
  flex: 1 1 auto; min-height: 240px;
  padding: 38px 42px 30px;
  overflow: auto;
}
.update-version {
  margin: 0;
  font-size: 28px; font-weight: 600; color: #1d1d1f; letter-spacing: .2px;
}
.update-sub { margin: 10px 0 0; font-size: 12.5px; color: #9aa0a6; }
.update-notes {
  margin-top: 30px;
  font-size: 13.5px; line-height: 1.9; color: #4b5058;
  white-space: pre-wrap;
}
.update-notes:empty { display: none; }

.update-progress-wrap { margin-top: 22px; }
.update-bar { height: 6px; border-radius: 5px; background: #eceef1; overflow: hidden; }
.update-fill {
  height: 100%; width: 0; border-radius: 5px;
  background: #2f6bd8; transition: width .2s ease-out;
}
.update-progress-row {
  display: flex; justify-content: space-between;
  margin-top: 7px; font-size: 11.5px; color: #9aa0a6;
}
.update-progress-row span:first-child { font-weight: 700; color: #1d1d1f; }

.update-tip { margin-top: 12px; font-size: 12px; color: #9aa0a6; line-height: 1.6; }
.update-tip.error { color: #c53030; }

.update-foot {
  position: relative;
  border-top: 1px solid #ededf0;
  padding: 16px 42px 18px;
  background: #fff;
}
.update-reco { display: flex; align-items: center; gap: 16px; }
.update-reco-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.update-reco-copy b { font-size: 13.5px; font-weight: 600; color: #1d1d1f; }
.update-reco-copy span { font-size: 12.5px; color: #9aa0a6; }
.update-reco-link { flex: none; font-size: 13px; color: #2f6bd8; text-decoration: none; }
.update-reco-link:hover { text-decoration: underline; }

.update-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 18px; margin-top: 14px;
}
.upd-link {
  padding: 4px 2px; border: none; background: none;
  color: #8a8f98; font-size: 12.5px; cursor: pointer;
}
.upd-link:hover { color: #1d1d1f; text-decoration: underline; }

.update-cta {
  height: 36px; padding: 0 24px;
  border: none; border-radius: 18px;
  background: #2f6bd8; color: #fff;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.update-cta:hover { background: #2557bd; }
.update-cta:disabled { opacity: .55; cursor: not-allowed; }

/* ============ Sequence 视图（仿 Addgene 单链序列展示） ============ */
.seq-view {
  flex: 1; overflow-y: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(21,84,193,.06); padding: 20px 24px 30px;
  font-family: Consolas, "SF Mono", "Menlo", monospace; font-size: 13px;
  color: #2c3e50;
  position: relative;
}
.seq-view-empty {
  text-align: center; color: #9aa3af; padding: 60px; font-size: 13px; font-family: -apple-system, "PingFang SC", sans-serif;
}
.seq-view-row {
  display: flex; align-items: center; margin-bottom: 6px;
  position: relative; height: 22px;
}
.seq-view-row-num {
  width: 56px; flex-shrink: 0; text-align: right;
  font-size: 11px; color: #aab3c0; font-family: Consolas, monospace;
  padding-right: 10px;
}
.seq-view-row-body {
  position: relative; height: 22px; flex-shrink: 0;
}
.seq-view-strand {
  display: block; font-family: Consolas, monospace;
  font-size: 13px; letter-spacing: 0.9px;
  padding: 0; white-space: pre;
  line-height: 22px;
}
.seq-view-top { color: #1f2937; }
.seq-view-bot { display: none; }

/* 元件灰色背景块 */
.seq-view-feat-box {
  position: absolute; top: 3px; height: 16px; border-radius: 2px;
  pointer-events: auto; cursor: pointer;
  box-sizing: border-box;
}

/* 元件名标签（块内或块上方） */
.seq-view-feat-label {
  position: absolute; font-family: -apple-system, "PingFang SC", sans-serif;
  color: #1f2937; padding: 1px 4px; white-space: nowrap;
  border-radius: 2px; font-weight: 500;
  background: #fff;
}

/* 酶切位点：红色小三角 ▼（用 CSS border 画三角） */
.seq-view-site-mark {
  position: absolute; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #b23b3b;
  pointer-events: none;
}

/* 酶切标签（酶名） */
.seq-view-site-label {
  position: absolute; font-family: Consolas, monospace;
  color: #b23b3b; white-space: nowrap;
  pointer-events: none;
}

/* ============ Enzymes 视图 ============ */
.enz-view {
  flex: 1; overflow-y: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(21,84,193,.06);
  font-size: 12px;
}
.enz-view-empty {
  text-align: center; color: #9aa3af; padding: 60px; font-family: -apple-system, "PingFang SC", sans-serif;
}
.enz-view-header {
  position: sticky; top: 0; background: #f8fafd; padding: 12px 20px;
  border-bottom: 1px solid #e4e8ee; font-weight: 600; color: #1f2937; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.enz-view-table { width: 100%; border-collapse: collapse; font-family: Consolas, monospace; }
.enz-view-table th {
  text-align: left; padding: 8px 20px; font-family: -apple-system, sans-serif;
  font-size: 11.5px; color: #8a94a6; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; background: #fafbfd; border-bottom: 1px solid #eef1f5;
  position: sticky; top: 46px;
}
.enz-view-table td {
  padding: 8px 20px; border-bottom: 1px solid #f0f3f8; font-size: 12.5px;
}
.enz-view-table tr:hover td { background: #f7faff; }
.enz-view-table .ev-name { color: #1554c1; font-weight: 600; }
.enz-view-table .ev-count { color: #d14343; font-weight: 600; }
.enz-view-table .ev-sites { font-size: 11.5px; color: #4b5a6d; }
.enz-view-vis {
  margin-top: 16px; padding: 16px 20px;
  border-top: 1px solid #eef1f5;
}
.enz-vis-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.enz-vis-label { width: 80px; font-size: 11.5px; color: #1f2937; font-weight: 600; text-align: right; flex-shrink: 0; }
.enz-vis-bar {
  flex: 1; height: 14px; background: #f0f3f8; border-radius: 3px; position: relative; overflow: hidden;
}
.enz-vis-mark {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #d14343; border-radius: 1px;
}

/* ============ Features 视图 ============ */
.feat-view {
  flex: 1; overflow-y: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(21,84,193,.06);
}
.feat-view-empty {
  text-align: center; color: #9aa3af; padding: 60px; font-family: -apple-system, "PingFang SC", sans-serif;
}
.feat-view-header {
  position: sticky; top: 0; background: #f8fafd; padding: 12px 20px;
  border-bottom: 1px solid #e4e8ee; font-weight: 600; color: #1f2937; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.feat-view-table { width: 100%; border-collapse: collapse; font-family: Consolas, monospace; }
.feat-view-table th {
  text-align: left; padding: 8px 20px; font-family: -apple-system, sans-serif;
  font-size: 11.5px; color: #8a94a6; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; background: #fafbfd; border-bottom: 1px solid #eef1f5;
}
.feat-view-table td {
  padding: 8px 20px; border-bottom: 1px solid #f0f3f8; font-size: 12.5px;
}
.feat-view-table tr:hover td { background: #f7faff; }
.feat-view-table .fv-name { font-weight: 600; color: #1f2937; font-family: -apple-system, sans-serif; }
.feat-view-table .fv-type {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-family: -apple-system, sans-serif;
  background: #eaf2fb; color: #1554c1; font-weight: 600;
}
.feat-view-table .fv-strand { font-family: -apple-system, sans-serif; }
.feat-view-table .fv-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: middle;
}
.feat-view-vis {
  margin-top: 16px; padding: 16px 20px; border-top: 1px solid #eef1f5;
}
.feat-vis-track {
  position: relative; height: 22px; background: #f0f3f8; border-radius: 3px; margin-bottom: 4px;
}
.feat-vis-bar {
  position: absolute; top: 2px; bottom: 2px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  color: #fff; font-family: -apple-system, sans-serif; font-weight: 600; overflow: hidden;
  white-space: nowrap; padding: 0 4px;
}
.feat-vis-axis {
  height: 2px; background: #c0d3ed; position: relative; margin-top: 2px;
}
.feat-vis-axis-tick {
  position: absolute; top: 2px; font-size: 10px; color: #8a94a6; font-family: Consolas, monospace;
  transform: translateX(-50%);
}

/* ============ Primers 视图 ============ */
.primer-view {
  flex: 1; overflow-y: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(21,84,193,.06); padding: 20px 24px;
}
.primer-view-empty {
  display: none; text-align: center; color: #9aa3af; padding: 40px;
}
.primer-view-inputs {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.primer-view-inputs textarea {
  padding: 10px 12px; border: 1px solid #d5dbe4; border-radius: 6px;
  font-family: Consolas, monospace; font-size: 12.5px; resize: vertical;
  min-height: 56px;
}
.primer-view-inputs textarea:focus { outline: none; border-color: #1554c1; box-shadow: 0 0 0 3px rgba(21,84,193,.1); }
.primer-view-actions { display: flex; gap: 8px; }
.primer-view-result {
  background: #f8fafd; border-radius: 6px; padding: 16px; border: 1px solid #eef1f5;
}
.primer-view-result:empty::before { content: '输入引物序列后点击"分析引物"'; color: #9aa3af; font-size: 12px; }
.primer-view-result .prm-row {
  display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eef1f5;
  font-size: 12.5px;
}
.primer-view-result .prm-row:last-child { border-bottom: none; }
.primer-view-result .prm-row span:first-child { color: #6b7a8e; }
.primer-view-result .prm-row b { color: #1f2937; font-family: Consolas, monospace; }
.primer-view-result .prm-warn { color: #c53030; font-size: 11.5px; padding: 4px 0; }

/* ============ 质粒库（内置常用载体） ============ */
.lib-search { display: flex; gap: 6px; margin-bottom: 0; }
.lib-search input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #d5dbe4;
  border-radius: 7px; font-size: 12px; font-family: inherit;
  background: #fff; color: #1f2937;
}
.lib-search input:focus {
  outline: none; border-color: #1554c1; box-shadow: 0 0 0 3px rgba(21,84,193,.1);
}
.lib-hint { font-size: 11px; color: #8a94a6; line-height: 1.6; margin: 6px 1px 8px; }
.lib-suggest {
  border: 1px solid #e6ebf2; border-radius: 8px; background: #fff;
  max-height: 430px; overflow-y: auto;
}
.lib-suggest:empty { display: none; }
.lib-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: 0; border-bottom: 1px solid #f1f4f8;
  background: #fff; text-align: left; cursor: pointer; font-family: inherit;
}
.lib-item:last-child { border-bottom: 0; }
.lib-item:hover { background: #f5f8fd; }
.lib-item.active { background: #eaf2fb; box-shadow: inset 3px 0 0 #1554c1; }
.lib-item-main { flex: 1; min-width: 0; }
.lib-item-name {
  display: block; font-size: 12.5px; font-weight: 600; color: #1f2937;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-item-meta {
  display: block; margin-top: 2px; font-size: 10.5px; color: #8a94a6;
  font-family: Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-item-cat {
  flex-shrink: 0; padding: 1px 7px; border-radius: 9px;
  background: #f0f4fb; color: #5b6b80; font-size: 10px;
}

/* ===== 图谱 ↔ 列表面板联动 ===== */
.enz-row.enz-sel, .orf-row.orf-sel, .feat-row.feat-sel {
  background: #eaf2fd; border-left: 3px solid #2563eb;
}
.prm-block { margin-bottom: 10px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.prm-block-head { font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 6px; }
.prm-metrics { display: flex; gap: 8px; margin-bottom: 6px; }
.prm-metric { flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 6px; text-align: center; }
.prm-metric span { display: block; font-size: 10px; color: #8a94a6; }
.prm-metric b { font-size: 12.5px; color: #1d4ed8; font-family: Consolas, monospace; }
.prm-empty { padding: 10px; font-size: 12px; color: #8a94a6; text-align: center; }
.prm-nomatch { padding: 6px 8px; font-size: 11.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; }
/* 图谱右键菜单（选区 → 引物） */
.map-ctx-menu {
  position: fixed; z-index: 999; min-width: 170px;
  background: #fff; border: 1px solid #c9d2dd; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,32,56,.18); padding: 4px;
}
.map-ctx-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 7px 12px; font-size: 12.5px; color: #2b3a4a; border-radius: 5px; cursor: pointer;
}
.map-ctx-menu button:hover { background: #eaf2fd; color: #1d4ed8; }
.lib-item-cat.active { background: #dbe8fb; color: #1554c1; }
.lib-empty { padding: 16px 12px; font-size: 11.5px; color: #9aa3af; text-align: center; }
.lib-meta { margin-top: 10px; }

/* 质粒库在线联想（NCBI） */
.lib-online { margin-top: 8px; border: 1px solid #e6ebf2; border-radius: 8px; background: #fff; overflow: hidden; }
.lib-online-head {
  padding: 6px 10px; font-size: 11px; font-weight: 600; color: #8a94a6;
  background: #f8fafd; border-bottom: 1px solid #eef1f5;
  display: flex; align-items: center; gap: 6px;
}
.lib-online-head::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #16a34a; flex-shrink: 0;
}
.lib-item-online .lib-item-cat { background: #e7f6ec; color: #16a34a; }

.lib-card {
  border: 1px solid #dbe4ef; border-radius: 8px; padding: 10px 12px;
  background: #fff; box-shadow: 0 2px 10px rgba(21,84,193,.06); margin-bottom: 10px;
}
.lib-card-title {
  font-size: 13px; font-weight: 700; color: #1f2937; word-break: break-all; margin-bottom: 4px;
}
.lib-card-meta { font-size: 11.5px; color: #6b7a8e; font-family: Consolas, monospace; margin-bottom: 6px; }
.lib-card-src { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.lib-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: #eaf2fb; color: #1554c1; font-size: 10.5px; font-weight: 600;
}
.lib-cache-tag {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: #fff4e0; color: #8a6116; font-size: 10.5px; font-weight: 600;
}
.lib-card-note { font-size: 11px; color: #8a94a6; line-height: 1.5; }

.lib-privacy {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4e8ee;
  font-size: 10.5px; color: #8a94a6; line-height: 1.7; word-break: break-word;
}
.lib-cache {
  margin-top: 10px; display: flex; align-items: flex-start; gap: 8px;
}
.lib-cache-info {
  flex: 1; min-width: 0; font-size: 10.5px; color: #9aa3af; line-height: 1.5;
  word-break: break-all;
}

/* ===== w7-w11 新增页面样式 ===== */
.align-query { width: 100%; min-height: 90px; resize: vertical; font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 1.5; padding: 6px 8px; border: 1px solid #dbe1ea; border-radius: 6px; box-sizing: border-box; }
.alq { font-family: Consolas, Menlo, monospace; font-size: 11.5px; line-height: 1.4; background: #fbfaf3; border: 1px solid #e8e4d8; border-radius: 6px; padding: 8px 10px; overflow-x: auto; white-space: pre; margin: 8px 0 0; }
.alq-head { font-size: 12px; font-weight: 600; color: #334155; margin-top: 8px; }
.ana-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.ana-table td { padding: 4px 8px; border-bottom: 1px solid #eef1f5; }
.ana-table td:first-child { color: #64748b; width: 45%; }
.ana-table td:last-child { font-weight: 600; color: #1f2937; }
.ana-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 8px; border: 1px solid #e4e8ee; }
.ana-bar-seg { display: block; height: 100%; }
.ana-legend { display: flex; gap: 12px; font-size: 11px; margin-top: 4px; }
.gene-species { margin-bottom: 8px; }
.gene-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.gene-item:hover { background: #f1f5fb; }
.gene-row-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gene-sym { font-weight: 700; color: #1d4ed8; font-size: 12.5px; white-space: nowrap; }
.gene-org { flex: 1; min-width: 0; font-size: 10.5px; color: #7c899b; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gene-id { flex: none; font-family: Consolas, Menlo, monospace; font-size: 10.5px; color: #2f7a4f; background: #eefaf2; border: 1px solid #b7ddc4; border-radius: 8px; padding: 0 5px; }
.gene-desc { font-size: 11px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gene-alias { font-size: 10.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gene-alias-hit { background: #fde68a; color: #92400e; font-weight: 700; border-radius: 2px; padding: 0 1px; }
.gene-detail-head { font-size: 12px; font-weight: 700; color: #334155; margin: 8px 0 4px; }
.trx-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid #eef1f5; border-radius: 6px; margin-bottom: 6px; }
.trx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trx-acc { font-family: Consolas, Menlo, monospace; font-size: 12px; font-weight: 700; color: #1d4ed8; }
.trx-longest { margin-left: 6px; padding: 0 5px; border: 1px solid #b7ddc4; border-radius: 8px; background: #eefaf2; font-family: inherit; font-size: 9.5px; font-weight: 600; color: #2f7a4f; letter-spacing: .2px; vertical-align: 1px; }
.trx-title { font-size: 11px; color: #475569; line-height: 1.4; }
.trx-len { font-size: 10.5px; color: #94a3b8; }
.btn-mini { flex-shrink: 0; font-size: 11px; padding: 3px 8px; border: 1px solid #c7d6ee; background: #eef4ff; color: #1d4ed8; border-radius: 5px; cursor: pointer; }
.btn-mini:hover { background: #dce9ff; }
.btn-mini:disabled { opacity: 0.6; cursor: default; }


/* ============ 深色主题（界面框架变暗，图谱区保持白底纸张） ============ */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #11161d; color: #d3dae4; }
html[data-theme="dark"] .sidebar { background: #161c25; border-right-color: #232b36; }
html[data-theme="dark"] .tabs { background: #131922; border-bottom-color: #232b36; }
html[data-theme="dark"] .tab { color: #94a1b2; background: #151b24; border-color: #28313e; }
html[data-theme="dark"] .tab:hover { color: #8ec0f5; background: rgba(47, 125, 209, .12); border-color: rgba(47, 125, 209, .35); }
html[data-theme="dark"] .tab.active { color: #cfe3fb; background: rgba(47, 125, 209, .22); border-color: rgba(47, 125, 209, .45); }
html[data-theme="dark"] .tab-pane { background: #161c25; }
html[data-theme="dark"] .pane-head span:first-child { color: #e6ecf4; }
html[data-theme="dark"] .pane-sub,
html[data-theme="dark"] .pa-label,
html[data-theme="dark"] .enz-cut,
html[data-theme="dark"] .frag-enzyme,
html[data-theme="dark"] .de-info,
html[data-theme="dark"] .feat-loc { color: #7c8a9c; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: #10161f; color: #dbe3ee; border-color: #2c3745; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #64707f; }
html[data-theme="dark"] .seq-editor { background: #10161f; color: #cfd9e6; }
html[data-theme="dark"] .btn-mini { background: #1d2632; color: #cfd8e3; border-color: #2e3a49; }
html[data-theme="dark"] .btn-mini:hover { background: #253141; border-color: #3b4a5c; }
html[data-theme="dark"] .btn-mini.btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="dark"] .btn-mini.btn-danger { color: #f08a8a; border-color: #5c3030; }
html[data-theme="dark"] .frame-chip { background: #1d2632; color: #cfd8e3; border-color: #2e3a49; }
html[data-theme="dark"] .frame-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="dark"] .enz-list,
html[data-theme="dark"] .feature-list,
html[data-theme="dark"] .de-list { border-color: #2b3542; background: #141a23; }
html[data-theme="dark"] .enz-row,
html[data-theme="dark"] .feat-row,
html[data-theme="dark"] .frag-row,
html[data-theme="dark"] .de-pair,
html[data-theme="dark"] .orf-row { border-bottom-color: #232b36; }
html[data-theme="dark"] .enz-row:hover,
html[data-theme="dark"] .feat-row:hover { background: #1c2530; }
html[data-theme="dark"] .enz-row.enz-active { background: #1b2b3d; }
html[data-theme="dark"] .enz-name,
html[data-theme="dark"] .de-enzyme { color: #6fa8e0; }
html[data-theme="dark"] .feat-lbl { color: #dbe3ee; }
html[data-theme="dark"] .frag-len,
html[data-theme="dark"] .prm-row b { color: #8ec0f5; }
html[data-theme="dark"] .align-species-label { color: #93a1b3; }
html[data-theme="dark"] .align-kind { background: #1b2b3d; color: #8ec0f5; }
html[data-theme="dark"] .align-kind.is-protein { background: #2b2140; color: #c4a5f5; }
html[data-theme="dark"] .alq-species { background: #1e2540; border-color: #3b4a7a; color: #b9c6ff; }
html[data-theme="dark"] .primer-result,
html[data-theme="dark"] .de-result { background: #141a23; border-color: #2b3542; }
html[data-theme="dark"] .aa-head { background: #141a23; border-color: #2b3542; }
html[data-theme="dark"] .aa-body { background: #10161f; border-color: #2b3542; }
html[data-theme="dark"] .aa-seq { color: #d3dae4; }
html[data-theme="dark"] .aa-no { color: #55616f; }
html[data-theme="dark"] .aa-orfs { color: #93a1b3; }
html[data-theme="dark"] .torg-list { background: #141a23; border-color: #2b3542; }
html[data-theme="dark"] .torg-row { border-bottom-color: #232b36; }
html[data-theme="dark"] .torg-row:hover { background: #1c2530; }
html[data-theme="dark"] .torg-row.active { background: #1b2b3d; box-shadow: inset 3px 0 0 #2563eb; }
html[data-theme="dark"] .torg-len { color: #8ec0f5; }
html[data-theme="dark"] .torg-loc { color: #cfd9e6; }
html[data-theme="dark"] .torg-bp,
html[data-theme="dark"] .torg-empty { color: #7c8a9c; }
html[data-theme="dark"] .torg-more summary { background: #131922; color: #8b98a9; }
html[data-theme="dark"] .torg-more summary:hover { color: #8ec0f5; }
html[data-theme="dark"] .content { background: #11161d; }
html[data-theme="dark"] .empty-state h2 { color: #e6ecf4; }
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .empty-desc,
html[data-theme="dark"] .empty-tip { color: #8b98a9; }
html[data-theme="dark"] .statusbar { background: #0e131a; color: #8b97a6; border-top: 1px solid #232b36; }
html[data-theme="dark"] .result-panel-head { background: #161c25; border-bottom-color: #232b36; color: #e6ecf4; }
html[data-theme="dark"] .result-panel-body { background: #11161d; color: #d3dae4; }
html[data-theme="dark"] .alq { background: #0f151d; border-color: #2b3542; color: #cfd9e6; }
html[data-theme="dark"] .alq-head { color: #b9c6d6; }
html[data-theme="dark"] .ana-table td { border-bottom-color: #232b36; color: #c3cfdd; }
html[data-theme="dark"] .ana-table td:first-child { color: #8b98a9; }
html[data-theme="dark"] .ana-table td:last-child { color: #e6ecf4; }
html[data-theme="dark"] .gene-item:hover { background: #1c2530; }
html[data-theme="dark"] .gene-sym { color: #7fb3f0; }
html[data-theme="dark"] .gene-desc,
html[data-theme="dark"] .trans-preview-empty { color: #8b98a9; }
html[data-theme="dark"] .gene-org { color: #7d8b9d; }
html[data-theme="dark"] .gene-id { color: #8fd3ad; background: #17281f; border-color: #2f5a41; }
html[data-theme="dark"] .gene-alias { color: #6f7d8f; }
html[data-theme="dark"] .gene-alias-hit { background: #78551a; color: #ffe6a6; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2e3a49; border-radius: 5px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* ===== 测序峰图（.ab1） ===== */
#chromPanel { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; position: relative; }
#chromPanel[hidden] { display: none; }
.chrom-tip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 3px 10px; border: 1px solid #dbe4f0; border-radius: 5px;
  background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(15,32,56,.12);
  font: 11px Consolas, "SF Mono", Menlo, monospace; color: #3b4755; white-space: nowrap;
}
.chrom-tip .ct-pos { font-weight: 700; color: #24518f; }
.chrom-scroll { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; background: #fff; position: relative; }
.chrom-scroll canvas { display: block; height: 100%; }
/* 悬停高亮带：DOM 覆盖层，避免鼠标移动时重绘整幅峰图 */
.chrom-hover-band {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  pointer-events: none; z-index: 2; background: rgba(47,125,209,.12); border-radius: 2px;
}
.chrom-hint { padding: 6px 12px; font-size: 12px; color: #64748b; background: #f8fafc; border-top: 1px solid #e5eaf0; }
.chrom-hint[hidden] { display: none; }

/* ============ 1.6.12 布局：欢迎页 / 操作栏 / 收起侧栏 / 全屏 ============ */
[hidden] { display: none !important; }

/* 无文件时也保留侧栏，方便先浏览/使用各工具 */

/* 欢迎页 */
.welcome { max-width: 720px; padding: 32px 24px; }
/* 欢迎页：窗口较矮或缩放时内容可滚动，避免被裁切 */
body.no-doc .content { overflow-y: auto; }
body.no-doc .content > .welcome { flex: none; margin: auto; }
.welcome-brand { text-align: center; margin-bottom: 26px; }
.welcome-brand h2 { font-size: 30px; letter-spacing: .5px; color: #1554c1; margin: 0 0 8px; font-weight: 700; }
.welcome-sub { color: #5b6b80; font-size: 13px; }
.welcome-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.welcome-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; background: #fff; border: 1px solid #e4e8ee; border-radius: 10px;
  cursor: pointer; text-align: left; transition: all .15s;
}
.welcome-card:hover { border-color: #9dbde8; box-shadow: 0 6px 18px rgba(21,84,193,.12); transform: translateY(-1px); }
.wc-ico { font-size: 18px; color: #1554c1; }
.wc-title { font-size: 13px; font-weight: 600; color: #1f2937; }
.wc-desc { font-size: 11.5px; color: #8a94a6; line-height: 1.5; }
.welcome-recent { margin-top: 22px; background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: 12px 14px; }
.welcome-recent-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: #3b4755; margin-bottom: 8px; }
.welcome-clear { border: none; background: none; color: #8a94a6; font-size: 11.5px; cursor: pointer; }
.welcome-clear:hover { color: #d64545; }
.welcome-recent-list { display: flex; flex-direction: column; gap: 2px; }
.welcome-recent-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: #8a94a6; }
.welcome-recent-pager button {
  border: 1px solid #e3e8ef; background: #fff; color: #3b4755;
  font-size: 11.5px; padding: 3px 8px; border-radius: 5px; cursor: pointer;
}
.welcome-recent-pager button:hover:enabled { border-color: #24518f; color: #24518f; }
.welcome-recent-pager button:disabled { opacity: .4; cursor: default; }
.welcome-recent-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: none; border-radius: 6px; background: none;
  cursor: pointer; text-align: left; font-size: 12px; color: #3b4755;
}
.welcome-recent-item:hover { background: #f2f6fc; }
.wri-name { flex-shrink: 0; font-weight: 600; color: #24518f; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wri-path { flex: 1; min-width: 0; color: #a3acba; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wri-time { flex-shrink: 0; color: #a3acba; font-size: 11px; }
.welcome-tip { margin-top: 20px; text-align: center; font-size: 11.5px; color: #a3acba; line-height: 1.7; }
@media (max-height: 760px) {
  .welcome { padding: 18px 20px; }
  .welcome-brand { margin-bottom: 15px; }
  .welcome-brand h2 { font-size: 25px; }
  .welcome-card { padding: 12px; }
  .welcome-recent { margin-top: 12px; }
  .welcome-recent-item { padding: 5px 8px; }
  .welcome-tip { margin-top: 12px; }
}

/* 空白序列提示 */
.view-panel#blankPanel:not([hidden]) { display: flex; flex-direction: column; }
.blank-card { margin: auto; max-width: 460px; text-align: center; background: #fff; border: 1px solid #e4e8ee; border-radius: 12px; padding: 30px 26px; color: #5b6b80; }
.blank-card h3 { font-size: 15px; color: #1f2937; margin-bottom: 10px; }
.blank-card p { font-size: 12.5px; line-height: 1.7; }

/* 底部操作栏 */
.actionbar {
  flex-shrink: 0; height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 14px; background: #fff; border-top: 1px solid #e4e8ee;
}
.ab-group { display: flex; align-items: center; gap: 6px; }
.ab-center { flex: 1; justify-content: center; gap: 8px; }
.ab-btn { background: #f2f5fa; color: #24518f; border: 1px solid #dbe4f0; font-size: 11.5px; }
.ab-btn:hover { background: #e6eefb; }
.ab-btn.is-active { background: #e3ecf9; border-color: #7aa7dd; color: #1554c1; font-weight: 700; }
.ab-quality { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #5b6b80; cursor: pointer; }
.ab-quality input { width: 13px; height: 13px; }
#chromHeight { width: 90px; height: 13px; accent-color: #2f7dd1; cursor: pointer; }

/* 收起侧栏 */
body.sidebar-collapsed .sidebar { width: 44px; }
body.sidebar-collapsed .tab-pane { display: none !important; }
body.sidebar-collapsed .tabs { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 4px; }
body.sidebar-collapsed .tab { height: auto; font-size: 0; padding: 7px 2px; text-align: center; line-height: 1.2; }
body.sidebar-collapsed .tab::before { content: attr(data-short); font-size: 11px; }

/* 窗口内全屏 */
body.map-fullscreen .topbar,
body.map-fullscreen .sidebar,
body.map-fullscreen .statusbar,
body.map-fullscreen .actionbar { display: none !important; }
body.map-fullscreen .view-panel { padding: 0; }
body.map-fullscreen .content { background: #fff; }
.fs-exit {
  position: fixed; top: 12px; right: 12px; z-index: 60;
  padding: 6px 14px; border: 1px solid #c9d2dd; border-radius: 16px;
  background: rgba(255,255,255,.94); color: #24518f; font-size: 12px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,32,56,.14);
}
.fs-exit:hover { background: #fff; color: #1554c1; }

/* 侧栏宽度过渡 */
.sidebar { transition: width .18s ease; }

/* ============ 关闭文件确认框 ============ */
.cf-mask {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(17, 24, 39, .38);
}
.cf-mask[hidden] { display: none; }
.cf-card {
  width: 340px; max-width: 100%; padding: 20px 20px 16px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .28);
  animation: cfIn .14s ease-out;
}
@keyframes cfIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.cf-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #1f2937; }
.cf-text { margin: 0 0 18px; font-size: 12.5px; line-height: 1.7; color: #5b6b80; }
.cf-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cf-btn {
  height: 32px; padding: 0 16px; border: 1px solid #d5dbe4; border-radius: 7px;
  background: #fff; color: #3b4755; font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cf-btn:hover { background: #f4f6fa; border-color: #b7c3d4; }
.cf-btn-danger { background: #d64545; border-color: #d64545; color: #fff; }
.cf-btn-danger:hover { background: #bd3535; border-color: #bd3535; color: #fff; }
.cf-btn-primary { background: #24518f; border-color: #24518f; color: #fff; }
.cf-btn-primary:hover { background: #1d4378; border-color: #1d4378; color: #fff; }
/* 保存类型选择 */
.sv-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 13px; color: #3b4755; }
.sv-row select {
  flex: 1; min-width: 0; height: 32px; padding: 0 8px;
  border: 1px solid #d8dee8; border-radius: 6px; background: #fff; color: #26313f; font-size: 13px;
}
html[data-theme="dark"] .sv-row { color: #cbd5e1; }
html[data-theme="dark"] .sv-row select { background: #1d2632; border-color: #2b3546; color: #e5e9f0; }
html[data-theme="dark"] .cf-btn-primary { background: #2f6dbd; border-color: #2f6dbd; }
html[data-theme="dark"] .cf-card { background: #161c25; }
html[data-theme="dark"] .cf-title { color: #e5e9f0; }
html[data-theme="dark"] .cf-text { color: #9aa7b8; }
html[data-theme="dark"] .cf-btn { background: #1d2632; border-color: #2b3546; color: #cbd5e1; }
html[data-theme="dark"] .cf-btn:hover { background: #243040; }
html[data-theme="dark"] .cf-btn-danger { background: #d64545; border-color: #d64545; color: #fff; }
html[data-theme="dark"] .cf-btn-danger:hover { background: #bd3535; border-color: #bd3535; }