/* ============================================================
   Glass Theme — Apple Liquid Glass Design System Override
   加载在 styles.css 之后，覆盖设计令牌和关键组件样式
   ============================================================ */

/* ---- 设计令牌覆盖 ---- */
:root {
  /* 背景与表面 */
  --background: #eef1f8;
  --surface: rgba(255, 255, 255, 0.55);
  --surface-low: rgba(255, 255, 255, 0.40);
  --surface-mid: rgba(255, 255, 255, 0.50);
  --surface-high: rgba(255, 255, 255, 0.65);

  /* 文字 */
  --text: #1d1d1f;
  --muted: #424752;
  --subtle: #6e6e73;

  /* 线条 */
  --line: rgba(0, 0, 0, 0.08);
  --line-soft: rgba(255, 255, 255, 0.6);

  /* 主色 — Apple System Colors */
  --primary: #007aff;
  --primary-dark: #0056b3;
  --primary-ui: #007aff;
  --primary-soft: rgba(0, 122, 255, 0.12);
  --success: #34c759;
  --warning: #ff9500;
  --critical: #ff3b30;
  --slate: #3a3a3c;

  /* 圆角 — 苹果大圆角 */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  /* 阴影 — 柔和层次 */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.7) inset;

  /* 毛玻璃专用 */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-2: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.07), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --glass-hover: 0 12px 40px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --glass-blur: blur(24px) saturate(1.6);
}

/* ---- 字体 ---- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "PingFang SC", "Noto Sans SC", "Inter", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: var(--background) !important;
  position: relative;
}

/* ---- 动态渐变背景 (让毛玻璃可见) ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, #c9d6ff 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 85% 10%, #dacaff 0%, transparent 45%),
    radial-gradient(ellipse 60% 50% at 50% 100%, #b8f0e0 0%, transparent 50%),
    linear-gradient(180deg, #eef1f8 0%, #e8ecf6 100%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle 400px at 70% 30%, rgba(0, 122, 255, 0.06), transparent),
    radial-gradient(circle 350px at 20% 60%, rgba(175, 82, 222, 0.05), transparent);
  pointer-events: none;
}

/* ---- 导航栏: 全宽 sticky 毛玻璃条 (匹配 glass-preview.html) ---- */
.app-nav {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 52px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(30px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  color: var(--text) !important;
  z-index: 100 !important;
}

/* 品牌区域 */
.brand {
  gap: 8px !important;
}

.brand-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  border: none !important;
  background: linear-gradient(135deg, #007aff, #5856d6) !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
  display: grid !important;
  place-items: center !important;
}

.brand-mark img {
  width: 18px !important;
  height: 18px !important;
  filter: brightness(0) invert(1) !important;
}

.brand-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}

/* 导航链接 — 匹配 glass-preview */
.nav-link {
  color: var(--subtle) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
}

.nav-link:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: transparent !important;
  color: var(--text) !important;
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: transparent !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.nav-link .material-symbols-outlined {
  color: inherit !important;
  font-size: 16px !important;
}

.nav-link b {
  color: inherit !important;
  font-size: 13px !important;
}

/* 顶栏操作区 — 浅色玻璃风格 */
.top-actions a,
.top-actions button,
.top-actions summary {
  color: var(--subtle) !important;
}

.login-link,
.favorite-nav-link,
.account-menu summary,
.tool-menu summary {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: var(--subtle) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.login-link:hover,
.favorite-nav-link:hover,
.account-menu[open] summary,
.tool-menu[open] summary,
.account-menu summary:hover,
.tool-menu summary:hover,
.tool-menu summary.active {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: var(--text) !important;
}

/* 下拉面板 — 保持浅色玻璃 */
.tool-panel,
.account-panel {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* ---- 主内容区 (nav 已改为 sticky，不需要大 padding-top) ---- */
.app-main {
  padding-top: 24px !important;
}

/* ---- 页面标题 ---- */
.page-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.page-head h1 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}

/* ---- 卡片/面板: 毛玻璃化 ---- */
.panel,
.card,
.chart-card,
.report-document {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
}

.card:hover,
.panel:hover {
  box-shadow: var(--glass-hover) !important;
}

.panel h2,
.chart-card h2,
.report-document h2,
.chart-title {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
}

/* ---- 统计卡片 ---- */
.stat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
}

.stat-card:hover {
  box-shadow: var(--glass-hover) !important;
  transform: translateY(-1px);
}

.stat-value {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
}

/* ---- 按钮: 毛玻璃化 ---- */
button,
.button {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
}

button:hover,
.button:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* 主按钮变体 */
.button.primary,
button.primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important;
}

.button.primary:hover,
button.primary:hover {
  background: #0066d6 !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---- 输入框: 毛玻璃化 ---- */
input,
select,
textarea {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary-soft) !important;
  border-color: var(--primary) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--subtle) !important;
}

/* ---- 标签/药丸 ---- */
.pill,
.evidence-badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: none !important;
}

.pill {
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--primary) !important;
}

.pill.ok,
.evidence-badge.level-A,
.evidence-badge.level-B {
  background: rgba(52, 199, 89, 0.15) !important;
  color: #248a3d !important;
}

.pill.warn,
.evidence-badge.level-C {
  background: rgba(255, 149, 0, 0.15) !important;
  color: #c97700 !important;
}

.pill.danger {
  background: rgba(255, 59, 48, 0.15) !important;
  color: #c70909 !important;
}

.evidence-badge.level-D {
  background: rgba(142, 142, 147, 0.15) !important;
  color: var(--subtle) !important;
}

