diff --git a/app/api/routes.py b/app/api/routes.py
index 145cb39..bc4f8c4 100644
--- a/app/api/routes.py
+++ b/app/api/routes.py
@@ -93,6 +93,7 @@ def health() -> dict:
                 "llm_ready": ready, "offline_fallback": not ready,
                 "embed": semantic.status(_cfg),
                 "guided": bool(_cfg.get("guided")),
+                "demo_mode": bool(_cfg.get("demo_mode", True)),
                 "mode": "online" if ready else "offline"})
 
 
@@ -221,6 +222,7 @@ class ConfigBody(BaseModel):
     embed_api_base_url: str | None = None
     embed_api_model: str | None = None
     guided: bool | None = None           # 初始设置引导完成标记
+    demo_mode: bool | None = None        # 竞赛演示模式开关
     mode: str | None = None              # demo | live
 
 
@@ -243,6 +245,7 @@ def _public_config() -> dict:
         },
         "embed": semantic.status(_cfg),
         "mode": str(_cfg.get("mode", "demo")),
+        "demo_mode": bool(_cfg.get("demo_mode", True)),
         "offline_fallback": not ready,
     }
 
@@ -290,15 +293,17 @@ def save_config(body: ConfigBody) -> dict:
         updates["embed_api_model"] = body.embed_api_model.strip()
     if body.guided is not None:
         updates["guided"] = bool(body.guided)
+    if body.demo_mode is not None:
+        updates["demo_mode"] = bool(body.demo_mode)
 
     save_runtime_settings(updates)
     # 热生效：令牌、模式与 LLM/语义模型配置立即更新到运行配置（下次调用即读取）
     for k in ("access_token", "mode", "llm_api_key", "llm_base_url", "llm_model",
               "embed_model_path", "embed_provider", "embed_api_key",
-              "embed_api_base_url", "embed_api_model", "guided"):
+              "embed_api_base_url", "embed_api_model", "guided", "demo_mode"):
         if k in updates:
-            if updates[k]:
-                _cfg[k] = updates[k]
+            if updates[k] or isinstance(updates[k], bool):
+                _cfg[k] = updates[k]     # 布尔 False 也要写入（如关闭演示模式）
             else:
                 _cfg.pop(k, None)
     logger.info("运行时设置已保存到 config.json: %s", sorted(updates))
