/* ============================================================
   数智展厅 · 矩阵详情页共享样式
   通过 body.theme-data / .theme-cult / .theme-digi 切换主题色
   ============================================================ */

body.theme-data { --accent: var(--m-data); --accent-soft: var(--m-data-soft); }
body.theme-cult { --accent: var(--m-cult); --accent-soft: var(--m-cult-soft); }
body.theme-digi { --accent: var(--m-digi); --accent-soft: var(--m-digi-soft); }

/* ---------- 页面 Hero ---------- */
.page-hero {
  position: relative; padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-6); overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(800px 460px at 16% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(700px 420px at 100% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
}
.crumb { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-4); }
.crumb a { color: var(--text-3); transition: color var(--dur); }
.crumb a:hover { color: var(--accent-soft); }
.crumb .sep { opacity: 0.5; }

.page-hero .idx { font-family: var(--font-display); font-weight: 900; font-size: 1rem; letter-spacing: 0.14em; color: var(--accent); }
.page-hero h1 { font-size: var(--fs-hero); font-weight: 900; letter-spacing: -0.02em; margin: var(--sp-2) 0 var(--sp-2); }
.page-hero .role { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--accent-soft); font-weight: 600; margin-bottom: var(--sp-3); }
.page-hero .intro { max-width: 70ch; color: var(--text-2); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.9; }

.hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); }
.hero-stats .hs { }
.hero-stats .hs .n { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--accent-soft); line-height: 1; }
.hero-stats .hs .n .suf { font-size: 0.55em; }
.hero-stats .hs .l { color: var(--text-3); font-size: var(--fs-sm); margin-top: 0.3em; }
.hero-stats .div { width: 1px; align-self: stretch; background: var(--line); }

/* ---------- 解决的问题 ---------- */
.problem-card {
  border-left: 3px solid var(--accent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.problem-card .q { font-weight: 800; font-size: var(--fs-h3); margin-bottom: 0.4em; display: flex; gap: 0.5em; align-items: baseline; }
.problem-card .q .tag-shift { font-size: var(--fs-xs); color: var(--accent-soft); font-weight: 600; }
.problem-card p { color: var(--text-2); margin: 0; font-size: var(--fs-sm); }

/* ---------- 图表壳 ---------- */
.viz-block { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-4); align-items: stretch; }
.chart-shell {
  position: relative; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-1), var(--bg-2));
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  padding: var(--sp-4); min-height: 440px;
}
.chart-shell .chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.chart-shell .chart-head h3 { font-size: var(--fs-h3); }
.chart-canvas { width: 100%; height: 380px; }
.chart-canvas.tall { height: 520px; }

.viz-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.side-card { padding: var(--sp-4); }
.side-card h4 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.side-card p { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* 高亮指标小卡 */
.metric-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.metric-row .m { background: var(--bg-2); padding: var(--sp-3); }
.metric-row .m .mk { color: var(--text-3); font-size: var(--fs-xs); }
.metric-row .m .mv { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent-soft); margin-top: 0.2em; }
.metric-row .m .md { font-size: var(--fs-xs); color: var(--green); margin-top: 0.2em; }
.metric-row .m .md.neg { color: var(--magenta); }

/* ---------- 三维矩阵图示 ---------- */
.axis-3d { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.axis-3d .ax { padding: var(--sp-4); text-align: center; }
.axis-3d .ax .axn { font-family: var(--font-display); color: var(--accent); font-size: 0.8rem; letter-spacing: 0.1em; }
.axis-3d .ax .axt { font-weight: 800; font-size: var(--fs-h3); margin: 0.4em 0 0.3em; }
.axis-3d .ax .axd { color: var(--text-3); font-size: var(--fs-sm); }

/* ---------- 五位一体 / 载体墙 ---------- */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.pillar {
  position: relative; padding: var(--sp-4) var(--sp-3); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-1), var(--bg-2));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 40px -16px color-mix(in srgb, var(--accent) 70%, transparent); }
.pillar .pi { font-family: var(--font-display); font-weight: 900; color: var(--accent); font-size: 0.85rem; }
.pillar h4 { font-size: var(--fs-h3); margin: var(--sp-2) 0 0.4em; }
.pillar .pv { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent-soft); }
.pillar p { color: var(--text-3); font-size: var(--fs-sm); margin: 0.3em 0 0; }