/* ---- 实体 Hero 区域 ---- */
.entity-hero {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.entity-hero h1 {
  color: var(--text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.species-hero {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ---- 首页区块 ---- */
.home-data-section,
.home-insight-section,
.home-flow-section {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ---- 搜索统计框 ---- */
.search-stat-box {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
}

.search-stat-box b {
  color: var(--primary) !important;
}

/* ---- 过滤面板 ---- */
.filter-panel,
.filter-section {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
}

/* ---- 工具栏 ---- */
.page-toolbar,
.entity-toolbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ---- 详情行 ---- */
.detail-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.detail-k {
  color: var(--subtle) !important;
}

.detail-v a {
  color: var(--primary) !important;
}

/* ---- 空状态/错误 ---- */
.empty,
.error {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px dashed rgba(0, 0, 0, 0.12) !important;
  border-radius: var(--radius) !important;
  color: var(--subtle) !important;
}

/* ---- 表格 ---- */
.panel table th,
.chart-card table th,
.report-document table th {
  color: var(--subtle) !important;
  font-weight: 600 !important;
}

.panel table td,
.chart-card table td,
.report-document table td {
  border-color: rgba(0, 0, 0, 0.04) !important;
}

/* ---- 布局区块 ---- */
.layout-with-sidebar {
  gap: 16px;
}

/* ---- 链接颜色 ---- */
a {
  color: var(--primary) !important;
}

a:hover {
  text-decoration: underline;
}

/* ---- 搜索行 ---- */
.search-line {
  gap: 10px;
}

.search-console {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ---- 标签 (tag) ---- */
.tag {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* ---- 响应式 ---- */
@media (max-width: 1180px) {
  .app-nav {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 0 16px !important;
  }

  .nav-link b {
    display: none !important;
  }

  .nav-link {
    padding: 6px 8px !important;
  }
}

@media (max-width: 768px) {
  .app-main {
    padding: 16px 12px 24px !important;
  }

  .app-nav {
    padding: 0 12px !important;
  }

  .app-nav nav {
    display: none !important;
  }
}

/* ---- ECharts 容器透明化 ---- */
.chart-card canvas,
.panel canvas {
  background: transparent !important;
}

/* ---- 滚动条美化 ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ============================================================
   KG-Evidence 页面 — 毛玻璃重设计 v7
   主从布局：左侧三元组列表 + 右侧详情面板
   核心修复：grid 列溢出 + flex 容器错位
   ============================================================ */

/* ---- 全局页面容器: 锁定视口高度，禁止页面级滚动 ---- */
.app-shell:has(.triples-view) {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.content-shell:has(.triples-view) {
  min-height: 0 !important;
  height: calc(100vh - 52px) !important;
  max-height: calc(100vh - 52px) !important;
  overflow: hidden !important;
}

.app-main:has(.triples-view) {
  padding: 12px 20px 12px !important;
  max-width: 1800px !important;
  margin: 0 auto !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---- 全局页面容器: 锁定视口高度，禁止页面级滚动 (triples-graph 全屏图谱页面) ---- */
.app-shell:has(.graph-canvas-wrap) {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.content-shell:has(.graph-canvas-wrap) {
  min-height: 0 !important;
  height: calc(100vh - 52px) !important;
  max-height: calc(100vh - 52px) !important;
  overflow: hidden !important;
}

.app-main:has(.graph-canvas-wrap) {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* ---- chat 问答页: 锁定视口高度，抵消 sticky nav 的 52px，内容不再整体下移 ---- */
.app-shell:has(.chat-workspace) {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.content-shell:has(.chat-workspace) {
  min-height: 0 !important;
  height: calc(100vh - 52px) !important;
  max-height: calc(100vh - 52px) !important;
  overflow: hidden !important;
}

.app-main:has(.chat-workspace) {
  padding: 12px 18px 18px !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---- 主容器：两块毛玻璃面板并排 ---- */
.triples-view {
  display: flex !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  align-items: stretch !important;
}

/* ---- 左侧 wrapper：固定窄宽度，其余空间全给右侧详情 (v13: 740→500，右侧占比≥60%) ---- */
.triples-list-top {
  flex: 0 0 500px !important;
  width: 500px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  position: relative !important;
}

/* 收起状态：左侧面板完全隐藏 */
.triples-view--list-collapsed .triples-list-top {
  flex: 0 0 0px !important;
  width: 0px !important;
  min-width: 0px !important;
  opacity: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* ---- 左侧列表本体 ---- */
.triples-list-panel {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* ---- 列表头部 ---- */
.triples-list-header {
  flex-shrink: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr) !important;
  gap: 0 !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

.triples-list-col {
  padding: 0 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.triples-list-col--predicate {
  text-align: center !important;
}

.triples-list-col--object {
  text-align: left !important;
}

/* ---- 筛选/搜索栏 ---- */
.triples-filter-bar {
  flex-shrink: 0 !important;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* 搜索框 */
.filter-bar-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 2 1 200px !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

.filter-bar-search__input {
  width: 100% !important;
  padding: 8px 32px 8px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
  color: var(--text) !important;
  box-sizing: border-box !important;
}

.filter-bar-search__input::placeholder {
  color: var(--subtle) !important;
}

.filter-bar-search__input:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.filter-bar-search__clear {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--subtle) !important;
}

.filter-bar-search__clear .material-symbols-outlined {
  font-size: 14px !important;
}

.filter-bar-search__clear:hover {
  background: rgba(0, 0, 0, 0.12) !important;
  color: var(--text) !important;
}

/* ---- 下拉筛选器 ---- */
.filter-select {
  position: relative !important;
  flex: 1 1 120px !important;
  min-width: 0 !important;
}

.filter-select__trigger {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.filter-select__trigger:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.filter-select__trigger:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
}

.filter-select__dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.filter-select__trigger-text {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.filter-select__trigger-label {
  color: var(--text) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.filter-select__trigger-count {
  font-size: 10px !important;
  color: var(--subtle) !important;
  font-weight: 600 !important;
  font-family: "SF Mono", "JetBrains Mono", monospace !important;
  background: rgba(0, 122, 255, 0.1) !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  color: var(--primary) !important;
  flex-shrink: 0 !important;
}

.filter-select__caret {
  font-size: 16px !important;
  color: var(--subtle) !important;
  flex-shrink: 0 !important;
}

.filter-select__dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
  z-index: 100 !important;
  padding: 6px !important;
  display: none !important;
}

.filter-select.is-open .filter-select__dropdown {
  display: block !important;
}

.filter-select__option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  color: var(--text) !important;
  transition: all 0.15s ease !important;
}

.filter-select__option:hover {
  background: rgba(0, 122, 255, 0.08) !important;
}

.filter-select__option.is-active {
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.filter-select__option-count {
  margin-left: auto !important;
  font-size: 11px !important;
  color: var(--subtle) !important;
  font-family: "SF Mono", "JetBrains Mono", monospace !important;
}

.filter-select__option-check {
  font-size: 16px !important;
  color: var(--primary) !important;
  margin-left: auto !important;
}

.filter-select__divider {
  height: 1px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  margin: 4px 8px !important;
}

.filter-select__reset {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 8px 10px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
  font-family: inherit !important;
}

.filter-select__reset:hover {
  background: rgba(0, 122, 255, 0.08) !important;
}

/* ---- 列表 body ---- */
.triples-list-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent !important;
  min-height: 0 !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.triples-list-body::-webkit-scrollbar {
  width: 6px;
}

.triples-list-body::-webkit-scrollbar-track {
  background: transparent;
}

.triples-list-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

.triples-list-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}

/* 空状态 */
.triple-list--empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 200px !important;
  gap: 12px !important;
  color: var(--subtle) !important;
  font-size: 13px !important;
  padding: 32px 16px !important;
  text-align: center !important;
}

.triple-list--empty .material-symbols-outlined {
  font-size: 36px !important;
  color: rgba(0, 0, 0, 0.18) !important;
}

/* ---- 列表行：关键修复 grid 溢出 ---- */
.triple-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  min-height: 64px !important;
  background: transparent !important;
  position: relative !important;
}

.triple-row:hover {
  background: rgba(0, 122, 255, 0.05) !important;
}

.triple-row--selected {
  background: rgba(0, 122, 255, 0.09) !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}

.triple-row--selected + .triple-row {
  border-top-color: transparent !important;
}

/* 主体列：菌株/物种 */
.triple-row__subject {
  padding: 0 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.triple-row__subject strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
}

.subject-type-badge {
  display: inline-block !important;
  flex-shrink: 0 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  min-width: 18px !important;
}

.subject-type-badge--strain {
  color: #0044cc !important;
  background: rgba(0, 122, 255, 0.14) !important;
  border: 1px solid rgba(0, 122, 255, 0.25) !important;
}

.subject-type-badge--species {
  color: #0a6b3b !important;
  background: rgba(52, 199, 89, 0.14) !important;
  border: 1px solid rgba(52, 199, 89, 0.25) !important;
}

/* 关系谓词列：居中 + 换行限制 */
.triple-row__predicate {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 6px !important;
  font-size: 11.5px !important;
  color: var(--pred-color, #6c757d) !important;
  font-weight: 500 !important;
  text-align: center !important;
  min-width: 0 !important;
  line-height: 1.3 !important;
}

.pred-icon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.pred-icon-wrap > span:last-child {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.pred-icon {
  font-size: 16px !important;
  font-variation-settings: "wght" 500 !important;
  color: var(--pred-color, #6c757d) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.pred-dot {
  display: none !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--pred-color, #6c757d) !important;
  flex-shrink: 0 !important;
}

.triple-row__source-status {
  display: inline-block !important;
  font-size: 9px !important;
  color: #b45309 !important;
  font-weight: 600 !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 客体列 */
.triple-row__object {
  padding: 0 0 0 8px !important;
  font-size: 12px !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.object-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-items: center !important;
  max-width: 100% !important;
}

.object-tag {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  background: rgba(0, 122, 255, 0.1) !important;
  color: #0044cc !important;
  white-space: nowrap !important;
  border: 1px solid rgba(0, 122, 255, 0.12) !important;
  flex-shrink: 0 !important;
}

.object-tag--en {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--subtle) !important;
  font-style: italic !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ---- 头部标签：垂直流式布局 ---- */
.detail-identity-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 1 !important;
}

.detail-identity-subject,
.detail-identity-object {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.detail-identity-connector {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 20px !important;
  margin: 2px 0 !important;
}

.detail-identity-connector .connector-arrow {
  font-size: 18px !important;
  color: var(--pred-color, var(--subtle)) !important;
  opacity: 0.55 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.identity-label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: rgba(0, 122, 255, 0.1) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 122, 255, 0.18) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.identity-subject-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.identity-subject-name .detail-entity-link {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  transition: opacity 0.2s ease !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.identity-subject-name small,
.identity-subject-name .identity-species-text {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--subtle) !important;
  font-style: italic !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.identity-subject-name .tag {
  flex-shrink: 0 !important;
}

.identity-object-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.identity-object-name .object-tag {
  flex-shrink: 0 !important;
}

.pred-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--pred-color, #6c757d) !important;
  letter-spacing: 0.02em !important;
  padding: 4px 12px !important;
  background: color-mix(in srgb, var(--pred-color, #6c757d) 8%, white) !important;
  border: 1.5px solid var(--pred-color, #6c757d) !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.35 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.tag--strain,
.tag--species,
.tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  background: rgba(0, 122, 255, 0.1) !important;
  color: #0044cc !important;
  border: 1px solid rgba(0, 122, 255, 0.18) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.tag--species {
  background: rgba(0, 122, 255, 0.1) !important;
  color: #0044cc !important;
}

.tag--strain {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #6d28d9 !important;
  border-color: rgba(168, 85, 247, 0.22) !important;
}

/* ---- 分页器 ---- */
.triples-list-pager {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  flex-wrap: wrap !important;
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

.triples-page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  background: transparent !important;
}

.triples-page-link:hover {
  background: rgba(0, 122, 255, 0.08) !important;
  border-color: rgba(0, 122, 255, 0.18) !important;
  color: var(--primary) !important;
}

.triples-page-link.active {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25) !important;
}

.triples-page-link[aria-disabled="true"] {
  opacity: 0.35 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

.triples-page-link--icon {
  width: 30px !important;
  padding: 0 !important;
}

.triples-page-link--icon .material-symbols-outlined {
  font-size: 18px !important;
}

.triples-page-window {
  display: inline-flex !important;
  gap: 2px !important;
  align-items: center !important;
}

.triples-page-status {
  margin-left: auto !important;
  padding-left: 10px !important;
  font-size: 11px !important;
  color: var(--subtle) !important;
  font-family: "SF Mono", "JetBrains Mono", monospace !important;
}

/* ====================================================================
   右侧详情面板 — 独立滚动容器
   ==================================================================== */

.triples-detail-panel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  min-height: 0 !important;
  position: relative !important;
}

.detail-panel--empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--subtle) !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 60px 24px !important;
}

.detail-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.detail-panel::-webkit-scrollbar {
  width: 8px;
}

.detail-panel::-webkit-scrollbar-track {
  background: transparent;
}

.detail-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

.detail-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}

/* ---- 详情头部：身份卡片 ---- */
.detail-section--identity {
  position: relative !important;
  padding: 22px 26px 18px !important;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.06) 0%, rgba(88, 86, 214, 0.06) 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* 收起状态：为图钉按钮留出顶部空间 */
.triples-view--list-collapsed .detail-section--identity {
  padding: 48px 32px 16px !important;
}

.detail-section--identity::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(circle, rgba(0, 122, 255, 0.1) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.identity-subject-line {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.identity-subject-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.identity-subject-name .detail-entity-link {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  transition: opacity 0.2s ease !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.identity-subject-name .detail-entity-link:hover {
  opacity: 0.7 !important;
}

.identity-subject-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  color: var(--subtle) !important;
}

.identity-subject-meta em {
  font-style: italic !important;
  color: var(--subtle) !important;
  font-size: 13px !important;
}

.subject-level-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--primary) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(0, 122, 255, 0.2) !important;
}

.identity-predicate-line {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}

.predicate-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: var(--pred-bg, rgba(0, 122, 255, 0.1)) !important;
  color: var(--pred-color, var(--primary)) !important;
  border: 1px solid var(--pred-border, rgba(0, 122, 255, 0.2)) !important;
}

.predicate-pill .pred-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

.evidence-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(52, 199, 89, 0.12) !important;
  color: #0a6b3b !important;
  border: 1px solid rgba(52, 199, 89, 0.25) !important;
}

.evidence-badge .material-symbols-outlined {
  font-size: 13px !important;
}

.evidence-badge--warn {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

/* ---- 关系解释链 ---- */
.relationship-assessment {
  margin: 16px 26px !important;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}

.relationship-assessment__title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.relationship-assessment__title .material-symbols-outlined {
  font-size: 16px !important;
  color: var(--primary) !important;
}

.relationship-assessment__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.relationship-card {
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: 10px !important;
}

.relationship-card--because {
  border-left-color: #007aff !important;
}

.relationship-card--therefore {
  border-left-color: #34c759 !important;
}

.relationship-card__label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.relationship-card--because .relationship-card__label {
  color: #007aff !important;
}

.relationship-card--therefore .relationship-card__label {
  color: #34c759 !important;
}

.relationship-card__label .material-symbols-outlined {
  font-size: 13px !important;
}

.relationship-card__text {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

.relationship-assessment__source-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 12px !important;
  padding: 4px 10px !important;
  background: rgba(245, 158, 11, 0.1) !important;
  color: #b45309 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.relationship-assessment__source-status .material-symbols-outlined {
  font-size: 14px !important;
}

.relationship-warn-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 10px 12px !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.18) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  color: #92400e !important;
  line-height: 1.5 !important;
}

.relationship-warn-note .material-symbols-outlined {
  color: #f59e0b !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* 机制路径图 */
.relationship-mechanism {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
}

.relationship-mechanism__label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-right: 4px !important;
}

.relationship-mechanism__node {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

.relationship-mechanism__arrow {
  color: var(--subtle) !important;
  font-size: 14px !important;
}

/* ---- 通用 section 块 ---- */
.detail-section {
  padding: 18px 26px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.detail-section:last-child {
  border-bottom: none !important;
  padding-bottom: 32px !important;
}

.detail-section__title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  padding-left: 10px !important;
}

.detail-section__title::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  bottom: 2px !important;
  width: 3px !important;
  background: var(--primary) !important;
  border-radius: 2px !important;
}

.detail-section__title .material-symbols-outlined {
  font-size: 16px !important;
  color: var(--primary) !important;
}

.detail-section__action {
  margin-left: auto !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--primary) !important;
  background: rgba(0, 122, 255, 0.08) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.18s ease !important;
  border: 1px solid rgba(0, 122, 255, 0.15) !important;
}

.detail-section__action:hover {
  background: rgba(0, 122, 255, 0.16) !important;
}

/* ---- 字段网格 ---- */
.field-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

.field-cell {
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 10px !important;
  transition: all 0.18s ease !important;
}

.field-cell:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 122, 255, 0.15) !important;
}

.field-cell__label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}

.field-cell__value {
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  word-break: break-word !important;
}

.field-cell__value--mono {
  font-family: "SF Mono", "JetBrains Mono", monospace !important;
  font-size: 12px !important;
}

.field-cell__value--link {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.field-cell__value--link:hover {
  text-decoration: underline !important;
}

/* ---- 数据表 ---- */
.detail-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12.5px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.detail-table thead {
  background: rgba(0, 122, 255, 0.04) !important;
}

.detail-table th {
  text-align: left !important;
  padding: 10px 12px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

.detail-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: var(--text) !important;
  vertical-align: top !important;
}

.detail-table tr:last-child td {
  border-bottom: none !important;
}

.detail-table tr:hover td {
  background: rgba(0, 122, 255, 0.03) !important;
}

.detail-table .detail-entity-link {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.detail-table .detail-entity-link:hover {
  text-decoration: underline !important;
}

/* ---- 论文摘要 ---- */
.abstract-block {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.abstract-block--single {
  grid-template-columns: 1fr !important;
}

.abstract-card {
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  position: relative !important;
}

.abstract-card__lang {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--subtle) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.abstract-card__text {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--text) !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.abstract-card__text--en {
  font-family: "Georgia", "Times New Roman", serif !important;
  color: var(--subtle) !important;
}

.abstract-card__action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 10px !important;
  padding: 4px 10px !important;
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--primary) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(0, 122, 255, 0.15) !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.abstract-card__action:hover {
  background: rgba(0, 122, 255, 0.16) !important;
}

.abstract-card__action .material-symbols-outlined {
  font-size: 13px !important;
}

/* ---- 参考文献列表 ---- */
.ref-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ref-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 10px !important;
  transition: all 0.18s ease !important;
}

.ref-item:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 122, 255, 0.18) !important;
  transform: translateY(-1px) !important;
}

.ref-item__badge {
  flex-shrink: 0 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: rgba(0, 122, 255, 0.1) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 122, 255, 0.18) !important;
  letter-spacing: 0.04em !important;
  font-family: "SF Mono", "JetBrains Mono", monospace !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

.ref-item__badge--doi {
  background: rgba(168, 85, 247, 0.1) !important;
  color: #7c3aed !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
}

.ref-item__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 12.5px !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

.ref-item__body a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.ref-item__body a:hover {
  text-decoration: underline !important;
}

/* ---- PMID/DOI 链接药丸（毛玻璃风格，覆盖全局 a 蓝字覆盖问题） v11 ---- */
.ref-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 122, 255, 0.25) !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.01em !important;
  font-family: "SF Mono", "JetBrains Mono", monospace !important;
  white-space: nowrap !important;
}

.ref-link:hover {
  background: rgba(0, 122, 255, 0.15) !important;
  border-color: rgba(0, 122, 255, 0.4) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

/* 聚合参考文献列表中的 ref-link 略小 */
.ref-item--aggregated .ref-link {
  font-size: 11px !important;
  padding: 1px 8px !important;
}

/* ---- 折迭区块 ---- */
.detail-section--collapsible .detail-section__title {
  cursor: pointer !important;
  user-select: none !important;
}

.detail-section--collapsible .detail-section__title::after {
  content: "expand_more" !important;
  font-family: "Material Symbols Outlined" !important;
  font-size: 18px !important;
  color: var(--subtle) !important;
  margin-left: auto !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform 0.2s ease !important;
}

.detail-section--collapsible.is-collapsed .detail-section__title::after {
  transform: rotate(-90deg) !important;
}

.detail-section--collapsible .detail-section__body {
  display: block !important;
  transition: all 0.2s ease !important;
}

.detail-section--collapsible.is-collapsed .detail-section__body {
  display: none !important;
}

/* ---- 适用人群标签 (v12) ---- */
.detail-section--population {
  padding: 10px 16px !important;
}

.pop-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.pop-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--pop-color) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pop-color) 25%, transparent) !important;
  color: var(--pop-color) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}

.pop-tag:hover {
  background: color-mix(in srgb, var(--pop-color) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--pop-color) 40%, transparent) !important;
  transform: translateY(-1px) !important;
}

.pop-tag__icon {
  font-size: 16px !important;
  font-variation-settings: "wght" 400 !important;
}

.pop-tag__label {
  line-height: 1.2 !important;
}

/* ---- 证据概览图形化卡片 (v12) ---- */
.detail-section--evidence-overview {
  padding: 12px 16px !important;
}

.ev-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.ev-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 1 140px !important;
  min-width: 0 !important;
  max-width: 200px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: all 0.18s ease !important;
  min-height: 88px !important;
  overflow: hidden !important;
}

.ev-card:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: color-mix(in srgb, var(--ev-color, #007aff) 25%, transparent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.ev-card__head {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.ev-card__head .material-symbols-outlined {
  font-size: 14px !important;
  font-variation-settings: "wght" 400 !important;
  color: var(--ev-color, var(--subtle)) !important;
}

/* 证据级别卡片 */
.ev-card--level {
  --ev-color: #34c759;
}

.ev-card__level-badge {
  font-size: 36px !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, var(--ev-color) 0%, color-mix(in srgb, var(--ev-color) 60%, #5856d6) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-top: -2px !important;
  white-space: nowrap !important;
}

.ev-card__level-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ev-card__level-desc {
  font-size: 10.5px !important;
  color: var(--subtle) !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 效果方向卡片 (颜色通过 --ev-color 传给子元素) */
.ev-card__dir-icon {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ev-color) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.ev-card__dir-icon .material-symbols-outlined {
  font-size: 28px !important;
  font-variation-settings: "wght" 600 !important;
}

/* 样本量卡片 */
.ev-card__big-num {
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(135deg, #0f172a 0%, #007aff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ev-card__big-num small {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--subtle) !important;
  -webkit-text-fill-color: var(--subtle) !important;
}

.ev-card__bar {
  height: 4px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 2px !important;
}

.ev-card__bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #007aff, #5856d6) !important;
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
}

/* P 值卡片 (颜色通过 --ev-color 传给子元素) */
.ev-card__sig {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: color-mix(in srgb, var(--ev-color) 12%, transparent) !important;
  color: var(--ev-color) !important;
  width: fit-content !important;
}

/* 通用文本值 */
.ev-card__text-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* 研究设计标签 */
.ev-card__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

.design-tag {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 122, 255, 0.15) !important;
  white-space: nowrap !important;
}

/* ---- 文本/链接样式 ---- */
.detail-entity-link {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: 1px dashed rgba(0, 122, 255, 0.3) !important;
  transition: all 0.18s ease !important;
}

.detail-entity-link:hover {
  color: var(--primary) !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--primary) !important;
}

.detail-note {
  font-size: 12px !important;
  color: var(--subtle) !important;
  line-height: 1.5 !important;
  font-style: italic !important;
}

/* ---- 微型图/缩略图按钮 ---- */
.micro-graph-expand-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  background: rgba(0, 122, 255, 0.06) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 122, 255, 0.15) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  margin-left: auto !important;
  transition: all 0.2s ease !important;
}

.micro-graph-expand-btn:hover {
  background: rgba(0, 122, 255, 0.12) !important;
  border-color: rgba(0, 122, 255, 0.25) !important;
}

.micro-graph-expand-btn .material-symbols-outlined {
  font-size: 14px !important;
}

/* ============================================================
   关系网络图 — SVG 径向布局 (对齐 triples-graph 风格)
   主体居中, 邻居环绕, 带关系标签连线
   ============================================================ */

.kg-graph {
  padding: 4px 0 0 !important;
}

/* 工具栏 */
.kg-graph__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.kg-graph__title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--subtle) !important;
}