diff --git a/app/config.py b/app/config.py
index 8ad23d6..13df7ec 100644
--- a/app/config.py
+++ b/app/config.py
@@ -17,11 +17,12 @@ RUNTIME_KEYS = {
     "llm_api_key", "llm_base_url", "llm_model", "llm_timeout",
     "embed_model_path", "embed_provider", "embed_api_key",
     "embed_api_base_url", "embed_api_model",
-    "guided", "jd_extra_dirs", "passive_sources",
+    "guided", "jd_extra_dirs", "passive_sources", "demo_mode",
 }
 
 DEFAULTS: dict = {
     "mode": "demo",                      # demo | live
+    "demo_mode": True,                   # 竞赛演示模式：不弹初始设置、警告降级为状态点
     "host": "127.0.0.1",
     "port": 9008,
     "data_dir": "data",
diff --git a/webui/app.js b/webui/app.js
index c9d4b90..e685f7a 100644
--- a/webui/app.js
+++ b/webui/app.js
@@ -255,7 +255,7 @@ async function loadDashboard() {
   CN.graphData = graph;
   const s = health.graph || {};
   updateBanners(health);
-  $("#data-version").textContent = `数据版本 v${(graph.events.at(-1) || {}).window || "demo"} · ${s.nodes ?? 0} 节点`;
+  $("#data-version").textContent = `数据更新至 ${(graph.events.at(-1) || {}).window || "2026Q3"}（模拟）`;
 
   /* 指标卡 */
   const series = quarterlyCounts(graph.events || []);
@@ -1421,21 +1421,31 @@ $("#btn-export-path").onclick = () => {
   toast("已导出文本", "success");
 };
 
-/* ================= 系统设置 / 状态横幅 ================= */
-let lastHealth = null;   // 最近一次 health 响应（横幅状态源）
+/* ================= 系统设置 / 状态横幅 / 演示模式 ================= */
+let lastHealth = null;   // 最近一次 health 响应（横幅与状态徽标的数据源）
 function updateBanners(health) {
   if (health) lastHealth = health;
   const h = lastHealth || {};
-  const showOffline = !!h.offline_fallback
-    && sessionStorage.getItem("cn_banner_dismissed") !== "1";
+  const demo = h.demo_mode !== false;
   const embed = h.embed || {};
-  const showEmbed = !embed.ready
+  const degraded = !!h.offline_fallback || !embed.ready;
+  // 演示模式：警告横幅降级为顶栏状态徽标（首屏不出现负面字眼）
+  const showOffline = !demo && !!h.offline_fallback
+    && sessionStorage.getItem("cn_banner_dismissed") !== "1";
+  const showEmbed = !demo && !embed.ready
     && sessionStorage.getItem("cn_banner2_dismissed") !== "1";
   $("#offline-banner").classList.toggle("hidden", !showOffline);
   $("#embed-banner").classList.toggle("hidden", !showEmbed);
   const n = (showOffline ? 1 : 0) + (showEmbed ? 1 : 0);
   document.body.classList.toggle("has-banner", n === 1);
   document.body.classList.toggle("has-banner2", n === 2);
+  // 顶栏状态徽标：绿=全就绪，黄=离线回退/语义未就绪
+  const badge = $("#demo-badge");
+  badge.classList.toggle("warn", degraded);
+  $("#demo-badge-text").textContent = degraded ? "离线演示" : (demo ? "演示模式" : "在线");
+  badge.title = degraded
+    ? "离线回退中（LLM/语义模型未配置），点击查看设置"
+    : "全部通道就绪，点击查看设置";
 }
 function dismissBanner(id, key) {
   sessionStorage.setItem(key, "1");
@@ -1445,6 +1455,44 @@ $("#banner-close").onclick = () => dismissBanner("offline-banner", "cn_banner_di
 $("#embed-banner-close").onclick = () => dismissBanner("embed-banner", "cn_banner2_dismissed");
 $("#banner-config").onclick = () => openConfigModal(false);
 $("#embed-banner-config").onclick = () => openConfigModal(false);
+$("#demo-badge").onclick = () => openConfigModal(false);
+
+/* ================= 演示导览（预置路线，一键串起完整闭环） ================= */
+const DEMO_STEPS = [
+  { title: "① 数据驾驶舱：多源数据总览", desc: "JD 规模、岗位/技能/事件总量、演化趋势、清洗与审核状态",
+    go: () => switchView("dashboard") },
+  { title: "② 新岗位发现：候选→审核→入图", desc: "图谱定位「大模型应用工程师」：四指标证据、人工确认、证据 JD 回查",
+    go: () => { switchView("graph"); if (CN.gotoNode) CN.gotoNode("job_大模型应用工程师"); } },
+  { title: "③ 既有岗位演化：Java 编年史", desc: "时点对比、变更堆叠图、生命周期甘特、事件证据链",
+    go: () => {
+      switchView("evolution");
+      $("#evo-job-select").value = "job_Java开发工程师";
+      $("#evo-job-select").dispatchEvent(new Event("change"));
+    } },
+  { title: "④ 人岗匹配诊断 + 学习路径", desc: "载入示例简历 → 确认解析 → 总分/四维/差距清单 → 一键生成学习路径",
+    go: () => {
+      switchView("match");
+      $$(".match-tab").forEach((x) => x.classList.toggle("active", x.dataset.mtab === "single"));
+      $("#match-single").classList.remove("hidden");
+      $("#match-batch").classList.add("hidden");
+      $("#btn-load-sample").click();
+    } },
+];
+$("#btn-demo-tour").onclick = () => {
+  openModal("演示导览（预置路线）", `
+    <div class="tour-intro">按预置路线依次演示完整闭环，每步点击「前往」自动跳转到位：</div>
+    ${DEMO_STEPS.map((s, i) => `
+      <div class="tour-step">
+        <div class="tour-step-body">
+          <div class="tour-step-title">${esc(s.title)}</div>
+          <div class="tour-step-desc">${esc(s.desc)}</div>
+        </div>
+        <button class="btn btn-primary btn-sm" data-step="${i}">前往</button>
+      </div>`).join("")}`);
+  $$("#modal-body [data-step]").forEach((b) => {
+    b.onclick = () => { closeModal(); DEMO_STEPS[+b.dataset.step].go(); };
+  });
+};
 
 function embedStatusHtml(emb) {
   if (emb.ready) {
@@ -1506,6 +1554,13 @@ async function openConfigModal(needToken, firstRun) {
           <button class="btn btn-secondary btn-sm" id="cfg-token-show">显示</button>
         </div>
       </div>
+      <div class="form-item">
+        <label class="form-label">演示模式<span class="form-label-tip">开启后不弹初始设置、警告降级为顶栏状态点</span></label>
+        <div class="seg" id="cfg-demo">
+          <button class="seg-item ${cfg.demo_mode !== false ? "active" : ""}" data-demo="1">开启（评审演示）</button>
+          <button class="seg-item ${cfg.demo_mode === false ? "active" : ""}" data-demo="0">关闭（开发调试）</button>
+        </div>
+      </div>
     </div>
     <div class="cfg-sec">
       <div class="cfg-sec-title">LLM API（星火 / OpenAI 兼容，保存即热生效）</div>
@@ -1584,7 +1639,8 @@ async function openConfigModal(needToken, firstRun) {
           </ol>
         </div>
       </div>
-    </div>`,
+    </div>
+    <div class="cfg-foot-note">如遇问题，请联系 support@rrrosmontis.icu</div>`,
     `${firstRun ? `<button class="btn btn-secondary" id="cfg-skip">跳过，使用离线演示模式</button>` : ""}
      <button class="btn btn-secondary" id="cfg-save-restart">保存并重启</button>
      <button class="btn btn-primary" id="cfg-save">保存设置</button>`);
@@ -1598,6 +1654,14 @@ async function openConfigModal(needToken, firstRun) {
     };
   });
   let embedProvider = cfg.embed.provider === "api" ? "api" : "local";
+  let demoMode = cfg.demo_mode !== false;
+  $$("#cfg-demo .seg-item").forEach((b) => {
+    b.onclick = () => {
+      $$("#cfg-demo .seg-item").forEach((x) => x.classList.remove("active"));
+      b.classList.add("active");
+      demoMode = b.dataset.demo === "1";
+    };
+  });
   $$("#cfg-embed-provider .seg-item").forEach((b) => {
     b.onclick = () => {
       $$("#cfg-embed-provider .seg-item").forEach((x) => x.classList.remove("active"));
@@ -1629,6 +1693,7 @@ async function openConfigModal(needToken, firstRun) {
       embed_model_path: $("#cfg-embed-path").value.trim(),
       embed_api_base_url: $("#cfg-embed-base").value.trim(),
       embed_api_model: $("#cfg-embed-model").value.trim(),
+      demo_mode: demoMode,
       guided: true,   // 保存即视为完成初始设置
     };
     const tok = $("#cfg-token").value;
@@ -1643,7 +1708,7 @@ async function openConfigModal(needToken, firstRun) {
       else localStorage.removeItem("cn_access_token");
     }
     lastHealth = Object.assign({}, lastHealth, {
-      offline_fallback: saved.offline_fallback, embed: saved.embed,
+      offline_fallback: saved.offline_fallback, embed: saved.embed, demo_mode: saved.demo_mode,
     });
     updateBanners();
     return saved;
@@ -1716,6 +1781,8 @@ window.addEventListener("resize", () => {
     CN.jobs = await api("/api/jobs");
     const opts = CN.jobs.map((j) => `<option value="${esc(j.job_id)}">${esc(j.title)}</option>`).join("");
     ["#evo-job-select", "#match-job-select", "#path-job-select", "#batch-job-select"].forEach((s) => { $(s).innerHTML = opts; });
+    $("#evo-job-select").value = "job_Java开发工程师";   // 演化页默认锁定最强样例
+    $("#match-job-select").value = "job_Java开发工程师";
     await loadDashboard();          // 先加载图谱缓存（演化页甘特图依赖）
     await loadEvolution();
     renderEvoHeatmap();
@@ -1723,8 +1790,10 @@ window.addEventListener("resize", () => {
     const hash = new URLSearchParams(location.hash.slice(1));
     if (hash.get("view")) switchView(hash.get("view"));
     if (hash.get("node") && CN.gotoNode) CN.gotoNode(hash.get("node"));
-    /* 首次使用：引导完成基础设置（完成标记记录在服务端 config.json） */
-    if (!lastHealth || !lastHealth.guided) openConfigModal(false, true);
+    /* 首次使用：演示模式下不弹初始设置（评审口径），非演示模式才引导 */
+    if ((!lastHealth || !lastHealth.guided) && lastHealth && lastHealth.demo_mode === false) {
+      openConfigModal(false, true);
+    }
   } catch (e) {
     toast("后端连接失败：" + e.message, "error");
   }
diff --git a/webui/graph.js b/webui/graph.js
index 0ab3882..f2f4a4d 100644
--- a/webui/graph.js
+++ b/webui/graph.js
@@ -10,8 +10,8 @@
   const G = {
     nodes: [], edges: [], events: [], idx: {},
     cam: { x: 0, y: 0, k: 1 },          // 相机：世界 -> 屏幕  screen = (world - cam.pan) * k ... 使用 cam.x/y 为平移（屏幕像素）
-    showLabels: true,
-    filters: { types: { Job: true, Skill: true, Industry: true, Scenario: true }, category: "", level: "",
+    showLabels: false,                     // 默认关闭：悬停/选中/缩放时才显示
+    filters: { types: { Job: true, Skill: true, Industry: false, Scenario: false }, category: "", level: "",
                edges: { required: true, preferred: true, applies: true, belongs: true } },
     selected: null,                      // 选中节点 id
     soloJob: null,                       // 岗位子图模式：只看该岗位及其一跳邻居
@@ -444,7 +444,7 @@
     $("#fp-category").onchange = (e) => { G.filters.category = e.target.value; requestDraw(); drawMinimap(); };
     $("#fp-level").onchange = (e) => { G.filters.level = e.target.value; requestDraw(); drawMinimap(); };
     $("#fp-reset").onclick = () => {
-      G.filters = { types: { Job: true, Skill: true, Industry: true, Scenario: true }, category: "", level: "",
+      G.filters = { types: { Job: true, Skill: true, Industry: false, Scenario: false }, category: "", level: "",
                     edges: { required: true, preferred: true, applies: true, belongs: true } };
       $$("#graph-filter-panel input[data-ftype]").forEach((cb) => { cb.checked = true; });
       $$("#graph-filter-panel input[data-etype]").forEach((cb) => { cb.checked = true; });
@@ -487,7 +487,7 @@
       if (!v) return false;
       G.cam = v.cam;
       G.filters = Object.assign(
-        { types: { Job: true, Skill: true, Industry: true, Scenario: true }, category: "", level: "",
+        { types: { Job: true, Skill: true, Industry: false, Scenario: false }, category: "", level: "",
           edges: { required: true, preferred: true, applies: true, belongs: true } },
         v.filters);
       G.filters.edges = Object.assign({ required: true, preferred: true, applies: true, belongs: true },
diff --git a/webui/index.html b/webui/index.html
index f12c94d..384b9f8 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -1,517 +1,521 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CareerNexus 职联 · 岗位与能力图谱平台</title>
-  <link rel="stylesheet" href="/static/style.css?v=20260803">
-</head>
-<body>
-  <!-- ============ 顶部栏 56px ============ -->
-  <header class="topbar">
-    <div class="brand">
-      <span class="brand-logo">
-        <svg viewBox="0 0 24 24" fill="none"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="7" r="3"/><circle cx="12" cy="18" r="3"/><path d="M8.5 7.5l7-1M7.5 8.8l3 6.4M16.5 9.6l-3 5.6"/></svg>
-      </span>
-      <span class="brand-name">CareerNexus <b>职联</b></span>
-    </div>
-    <div class="page-title" id="page-title">数据驾驶舱</div>
-    <div class="topbar-right">
-      <div class="global-search">
-        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
-        <input id="global-search-input" type="text" placeholder="搜索岗位 / 技能 / 场景…" autocomplete="off">
-        <div id="global-search-drop" class="search-drop hidden"></div>
-      </div>
-      <span class="badge badge-version" id="data-version" title="图谱数据版本">数据版本 —</span>
-      <button class="icon-btn" id="btn-config" title="系统设置" aria-label="系统设置">
-        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h.01a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51h.01a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v.01a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
-      </button>
-      <span class="avatar" title="演示账号">演</span>
-    </div>
-  </header>
-
-  <!-- ============ 横向导航（顶栏下方） ============ -->
-  <nav class="topnav" id="topnav">
-    <button class="nav-item active" data-view="dashboard">
-      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>
-      <span>数据驾驶舱</span>
-    </button>
-    <button class="nav-item" data-view="graph">
-      <svg viewBox="0 0 24 24"><circle cx="5" cy="6" r="2.5"/><circle cx="19" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M7.3 7.2l9.4-1M6.2 8.3l4.2 7.4M17.8 8.3l-4.2 7.4"/></svg>
-      <span>全景图谱</span>
-    </button>
-    <button class="nav-item" data-view="evolution">
-      <svg viewBox="0 0 24 24"><path d="M3 17l5.5-5.5 3.5 3.5L20 7"/><path d="M15 7h5v5"/></svg>
-      <span>岗位演化</span>
-    </button>
-    <button class="nav-item" data-view="match">
-      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor"/></svg>
-      <span>人岗匹配</span>
-    </button>
-    <button class="nav-item" data-view="path">
-      <svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8 17.5C12 14 8 10 12 7.5c1.5-1 3-1.2 4-1.3"/></svg>
-      <span>学习路径</span>
-    </button>
-  </nav>
-
-  <!-- 离线回退模式横幅 -->
-  <div class="offline-banner hidden" id="offline-banner">
-    <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
-    <span>当前为<b>离线回退模式</b>：未配置 LLM 密钥，抽取与生成使用离线确定性方案。配置星火大模型密钥可启用联网能力。</span>
-    <button class="banner-btn" id="banner-config">去配置</button>
-    <button class="banner-close" id="banner-close" title="关闭">×</button>
-  </div>
-  <!-- 语义向量模型横幅 -->
-  <div class="offline-banner hidden" id="embed-banner">
-    <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
-    <span>语义向量模型<b>未就绪</b>：当前使用词表归一化匹配。下载 BGE-M3 权重并在设置中配置，可启用语义相似匹配增强。</span>
-    <button class="banner-btn" id="embed-banner-config">去配置</button>
-    <button class="banner-close" id="embed-banner-close" title="关闭">×</button>
-  </div>
-
-  <div class="shell">
-    <!-- ============ 主内容区 ============ -->
-    <main class="content">
-
-      <!-- ======== 数据驾驶舱 ======== -->
-      <section id="view-dashboard" class="view active">
-        <div class="metric-grid" id="metric-cards"></div>
-        <div class="grid-2">
-          <div class="card">
-            <div class="card-head">
-              <h3>近 12 个季度演化事件趋势</h3>
-              <span class="text-weak text-aux">按事件窗口统计</span>
-            </div>
-            <div class="card-body"><canvas id="trend-canvas" height="220"></canvas></div>
-          </div>
-          <div class="card">
-            <div class="card-head">
-              <h3>任务与审核状态</h3>
-              <button class="btn btn-secondary btn-sm" id="btn-import-jd">导入 JD 数据</button>
-            </div>
-            <div class="card-body" id="task-table-wrap">
-              <table class="table" id="task-table">
-                <thead><tr><th>类型</th><th>对象</th><th>操作人</th><th>时间</th><th>结果</th></tr></thead>
-                <tbody></tbody>
-              </table>
-              <div class="empty small hidden" id="task-empty">暂无任务记录</div>
-            </div>
-          </div>
-        </div>
-        <div class="grid-2">
-          <div class="card">
-            <div class="card-head"><h3>动态消息流</h3><span class="text-weak text-aux">点击可跳转</span></div>
-            <div class="card-body feed" id="activity-feed"></div>
-          </div>
-          <div class="card">
-            <div class="card-head"><h3>待审核新岗位候选</h3><span class="badge badge-warning" id="pending-count">0 待办</span></div>
-            <div class="card-body" id="pending-list"></div>
-          </div>
-        </div>
-      </section>
-
-      <!-- ======== 全景图谱工作台 ======== -->
-      <section id="view-graph" class="view">
-        <div class="graph-header card">
-          <div class="graph-title">
-            <h2>岗位能力图谱工作台</h2>
-            <span class="tag tag-blue">演示模式</span>
-            <span class="tag tag-cyan">技能点级</span>
-            <span class="tag tag-green">审核已开启</span>
-          </div>
-          <div class="graph-actions">
-            <button class="btn btn-secondary" id="btn-save-view">
-              <svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
-              保存视图</button>
-            <button class="btn btn-secondary" id="btn-share-graph">
-              <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
-              分享</button>
-            <button class="btn btn-primary" id="btn-export-graph">
-              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
-              导出图谱</button>
-          </div>
-        </div>
-        <div class="graph-body">
-          <div class="graph-canvas-wrap card" id="graph-canvas-wrap">
-            <canvas id="graph-canvas"></canvas>
-
-            <!-- 岗位子图状态徽标 -->
-            <div class="solo-badge hidden" id="solo-badge">
-              <span id="solo-badge-text">岗位子图</span>
-              <button id="solo-exit" title="退出岗位子图">×</button>
-            </div>
-
-            <!-- 左上浮动工具条 -->
-            <div class="graph-toolbar">
-              <button class="tool-btn" id="tool-zoom-in" title="放大"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/></svg></button>
-              <button class="tool-btn" id="tool-zoom-out" title="缩小"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35M8 11h6"/></svg></button>
-              <button class="tool-btn" id="tool-fit" title="适应画布"><svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 00-2 2v3M16 3h3a2 2 0 012 2v3M8 21H5a2 2 0 01-2-2v-3M16 21h3a2 2 0 002-2v-3"/></svg></button>
-              <span class="tool-sep"></span>
-              <button class="tool-btn" id="tool-filter" title="筛选"><svg viewBox="0 0 24 24"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg></button>
-              <button class="tool-btn active" id="tool-labels" title="关系标签开关"><svg viewBox="0 0 24 24"><path d="M20.59 13.41L11 3H4v7l9.59 9.59a2 2 0 002.82 0l4.18-4.18a2 2 0 000-2.82z"/><circle cx="7.5" cy="7.5" r="1" fill="currentColor"/></svg></button>
-              <button class="tool-btn" id="tool-relayout" title="一键整理布局"><svg viewBox="0 0 24 24"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.2 2.2M16.2 16.2l2.2 2.2M5.6 18.4l2.2-2.2M16.2 7.8l2.2-2.2"/></svg></button>
-            </div>
-
-            <!-- 筛选面板 -->
-            <div class="graph-filter-panel hidden" id="graph-filter-panel">
-              <div class="fp-head">图谱筛选 <button class="link-btn" id="fp-reset">重置</button></div>
-              <div class="fp-block">
-                <div class="fp-label">节点类型</div>
-                <label class="check"><input type="checkbox" data-ftype="Job" checked><i class="lg-dot job"></i>岗位</label>
-                <label class="check"><input type="checkbox" data-ftype="Skill" checked><i class="lg-dot skill"></i>技能</label>
-                <label class="check"><input type="checkbox" data-ftype="Industry" checked><i class="lg-dot industry"></i>行业</label>
-                <label class="check"><input type="checkbox" data-ftype="Scenario" checked><i class="lg-dot scenario"></i>场景</label>
-              </div>
-              <div class="fp-block">
-                <div class="fp-label">连线类型</div>
-                <label class="check"><input type="checkbox" data-etype="required" checked><i class="lg-line solid"></i>必备技能（116）</label>
-                <label class="check"><input type="checkbox" data-etype="preferred" checked><i class="lg-line dashed"></i>加分技能（78）</label>
-                <label class="check"><input type="checkbox" data-etype="applies" checked><i class="lg-line purple"></i>应用场景（45）</label>
-                <label class="check"><input type="checkbox" data-etype="belongs" checked><i class="lg-line cyan"></i>所属行业（22）</label>
-              </div>
-              <div class="fp-block">
-                <div class="fp-label">岗位类别（技术栈）</div>
-                <select id="fp-category"><option value="">全部类别</option></select>
-              </div>
-              <div class="fp-block">
-                <div class="fp-label">岗位级别</div>
-                <select id="fp-level">
-                  <option value="">全部级别</option>
-                  <option value="初级">初级（≤2 年）</option>
-                  <option value="中级">中级（3-5 年）</option>
-                  <option value="高级">高级（&gt;5 年）</option>
-                </select>
-              </div>
-            </div>
-
-            <!-- 左下：小地图 + 图例 -->
-            <div class="graph-minimap">
-              <canvas id="minimap-canvas" width="180" height="120"></canvas>
-              <div class="graph-legend">
-                <span><i class="lg-dot job"></i>岗位</span>
-                <span><i class="lg-sq skill"></i>技能</span>
-                <span><i class="lg-dot scenario"></i>场景</span>
-                <span><i class="lg-dot pending"></i>待审核</span>
-                <span><i class="lg-line solid"></i>必备</span>
-                <span><i class="lg-line dashed"></i>加分</span>
-              </div>
-            </div>
-
-            <!-- 右下：智能建议 -->
-            <div class="graph-suggest card" id="graph-suggest">
-              <div class="gs-head">
-                <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-4 12.7V17a1 1 0 001 1h6a1 1 0 001-1v-2.3A7 7 0 0012 2z"/><path d="M9 21h6"/></svg>
-                智能建议
-                <button class="icon-btn sm" id="gs-toggle" title="收起/展开"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></button>
-              </div>
-              <div class="gs-list" id="gs-list"></div>
-            </div>
-
-            <!-- 底部：演化逻辑链 -->
-            <div class="graph-chain" id="graph-chain">
-              <div class="gc-head">演化逻辑链 <span class="text-weak text-aux" id="gc-job-name">选择岗位节点后展示能力演化路径</span></div>
-              <div class="gc-chips" id="gc-chips"><span class="text-weak text-aux">—</span></div>
-            </div>
-
-            <div class="graph-loading" id="graph-loading">
-              <div class="skeleton-graph"></div>
-              <div class="text-weak">图谱布局计算中…</div>
-            </div>
-          </div>
-
-          <!-- 右侧详情面板 320px -->
-          <aside class="graph-detail card" id="graph-detail">
-            <div class="detail-empty" id="detail-empty">
-              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>
-              <p>点击画布中的节点<br>查看详情、证据与操作</p>
-              <p class="text-aux text-weak">支持拖拽平移 / 滚轮缩放 / 点击选中</p>
-            </div>
-            <div class="detail-body hidden" id="detail-body"></div>
-          </aside>
-        </div>
-      </section>
-
-      <!-- ======== 岗位演化 ======== -->
-      <section id="view-evolution" class="view">
-        <div class="card">
-          <div class="card-head">
-            <h3>岗位能力演化分析</h3>
-            <div class="evo-controls">
-              <select id="evo-job-select" class="select"></select>
-              <div class="seg" id="evo-gran">
-                <button data-gran="month">月</button>
-                <button data-gran="quarter" class="active">季</button>
-                <button data-gran="year">年</button>
-              </div>
-            </div>
-          </div>
-          <div class="card-body">
-            <!-- 全部岗位演化热力图 -->
-            <div class="evo-chart-title text-aux text-secondary">全部岗位演化热力图（每格 = 该季度演化事件数，点击行切换岗位）</div>
-            <div class="evo-heatmap" id="evo-heatmap"><div class="empty small">加载中…</div></div>
-
-            <!-- 统计条 -->
-            <div class="evo-stats" id="evo-stats"></div>
-
-            <!-- 时点对比器 -->
-            <div class="evo-compare">
-              <div class="evo-compare-head">
-                <span class="evo-chart-title">能力画像时点对比</span>
-                <div class="evo-dates">
-                  <input type="date" id="evo-date-a" class="input">
-                  <span class="text-weak">→</span>
-                  <input type="date" id="evo-date-b" class="input">
-                  <button class="btn btn-secondary btn-sm" id="evo-compare-btn">对比</button>
-                </div>
-              </div>
-              <div class="evo-diff" id="evo-diff"></div>
-            </div>
-
-            <!-- 变更类型构成（堆叠柱状） -->
-            <div class="evo-chart-title text-aux text-secondary">变更类型构成（每季度 新增/增强/减弱/退出）</div>
-            <div class="evo-heat-wrap"><canvas id="evo-stack-canvas"></canvas></div>
-            <div class="stack-legend" id="stack-legend"></div>
-
-            <!-- 技能生命周期甘特图 -->
-            <div class="evo-chart-title text-aux text-secondary">技能生命周期（横条 = 技能在画像中的生效区间，圆点 = 变更事件）</div>
-            <div class="evo-gantt" id="evo-gantt"></div>
-
-            <!-- 热度走势（限高） -->
-            <div class="evo-chart-title text-aux text-secondary">技能热度走势（活跃技能关系数）</div>
-            <div class="evo-heat-wrap"><canvas id="evo-heat-canvas"></canvas></div>
-
-            <!-- 事件时间轴 -->
-            <div class="evo-chart-title text-aux text-secondary">演化事件时间轴（点击查看证据 JD）</div>
-            <div class="timeline" id="evo-timeline"></div>
-          </div>
-        </div>
-      </section>
-
-      <!-- ======== 人岗匹配（三步向导 + 批量匹配） ======== -->
-      <section id="view-match" class="view">
-        <div class="card">
-          <div class="card-body">
-            <div class="match-tabs">
-              <button class="match-tab active" data-mtab="single">单人诊断</button>
-              <button class="match-tab" data-mtab="batch">批量匹配</button>
-            </div>
-            <div id="match-single">
-            <div class="steps" id="match-steps">
-              <div class="step active" data-step="1"><i>1</i><span>简历录入</span></div>
-              <div class="step" data-step="2"><i>2</i><span>解析确认</span></div>
-              <div class="step" data-step="3"><i>3</i><span>诊断结果</span></div>
-            </div>
-
-            <!-- 第 1 步 -->
-            <div class="match-pane" id="match-pane-1">
-              <div class="form-row">
-                <label class="form-label">目标岗位</label>
-                <select id="match-job-select" class="select w-320"></select>
-              </div>
-              <div class="form-row">
-                <label class="form-label">简历文本</label>
-                <textarea id="resume-text" class="textarea" rows="10" placeholder="粘贴简历全文（将自动脱敏与技能抽取），或点击下方按钮上传 / 载入示例简历"></textarea>
-              </div>
-              <div class="form-actions">
-                <button class="btn btn-secondary" id="btn-load-sample">载入示例简历</button>
-                <label class="btn btn-secondary" for="resume-file">上传简历文件</label>
-                <input type="file" id="resume-file" accept=".txt,.md,.docx,.pdf" class="hidden">
-                <span class="text-aux text-weak">支持 .txt / .docx / .pdf，≤5MB</span>
-                <button class="btn btn-primary" id="btn-parse-resume">解析简历</button>
-              </div>
-            </div>
-
-            <!-- 第 2 步 -->
-            <div class="match-pane hidden" id="match-pane-2">
-              <div class="parse-summary" id="parse-summary"></div>
-              <div class="form-row">
-                <label class="form-label">识别技能（可增删）</label>
-                <div class="chip-editor" id="skill-chip-editor"></div>
-                <div class="chip-add">
-                  <input id="skill-add-input" class="input" placeholder="输入技能后回车添加，支持逗号分隔，如 Kubernetes, Docker">
-                  <button class="btn btn-secondary btn-sm" id="btn-skill-add">添加</button>
-                </div>
-              </div>
-              <div class="form-row">
-                <label class="form-label">工作年限</label>
-                <input id="parse-years" type="number" min="0" max="40" step="0.5" class="input w-120">
-              </div>
-              <div class="form-actions">
-                <button class="btn btn-secondary" id="btn-back-1">上一步</button>
-                <button class="btn btn-primary" id="btn-run-match">开始诊断</button>
-              </div>
-            </div>
-
-            <!-- 第 3 步 -->
-            <div class="match-pane hidden" id="match-pane-3">
-              <div class="match-step3-grid">
-                <!-- 左：简历原文 + 技能高亮 -->
-                <div class="resume-viewer">
-                  <div class="rv-head">
-                    <span class="rv-title">结构化简历（已脱敏）</span>
-                    <span class="rv-legend">
-                      <span class="hl hl-req">必备</span>
-                      <span class="hl hl-pref">加分</span>
-                      <span class="hl hl-other">其他技能</span>
-                      <button class="btn btn-secondary btn-sm" id="btn-export-resume">
-                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
-                        导出 DOCX</button>
-                    </span>
-                  </div>
-                  <div class="rv-body" id="resume-highlight">
-                    <div class="empty"><p>解析简历后此处显示规范简历模板</p></div>
-                  </div>
-                </div>
-                <!-- 右：诊断结果 -->
-                <div class="match-step3-right">
-                  <div class="match-result-grid">
-                    <div class="mrg-left">
-                      <div class="gauge-wrap"><canvas id="gauge-canvas" width="220" height="150"></canvas>
-                        <div class="gauge-text"><b id="gauge-score">0</b><span>综合匹配分</span></div>
-                      </div>
-                      <div class="match-verdict" id="match-verdict"></div>
-                      <canvas id="radar-canvas" width="340" height="280"></canvas>
-                    </div>
-                    <div class="mrg-right">
-                      <div class="hit-miss">
-                        <div class="hm-col">
-                          <div class="hm-title ok"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>已命中技能</div>
-                          <div class="hm-chips" id="matched-chips"></div>
-                        </div>
-                        <div class="hm-col">
-                          <div class="hm-title bad"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>缺失技能</div>
-                          <div class="hm-chips" id="missing-chips"></div>
-                        </div>
-                      </div>
-                      <div class="transfer-block">
-                        <div class="hm-title info"><svg viewBox="0 0 24 24"><path d="M17 3l4 4-4 4M21 7H9a4 4 0 00-4 4v1M7 21l-4-4 4-4M3 17h12a4 4 0 004-4v-1"/></svg>可迁移技能</div>
-                        <div class="hm-chips" id="transfer-chips"></div>
-                      </div>
-                      <div class="transfer-block hidden" id="irrelevant-block">
-                        <div class="hm-title weak">与目标岗位无关的技能（不计入评分）</div>
-                        <div class="hm-chips" id="irrelevant-chips"></div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="rec-jobs">
-                    <div class="hm-title info">推荐岗位（按匹配分排序）</div>
-                    <div class="rec-job-cards" id="rec-job-cards"></div>
-                  </div>
-                  <div class="form-actions">
-                    <button class="btn btn-secondary" id="btn-back-2">重新录入</button>
-                    <button class="btn btn-primary" id="btn-goto-path">生成学习路径</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            </div><!-- /match-single -->
-
-            <!-- ======== 批量匹配 ======== -->
-            <div id="match-batch" class="hidden">
-              <div class="form-row">
-                <label class="form-label">目标岗位</label>
-                <select id="batch-job-select" class="select w-320"></select>
-              </div>
-              <div class="dropzone" id="batch-drop">
-                <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
-                <p><b>拖拽简历文件或文件夹到此处</b>，或：</p>
-                <div class="dropzone-btns">
-                  <label class="btn btn-secondary" for="batch-files">选择文件（可多选）</label>
-                  <label class="btn btn-secondary" for="batch-dir">选择文件夹</label>
-                </div>
-                <input type="file" id="batch-files" accept=".txt,.md,.docx,.pdf" multiple class="hidden">
-                <input type="file" id="batch-dir" webkitdirectory class="hidden">
-                <p class="text-aux text-weak">支持 .txt/.docx/.pdf · 单批 ≤50 份 · 单份 ≤5MB · 解析自动脱敏</p>
-              </div>
-              <div class="batch-filelist" id="batch-filelist"></div>
-              <div class="form-actions">
-                <button class="btn btn-primary" id="btn-batch-run">
-                  <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor"/></svg>
-                  开始批量匹配</button>
-                <button class="btn btn-secondary hidden" id="btn-batch-export">
-                  <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
-                  导出结果 CSV</button>
-              </div>
-              <div id="batch-result"></div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- ======== 学习路径 ======== -->
-      <section id="view-path" class="view">
-        <div class="path-layout">
-          <!-- 左栏：路径配置 -->
-          <div class="card path-side">
-            <div class="card-head"><h3>路径配置</h3></div>
-            <div class="card-body">
-              <div class="form-item">
-                <label class="form-label">目标岗位</label>
-                <select id="path-job-select" class="select w-full"></select>
-              </div>
-              <div class="form-item">
-                <label class="form-label">岗位能力清单<span class="form-label-tip">点击标记为「已掌握」</span></label>
-                <div class="skill-pool" id="path-skill-pool">
-                  <div class="pool-loading">选择岗位后加载技能清单…</div>
-                </div>
-              </div>
-              <div class="form-item">
-                <label class="form-label">学习周期</label>
-                <div class="seg" id="path-weeks">
-                  <button class="seg-item" data-weeks="4">4 周</button>
-                  <button class="seg-item active" data-weeks="8">8 周</button>
-                  <button class="seg-item" data-weeks="12">12 周</button>
-                </div>
-              </div>
-              <div class="path-summary" id="path-summary">
-                <div class="path-summary-row"><span>已掌握</span><b id="ps-known">0 项</b></div>
-                <div class="path-summary-row"><span>待补齐</span><b id="ps-gap">—</b></div>
-                <div class="progress"><div class="progress-bar" id="ps-bar" style="width:0%"></div></div>
-                <div class="path-summary-tip" id="ps-tip">覆盖率 0%</div>
-              </div>
-              <button class="btn btn-primary btn-block" id="btn-path">
-                <svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8 17.5C12 14 8 10 12 7.5c1.5-1 3-1.2 4-1.3"/></svg>
-                生成学习路径</button>
-            </div>
-          </div>
-          <!-- 右栏：路径结果 -->
-          <div class="card path-main">
-            <div class="card-head">
-              <h3>分阶段学习路线</h3>
-              <button class="btn btn-secondary btn-sm hidden" id="btn-export-path">
-                <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
-                导出文本</button>
-            </div>
-            <div class="card-body">
-              <div class="path-overview hidden" id="path-overview"></div>
-              <div class="path-flow" id="path-result">
-                <div class="empty">
-                  <svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8 17.5C12 14 8 10 12 7.5c1.5-1 3-1.2 4-1.3"/></svg>
-                  <p>在左侧选择目标岗位并标记已掌握技能<br>点击「生成学习路径」查看分阶段路线</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <footer class="app-footer">如遇问题，请联系 support@rrrosmontis.icu</footer>
-    </main>
-  </div>
-
-  <!-- 通用弹窗容器 -->
-  <div class="modal-mask hidden" id="modal-mask">
-    <div class="modal" id="modal-box" role="dialog" aria-modal="true">
-      <div class="modal-head"><h3 id="modal-title"></h3>
-        <button class="icon-btn" id="modal-close" title="关闭"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
-      </div>
-      <div class="modal-body" id="modal-body"></div>
-      <div class="modal-foot hidden" id="modal-foot"></div>
-    </div>
-  </div>
-  <div class="toast-wrap" id="toast-wrap"></div>
-
-  <script src="/static/app.js?v=20260803"></script>
-  <script src="/static/graph.js?v=20260803"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CareerNexus 职联 · 岗位与能力图谱平台</title>
+  <link rel="stylesheet" href="/static/style.css?v=20260803">
+</head>
+<body>
+  <!-- ============ 顶部栏 56px ============ -->
+  <header class="topbar">
+    <div class="brand">
+      <span class="brand-logo">
+        <svg viewBox="0 0 24 24" fill="none"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="7" r="3"/><circle cx="12" cy="18" r="3"/><path d="M8.5 7.5l7-1M7.5 8.8l3 6.4M16.5 9.6l-3 5.6"/></svg>
+      </span>
+      <span class="brand-name">CareerNexus <b>职联</b></span>
+    </div>
+    <div class="page-title" id="page-title">数据驾驶舱</div>
+    <div class="topbar-right">
+      <div class="global-search">
+        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
+        <input id="global-search-input" type="text" placeholder="搜索岗位 / 技能 / 场景…" autocomplete="off">
+        <div id="global-search-drop" class="search-drop hidden"></div>
+      </div>
+      <button class="btn btn-primary btn-sm" id="btn-demo-tour">
+        <svg viewBox="0 0 24 24"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+        开始演示</button>
+      <span class="demo-badge" id="demo-badge" title="运行状态（点击查看设置）"><i class="dot"></i><span id="demo-badge-text">演示模式</span></span>
+      <span class="badge badge-version" id="data-version" title="图谱数据版本">数据版本 —</span>
+      <button class="icon-btn" id="btn-config" title="系统设置" aria-label="系统设置">
+        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h.01a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51h.01a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v.01a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+      </button>
+      <span class="avatar" title="演示账号">演</span>
+    </div>
+  </header>
+
+  <!-- ============ 横向导航（顶栏下方） ============ -->
+  <nav class="topnav" id="topnav">
+    <button class="nav-item active" data-view="dashboard">
+      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>
+      <span>数据驾驶舱</span>
+    </button>
+    <button class="nav-item" data-view="graph">
+      <svg viewBox="0 0 24 24"><circle cx="5" cy="6" r="2.5"/><circle cx="19" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M7.3 7.2l9.4-1M6.2 8.3l4.2 7.4M17.8 8.3l-4.2 7.4"/></svg>
+      <span>全景图谱</span>
+    </button>
+    <button class="nav-item" data-view="evolution">
+      <svg viewBox="0 0 24 24"><path d="M3 17l5.5-5.5 3.5 3.5L20 7"/><path d="M15 7h5v5"/></svg>
+      <span>岗位演化</span>
+    </button>
+    <button class="nav-item" data-view="match">
+      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor"/></svg>
+      <span>人岗匹配</span>
+    </button>
+    <button class="nav-item" data-view="path">
+      <svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8 17.5C12 14 8 10 12 7.5c1.5-1 3-1.2 4-1.3"/></svg>
+      <span>学习路径</span>
+    </button>
+  </nav>
+
+  <!-- 离线回退模式横幅 -->
+  <div class="offline-banner hidden" id="offline-banner">
+    <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
+    <span>当前为<b>离线回退模式</b>：未配置 LLM 密钥，抽取与生成使用离线确定性方案。配置星火大模型密钥可启用联网能力。</span>
+    <button class="banner-btn" id="banner-config">去配置</button>
+    <button class="banner-close" id="banner-close" title="关闭">×</button>
+  </div>
+  <!-- 语义向量模型横幅 -->
+  <div class="offline-banner hidden" id="embed-banner">
+    <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
+    <span>语义向量模型<b>未就绪</b>：当前使用词表归一化匹配。下载 BGE-M3 权重并在设置中配置，可启用语义相似匹配增强。</span>
+    <button class="banner-btn" id="embed-banner-config">去配置</button>
+    <button class="banner-close" id="embed-banner-close" title="关闭">×</button>
+  </div>
+
+  <div class="shell">
+    <!-- ============ 主内容区 ============ -->
+    <main class="content">
+
+      <!-- ======== 数据驾驶舱 ======== -->
+      <section id="view-dashboard" class="view active">
+        <div class="metric-grid" id="metric-cards"></div>
+        <div class="grid-2">
+          <div class="card">
+            <div class="card-head">
+              <h3>近 12 个季度演化事件趋势</h3>
+              <span class="text-weak text-aux">按事件窗口统计</span>
+            </div>
+            <div class="card-body"><canvas id="trend-canvas" height="220"></canvas></div>
+          </div>
+          <div class="card">
+            <div class="card-head">
+              <h3>任务与审核状态</h3>
+              <button class="btn btn-secondary btn-sm" id="btn-import-jd">导入 JD 数据</button>
+            </div>
+            <div class="card-body" id="task-table-wrap">
+              <table class="table" id="task-table">
+                <thead><tr><th>类型</th><th>对象</th><th>操作人</th><th>时间</th><th>结果</th></tr></thead>
+                <tbody></tbody>
+              </table>
+              <div class="empty small hidden" id="task-empty">暂无任务记录</div>
+            </div>
+          </div>
+        </div>
+        <div class="grid-2">
+          <div class="card">
+            <div class="card-head"><h3>动态消息流</h3><span class="text-weak text-aux">点击可跳转</span></div>
+            <div class="card-body feed" id="activity-feed"></div>
+          </div>
+          <div class="card">
+            <div class="card-head"><h3>待审核新岗位候选</h3><span class="badge badge-warning" id="pending-count">0 待办</span></div>
+            <div class="card-body" id="pending-list"></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ======== 全景图谱工作台 ======== -->
+      <section id="view-graph" class="view">
+        <div class="graph-header card">
+          <div class="graph-title">
+            <h2>岗位能力图谱工作台</h2>
+            <span class="tag tag-blue">演示模式</span>
+            <span class="tag tag-cyan">技能点级</span>
+            <span class="tag tag-green">审核已开启</span>
+          </div>
+          <div class="graph-actions">
+            <button class="btn btn-secondary" id="btn-save-view">
+              <svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
+              保存视图</button>
+            <button class="btn btn-secondary" id="btn-share-graph">
+              <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
+              分享</button>
+            <button class="btn btn-primary" id="btn-export-graph">
+              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+              导出图谱</button>
+          </div>
+        </div>
+        <div class="graph-body">
+          <div class="graph-canvas-wrap card" id="graph-canvas-wrap">
+            <canvas id="graph-canvas"></canvas>
+
+            <!-- 岗位子图状态徽标 -->
+            <div class="solo-badge hidden" id="solo-badge">
+              <span id="solo-badge-text">岗位子图</span>
+              <button id="solo-exit" title="退出岗位子图">×</button>
+            </div>
+
+            <!-- 左上浮动工具条 -->
+            <div class="graph-toolbar">
+              <button class="tool-btn" id="tool-zoom-in" title="放大"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/></svg></button>
+              <button class="tool-btn" id="tool-zoom-out" title="缩小"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35M8 11h6"/></svg></button>
+              <button class="tool-btn" id="tool-fit" title="适应画布"><svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 00-2 2v3M16 3h3a2 2 0 012 2v3M8 21H5a2 2 0 01-2-2v-3M16 21h3a2 2 0 002-2v-3"/></svg></button>
+              <span class="tool-sep"></span>
+              <button class="tool-btn" id="tool-filter" title="筛选"><svg viewBox="0 0 24 24"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg></button>
+              <button class="tool-btn" id="tool-labels" title="关系标签开关"><svg viewBox="0 0 24 24"><path d="M20.59 13.41L11 3H4v7l9.59 9.59a2 2 0 002.82 0l4.18-4.18a2 2 0 000-2.82z"/><circle cx="7.5" cy="7.5" r="1" fill="currentColor"/></svg></button>
+              <button class="tool-btn" id="tool-relayout" title="一键整理布局"><svg viewBox="0 0 24 24"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.2 2.2M16.2 16.2l2.2 2.2M5.6 18.4l2.2-2.2M16.2 7.8l2.2-2.2"/></svg></button>
+            </div>
+
+            <!-- 筛选面板 -->
+            <div class="graph-filter-panel hidden" id="graph-filter-panel">
+              <div class="fp-head">图谱筛选 <button class="link-btn" id="fp-reset">重置</button></div>
+              <div class="fp-block">
+                <div class="fp-label">节点类型</div>
+                <label class="check"><input type="checkbox" data-ftype="Job" checked><i class="lg-dot job"></i>岗位</label>
+                <label class="check"><input type="checkbox" data-ftype="Skill" checked><i class="lg-dot skill"></i>技能</label>
+                <label class="check"><input type="checkbox" data-ftype="Industry"><i class="lg-dot industry"></i>行业</label>
+                <label class="check"><input type="checkbox" data-ftype="Scenario"><i class="lg-dot scenario"></i>场景</label>
+              </div>
+              <div class="fp-block">
+                <div class="fp-label">连线类型</div>
+                <label class="check"><input type="checkbox" data-etype="required" checked><i class="lg-line solid"></i>必备技能（116）</label>
+                <label class="check"><input type="checkbox" data-etype="preferred" checked><i class="lg-line dashed"></i>加分技能（78）</label>
+                <label class="check"><input type="checkbox" data-etype="applies" checked><i class="lg-line purple"></i>应用场景（45）</label>
+                <label class="check"><input type="checkbox" data-etype="belongs" checked><i class="lg-line cyan"></i>所属行业（22）</label>
+              </div>
+              <div class="fp-block">
+                <div class="fp-label">岗位类别（技术栈）</div>
+                <select id="fp-category"><option value="">全部类别</option></select>
+              </div>
+              <div class="fp-block">
+                <div class="fp-label">岗位级别</div>
+                <select id="fp-level">
+                  <option value="">全部级别</option>
+                  <option value="初级">初级（≤2 年）</option>
+                  <option value="中级">中级（3-5 年）</option>
+                  <option value="高级">高级（&gt;5 年）</option>
+                </select>
+              </div>
+            </div>
+
+            <!-- 左下：小地图 + 图例 -->
+            <div class="graph-minimap">
+              <canvas id="minimap-canvas" width="180" height="120"></canvas>
+              <div class="graph-legend">
+                <span><i class="lg-dot job"></i>岗位</span>
+                <span><i class="lg-sq skill"></i>技能</span>
+                <span><i class="lg-dot scenario"></i>场景</span>
+                <span><i class="lg-dot pending"></i>待审核</span>
+                <span><i class="lg-line solid"></i>必备</span>
+                <span><i class="lg-line dashed"></i>加分</span>
+              </div>
+            </div>
+
+            <!-- 右下：智能建议 -->
+            <div class="graph-suggest card" id="graph-suggest">
+              <div class="gs-head">
+                <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-4 12.7V17a1 1 0 001 1h6a1 1 0 001-1v-2.3A7 7 0 0012 2z"/><path d="M9 21h6"/></svg>
+                智能建议
+                <button class="icon-btn sm" id="gs-toggle" title="收起/展开"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></button>
+              </div>
+              <div class="gs-list" id="gs-list"></div>
+            </div>
+
+            <!-- 底部：演化逻辑链 -->
+            <div class="graph-chain" id="graph-chain">
+              <div class="gc-head">演化逻辑链 <span class="text-weak text-aux" id="gc-job-name">选择岗位节点后展示能力演化路径</span></div>
+              <div class="gc-chips" id="gc-chips"><span class="text-weak text-aux">—</span></div>
+            </div>
+
+            <div class="graph-loading" id="graph-loading">
+              <div class="skeleton-graph"></div>
+              <div class="text-weak">图谱布局计算中…</div>
+            </div>
+          </div>
+
+          <!-- 右侧详情面板 320px -->
+          <aside class="graph-detail card" id="graph-detail">
+            <div class="detail-empty" id="detail-empty">
+              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>
+              <p>点击画布中的节点<br>查看详情、证据与操作</p>
+              <p class="text-aux text-weak">支持拖拽平移 / 滚轮缩放 / 点击选中</p>
+            </div>
+            <div class="detail-body hidden" id="detail-body"></div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- ======== 岗位演化 ======== -->
+      <section id="view-evolution" class="view">
+        <div class="card">
+          <div class="card-head">
+            <h3>岗位能力演化分析</h3>
+            <div class="evo-controls">
+              <select id="evo-job-select" class="select"></select>
+              <div class="seg" id="evo-gran">
+                <button data-gran="month">月</button>
+                <button data-gran="quarter" class="active">季</button>
+                <button data-gran="year">年</button>
+              </div>
+            </div>
+          </div>
+          <div class="card-body">
+            <!-- 全部岗位演化热力图 -->
+            <div class="evo-chart-title text-aux text-secondary">全部岗位演化热力图（每格 = 该季度演化事件数，点击行切换岗位）</div>
+            <div class="evo-heatmap" id="evo-heatmap"><div class="empty small">加载中…</div></div>
+
+            <!-- 统计条 -->
+            <div class="evo-stats" id="evo-stats"></div>
+
+            <!-- 时点对比器 -->
+            <div class="evo-compare">
+              <div class="evo-compare-head">
+                <span class="evo-chart-title">能力画像时点对比</span>
+                <div class="evo-dates">
+                  <input type="date" id="evo-date-a" class="input">
+                  <span class="text-weak">→</span>
+                  <input type="date" id="evo-date-b" class="input">
+                  <button class="btn btn-secondary btn-sm" id="evo-compare-btn">对比</button>
+                </div>
+              </div>
+              <div class="evo-diff" id="evo-diff"></div>
+            </div>
+
+            <!-- 变更类型构成（堆叠柱状） -->
+            <div class="evo-chart-title text-aux text-secondary">变更类型构成（每季度 新增/增强/减弱/退出）</div>
+            <div class="evo-heat-wrap"><canvas id="evo-stack-canvas"></canvas></div>
+            <div class="stack-legend" id="stack-legend"></div>
+
+            <!-- 技能生命周期甘特图 -->
+            <div class="evo-chart-title text-aux text-secondary">技能生命周期（横条 = 技能在画像中的生效区间，圆点 = 变更事件）</div>
+            <div class="evo-gantt" id="evo-gantt"></div>
+
+            <!-- 热度走势（限高） -->
+            <div class="evo-chart-title text-aux text-secondary">技能热度走势（活跃技能关系数）</div>
+            <div class="evo-heat-wrap"><canvas id="evo-heat-canvas"></canvas></div>
+
+            <!-- 事件时间轴 -->
+            <div class="evo-chart-title text-aux text-secondary">演化事件时间轴（点击查看证据 JD）</div>
+            <div class="timeline" id="evo-timeline"></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ======== 人岗匹配（三步向导 + 批量匹配） ======== -->
+      <section id="view-match" class="view">
+        <div class="card">
+          <div class="card-body">
+            <div class="match-tabs">
+              <button class="match-tab active" data-mtab="single">单人诊断</button>
+              <button class="match-tab" data-mtab="batch">批量匹配</button>
+            </div>
+            <div id="match-single">
+            <div class="steps" id="match-steps">
+              <div class="step active" data-step="1"><i>1</i><span>简历录入</span></div>
+              <div class="step" data-step="2"><i>2</i><span>解析确认</span></div>
+              <div class="step" data-step="3"><i>3</i><span>诊断结果</span></div>
+            </div>
+
+            <!-- 第 1 步 -->
+            <div class="match-pane" id="match-pane-1">
+              <div class="form-row">
+                <label class="form-label">目标岗位</label>
+                <select id="match-job-select" class="select w-320"></select>
+              </div>
+              <div class="form-row">
+                <label class="form-label">简历文本</label>
+                <textarea id="resume-text" class="textarea" rows="10" placeholder="粘贴简历全文（将自动脱敏与技能抽取），或点击下方按钮上传 / 载入示例简历"></textarea>
+              </div>
+              <div class="form-actions">
+                <button class="btn btn-secondary" id="btn-load-sample">载入示例简历</button>
+                <label class="btn btn-secondary" for="resume-file">上传简历文件</label>
+                <input type="file" id="resume-file" accept=".txt,.md,.docx,.pdf" class="hidden">
+                <span class="text-aux text-weak">支持 .txt / .docx / .pdf，≤5MB</span>
+                <button class="btn btn-primary" id="btn-parse-resume">解析简历</button>
+              </div>
+            </div>
+
+            <!-- 第 2 步 -->
+            <div class="match-pane hidden" id="match-pane-2">
+              <div class="parse-summary" id="parse-summary"></div>
+              <div class="form-row">
+                <label class="form-label">识别技能（可增删）</label>
+                <div class="chip-editor" id="skill-chip-editor"></div>
+                <div class="chip-add">
+                  <input id="skill-add-input" class="input" placeholder="输入技能后回车添加，支持逗号分隔，如 Kubernetes, Docker">
+                  <button class="btn btn-secondary btn-sm" id="btn-skill-add">添加</button>
+                </div>
+              </div>
+              <div class="form-row">
+                <label class="form-label">工作年限</label>
+                <input id="parse-years" type="number" min="0" max="40" step="0.5" class="input w-120">
+              </div>
+              <div class="form-actions">
+                <button class="btn btn-secondary" id="btn-back-1">上一步</button>
+                <button class="btn btn-primary" id="btn-run-match">开始诊断</button>
+              </div>
+            </div>
+
+            <!-- 第 3 步 -->
+            <div class="match-pane hidden" id="match-pane-3">
+              <div class="match-step3-grid">
+                <!-- 左：简历原文 + 技能高亮 -->
+                <div class="resume-viewer">
+                  <div class="rv-head">
+                    <span class="rv-title">结构化简历（已脱敏）</span>
+                    <span class="rv-legend">
+                      <span class="hl hl-req">必备</span>
+                      <span class="hl hl-pref">加分</span>
+                      <span class="hl hl-other">其他技能</span>
+                      <button class="btn btn-secondary btn-sm" id="btn-export-resume">
+                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                        导出 DOCX</button>
+                    </span>
+                  </div>
+                  <div class="rv-body" id="resume-highlight">
+                    <div class="empty"><p>解析简历后此处显示规范简历模板</p></div>
+                  </div>
+                </div>
+                <!-- 右：诊断结果 -->
+                <div class="match-step3-right">
+                  <div class="match-result-grid">
+                    <div class="mrg-left">
+                      <div class="gauge-wrap"><canvas id="gauge-canvas" width="220" height="150"></canvas>
+                        <div class="gauge-text"><b id="gauge-score">0</b><span>综合匹配分</span></div>
+                      </div>
+                      <div class="match-verdict" id="match-verdict"></div>
+                      <canvas id="radar-canvas" width="340" height="280"></canvas>
+                    </div>
+                    <div class="mrg-right">
+                      <div class="hit-miss">
+                        <div class="hm-col">
+                          <div class="hm-title ok"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>已命中技能</div>
+                          <div class="hm-chips" id="matched-chips"></div>
+                        </div>
+                        <div class="hm-col">
+                          <div class="hm-title bad"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>缺失技能</div>
+                          <div class="hm-chips" id="missing-chips"></div>
+                        </div>
+                      </div>
+                      <div class="transfer-block">
+                        <div class="hm-title info"><svg viewBox="0 0 24 24"><path d="M17 3l4 4-4 4M21 7H9a4 4 0 00-4 4v1M7 21l-4-4 4-4M3 17h12a4 4 0 004-4v-1"/></svg>可迁移技能</div>
+                        <div class="hm-chips" id="transfer-chips"></div>
+                      </div>
+                      <div class="transfer-block hidden" id="irrelevant-block">
+                        <div class="hm-title weak">与目标岗位无关的技能（不计入评分）</div>
+                        <div class="hm-chips" id="irrelevant-chips"></div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="rec-jobs">
+                    <div class="hm-title info">推荐岗位（按匹配分排序）</div>
+                    <div class="rec-job-cards" id="rec-job-cards"></div>
+                  </div>
+                  <div class="form-actions">
+                    <button class="btn btn-secondary" id="btn-back-2">重新录入</button>
+                    <button class="btn btn-primary" id="btn-goto-path">生成学习路径</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            </div><!-- /match-single -->
+
+            <!-- ======== 批量匹配 ======== -->
+            <div id="match-batch" class="hidden">
+              <div class="form-row">
+                <label class="form-label">目标岗位</label>
+                <select id="batch-job-select" class="select w-320"></select>
+              </div>
+              <div class="dropzone" id="batch-drop">
+                <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+                <p><b>拖拽简历文件或文件夹到此处</b>，或：</p>
+                <div class="dropzone-btns">
+                  <label class="btn btn-secondary" for="batch-files">选择文件（可多选）</label>
+                  <label class="btn btn-secondary" for="batch-dir">选择文件夹</label>
+                </div>
+                <input type="file" id="batch-files" accept=".txt,.md,.docx,.pdf" multiple class="hidden">
+                <input type="file" id="batch-dir" webkitdirectory class="hidden">
+                <p class="text-aux text-weak">支持 .txt/.docx/.pdf · 单批 ≤50 份 · 单份 ≤5MB · 解析自动脱敏</p>
+              </div>
+              <div class="batch-filelist" id="batch-filelist"></div>
+              <div class="form-actions">
+                <button class="btn btn-primary" id="btn-batch-run">
+                  <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor"/></svg>
+                  开始批量匹配</button>
+                <button class="btn btn-secondary hidden" id="btn-batch-export">
+                  <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                  导出结果 CSV</button>
+              </div>
+              <div id="batch-result"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ======== 学习路径 ======== -->
+      <section id="view-path" class="view">
+        <div class="path-layout">
+          <!-- 左栏：路径配置 -->
+          <div class="card path-side">
+            <div class="card-head"><h3>路径配置</h3></div>
+            <div class="card-body">
+              <div class="form-item">
+                <label class="form-label">目标岗位</label>
+                <select id="path-job-select" class="select w-full"></select>
+              </div>
+              <div class="form-item">
+                <label class="form-label">岗位能力清单<span class="form-label-tip">点击标记为「已掌握」</span></label>
+                <div class="skill-pool" id="path-skill-pool">
+                  <div class="pool-loading">选择岗位后加载技能清单…</div>
+                </div>
+              </div>
+              <div class="form-item">
+                <label class="form-label">学习周期</label>
+                <div class="seg" id="path-weeks">
+                  <button class="seg-item" data-weeks="4">4 周</button>
+                  <button class="seg-item active" data-weeks="8">8 周</button>
+                  <button class="seg-item" data-weeks="12">12 周</button>
+                </div>
+              </div>
+              <div class="path-summary" id="path-summary">
+                <div class="path-summary-row"><span>已掌握</span><b id="ps-known">0 项</b></div>
+                <div class="path-summary-row"><span>待补齐</span><b id="ps-gap">—</b></div>
+                <div class="progress"><div class="progress-bar" id="ps-bar" style="width:0%"></div></div>
+                <div class="path-summary-tip" id="ps-tip">覆盖率 0%</div>
+              </div>
+              <button class="btn btn-primary btn-block" id="btn-path">
+                <svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8 17.5C12 14 8 10 12 7.5c1.5-1 3-1.2 4-1.3"/></svg>
+                生成学习路径</button>
+            </div>
+          </div>
+          <!-- 右栏：路径结果 -->
+          <div class="card path-main">
+            <div class="card-head">
+              <h3>分阶段学习路线</h3>
+              <button class="btn btn-secondary btn-sm hidden" id="btn-export-path">
+                <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                导出文本</button>
+            </div>
+            <div class="card-body">
+              <div class="path-overview hidden" id="path-overview"></div>
+              <div class="path-flow" id="path-result">
+                <div class="empty">
+                  <svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8 17.5C12 14 8 10 12 7.5c1.5-1 3-1.2 4-1.3"/></svg>
+                  <p>在左侧选择目标岗位并标记已掌握技能<br>点击「生成学习路径」查看分阶段路线</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <footer class="app-footer" id="app-footer">CareerNexus 职联 · 演示模式 · 数据为模拟生成</footer>
+    </main>
+  </div>
+
+  <!-- 通用弹窗容器 -->
+  <div class="modal-mask hidden" id="modal-mask">
+    <div class="modal" id="modal-box" role="dialog" aria-modal="true">
+      <div class="modal-head"><h3 id="modal-title"></h3>
+        <button class="icon-btn" id="modal-close" title="关闭"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+      </div>
+      <div class="modal-body" id="modal-body"></div>
+      <div class="modal-foot hidden" id="modal-foot"></div>
+    </div>
+  </div>
+  <div class="toast-wrap" id="toast-wrap"></div>
+
+  <script src="/static/app.js?v=20260803"></script>
+  <script src="/static/graph.js?v=20260803"></script>
+</body>
+</html>
diff --git a/webui/style.css b/webui/style.css
index dd9e006..25f04aa 100644
--- a/webui/style.css
+++ b/webui/style.css
@@ -924,3 +924,26 @@ svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width:
   width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1;
 }
 .solo-badge button:hover { background: rgba(255,255,255,.45); }
+
+/* 演示模式状态徽标 / 演示导览 */
+.demo-badge {
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+  font-size: 12px; padding: 3px 10px; border-radius: 999px;
+  background: var(--success-light); color: var(--success); border: 1px solid #b7eb8f;
+  white-space: nowrap;
+}
+.demo-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
+.demo-badge.warn { background: var(--warning-light); color: #ad4e00; border-color: #ffd591; }
+.demo-badge.warn .dot { background: var(--warning); }
+#btn-demo-tour svg { width: 13px; height: 13px; fill: currentColor; }
+.tour-intro { font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
+.tour-step {
+  display: flex; align-items: center; gap: 12px;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 12px 14px; margin-bottom: 10px;
+}
+.tour-step:hover { border-color: var(--primary); }
+.tour-step-body { flex: 1; }
+.tour-step-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
+.tour-step-desc { font-size: 12px; color: var(--text-3); }
+.cfg-foot-note { text-align: center; font-size: 12px; color: var(--text-3); padding: 4px 0 2px; }