/* ---------- 成就墙 ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.ach {
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--line);
  transition: border-color var(--dur), transform var(--dur) var(--ease);
}
.ach:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ach .av { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--accent-soft); line-height: 1; }
.ach .at { font-weight: 700; margin: 0.5em 0 0.2em; }
.ach .ad { color: var(--text-3); font-size: var(--fs-sm); }

/* ---------- 智能体网格 ---------- */
.agents-wrap { position: relative; }
.agents-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.agents-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.agent-card {
  position: relative; cursor: pointer; padding: var(--sp-4) var(--sp-3); border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), var(--bg-2));
  border: 1px solid var(--line); overflow: hidden; text-align: center;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
  --ac: var(--accent);
}
.agent-card:hover, .agent-card.active { transform: translateY(-6px); border-color: var(--ac); box-shadow: 0 0 40px -14px var(--ac); }
.agent-card .ring {
  width: 46px; height: 46px; margin: 0 auto var(--sp-2); border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 1.3rem; color: var(--ac);
  border: 1.5px solid var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent);
  box-shadow: 0 0 18px -4px var(--ac);
}
.agent-card .aen { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-3); }
.agent-card h4 { font-size: 1.02rem; margin: 0.4em 0 0.2em; }
.agent-card .atag { color: var(--text-3); font-size: var(--fs-xs); }

/* 五环连接条 */
.ring-flow { display: flex; align-items: center; justify-content: center; gap: 0.5em; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ring-flow .rf { display: flex; align-items: center; gap: 0.5em; }
.ring-flow .rf .rb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 1px solid var(--line-strong); color: var(--accent-soft); }
.ring-flow .rf .rx { color: var(--text-3); }

/* 智能体详情面板 */
.agent-detail {
  margin-top: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 7%, var(--surface-1)), var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start;
}
.agent-detail .ad-ring { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 900; color: var(--accent); border: 2px solid var(--accent); box-shadow: 0 0 26px -6px var(--accent); }
.agent-detail .ad-body h3 { font-size: var(--fs-h2); }
.agent-detail .ad-body .ad-tl { color: var(--accent-soft); font-weight: 600; margin: 0.2em 0 var(--sp-2); }
.agent-detail .ad-body p { color: var(--text-2); font-size: var(--fs-sm); }
.agent-detail .ad-caps { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: var(--sp-2); }
.agent-detail .ad-caps span { font-size: var(--fs-xs); padding: 0.3em 0.7em; border-radius: var(--r-pill); color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.agent-detail .ad-scene { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-3); }
.agent-detail .ad-scene b { color: var(--accent-soft); }

/* 反哺闭环流 */
.loop-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5em; padding: var(--sp-4); }
.loop-stage { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 1.1em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 700; font-size: var(--fs-sm); }
.loop-stage .ls-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.loop-arrow { color: var(--accent-soft); font-size: 1.2rem; }
.loop-arrow.loop-back { color: var(--gold-soft); }

/* ---------- 调研报告 / 文档区 ---------- */
.doc-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); flex-wrap: wrap; }
.doc-card .doc-ic { width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); color: var(--accent-soft); flex: none; }
.doc-card .doc-meta { flex: 1; min-width: 220px; }
.doc-card .doc-meta h4 { font-size: var(--fs-h3); margin-bottom: 0.2em; }
.doc-card .doc-meta p { color: var(--text-3); font-size: var(--fs-sm); margin: 0; }

/* ---------- 矩阵间导航 ---------- */
.matrix-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-6); }
.pager-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: 0.3em; transition: border-color var(--dur), transform var(--dur) var(--ease); }
.pager-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.pager-card.next { text-align: right; align-items: flex-end; }
.pager-card .pl { color: var(--text-3); font-size: var(--fs-xs); letter-spacing: 0.12em; }
.pager-card .pt { font-weight: 800; font-size: var(--fs-h3); }
.pager-card[data-m="data"] .pt { color: var(--m-data-soft); }
.pager-card[data-m="cult"] .pt { color: var(--m-cult-soft); }
.pager-card[data-m="digi"] .pt { color: var(--m-digi-soft); }

/* ---------- 通用网格区 ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: center; }
.list-clean { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: var(--sp-2); }
.list-clean li { padding-left: 1.5em; position: relative; color: var(--text-2); font-size: var(--fs-sm); }
.list-clean li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }

@media (max-width: 980px) {
  .viz-block { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .agents-grid { grid-template-columns: repeat(2, 1fr); }
  .axis-3d { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .agent-detail { grid-template-columns: 1fr; }
  .matrix-pager { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pillars, .agents-grid { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: 1fr; }
}