.kg-graph__expand-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  color: var(--primary) !important;
  background: rgba(0, 122, 255, 0.08) !important;
  border: 1px solid rgba(0, 122, 255, 0.2) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.kg-graph__expand-btn:hover {
  background: rgba(0, 122, 255, 0.15) !important;
  border-color: rgba(0, 122, 255, 0.35) !important;
}

.kg-graph__expand-btn .material-symbols-outlined {
  font-size: 14px !important;
}

/* SVG 画布 */
.kg-graph__canvas {
  position: relative !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

.kg-graph__svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
}

/* 边 */
.graph-edge__line {
  transition: opacity 0.2s ease, stroke-width 0.2s ease !important;
}

.graph-edge__bg,
.graph-edge__label {
  transition: opacity 0.2s ease !important;
}

/* 节点 */
.graph-node__circle {
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.graph-node__label {
  pointer-events: none !important;
  user-select: none !important;
}

.graph-node__ev-badge,
.graph-node__ev-ring {
  pointer-events: none !important;
}

/* hover 效果 */
.graph-node--neighbor:hover .graph-node__circle {
  stroke-width: 3 !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)) !important;
}

.graph-node--neighbor:hover .graph-node__label {
  font-weight: 700 !important;
}

/* 溢出提示 */
.kg-graph__overflow {
  font-size: 11px !important;
  color: var(--subtle) !important;
  text-align: center !important;
  padding: 6px 0 2px !important;
}

.kg-graph__overflow a {
  color: var(--primary) !important;
  text-decoration: none !important;
}

.kg-graph__overflow a:hover {
  text-decoration: underline !important;
}

/* 图例 */
.kg-graph__legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  padding: 8px 4px 4px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin-top: 6px !important;
}

.kg-graph__legend-item,
.kg-legend__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}

.graph-legend__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}

.graph-legend__dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.graph-legend__item em {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-left: 2px !important;
}

/* 统计 */
.kg-graph__stats {
  display: flex !important;
  gap: 8px !important;
  padding: 4px 4px 0 !important;
}

.graph-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 8px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}

.graph-stat__dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

.graph-stat__level {
  font-weight: 700 !important;
  color: var(--text) !important;
}

.graph-stat__count {
  color: var(--subtle) !important;
}

/* —— 旧 canvas 图隐藏 —— */
.detail-section--micro-graph .micro-graph-canvas-wrap {
  display: none !important;
}

/* ---- 空文本 ---- */
.detail-empty-text {
  font-size: 13px !important;
  color: var(--subtle) !important;
  font-style: italic !important;
  padding: 16px !important;
  text-align: center !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border-radius: 10px !important;
  border: 1px dashed rgba(0, 0, 0, 0.1) !important;
}

/* ---- 响应式 ---- */
@media (max-width: 1280px) {
  .triples-list-top {
    flex: 0 0 460px !important;
    width: 460px !important;
  }
}

@media (max-width: 1100px) {
  .triples-list-top {
    flex: 0 0 400px !important;
    width: 400px !important;
  }

  .abstract-block {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .app-shell:has(.triples-view) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .content-shell:has(.triples-view) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .app-main:has(.triples-view) {
    height: auto !important;
    overflow: visible !important;
  }

  .triples-view {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .triples-list-top {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 50vh !important;
  }

  .triples-detail-panel {
    min-height: 50vh !important;
  }

  .field-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .app-main:has(.triples-view) {
    padding: 16px 12px 24px !important;
  }

  .triples-view {
    gap: 12px !important;
  }

  .triples-filter-bar {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
  }

  .filter-bar-search {
    flex: 1 1 100% !important;
  }

  .filter-bar-search__input {
    font-size: 14px !important;
  }

  .filter-select {
    flex: 1 1 calc(50% - 4px) !important;
  }

  .detail-section {
    padding: 14px 16px !important;
  }

  .detail-section--identity {
    padding: 16px 16px 14px !important;
  }

  .identity-subject-name {
    font-size: 18px !important;
  }

  .identity-subject-name .detail-entity-link {
    font-size: 18px !important;
  }

  .relationship-assessment {
    margin: 12px 16px !important;
    padding: 14px !important;
  }

  .relationship-assessment__grid {
    grid-template-columns: 1fr !important;
  }

  .field-grid {
    grid-template-columns: 1fr !important;
  }

  .triple-row {
    padding: 10px 12px !important;
    min-height: 60px !important;
  }
}

/* ---- 选中文本 ---- */
::selection {
  background: rgba(0, 122, 255, 0.2);
}

/* ============================================================
   实体详情页 (Entity Detail) — 全面毛玻璃化
   对齐 glass-preview.html 参考设计
   ============================================================ */

/* ---- 统一 Hero 卡片: 玻璃 + 紧凑三栏 ---- */
.entity-detail-hero {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
}

.entity-detail-hero:hover {
  box-shadow: var(--glass-hover) !important;
  transform: translateY(-1px);
}

/* ---- Hero 图标: 紧凑 44px + 苹果配色 ---- */
.entity-detail-hero-icon {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.entity-detail-hero-icon .material-symbols-outlined {
  font-size: 22px !important;
}

/* Species — 蓝 */
.species-hero-icon,
.entity-detail-hero-icon.species-hero-icon {
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--blue) !important;
}

/* Genome — 紫 */
.entity-detail-hero-icon[class*="genome"],
.genome-hero-icon {
  background: rgba(175, 82, 222, 0.12) !important;
  color: var(--purple) !important;
}

/* Strain — 橙 */
.entity-detail-hero-icon[class*="strain"],
.strain-hero-icon {
  background: rgba(255, 149, 0, 0.12) !important;
  color: var(--orange) !important;
}

/* Clinical — 蓝 */
.entity-detail-hero-icon[class*="clinical"],
.clinical-hero-icon {
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--blue) !important;
}

/* Metabolite — 青 */
.entity-detail-hero-icon[class*="metabolite"],
.metabolite-hero-icon {
  background: rgba(90, 200, 250, 0.15) !important;
  color: #0a84b8 !important;
}

/* Reference — 绿 */
.entity-detail-hero-icon[class*="reference"],
.reference-hero-icon {
  background: rgba(52, 199, 89, 0.12) !important;
  color: #248a3d !important;
}

/* Project — 靛蓝 */
.entity-detail-hero-icon[class*="project"],
.project-hero-icon {
  background: rgba(88, 86, 214, 0.12) !important;
  color: var(--indigo) !important;
}

/* Factor 颜色变体 — 苹果配色 */
.factor-hero-icon.factor-arg {
  background: rgba(255, 59, 48, 0.12) !important;
  color: var(--red) !important;
}

.factor-hero-icon.factor-prophage {
  background: rgba(255, 149, 0, 0.12) !important;
  color: var(--orange) !important;
}

.factor-hero-icon.factor-mgc {
  background: rgba(175, 82, 222, 0.12) !important;
  color: var(--purple) !important;
}

.factor-hero-icon.factor-rrna {
  background: rgba(90, 200, 250, 0.15) !important;
  color: #0a84b8 !important;
}

.factor-hero-icon.factor-vfdb {
  background: rgba(255, 45, 85, 0.12) !important;
  color: var(--pink) !important;
}

/* Reference Hero 扁平布局也毛玻璃化 */
.entity-detail-hero.reference-hero {
  display: block !important;
}

.entity-detail-hero.reference-hero .entity-detail-hero-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

.entity-detail-hero.reference-hero .entity-detail-hero-icon .material-symbols-outlined {
  font-size: 20px !important;
}

/* ---- Hero Body ---- */
.entity-detail-hero-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.entity-detail-hero-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 2px !important;
}

.entity-detail-hero-body h1 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
  margin: 0 0 1px 0 !important;
  overflow-wrap: anywhere;
}

.entity-detail-hero-body h1 i,
.entity-detail-hero-body h1 em {
  font-style: italic !important;
}

.entity-detail-hero-body p {
  font-size: 12px !important;
  color: var(--text-2) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

.entity-detail-hero-body p.muted {
  color: var(--text-3) !important;
  font-size: 11px !important;
  margin-top: 1px !important;
}

/* ---- Hero Stats: 右侧大数字 + 分隔线 ---- */
.entity-detail-hero-stats {
  display: flex !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  max-width: none !important;
  padding-left: 14px !important;
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.entity-detail-hero-stats .hero-stat {
  text-align: center !important;
  min-width: 52px !important;
  flex: none !important;
  padding: 0 !important;
  border-left: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.entity-detail-hero-stats .hero-stat b {
  display: block !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text) !important;
  margin-bottom: 0 !important;
}

.entity-detail-hero-stats .hero-stat span {
  display: block !important;
  font-size: 10px !important;
  color: var(--text-3) !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}

/* Stats 颜色编码 */
.entity-detail-hero-stats .hero-stat.ok b,
.hero-stat.ok b {
  color: var(--green) !important;
}

.entity-detail-hero-stats .hero-stat.warn b,
.hero-stat.warn b {
  color: var(--orange) !important;
}

.entity-detail-hero-stats .hero-stat.bad b,
.hero-stat.bad b {
  color: var(--red) !important;
}

/* Reference hero 的 inline stats 也统一 */
.entity-detail-hero.reference-hero .hero-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-left: 3px solid var(--primary) !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 6px !important;
}

.entity-detail-hero.reference-hero .hero-stat b {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.entity-detail-hero.reference-hero .hero-stat span {
  display: inline !important;
  font-size: 11px !important;
}

/* ---- 通用 hero-stat (非 entity-detail-hero 内的) ---- */
.hero-stat {
  padding: 8px 10px !important;
  border-left: 3px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
}

.hero-stat.ok {
  border-left-color: var(--green) !important;
}

.hero-stat.warn {
  border-left-color: var(--orange) !important;
}

.hero-stat.bad {
  border-left-color: var(--red) !important;
}

.hero-stat b {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* ---- Entity 工具栏 ---- */
.entity-toolbar,
.entity-action-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  margin-bottom: 12px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.entity-badges {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.id-mono {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  color: var(--text-3) !important;
}

/* ---- Entity Health 面板 ---- */
.entity-health-panel {
  display: grid !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.entity-health-compact {
  display: grid !important;
  grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1.5fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.entity-health-score-col {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.entity-health-score-col b {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.entity-health-score-col small {
  color: var(--text-2) !important;
  font-size: 11px !important;
}

.entity-score-ring {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
}

.entity-score-ring::after {
  background: rgba(255, 255, 255, 0.6) !important;
}

.entity-score-ring span {
  color: var(--primary) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.entity-health-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.entity-health-row .row-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.entity-health-row b {
  color: var(--text) !important;
}

/* ---- Result Shell / Result Toolbar ---- */
.result-shell {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 !important;
}

/* 因子面板需要展开详情，不能裁剪垂直内容 */
.genome-factor-panel {
  overflow: visible !important;
}

.result-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

.result-toolbar h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.result-toolbar h2 .material-symbols-outlined {
  font-size: 18px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
  color: var(--primary) !important;
}

.result-count b {
  color: var(--primary) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* ---- 详情区块 (Detail Section) ---- */
.detail-section {
  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.detail-section:last-child {
  border-bottom: none !important;
}

.detail-section h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 10px !important;
}

.detail-section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-3) !important;
  margin-bottom: 12px !important;
}

.detail-section-title::before {
  background: var(--primary) !important;
  border-radius: 2px !important;
}

.section-count-badge {
  background: rgba(0, 122, 255, 0.1) !important;
  color: var(--primary) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* ---- Chips / 标签 ---- */
.chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 !important;
  list-style: none !important;
}

.chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 11px !important;
  font-size: 12px !important;
  background: rgba(0, 122, 255, 0.08) !important;
  border: 1px solid rgba(0, 122, 255, 0.15) !important;
  color: #0040a0 !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

.chip code {
  font-size: 10px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

/* ---- 外部 ID 列表 ---- */
.ext-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 8px !important;
}

.ext-list li {
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.ext-list li code {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  color: var(--text) !important;
}

.ext-db {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: rgba(88, 86, 214, 0.12) !important;
  color: var(--indigo) !important;
  margin-right: 6px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* ---- 表格行 hover ---- */
tbody tr:hover {
  background: rgba(0, 122, 255, 0.04) !important;
}

/* ---- 状态点 ---- */
.status-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--green) !important;
  margin-right: 4px !important;
}

.status-dot.warn {
  background: var(--orange) !important;
}

/* ---- Factor 参考网格 ---- */
.factor-ref-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  padding: 14px 16px !important;
}

.factor-ref-grid div {
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.factor-ref-grid span {
  font-size: 10px !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.factor-ref-grid b {
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* ---- 物种图表行 ---- */
.species-chart-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.species-chart-row .panel,
.species-chart-row .chart-card {
  margin-bottom: 0 !important;
}

/* ---- 证据面板 ---- */
.evidence-panel {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ---- 临床表格 ---- */
.clinical-table {
  width: 100% !important;
}

.clinical-table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-3) !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.clinical-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.clinical-table tr:hover td {
  background: rgba(0, 122, 255, 0.03) !important;
}

/* ---- 成员基因组表格 ---- */
.panel > table.member-genome-table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-3) !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.panel > table.member-genome-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.panel > table.member-genome-table td small {
  display: block !important;
  font-size: 10px !important;
  color: var(--text-3) !important;
  margin-top: 2px !important;
}

.panel > table.member-genome-table td a {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* ---- .muted 辅助文字 ---- */
.muted {
  color: var(--text-3) !important;
  font-size: 11px !important;
}

/* ---- 小工具类 ---- */
.small,
small {
  font-size: 11px !important;
  color: var(--text-3) !important;
}

/* ---- Stack 布局间距 ---- */
.stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.stack > section {
  margin-bottom: 0 !important;
}

/* ---- KG Triples 面板 ---- */
.kg-triples-panel,
.panel.kg-triples {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* ===== 三元组表格列宽 & 证据等级徽章优化 ===== */

/* 证据等级列：窄列，仅放一个字母徽章 */
.triples-table th:first-child,
.triples-table td:first-child {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  text-align: center !important;
  padding: 8px 4px !important;
  vertical-align: middle !important;
}

/* 证据等级徽章：大号醒目字母，方形圆角，行头风格 */
.triples-table .evidence-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.triples-table .evidence-badge .material-symbols-outlined {
  display: none !important;
}

/* 疾病/健康主题列：加宽，标题不折行 */
.triples-table th:nth-child(3) {
  width: auto !important;
  min-width: 200px !important;
  white-space: nowrap !important;
}
.triples-table td:nth-child(3) {
  min-width: 200px !important;
}

/* 疾病/健康主题内容：完整显示，不截断 */
.triples-table .kg-object-cell b {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}
.triples-table .kg-object-cell small {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ===== 因子浮动提示窗口 ===== */
.factor-tip-popup {
  position: fixed !important;
  z-index: 99999 !important;
  min-width: 220px !important;
  max-width: 360px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  pointer-events: none !important;
  animation: factorTipIn 0.12s ease-out !important;
}
@keyframes factorTipIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.factor-tip-popup .factor-tip-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
.factor-tip-popup .factor-tip-header b {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  word-break: break-word !important;
}
.factor-tip-popup .factor-tip-type {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(15, 23, 42, 0.06) !important;
  white-space: nowrap !important;
}

.factor-tip-popup .factor-tip-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.factor-tip-popup .factor-tip-row > span:first-child {
  flex-shrink: 0 !important;
  width: 36px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}
.factor-tip-popup .factor-tip-row > span:last-child,
.factor-tip-popup .factor-tip-row code {
  flex: 1 !important;
  word-break: break-word !important;
  font-size: 12px !important;
  color: var(--text) !important;
}
.factor-tip-popup .factor-tip-row code {
  font-family: ui-monospace, SFMono-Regular, monospace !important;
  font-size: 11px !important;
}

.factor-tip-popup .factor-tip-simple {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
}

/* 因子标记 hover 时增强轮廓 */
.factor-marker[data-tip-json]:hover {
  z-index: 10 !important;
  outline: 2px solid var(--primary-ui) !important;
  outline-offset: 2px !important;
  filter: brightness(1.15) !important;
}

/* 带提示的 pill 可点击感 */
.pill[data-tip-text] {
  cursor: help !important;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.2) !important;
}

/* Hero stat 带提示时可点击感 */
.hero-stat[data-tip-text] {
  cursor: help !important;
}
.entity-detail-hero-body h1[data-tip-text],
.entity-detail-hero-body p[data-tip-text] {
  cursor: help !important;
}

/* 证据等级行跳转 */
.evidence-table tr.evidence-jump-row {
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.evidence-table tr.evidence-jump-row:hover td {
  background: rgba(0, 122, 255, 0.06) !important;
}
.evidence-jump-icon {
  font-size: 14px !important;
  color: var(--subtle) !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease, color 0.15s ease !important;
}
.evidence-jump-row:hover .evidence-jump-icon {
  opacity: 1 !important;
  color: var(--primary-ui) !important;
}

/* 跳转目标面板高亮 */
.panel-jump-highlight {
  animation: panelJumpFlash 1.8s ease-out !important;
}
@keyframes panelJumpFlash {
  0% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.35), var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.07)) !important; }
  30% { box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18), var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.07)) !important; }
  100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0), var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.07)) !important; }
}

/* ---- Entity Mode Tabs ---- */
.entity-mode-tabs {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
  padding: 4px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 10px !important;
}

.entity-mode-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}

.entity-mode-tabs a:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: var(--text) !important;
}

/* ---- 分区标题 (section-label 风格) ---- */
.section-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 20px 0 10px 2px !important;
}

/* ---- 应变差距摘要面板 ---- */
.strain-gap-panel,
.strain-gap-summary {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
}

/* ---- 外部标准化面板 ---- */
.external-standardization-panel {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
}

/* =====================================================
   合 并 实 体 详 情 Hero — 单 行 简 洁 布 局（匹配 glass-preview）
   ===================================================== */
.entity-detail-hero-compact {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
  overflow: visible !important;
}

.entity-detail-hero-compact:hover {
  box-shadow: var(--glass-hover) !important;
  transform: translateY(-1px);
}

/* 图标 — 纯色背景，按实体类型配色（不用渐变） */
.entity-detail-hero-compact .entity-detail-hero-icon {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.entity-detail-hero-compact .entity-detail-hero-icon .material-symbols-outlined {
  font-size: 22px !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Body — 标签行 + 标题 + 副标题 */
.entity-detail-hero-compact .entity-detail-hero-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.entity-detail-hero-compact .entity-detail-hero-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 2px !important;
}

.entity-detail-hero-compact .entity-detail-hero-label .pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  text-transform: uppercase !important;
}

.entity-detail-hero-compact .entity-detail-hero-label .hero-id {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  color: var(--text-3) !important;
}

.entity-detail-hero-compact .entity-detail-hero-body h1 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.entity-detail-hero-compact .entity-detail-hero-body h1 i,
.entity-detail-hero-compact .entity-detail-hero-body h1 em {
  font-style: italic !important;
}

.entity-detail-hero-compact .entity-detail-hero-body p {
  margin: 1px 0 0 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--text-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Stats — 水平排列（匹配 glass-preview） */
.entity-detail-hero-compact .entity-detail-hero-stats {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  padding-left: 14px !important;
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.entity-detail-hero-compact .entity-detail-hero-stats .hero-stat {
  text-align: center !important;
  min-width: 52px !important;
  flex: none !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: block !important;
}

.entity-detail-hero-compact .entity-detail-hero-stats .hero-stat b {
  display: block !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text) !important;
  margin-bottom: 0 !important;
}

.entity-detail-hero-compact .entity-detail-hero-stats .hero-stat.ok b { color: var(--green) !important; }
.entity-detail-hero-compact .entity-detail-hero-stats .hero-stat.warn b { color: var(--orange) !important; }
.entity-detail-hero-compact .entity-detail-hero-stats .hero-stat.bad b { color: var(--red) !important; }

.entity-detail-hero-compact .entity-detail-hero-stats .hero-stat span {
  display: block !important;
  font-size: 10px !important;
  color: var(--text-3) !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}

/* Actions — 最右侧操作按钮 */
.entity-detail-hero-compact .entity-detail-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

.entity-detail-hero-compact .entity-detail-hero-actions .button,
.entity-detail-hero-compact .entity-detail-hero-actions .btn-glass {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.entity-detail-hero-compact .entity-detail-hero-actions .button .material-symbols-outlined,
.entity-detail-hero-compact .entity-detail-hero-actions .btn-glass .material-symbols-outlined {
  font-size: 15px !important;
}

/* entity-mode-tabs（分析报告链接）在 actions 里 */
.entity-detail-hero-compact .entity-detail-hero-actions .entity-mode-tabs {
  margin: 0 !important;
}

.entity-detail-hero-compact .entity-detail-hero-actions .entity-mode-tabs a {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 0 10px !important;
  height: 30px !important;
  line-height: 30px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* hero-only 模式（metabolite/factor/reference 仅 toolbar 行） */
.entity-toolbar-only {
  flex-direction: row !important;
  padding: 10px 16px !important;
  align-items: center !important;
  gap: 12px !important;
}

.entity-toolbar-only .entity-detail-hero-body {
  flex: 1 !important;
}

.entity-toolbar-only .entity-detail-hero-label {
  margin-bottom: 0 !important;
}

/* 隐藏旧版本的独立 entity-toolbar（已经被合并到这个 hero 里）*/
.stack > .entity-toolbar.entity-action-toolbar,
div.entity-toolbar.entity-action-toolbar:not(.entity-detail-hero-compact) {
  display: none !important;
}

/* 响应式：窄屏时 hero 换行 */
@media (max-width: 900px) {
  .entity-detail-hero-compact {
    flex-wrap: wrap !important;
  }
  .entity-detail-hero-compact .entity-detail-hero-stats {
    border-left: none !important;
    padding-left: 0 !important;
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
  }
  .entity-detail-hero-compact .entity-detail-hero-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* =====================================================
   因 子 位 置 关 系 图 重 构
   ===================================================== */
.factor-position-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
}

.factor-position-panel .section-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}

.factor-position-panel .section-head h3 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.factor-position-panel .section-head h3 .material-symbols-outlined {
  font-size: 18px !important;
  background: linear-gradient(135deg, var(--primary), #af52de) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.factor-position-panel .section-head p {
  margin: 4px 0 0 24px !important;
  color: var(--text-2) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  max-width: 540px !important;
}

/* 图例：紧凑、玻璃化 */
.factor-map-legend {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid var(--glass-border) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
}

.factor-map-legend .factor-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--factor-color) !important;
  margin-right: 2px !important;
  vertical-align: middle !important;
}

/* 状态汇总条：紧凑、玻璃化 */
.factor-map-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.factor-map-summary .pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.factor-map-summary .pill.bad,
.factor-map-summary .pill.high {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #b91c1c !important;
}

.factor-map-summary .pill.warn,
.factor-map-summary .pill.medium {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
  color: #b45309 !important;
}

.factor-map-summary .pill.ok,
.factor-map-summary .pill.low,
.factor-map-summary .pill.good {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #15803d !important;
}

/* contig 映射区域：紧凑行 */
.factor-contig-map {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.factor-contig-row {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.factor-contig-head {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.factor-contig-head b {
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  font-family: "SF Mono", monospace !important;
}

.factor-contig-head small {
  display: block !important;
  color: var(--text-3) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.factor-contig-tracks {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

/* 轨道：左标签紧凑化 */
.factor-contig-tracks .factor-track {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.factor-track > span {
  color: var(--text-2) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-align: right !important;
}

.factor-track-line {
  position: relative !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--glass-border) !important;
}

.factor-track-line::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), rgba(100, 116, 139, 0.18) calc(20% - 1px), rgba(100, 116, 139, 0.18) 20%) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

.factor-marker {
  appearance: none !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 12px !important;
  min-height: 0 !important;
  min-width: 4px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 999px !important;
  background: var(--factor-color) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18) !important;
  color: transparent !important;
  cursor: default !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.factor-marker.high {
  height: 16px !important;
  border-color: rgba(127, 29, 29, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.factor-marker.medium {
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.14) !important;
}

.factor-marker:hover,
.factor-marker:focus-visible {
  z-index: 2 !important;
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* 近邻复核面板 */
.factor-proximity-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.4) !important;
}

.factor-proximity-panel h4 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.factor-proximity-panel h4 span {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  font-variant-numeric: tabular-nums !important;
}

.factor-proximity-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.factor-proximity-list article {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.4fr) 1fr 1fr !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--glass-border) !important;
  align-items: center !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.factor-proximity-list article b {
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-family: "SF Mono", monospace !important;
  font-size: 10px !important;
}

.factor-proximity-list article span {
  color: var(--text-2) !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.factor-proximity-list article span i {
  font-style: normal !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  background: rgba(0, 122, 255, 0.1) !important;
  color: var(--primary) !important;
  letter-spacing: 0.05em !important;
}

/* ===== Screening 页面专属样式 ===== */

/* 统计概览 */
.screening-stats-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}
.screening-stat-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
  color: var(--text, #1f2937) !important;
}
.screening-stat-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 14px 14px 0 0 !important;
  opacity: 0.8 !important;
}
.screening-stat-card.primary::before { background: var(--primary, #2563eb) !important; }
.screening-stat-card.ok::before { background: #16a34a !important; }
.screening-stat-card.warn::before { background: #d97706 !important; }
.screening-stat-card.accent::before { background: #7c3aed !important; }
.screening-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  border-color: rgba(37,99,235,0.2) !important;
}
.screening-stat-card .material-symbols-outlined {
  font-size: 32px !important;
  opacity: 0.8 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.screening-stat-card > div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.screening-stat-card b {
  font-size: 28px !important;
  font-weight: 800 !important;
  display: block !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.5px !important;
  color: var(--text, #1f2937) !important;
}
.screening-stat-card small {
  font-size: 12px !important;
  color: var(--muted, #64748b) !important;
  display: block !important;
  margin-top: 2px !important;
}
.screening-stat-card .stat-sub {
  font-size: 11px !important;
  color: var(--muted, #64748b) !important;
  opacity: 0.8 !important;
  margin-top: 1px !important;
}
.screening-stat-card.primary .material-symbols-outlined { color: var(--primary) !important; }
.screening-stat-card.ok .material-symbols-outlined { color: #16a34a !important; }
.screening-stat-card.warn .material-symbols-outlined { color: #d97706 !important; }
.screening-stat-card.accent .material-symbols-outlined { color: #7c3aed !important; }

/* 统计卡片迷你进度条 */
.stat-mini-bar {
  margin-top: 8px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(148,163,184,0.15) !important;
  overflow: hidden !important;
}
.stat-mini-bar-fill {
  height: 100% !important;
  border-radius: 2px !important;
  transition: width 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}
.screening-stat-card.ok .stat-mini-bar-fill { background: #16a34a !important; }
.screening-stat-card.warn .stat-mini-bar-fill { background: #d97706 !important; }
.screening-stat-card.primary .stat-mini-bar-fill { background: var(--primary, #2563eb) !important; }
.screening-stat-card.accent .stat-mini-bar-fill { background: #7c3aed !important; }

/* 物种分布图 — 可点击 + 全名展示 */
.species-dist-chart .chart-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.species-dist-chart .chart-title-hint {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--muted, #94a3b8) !important;
}
.species-bar-chart .species-bar-row {
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 60px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  padding: 3px 4px !important;
  margin: 0 -4px !important;
  transition: background 0.15s !important;
}
.species-bar-chart .species-bar-row:hover {
  background: rgba(37,99,235,0.06) !important;
}
.species-bar-chart .species-bar-row:hover .bar-fill {
  background: var(--primary, #2563eb) !important;
}
.species-bar-chart .species-bar-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
  font-size: 12px !important;
  color: var(--text, #1f2937) !important;
  font-weight: 500 !important;
}
.species-bar-chart .species-bar-row:hover .species-bar-label {
  color: var(--primary, #2563eb) !important;
}

/* 图表区 */
.screening-charts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}
.screening-charts-grid .chart-card {
  min-height: 180px !important;
}
.screening-charts-grid .chart-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
#screeningCharts .chart-card:not(:only-child) {
  margin-bottom: 0 !important;
}
#screeningCharts > .chart-card:only-child {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
#screeningCharts {
  margin-bottom: 12px !important;
}

/* 候选列表评分条 */
.score-bar-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  min-width: 60px !important;
}
.score-mini-bar {
  height: 4px !important;
  border-radius: 2px !important;
  transition: width 0.3s !important;
}
.score-mini-bar.excellent { background: #16a34a !important; }
.score-mini-bar.good { background: #2563eb !important; }
.score-mini-bar.fair { background: #d97706 !important; }
.score-mini-bar.poor { background: #ea580c !important; }
.score-mini-bar.bad { background: #dc2626 !important; }

/* 评分颜色分级 */
.score-big.excellent { color: #16a34a !important; }
.score-big.good { color: #2563eb !important; }
.score-big.fair { color: #d97706 !important; }
.score-big.poor { color: #ea580c !important; }
.score-big.bad { color: #dc2626 !important; }

/* 骨架屏动画 */
.skeleton-row { pointer-events: none !important; }
.skeleton-box {
  background: linear-gradient(90deg, rgba(148,163,184,0.15) 25%, rgba(148,163,184,0.3) 50%, rgba(148,163,184,0.15) 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s infinite !important;
  border-radius: 4px !important;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-detail { padding: 4px 0 !important; }

/* 评分构成可视化条形图 */
.detail-score-components-vis {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.score-comp-bar {
  display: grid !important;
  grid-template-columns: 1fr 2fr auto !important;
  grid-template-rows: auto auto !important;
  gap: 2px 8px !important;
  align-items: center !important;
}
.score-comp-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.score-comp-track {
  height: 8px !important;
  background: rgba(148,163,184,0.15) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.score-comp-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.4s ease !important;
}
.score-comp-fill.pos { background: #16a34a !important; }
.score-comp-fill.neg { background: #dc2626 !important; }
.score-comp-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  min-width: 40px !important;
}
.score-comp-value.pos { color: #16a34a !important; }
.score-comp-value.neg { color: #dc2626 !important; }
.score-comp-source {
  grid-column: 1 / -1 !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  padding-left: 2px !important;
}

/* 安全因子可视化 */
.safety-vis-block {
  margin-top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.safety-bar-row {
  display: grid !important;
  grid-template-columns: 100px 1fr 30px !important;
  gap: 8px !important;
  align-items: center !important;
}
.safety-bar-label {
  font-size: 11px !important;
  color: var(--muted) !important;
}
.safety-bar-track {
  height: 6px !important;
  background: rgba(148,163,184,0.15) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.safety-bar-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.4s ease !important;
}
.safety-bar-row.danger .safety-bar-fill { background: #dc2626 !important; }
.safety-bar-row.ok .safety-bar-fill { background: #16a34a !important; }
.safety-bar-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

/* Tab 计数标签 */
.screening-tab .tab-count {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  background: rgba(148,163,184,0.2) !important;
  margin-left: 4px !important;
  transition: background 0.22s !important;
}
.screening-tab.active .tab-count {
  background: rgba(37,99,235,0.2) !important;
  color: var(--primary, #2563eb) !important;
}

/* 命令栏和详情面板毛玻璃优化 */
.screening-command-bar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
.screening-detail-panel {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
}
.screening-result-shell {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
}

/* 搜索框 type=text 去掉原生清除按钮 */
.screening-inline-filter input[type="text"]::-webkit-search-cancel-button { display: none !important; }

/* ============================================================
 * 概览页（Overview Tab）专用样式
 * ============================================================ */

/* 概览命令栏：tabs 在左，搜索框在右 */
.overview-command-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.overview-command-bar .screening-tabs {
  flex: 0 0 auto !important;
  min-height: 36px !important;
}

/* 概览搜索框 — 宽而矮，行内布局 */
.overview-search-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 260px !important;
  max-width: 640px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 12px 0 38px !important;
  height: 38px !important;
  transition: none !important;
  box-shadow: none !important;
}
.overview-search-wrap:focus-within {
  border-color: transparent !important;
  box-shadow: none !important;
}
.overview-search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  color: var(--muted, #64748b) !important;
  pointer-events: none !important;
  transition: color 0.2s !important;
}
.overview-search-wrap:focus-within .overview-search-icon {
  color: var(--primary, #2563eb) !important;
}
.overview-search-wrap input[type="text"] {
  flex: 1 1 auto !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text, #1f2937) !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  height: 100% !important;
}
.overview-search-wrap input[type="text"]::placeholder {
  color: var(--muted, #94a3b8) !important;
  font-weight: 400 !important;
}
.overview-search-wrap input[type="text"]::-webkit-search-cancel-button { display: none !important; }
.overview-search-clear {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(148,163,184,0.2) !important;
  color: var(--text, #1f2937) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 6px !important;
  flex: 0 0 auto !important;
  transition: background 0.18s !important;
}
.overview-search-clear .material-symbols-outlined { font-size: 16px !important; }
.overview-search-clear:hover { background: rgba(148,163,184,0.35) !important; }

/* 搜索关键词建议 — 独立横排，放在图表下方 */
.overview-search-hints {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 2px !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
  color: var(--muted, #94a3b8) !important;
}
.overview-search-hints .hint-label {
  font-weight: 600 !important;
  color: var(--muted, #94a3b8) !important;
  margin-right: 2px !important;
}
.overview-search-hint {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,0.06) !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background 0.18s, border-color 0.18s, transform 0.15s !important;
  white-space: nowrap !important;
}
.overview-search-hint:hover {
  background: rgba(37,99,235,0.14) !important;
  border-color: rgba(37,99,235,0.25) !important;
  transform: translateY(-1px) !important;
}

/* 概览 section 容器 — 纵向排列，每个面板占满宽度 */
.overview-sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.overview-section {
  padding: 18px 20px !important;
}
.overview-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  color: var(--text, #1f2937) !important;
}
.overview-section-title .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--primary, #2563eb) !important;
}
.overview-random-btn {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--glass-border, rgba(100,116,139,0.2)) !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #1f2937) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.3s, background 0.2s !important;
}
.overview-random-btn:hover { background: rgba(37,99,235,0.08) !important; }
.overview-random-btn .material-symbols-outlined { font-size: 18px !important; }
.overview-random-btn.spin .material-symbols-outlined { animation: overview-spin 0.5s linear !important; }
@keyframes overview-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 随机发现卡片网格 */
.overview-random-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}
.overview-candidate-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  border: 1px solid var(--glass-border, rgba(100,116,139,0.18)) !important;
  background: rgba(255,255,255,0.7) !important;
  cursor: pointer !important;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.2s !important;
  overflow: hidden !important;
  min-height: 110px !important;
}
.overview-candidate-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.1) !important;
  border-color: var(--primary, #2563eb) !important;
}
.overview-card-score {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}
.overview-card-score.excellent { color: #16a34a !important; }
.overview-card-score.good { color: #2563eb !important; }
.overview-card-score.fair { color: #d97706 !important; }
.overview-card-score.poor { color: #ea580c !important; }
.overview-card-score.bad { color: #dc2626 !important; }
.overview-card-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text, #1f2937) !important;
  padding-right: 60px !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.overview-card-cn {
  font-size: 12px !important;
  color: var(--muted, #64748b) !important;
  line-height: 1.3 !important;
  padding-right: 60px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.overview-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}
.overview-card-app,
.app-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,0.1) !important;
  color: #1d4ed8 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
}
.overview-card-chain.ok {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(22,163,74,0.12) !important;
  color: #15803d !important;
  white-space: nowrap !important;
}

/* TOP 列表 & 搜索结果表 */
.overview-top-table-wrap,
.overview-search-table-wrap {
  overflow-x: auto !important;
  border-radius: 10px !important;
  border: 1px solid var(--glass-border, rgba(100,116,139,0.1)) !important;
}
.overview-top-table,
.overview-search-table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.overview-top-table thead th,
.overview-search-table thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--muted, #64748b) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  background: rgba(148,163,184,0.06) !important;
  border-bottom: 1px solid var(--glass-border, rgba(100,116,139,0.18)) !important;
  position: sticky !important;
  top: 0 !important;
}
.overview-top-table tbody tr,
.overview-search-table tbody tr {
  transition: background 0.15s !important;
  cursor: pointer !important;
}
.overview-top-table tbody tr:hover,
.overview-search-table tbody tr:hover {
  background: rgba(37,99,235,0.05) !important;
}
.overview-top-table tbody tr.active,
.overview-search-table tbody tr.active {
  background: rgba(37,99,235,0.1) !important;
}
.overview-top-table td,
.overview-search-table td {
  padding: 12px !important;
  border-bottom: 1px solid var(--glass-border, rgba(100,116,139,0.1)) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.overview-top-table tbody tr:last-child td,
.overview-search-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* 搜索结果头部 */
.overview-search-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  font-size: 15px !important;
  color: var(--text, #1f2937) !important;
}
.overview-search-header .muted {
  color: var(--muted, #94a3b8) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
/* 搜索结果 section 全宽 */
.overview-sections:has(.overview-search-header) {
  grid-template-columns: 1fr !important;
}

/* 概览页详情面板空状态 */
.overview-detail-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px 24px !important;
  min-height: 320px !important;
  color: var(--muted, #64748b) !important;
}
.overview-detail-empty b {
  font-size: 15px !important;
  color: var(--text, #1f2937) !important;
  margin-top: 4px !important;
}
.overview-detail-empty p {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.overview-detail-empty .muted {
  color: var(--muted, #94a3b8) !important;
  font-size: 12px !important;
}
.overview-detail-empty .material-symbols-outlined {
  color: rgba(37,99,235,0.18) !important;
}
.overview-detail-empty .empty-suggestions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 14px !important;
}
.overview-detail-empty .empty-suggestion-chip {
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,0.08) !important;
  color: #1d4ed8 !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background 0.18s, border-color 0.18s !important;
}
.overview-detail-empty .empty-suggestion-chip:hover {
  background: rgba(37,99,235,0.16) !important;
  border-color: rgba(37,99,235,0.3) !important;
}

/* 响应式：小屏下搜索框换行 */
@media (max-width: 720px) {
  .overview-command-bar {
    flex-wrap: wrap !important;
  }
  .overview-search-wrap {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}