npm - neo-cmp-cli - Versions diffs - 1.13.11 → 1.13.13 - Mend

neo-cmp-cli 1.13.11 → 1.13.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/template/neo-bi-cmps/docs/prototype-pipeline-forecasting.html ADDED Viewed

@@ -0,0 +1,2453 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Seller Workspace</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f5f6fa;
+      color: #333;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    h1 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+    .page-desc {
+      font-size: 13px;
+      color: #888;
+      margin-bottom: 16px;
+    }
+    /* Tabs */
+    .tab-bar {
+      display: flex;
+      gap: 0;
+      margin-bottom: 20px;
+      border-bottom: 2px solid #e5e7eb;
+    }
+    .tab-btn {
+      padding: 10px 24px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      border: none;
+      background: none;
+      color: #999;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -2px;
+      transition: all 0.2s;
+    }
+    .tab-btn.active {
+      color: #6366f1;
+      border-bottom-color: #6366f1;
+    }
+    .tab-btn:hover {
+      color: #6366f1;
+    }
+    .tab-panel {
+      display: none;
+    }
+    .tab-panel.active {
+      display: block;
+    }
+    /* 阶段切换卡片 */
+    .stage-tabs {
+      display: flex;
+      gap: 0;
+      margin-bottom: 20px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+    }
+    .stage-tab {
+      flex: 1;
+      padding: 10px 16px;
+      cursor: pointer;
+      border-right: 1px solid #f0f0f0;
+      transition: all 0.2s;
+      position: relative;
+    }
+    .stage-tab:last-child {
+      border-right: none;
+    }
+    .stage-tab.active {
+      background: #fff;
+    }
+    .stage-tab.active::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: #6366f1;
+    }
+    .stage-tab:hover {
+      background: #fafafa;
+    }
+    .stage-tab .stage-name {
+      font-size: 11px;
+      color: #888;
+      margin-bottom: 2px;
+    }
+    .stage-tab.active .stage-name {
+      color: #6366f1;
+      font-weight: 600;
+    }
+    .stage-tab .stage-amount {
+      font-size: 15px;
+      font-weight: 700;
+      color: #333;
+    }
+    .stage-tab .stage-count {
+      font-size: 11px;
+      color: #999;
+      display: inline;
+      margin-left: 4px;
+    }
+    .stage-tab .stage-sub {
+      font-size: 10px;
+      color: #999;
+      margin-top: 2px;
+    }
+    /* 筛选栏 */
+    .filter-bar {
+      background: #fff;
+      border-radius: 8px;
+      padding: 16px 20px;
+      display: flex;
+      gap: 24px;
+      align-items: center;
+      margin-bottom: 20px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+    .filter-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .filter-group label {
+      font-size: 13px;
+      color: #666;
+      white-space: nowrap;
+    }
+    .filter-group select,
+    .filter-group input {
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 13px;
+      background: #fff;
+      cursor: pointer;
+    }
+    .filter-group select:focus {
+      border-color: #6366f1;
+      outline: none;
+    }
+    .filter-btn {
+      padding: 6px 16px;
+      border-radius: 6px;
+      font-size: 13px;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      background: #fff;
+    }
+    .filter-btn.active {
+      background: #6366f1;
+      color: #fff;
+      border-color: #6366f1;
+    }
+    /* 核心指标卡片 */
+    .kpi-cards {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+    .kpi-card {
+      flex: 1;
+      background: #fff;
+      border-radius: 8px;
+      padding: 16px 20px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+    .kpi-card .kpi-label {
+      font-size: 12px;
+      color: #888;
+      margin-bottom: 4px;
+    }
+    .kpi-card .kpi-value {
+      font-size: 22px;
+      font-weight: 700;
+    }
+    .kpi-card .kpi-sub {
+      font-size: 12px;
+      color: #999;
+      margin-top: 4px;
+    }
+    .kpi-card .kpi-sub.negative {
+      color: #ef4444;
+    }
+    .kpi-card .kpi-sub.positive {
+      color: #22c55e;
+    }
+    /* BI看板 */
+    .bi-chart {
+      background: #fff;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 20px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+    .bi-chart h3 {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+    .stacked-bar-container {
+      position: relative;
+      height: 80px;
+      margin: 20px 0;
+    }
+    .stacked-bar {
+      display: flex;
+      height: 48px;
+      border-radius: 6px;
+      overflow: hidden;
+      position: relative;
+    }
+    .bar-segment {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 600;
+      cursor: default;
+      transition: opacity 0.2s;
+    }
+    .bar-segment:hover {
+      opacity: 0.85;
+    }
+    .bar-closed {
+      background: #ef4444;
+    }
+    .bar-commit {
+      background: #f59e0b;
+    }
+    .bar-bestcase {
+      background: #22c55e;
+    }
+    .bar-pipeline {
+      background: #3b82f6;
+    }
+    @keyframes blink {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.3;
+      }
+    }
+    /* 日期范围选择弹窗 */
+    .date-picker-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.3);
+      z-index: 300;
+    }
+    .date-picker-modal {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: #fff;
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+      width: 680px;
+    }
+    .date-picker-header {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 16px;
+    }
+    .date-input-box {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      padding: 8px 12px;
+      font-size: 13px;
+      color: #999;
+      cursor: pointer;
+    }
+    .date-input-box.has-value {
+      color: #333;
+    }
+    .date-picker-body {
+      display: flex;
+      gap: 24px;
+    }
+    .calendar {
+      flex: 1;
+    }
+    .calendar-nav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      font-size: 13px;
+      font-weight: 600;
+    }
+    .calendar-nav span {
+      cursor: pointer;
+      color: #999;
+      padding: 0 4px;
+    }
+    .calendar-nav span:hover {
+      color: #6366f1;
+    }
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 2px;
+      text-align: center;
+      font-size: 12px;
+    }
+    .calendar-grid .day-header {
+      color: #999;
+      font-weight: 600;
+      padding: 6px 0;
+    }
+    .calendar-grid .day {
+      padding: 6px 0;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all 0.15s;
+    }
+    .calendar-grid .day:hover {
+      background: #f0f0ff;
+    }
+    .calendar-grid .day.today {
+      border: 1px solid #6366f1;
+      color: #6366f1;
+    }
+    .calendar-grid .day.selected {
+      background: #6366f1;
+      color: #fff;
+    }
+    .calendar-grid .day.in-range {
+      background: #e8e8ff;
+    }
+    .calendar-grid .day.other-month {
+      color: #ccc;
+    }
+    .date-picker-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 16px;
+    }
+    .date-picker-footer button {
+      padding: 8px 24px;
+      border: none;
+      border-radius: 6px;
+      background: #6366f1;
+      color: #fff;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+    }
+    .date-picker-footer button:hover {
+      background: #4f46e5;
+    }
+    /* Owner选人选部门组件 */
+    .owner-picker-wrap {
+      position: relative;
+    }
+    .owner-picker-trigger {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 13px;
+      cursor: pointer;
+      background: #fff;
+      min-width: 140px;
+    }
+    .owner-picker-trigger:hover {
+      border-color: #6366f1;
+    }
+    .owner-selected-text {
+      flex: 1;
+    }
+    .owner-arrow {
+      font-size: 10px;
+      color: #999;
+    }
+    .owner-picker-dropdown {
+      display: none;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 4px;
+      width: 260px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+      z-index: 250;
+      padding: 8px 0;
+      max-height: 340px;
+      overflow-y: auto;
+    }
+    .owner-picker-dropdown.open {
+      display: block;
+    }
+    .owner-search {
+      width: calc(100% - 16px);
+      margin: 0 8px 8px;
+      padding: 8px 10px;
+      border: 1px solid #eee;
+      border-radius: 6px;
+      font-size: 12px;
+      outline: none;
+    }
+    .owner-search:focus {
+      border-color: #6366f1;
+    }
+    .owner-section-label {
+      padding: 6px 14px;
+      font-size: 11px;
+      color: #999;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .owner-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      font-size: 13px;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .owner-item:hover {
+      background: #f5f5ff;
+    }
+    .owner-item.selected {
+      background: #f0f0ff;
+      color: #6366f1;
+      font-weight: 600;
+    }
+    .owner-icon {
+      font-size: 14px;
+      width: 20px;
+      text-align: center;
+    }
+    .owner-check {
+      width: 16px;
+      height: 16px;
+      border: 1.5px solid #ccc;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      color: transparent;
+      flex-shrink: 0;
+    }
+    .owner-item.selected .owner-check {
+      background: #6366f1;
+      border-color: #6366f1;
+      color: #fff;
+    }
+    /* Changes Since 问号提示 */
+    .help-tip {
+      position: relative;
+      display: inline-block;
+      cursor: help;
+      color: #999;
+      font-size: 12px;
+      margin-left: 2px;
+    }
+    .help-tip .help-tip-text {
+      display: none;
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: #333;
+      color: #fff;
+      padding: 6px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      white-space: nowrap;
+      z-index: 100;
+      font-weight: 400;
+    }
+    .help-tip .help-tip-text::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 5px solid transparent;
+      border-top-color: #333;
+    }
+    .help-tip:hover .help-tip-text {
+      display: block;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Seller Workspace</h1>
+    <p class="page-desc" id="pageDesc">Pipeline: Review your opportunity funnel and deal health</p>
+    <!-- Tab Bar -->
+    <div class="tab-bar">
+      <button class="tab-btn active" onclick="switchTab('pipeline')">Pipeline</button>
+      <button class="tab-btn" onclick="switchTab('forecast')">Forecast</button>
+    </div>
+    <!-- ========== Pipeline Tab ========== -->
+    <div id="pipelineTab" class="tab-panel active">
+      <!-- 筛选栏 (Pipeline) -->
+      <div class="filter-bar">
+        <div class="filter-group">
+          <label>Close Date</label>
+          <select id="pipelineCloseDate">
+            <option>This Week</option>
+            <option>This Month</option>
+            <option selected>This Quarter</option>
+            <option value="Custom">Custom</option>
+          </select>
+          <span id="pipelineCustomRange" style="display:none;font-size:12px;color:#6366f1;cursor:pointer;"
+            onclick="openDatePicker('pipeline')"></span>
+        </div>
+        <div class="filter-group">
+          <label>Opportunity Owner</label>
+          <div class="owner-picker-wrap" id="pipelineOwnerWrap">
+            <div class="owner-picker-trigger" onclick="toggleOwnerPicker('pipeline')">
+              <span class="owner-selected-text" id="pipelineOwnerText">Current User</span>
+              <span class="owner-arrow">▾</span>
+            </div>
+            <div class="owner-picker-dropdown" id="pipelineOwnerDropdown">
+              <input type="text" class="owner-search" placeholder="Search people or departments..."
+                oninput="filterOwnerList('pipeline',this.value)">
+              <div class="owner-section-label">People</div>
+              <div class="owner-item selected" data-name="Current User" onclick="toggleOwnerItem('pipeline',this)"><span
+                  class="owner-check">✓</span><span class="owner-icon">👤</span>Current User</div>
+              <div class="owner-item" data-name="Alice" onclick="toggleOwnerItem('pipeline',this)"><span
+                  class="owner-check"></span><span class="owner-icon">👤</span>Alice</div>
+              <div class="owner-item" data-name="Steve" onclick="toggleOwnerItem('pipeline',this)"><span
+                  class="owner-check"></span><span class="owner-icon">👤</span>Steve</div>
+              <div class="owner-item" data-name="Chloe" onclick="toggleOwnerItem('pipeline',this)"><span
+                  class="owner-check"></span><span class="owner-icon">👤</span>Chloe</div>
+              <div class="owner-section-label">Departments</div>
+              <div class="owner-item" data-name="Sales Dept" onclick="toggleOwnerItem('pipeline',this)"><span
+                  class="owner-check"></span><span class="owner-icon">🏢</span>Sales Dept</div>
+              <div class="owner-item" data-name="Enterprise Team" onclick="toggleOwnerItem('pipeline',this)"><span
+                  class="owner-check"></span><span class="owner-icon">🏢</span>Enterprise Team</div>
+            </div>
+          </div>
+        </div>
+        <div class="filter-group">
+          <label>Business Type</label>
+          <select>
+            <option>New Business</option>
+            <option>Renewal</option>
+            <option>Expansion</option>
+          </select>
+        </div>
+        <div class="filter-group">
+          <label>Changes Since <span class="help-tip">?<span class="help-tip-text">Sets the baseline date for tracking
+                changes in close date, amount, stage, etc.</span></span></label>
+          <select id="pipelineChangesSince">
+            <option>Start of the Period</option>
+            <option value="Custom">Custom</option>
+          </select>
+          <span id="pipelineChangesSinceDate" style="display:none;font-size:12px;color:#6366f1;cursor:pointer;"
+            onclick="openSingleDatePicker('pipeline')"></span>
+        </div>
+      </div>
+      <!-- Pipeline 看板区：漏斗图 + 阶段停留时间 -->
+      <div style="display:flex;gap:20px;margin-bottom:20px;">
+        <!-- 商机漏斗 -->
+        <div style="flex:1;background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.08);">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+            <h3 style="font-size:14px;font-weight:600;">Pipeline Funnel</h3>
+            <span onclick="document.getElementById('funnelAiModal').style.display='flex'"
+              style="cursor:pointer;font-size:16px;" title="AI Analysis">✨</span>
+          </div>
+          <!-- 顶部销售金额 -->
+          <div style="text-align:center;margin-bottom:16px;">
+            <div style="font-size:12px;color:#888;">Sales Amount</div>
+            <div style="font-size:22px;font-weight:700;">$11.1M</div>
+          </div>
+          <!-- 漏斗主体：左转化率 + 中漏斗 + 右金额数量 -->
+          <div style="display:flex;align-items:stretch;gap:0;">
+            <!-- 左侧转化率 -->
+            <div
+              style="width:100px;display:flex;flex-direction:column;justify-content:center;gap:0;font-size:11px;color:#888;">
+              <div style="height:48px;display:flex;align-items:center;">—</div>
+              <div style="height:48px;display:flex;align-items:center;">56.3%</div>
+              <div style="height:48px;display:flex;align-items:center;">28.1%</div>
+              <div style="height:48px;display:flex;align-items:center;">10.0%</div>
+            </div>
+            <!-- 中间漏斗 -->
+            <div style="flex:1;display:flex;flex-direction:column;align-items:center;">
+              <div
+                style="width:100%;height:48px;background:#3b82f6;clip-path:polygon(5% 0%,95% 0%,85% 100%,15% 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;cursor:pointer;"
+                onclick="selectStageByName('Prospecting')">Prospecting</div>
+              <div
+                style="width:100%;height:48px;background:#22c55e;clip-path:polygon(15% 0%,85% 0%,75% 100%,25% 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;cursor:pointer;"
+                onclick="selectStageByName('Needs Analysis')">Needs Analysis</div>
+              <div
+                style="width:100%;height:48px;background:#f59e0b;clip-path:polygon(25% 0%,75% 0%,65% 100%,35% 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;cursor:pointer;"
+                onclick="selectStageByName('Proposal/Price Quote')">Proposal</div>
+              <div
+                style="width:100%;height:48px;background:#8b5cf6;clip-path:polygon(35% 0%,65% 0%,58% 100%,42% 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;cursor:pointer;"
+                onclick="selectStageByName('Closed Won')">Closed Won</div>
+            </div>
+            <!-- 右侧金额/数量 -->
+            <div
+              style="width:110px;display:flex;flex-direction:column;justify-content:center;gap:0;font-size:11px;color:#555;text-align:right;">
+              <div style="height:48px;display:flex;align-items:center;justify-content:flex-end;">$3.2M / 15</div>
+              <div style="height:48px;display:flex;align-items:center;justify-content:flex-end;">$1.8M / 7</div>
+              <div style="height:48px;display:flex;align-items:center;justify-content:flex-end;">$4.5M / 8</div>
+              <div style="height:48px;display:flex;align-items:center;justify-content:flex-end;">$1.6M / 3</div>
+            </div>
+          </div>
+          <!-- 底部图例 -->
+          <div
+            style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:11px;color:#666;">
+            <span><span
+                style="display:inline-block;width:10px;height:10px;background:#3b82f6;border-radius:50%;margin-right:4px;vertical-align:middle;"></span>Prospecting</span>
+            <span><span
+                style="display:inline-block;width:10px;height:10px;background:#22c55e;border-radius:50%;margin-right:4px;vertical-align:middle;"></span>Needs
+              Analysis</span>
+            <span><span
+                style="display:inline-block;width:10px;height:10px;background:#f59e0b;border-radius:50%;margin-right:4px;vertical-align:middle;"></span>Proposal</span>
+            <span><span
+                style="display:inline-block;width:10px;height:10px;background:#8b5cf6;border-radius:50%;margin-right:4px;vertical-align:middle;"></span>Closed
+              Won</span>
+          </div>
+        </div>
+        <!-- 阶段平均停留时间 -->
+        <div
+          style="flex:1;background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.08);display:flex;flex-direction:column;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
+            <h3 style="font-size:14px;font-weight:600;">Avg. Time in Stage</h3>
+            <span onclick="document.getElementById('stageTimeAiModal').style.display='flex'"
+              style="cursor:pointer;font-size:16px;" title="AI Analysis">✨</span>
+          </div>
+          <div style="display:flex;gap:16px;font-size:11px;color:#888;margin-bottom:16px;">
+            <span><span
+                style="display:inline-block;width:12px;height:8px;background:#22c55e;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>Actual</span>
+            <span><span
+                style="display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #6366f1;margin-right:4px;vertical-align:middle;"></span>Target</span>
+            <span><span
+                style="display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ef4444;margin-right:4px;vertical-align:middle;"></span>Limit</span>
+          </div>
+          <div style="display:flex;flex-direction:column;gap:24px;flex:1;">
+            <!-- Prospecting -->
+            <div style="cursor:pointer;" onclick="selectStageByName('Prospecting')">
+              <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;">
+                <span>Prospecting</span><span style="font-weight:600;">8天6时</span></div>
+              <div style="position:relative;height:28px;background:#eee;border-radius:3px;">
+                <div style="height:100%;width:28%;background:#22c55e;border-radius:4px;"></div>
+                <div
+                  style="position:absolute;left:33%;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #6366f1;margin-left:-5px;">
+                </div>
+                <div
+                  style="position:absolute;left:50%;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #ef4444;margin-left:-5px;">
+                </div>
+              </div>
+            </div>
+            <!-- Needs Analysis -->
+            <div style="cursor:pointer;" onclick="selectStageByName('Needs Analysis')">
+              <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;"><span>Needs
+                  Analysis</span><span style="font-weight:600;color:#eab308;">15天12时</span></div>
+              <div style="position:relative;height:28px;background:#eee;border-radius:3px;">
+                <div style="height:100%;width:52%;background:#eab308;border-radius:4px;"></div>
+                <div
+                  style="position:absolute;left:40%;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #6366f1;margin-left:-5px;">
+                </div>
+                <div
+                  style="position:absolute;left:60%;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #ef4444;margin-left:-5px;">
+                </div>
+              </div>
+            </div>
+            <!-- Proposal -->
+            <div style="cursor:pointer;" onclick="selectStageByName('Proposal/Price Quote')">
+              <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;">
+                <span>Proposal/Price Quote</span><span style="font-weight:600;color:#ef4444;">22天8时</span></div>
+              <div style="position:relative;height:28px;background:#eee;border-radius:3px;">
+                <div style="height:100%;width:74%;background:#ef4444;border-radius:4px;"></div>
+                <div
+                  style="position:absolute;left:50%;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #6366f1;margin-left:-5px;">
+                </div>
+                <div
+                  style="position:absolute;left:67%;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #ef4444;margin-left:-5px;">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><!-- 阶段切换区 -->
+      <div class="stage-tabs">
+        <div class="stage-tab active" onclick="switchStage(this,'Prospecting')">
+          <div class="stage-name">Prospecting</div>
+          <div><span class="stage-amount">$3.2M</span><span class="stage-count">(15)</span></div>
+          <div class="stage-sub"><span style="color:#16a34a;font-weight:700;">↑</span> $280K &nbsp; <span
+              style="color:#16a34a;font-weight:700;">↑</span> 3</div>
+        </div>
+        <div class="stage-tab" onclick="switchStage(this,'Needs Analysis')">
+          <div class="stage-name">Needs Analysis</div>
+          <div><span class="stage-amount">$1.8M</span><span class="stage-count">(7)</span></div>
+          <div class="stage-sub"><span style="color:#dc2626;font-weight:700;">↓</span> $320K &nbsp; <span
+              style="color:#dc2626;font-weight:700;">↓</span> 2</div>
+        </div>
+        <div class="stage-tab" onclick="switchStage(this,'Proposal/Price Quote')">
+          <div class="stage-name">Proposal/Price Quote</div>
+          <div><span class="stage-amount">$4.5M</span><span class="stage-count">(8)</span></div>
+          <div class="stage-sub"><span style="color:#16a34a;font-weight:700;">↑</span> $500K &nbsp; <span
+              style="color:#16a34a;font-weight:700;">↑</span> 3</div>
+        </div>
+        <div class="stage-tab" onclick="switchStage(this,'Closed Won')">
+          <div class="stage-name">Closed Won</div>
+          <div><span class="stage-amount">$1.6M</span><span class="stage-count">(3)</span></div>
+          <div class="stage-sub"><span style="color:#16a34a;font-weight:700;">↑</span> $400K &nbsp; <span
+              style="color:#16a34a;font-weight:700;">↑</span> 1</div>
+        </div>
+        <div class="stage-tab" onclick="switchStage(this,'Closed Lost')">
+          <div class="stage-name">Closed Lost</div>
+          <div><span class="stage-amount">$0.9M</span><span class="stage-count">(4)</span></div>
+          <div class="stage-sub"><span style="color:#dc2626;font-weight:700;">↓</span> $200K &nbsp; <span
+              style="color:#16a34a;font-weight:700;">↑</span> 2</div>
+        </div>
+      </div>
+      <!-- Pipeline 商机列表 -->
+      <div
+        style="background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow-x:auto;">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
+          <h3 id="pipelineListTitle" style="font-size:14px;font-weight:600;">Opportunity List — Open</h3>
+          <div style="font-size:13px;color:#666;">Total: <span style="font-weight:700;">$18,500,000</span> · 12
+            opportunities</div>
+        </div>
+        <div id="pipelineSortFilterBar" style="font-size:12px;color:#888;margin-bottom:12px;">Sorted by Amount ·
+          Filtered by Close Date, Current User, Open Pipeline</div>
+        <table style="width:100%;border-collapse:collapse;font-size:13px;">
+          <thead>
+            <tr style="background:#f8f9fa;border-bottom:2px solid #e5e7eb;">
+              <th style="padding:10px 12px;text-align:left;user-select:none;">Opportunity Name <span
+                  onclick="togglePipelineSort('name')" style="color:#ccc;font-size:10px;cursor:pointer;">⇅</span> <span
+                  onclick="togglePipelineFilter('name')" style="color:#ccc;font-size:10px;cursor:pointer;">▽</span></th>
+              <th style="padding:10px 12px;text-align:right;user-select:none;">Amount <span
+                  onclick="togglePipelineSort('amount')" style="color:#6366f1;font-size:10px;cursor:pointer;">↓</span>
+                <span onclick="togglePipelineFilter('amount')"
+                  style="color:#ccc;font-size:10px;cursor:pointer;">▽</span></th>
+              <th style="padding:10px 12px;text-align:center;user-select:none;">Close Date <span
+                  onclick="togglePipelineSort('closeDate')" style="color:#ccc;font-size:10px;cursor:pointer;">⇅</span>
+                <span onclick="togglePipelineFilter('closeDate')"
+                  style="color:#ccc;font-size:10px;cursor:pointer;">▽</span></th>
+              <th style="padding:10px 12px;text-align:center;user-select:none;">Stage <span
+                  onclick="togglePipelineSort('stage')" style="color:#ccc;font-size:10px;cursor:pointer;">⇅</span> <span
+                  onclick="togglePipelineFilter('stage')" style="color:#ccc;font-size:10px;cursor:pointer;">▽</span>
+              </th>
+              <th style="padding:10px 12px;text-align:center;user-select:none;">✨ AI Score <span
+                  onclick="togglePipelineSort('score')" style="color:#ccc;font-size:10px;cursor:pointer;">⇅</span> <span
+                  onclick="togglePipelineFilter('score')" style="color:#ccc;font-size:10px;cursor:pointer;">▽</span>
+              </th>
+              <th style="padding:10px 12px;text-align:center;user-select:none;">✨ AI Win Rate <span
+                  onclick="togglePipelineSort('winRate')" style="color:#ccc;font-size:10px;cursor:pointer;">⇅</span>
+                <span onclick="togglePipelineFilter('winRate')"
+                  style="color:#ccc;font-size:10px;cursor:pointer;">▽</span></th>
+              <th style="padding:10px 12px;text-align:center;user-select:none;">Last Activity <span
+                  onclick="togglePipelineSort('lastAct')" style="color:#ccc;font-size:10px;cursor:pointer;">⇅</span>
+                <span onclick="togglePipelineFilter('lastAct')"
+                  style="color:#ccc;font-size:10px;cursor:pointer;">▽</span></th>
+            </tr>
+          </thead>
+          <tbody id="pipelineOppBody"></tbody>
+        </table>
+      </div>
+    </div><!-- end Pipeline Tab -->
+    <!-- ========== Forecast Tab ========== -->
+    <div id="forecastTab" class="tab-panel">
+      <!-- M1.1 全局筛选栏 -->
+      <div class="filter-bar">
+        <div class="filter-group">
+          <label>Close Date</label>
+          <select id="forecastCloseDate">
+            <option>This Week</option>
+            <option>This Month</option>
+            <option selected>This Quarter</option>
+            <option value="Custom">Custom</option>
+          </select>
+          <span id="forecastCustomRange" style="display:none;font-size:12px;color:#6366f1;cursor:pointer;"
+            onclick="openDatePicker('forecast')"></span>
+        </div>
+        <div class="filter-group">
+          <label>Opportunity Owner</label>
+          <div class="owner-picker-wrap" id="forecastOwnerWrap">
+            <div class="owner-picker-trigger" onclick="toggleOwnerPicker('forecast')">
+              <span class="owner-selected-text" id="forecastOwnerText">Current User</span>
+              <span class="owner-arrow">▾</span>
+            </div>
+            <div class="owner-picker-dropdown" id="forecastOwnerDropdown">
+              <input type="text" class="owner-search" placeholder="Search people or departments..."
+                oninput="filterOwnerList('forecast',this.value)">
+              <div class="owner-section-label">People</div>
+              <div class="owner-item selected" data-name="Current User" onclick="toggleOwnerItem('forecast',this)"><span
+                  class="owner-check">✓</span><span class="owner-icon">👤</span>Current User</div>
+              <div class="owner-item" data-name="Alice" onclick="toggleOwnerItem('forecast',this)"><span
+                  class="owner-check"></span><span class="owner-icon">👤</span>Alice</div>
+              <div class="owner-item" data-name="Steve" onclick="toggleOwnerItem('forecast',this)"><span
+                  class="owner-check"></span><span class="owner-icon">👤</span>Steve</div>
+              <div class="owner-item" data-name="Chloe" onclick="toggleOwnerItem('forecast',this)"><span
+                  class="owner-check"></span><span class="owner-icon">👤</span>Chloe</div>
+              <div class="owner-section-label">Departments</div>
+              <div class="owner-item" data-name="Sales Dept" onclick="toggleOwnerItem('forecast',this)"><span
+                  class="owner-check"></span><span class="owner-icon">🏢</span>Sales Dept</div>
+              <div class="owner-item" data-name="Enterprise Team" onclick="toggleOwnerItem('forecast',this)"><span
+                  class="owner-check"></span><span class="owner-icon">🏢</span>Enterprise Team</div>
+            </div>
+          </div>
+        </div>
+        <div class="filter-group">
+          <label>Business Type</label>
+          <select>
+            <option>New Business</option>
+            <option>Renewal</option>
+            <option>Expansion</option>
+          </select>
+        </div>
+        <div class="filter-group">
+          <label>Changes Since <span class="help-tip">?<span class="help-tip-text">Sets the baseline date for tracking
+                changes in close date, amount, stage, etc.</span></span></label>
+          <select id="forecastChangesSince">
+            <option>Start of the Period</option>
+            <option value="Custom">Custom</option>
+          </select>
+          <span id="forecastChangesSinceDate" style="display:none;font-size:12px;color:#6366f1;cursor:pointer;"
+            onclick="openSingleDatePicker('forecast')"></span>
+        </div>
+      </div>
+      <!-- KPI + BI + Gap Closer 一行布局 -->
+      <div style="display:flex;gap:12px;margin-bottom:16px;align-items:stretch;">
+        <!-- M1.2 核心指标卡片 - 左侧，2x2网格 -->
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-width:0;">
+          <div class="kpi-card" style="padding:10px 12px;">
+            <div class="kpi-label">Quota</div>
+            <div class="kpi-value" style="font-size:16px;">$10,000,000</div>
+          </div>
+          <div class="kpi-card" style="padding:10px 12px;">
+            <div class="kpi-label">Closed</div>
+            <div class="kpi-value" style="font-size:16px;">$3,200,000</div>
+            <div class="kpi-sub negative">Gap: $6,800,000</div>
+          </div>
+          <div class="kpi-card" style="padding:10px 12px;">
+            <div class="kpi-label">Forecast</div>
+            <div class="kpi-value" style="font-size:16px;">$7,500,000</div>
+            <div class="kpi-sub negative">Gap: $2,500,000</div>
+          </div>
+          <div class="kpi-card" style="padding:10px 12px;">
+            <div class="kpi-label">✨ AI Forecast</div>
+            <div class="kpi-value" style="font-size:16px;">$6,800,000</div>
+            <div class="kpi-sub negative">Gap: $3,200,000</div>
+          </div>
+        </div>
+        <!-- M1.3 BI看板 - 中间 -->
+        <div class="bi-chart" style="flex:2;min-width:0;margin-bottom:0;padding:14px;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+            <h3 style="font-size:14px;font-weight:600;margin:0;">Forecast Overview</h3>
+            <span onclick="document.getElementById('forecastAiModal').style.display='flex'"
+              style="cursor:pointer;font-size:16px;" title="AI Analysis">✨</span>
+          </div>
+          <div style="display:flex;gap:16px;flex:1;align-items:flex-end;">
+            <div style="flex:1;position:relative;height:220px;padding:16px 16px 40px 50px;">
+              <!-- 纵轴刻度 -->
+              <div
+                style="position:absolute;left:0;top:20px;bottom:50px;width:50px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding-right:8px;font-size:11px;color:#999;">
+                <span>$10M</span><span>$8M</span><span>$6M</span><span>$4M</span><span>$2M</span><span>$0</span>
+              </div>
+              <!-- 网格线 -->
+              <div style="position:absolute;left:55px;right:20px;top:20px;bottom:50px;">
+                <div style="position:absolute;top:0%;width:100%;border-top:1px solid #eee;"></div>
+                <div style="position:absolute;top:20%;width:100%;border-top:1px solid #eee;"></div>
+                <div style="position:absolute;top:40%;width:100%;border-top:1px solid #eee;"></div>
+                <div style="position:absolute;top:60%;width:100%;border-top:1px solid #eee;"></div>
+                <div style="position:absolute;top:80%;width:100%;border-top:1px solid #eee;"></div>
+                <div style="position:absolute;top:100%;width:100%;border-top:1px solid #ccc;"></div>
+              </div>
+              <!-- Quota基准线 -->
+              <div style="position:absolute;left:55px;right:20px;top:20px;border-top:2.5px solid #22c55e;z-index:5;">
+                <span
+                  style="position:absolute;top:-18px;left:0;font-size:11px;background:#22c55e;color:#fff;padding:1px 8px;border-radius:3px;">Quota:
+                  $10M</span>
+              </div>
+              <!-- Forecast基准线 -->
+              <div style="position:absolute;left:55px;right:20px;top:68px;border-top:2px solid #8b5cf6;z-index:5;">
+                <span style="position:absolute;top:-16px;right:0;font-size:10px;color:#8b5cf6;">Forecast $7.5M</span>
+              </div>
+              <!-- AI基准线 -->
+              <div style="position:absolute;left:55px;right:20px;top:81px;border-top:2px dashed #a78bfa;z-index:5;">
+                <span style="position:absolute;top:-16px;right:80px;font-size:10px;color:#a78bfa;">✨ AI $6.8M</span>
+              </div>
+              <!-- 柱子区域 -->
+              <div
+                style="position:absolute;left:55px;right:20px;top:20px;bottom:50px;display:flex;align-items:flex-end;gap:0;">
+                <div style="flex:0 0 60px;display:flex;flex-direction:column;align-items:center;">
+                  <span style="font-size:11px;font-weight:600;color:#3b82f6;margin-bottom:4px;">$3.2M</span>
+                  <div style="width:50px;height:61px;background:#3b82f6;border-radius:4px 4px 0 0;"></div>
+                  <span style="font-size:10px;color:#666;margin-top:6px;">Closed</span>
+                </div>
+                <div style="flex:0 0 60px;display:flex;flex-direction:column;align-items:center;">
+                  <span style="font-size:11px;font-weight:600;color:#22c55e;margin-bottom:4px;">$2.5M</span>
+                  <div style="width:50px;margin-bottom:61px;">
+                    <div style="width:50px;height:47px;background:#22c55e;border-radius:4px 4px 0 0;"></div>
+                  </div>
+                  <span style="font-size:10px;color:#666;margin-top:6px;">Commit</span>
+                </div>
+                <div style="flex:0 0 60px;display:flex;flex-direction:column;align-items:center;">
+                  <span style="font-size:11px;font-weight:600;color:#10b981;margin-bottom:4px;">$1.8M</span>
+                  <div style="width:50px;margin-bottom:108px;">
+                    <div style="width:50px;height:34px;background:#10b981;border-radius:4px 4px 0 0;"></div>
+                  </div>
+                  <span style="font-size:10px;color:#666;margin-top:6px;">Best Case</span>
+                </div>
+                <div style="flex:0 0 60px;display:flex;flex-direction:column;align-items:center;">
+                  <span style="font-size:11px;font-weight:600;color:#93c5fd;margin-bottom:4px;">$2.5M</span>
+                  <div style="width:50px;margin-bottom:143px;">
+                    <div style="width:50px;height:47px;background:#93c5fd;border-radius:4px 4px 0 0;"></div>
+                  </div>
+                  <span style="font-size:10px;color:#666;margin-top:6px;">Pipeline</span>
+                </div>
+                <div style="flex:0 0 20px;"></div>
+                <div style="flex:0 0 60px;display:flex;flex-direction:column;align-items:center;">
+                  <span style="font-size:11px;font-weight:700;color:#6366f1;margin-bottom:4px;">$10M</span>
+                  <div
+                    style="width:50px;height:190px;background:linear-gradient(to top,#3b82f6 32%,#22c55e 32%,#22c55e 57%,#10b981 57%,#10b981 75%,#93c5fd 75%);border-radius:4px 4px 0 0;opacity:0.4;">
+                  </div>
+                  <span style="font-size:10px;color:#666;margin-top:6px;font-weight:600;">Total</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- M1.4 AI Gap Closer - 右侧，两张卡片上下排列 -->
+        <div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;">
+          <!-- Rescue Commit 卡片 -->
+          <div style="background:linear-gradient(135deg,#fff7ed,#ffedd5);border-radius:8px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-left:3px solid #f59e0b;flex:1;display:flex;flex-direction:column;justify-content:center;">
+            <div style="font-size:13px;font-weight:600;color:#92400e;margin-bottom:6px;">⚠ Rescue Commit</div>
+            <div style="margin-bottom:6px;"><span style="font-size:20px;font-weight:700;color:#333;">$1,200,000</span> <span style="font-size:11px;color:#888;">· 3 deals at risk</span></div>
+            <div style="font-size:11px;color:#78716c;margin-bottom:8px;">Committed deals not fully AI-backed, still worth rescuing</div>
+            <button onclick="openRescueDrawer()" style="padding:7px 14px;border:none;border-radius:6px;background:#f59e0b;color:#fff;cursor:pointer;font-size:12px;font-weight:600;width:100%;">View Deals</button>
+          </div>
+          <!-- Upgrade Candidates 卡片 -->
+          <div style="background:linear-gradient(135deg,#f0f0ff,#e8e8ff);border-radius:8px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-left:3px solid #6366f1;flex:1;display:flex;flex-direction:column;justify-content:center;">
+            <div style="font-size:13px;font-weight:600;color:#4338ca;margin-bottom:6px;">✨ Upgrade Candidates</div>
+            <div style="margin-bottom:6px;"><span style="font-size:20px;font-weight:700;color:#333;">$2,500,000</span> <span style="font-size:11px;color:#888;">· 4 deals to pull in</span></div>
+            <div style="font-size:11px;color:#78716c;margin-bottom:8px;">High win-rate deals from Open Pipeline worth upgrading to Commit</div>
+            <button onclick="openUpgradeDrawer()" style="padding:7px 14px;border:none;border-radius:6px;background:#6366f1;color:#fff;cursor:pointer;font-size:12px;font-weight:600;width:100%;">View Deals</button>
+          </div>
+        </div>
+      </div><!-- end KPI+BI+Gap row -->
+      <!-- Rescue Commit 抽屉 -->
+      <div id="rescueDrawer" style="display:none;position:fixed;top:0;right:0;width:460px;height:100%;background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,0.1);z-index:150;overflow-y:auto;padding:24px;">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+          <h3 style="font-size:16px;">⚠ Rescue Commit</h3>
+          <button onclick="closeRescueDrawer()" style="border:none;background:none;font-size:20px;cursor:pointer;">✕</button>
+        </div>
+        <div style="font-size:12px;color:#888;margin-bottom:16px;">3 deals · <span style="color:#ef4444;font-weight:600;">$1,200,000 at risk</span></div>
+        <div style="border:1px solid #fde68a;border-left:3px solid #f59e0b;border-radius:10px;padding:14px;margin-bottom:10px;" id="rescueCard1">
+          <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+            <div>
+              <div style="font-weight:600;font-size:14px;">Apollo Project</div>
+              <div style="font-size:12px;color:#888;">Huawei · $1,000,000</div>
+              <div style="font-size:11px;color:#888;margin-top:2px;"><span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Commit</span> · Close: 2026-04-15</div>
+            </div>
+            <span style="color:#f59e0b;font-weight:600;font-size:13px;">✨ 42%</span>
+          </div>
+          <div style="font-size:12px;color:#92400e;background:#fffbeb;padding:6px 8px;border-radius:4px;margin-bottom:10px;">⚠ Key sponsor left the company, engagement dropped significantly in last 14 days</div>
+          <div style="display:flex;gap:8px;">
+            <button onclick="prioritizeDeal('rescueCard1')" style="flex:1;padding:7px;border:none;border-radius:6px;background:#f59e0b;color:#fff;cursor:pointer;font-size:12px;font-weight:600;">Prioritize</button>
+            <button onclick="dismissRescueDeal('rescueCard1')" style="flex:1;padding:7px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#666;">Dismiss</button>
+          </div>
+        </div>
+        <div style="border:1px solid #fde68a;border-left:3px solid #f59e0b;border-radius:10px;padding:14px;margin-bottom:10px;" id="rescueCard2">
+          <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+            <div>
+              <div style="font-weight:600;font-size:14px;">Data Platform</div>
+              <div style="font-size:12px;color:#888;">JD.com · $120,000</div>
+              <div style="font-size:11px;color:#888;margin-top:2px;"><span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Commit</span> · Close: 2026-04-20</div>
+            </div>
+            <span style="color:#f59e0b;font-weight:600;font-size:13px;">✨ 38%</span>
+          </div>
+          <div style="font-size:12px;color:#92400e;background:#fffbeb;padding:6px 8px;border-radius:4px;margin-bottom:10px;">⚠ Close date pushed twice this quarter, activity level below similar deals</div>
+          <div style="display:flex;gap:8px;">
+            <button onclick="prioritizeDeal('rescueCard2')" style="flex:1;padding:7px;border:none;border-radius:6px;background:#f59e0b;color:#fff;cursor:pointer;font-size:12px;font-weight:600;">Prioritize</button>
+            <button onclick="dismissRescueDeal('rescueCard2')" style="flex:1;padding:7px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#666;">Dismiss</button>
+          </div>
+        </div>
+      </div>
+      <!-- Upgrade Candidates 抽屉 -->
+      <div id="upgradeDrawer" style="display:none;position:fixed;top:0;right:0;width:460px;height:100%;background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,0.1);z-index:150;overflow-y:auto;padding:24px;">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+          <h3 style="font-size:16px;">✨ Upgrade Candidates</h3>
+          <button onclick="closeUpgradeDrawer()" style="border:none;background:none;font-size:20px;cursor:pointer;">✕</button>
+        </div>
+        <div style="font-size:12px;color:#888;margin-bottom:16px;">4 deals · <span style="color:#6366f1;font-weight:600;">$2,500,000 potential</span></div>
+        <div style="border:1px solid #e5e7eb;border-left:3px solid #6366f1;border-radius:10px;padding:14px;margin-bottom:10px;" id="upgradeCard1">
+          <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+            <div>
+              <div style="font-weight:600;font-size:14px;">Aurora Solution</div>
+              <div style="font-size:12px;color:#888;">ByteDance · $800,000</div>
+              <div style="font-size:11px;color:#888;margin-top:2px;"><span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Best Case</span> · Close: 2026-04-30 · <span style="color:#6366f1;font-size:10px;font-weight:600;">↑ Upgrade to Commit</span></div>
+            </div>
+            <span style="color:#6366f1;font-weight:600;font-size:13px;">✨ 91%</span>
+          </div>
+          <div style="font-size:12px;color:#555;background:#f0f0ff;padding:6px 8px;border-radius:4px;margin-bottom:10px;">✨ Very high engagement and deal progressing faster than average</div>
+          <div style="display:flex;gap:8px;">
+            <button onclick="prioritizeDeal('upgradeCard1')" style="flex:1;padding:7px;border:none;border-radius:6px;background:#6366f1;color:#fff;cursor:pointer;font-size:12px;font-weight:600;">Prioritize</button>
+            <button onclick="dismissUpgradeDeal('upgradeCard1')" style="flex:1;padding:7px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#666;">Dismiss</button>
+          </div>
+        </div>
+        <div style="border:1px solid #e5e7eb;border-left:3px solid #6366f1;border-radius:10px;padding:14px;margin-bottom:10px;" id="upgradeCard2">
+          <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+            <div>
+              <div style="font-weight:600;font-size:14px;">Cloud Migration</div>
+              <div style="font-size:12px;color:#888;">Tencent · $1,700,000</div>
+              <div style="font-size:11px;color:#888;margin-top:2px;"><span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Pipeline</span> · Close: 2026-05-20 · <span style="color:#6366f1;font-size:10px;font-weight:600;">↑ Upgrade to Commit</span></div>
+            </div>
+            <span style="color:#6366f1;font-weight:600;font-size:13px;">✨ 78%</span>
+          </div>
+          <div style="font-size:12px;color:#555;background:#f0f0ff;padding:6px 8px;border-radius:4px;margin-bottom:10px;">✨ Strong engagement signals and past wins with this account</div>
+          <div style="display:flex;gap:8px;">
+            <button onclick="prioritizeDeal('upgradeCard2')" style="flex:1;padding:7px;border:none;border-radius:6px;background:#6366f1;color:#fff;cursor:pointer;font-size:12px;font-weight:600;">Prioritize</button>
+            <button onclick="dismissUpgradeDeal('upgradeCard2')" style="flex:1;padding:7px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#666;">Dismiss</button>
+          </div>
+        </div>
+      </div>
+      <!-- M1.5 预测矩阵表格 + M1.6 预测调整 -->
+      <div
+        style="background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow-x:auto;">
+        <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;">Forecast Grid</h3>
+        <table style="width:100%;border-collapse:collapse;font-size:13px;">
+          <thead>
+            <tr style="background:#f8f9fa;border-bottom:2px solid #e5e7eb;">
+              <th style="padding:10px 12px;text-align:left;">Name</th>
+              <th style="padding:10px 12px;text-align:right;">Quota</th>
+              <th style="padding:10px 12px;text-align:right;">✨ AI Forecast</th>
+              <th style="padding:10px 12px;text-align:right;">Closed</th>
+              <th style="padding:10px 12px;text-align:right;">Commit</th>
+              <th style="padding:10px 12px;text-align:right;">Best Case</th>
+              <th style="padding:10px 12px;text-align:right;">Pipeline</th>
+              <th style="padding:10px 12px;text-align:right;">Coverage</th>
+            </tr>
+          </thead>
+          <tbody id="matrixBody">
+          </tbody>
+        </table>
+      </div>
+      <!-- 商机明细列表（含Tab切换） -->
+      <div
+        style="background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow-x:auto;">
+        <!-- Tab切换 -->
+        <div style="display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid #e5e7eb;">
+          <button class="opp-tab-btn active" onclick="switchOppTab('watch')"
+            style="padding:8px 20px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:none;color:#6366f1;border-bottom:2px solid #6366f1;margin-bottom:-2px;">✨
+            Prioritized Deals</button>
+          <button class="opp-tab-btn" onclick="switchOppTab('all')"
+            style="padding:8px 20px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:none;color:#999;border-bottom:2px solid transparent;margin-bottom:-2px;">All
+            Opportunities</button>
+        </div>
+        <!-- Prioritized Deals Tab (默认显示) -->
+        <!-- All Opportunities Tab -->
+        <div id="oppTabAll" style="display:none;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+            <h3 id="oppListTitle" style="font-size:14px;font-weight:600;">Opportunity List</h3>
+            <div id="oppSummary" style="font-size:13px;color:#666;">Total: <span id="oppTotalAmount"
+                style="font-weight:700;color:#333;">$4,300,000</span> · <span id="oppTotalCount"
+                style="font-weight:600;">4</span> opportunities</div>
+          </div>
+          <table style="width:100%;border-collapse:collapse;font-size:13px;">
+            <thead>
+              <tr style="background:#f8f9fa;border-bottom:2px solid #e5e7eb;">
+                <th style="padding:10px 12px;text-align:left;">Opportunity Name</th>
+                <th style="padding:10px 12px;text-align:left;">Account</th>
+                <th style="padding:10px 12px;text-align:left;">Forecast Type</th>
+                <th style="padding:10px 12px;text-align:right;">Amount</th>
+                <th style="padding:10px 12px;text-align:center;">Close Date</th>
+                <th style="padding:10px 12px;text-align:center;">Stage</th>
+                <th style="padding:10px 12px;text-align:center;">✨ AI Score</th>
+                <th style="padding:10px 12px;text-align:center;">✨ AI Win Rate</th>
+                <th style="padding:10px 12px;text-align:center;">Last Activity</th>
+              </tr>
+            </thead>
+            <tbody id="oppBody"></tbody>
+          </table>
+        </div>
+        <!-- Prioritized Deals Tab -->
+        <div id="oppTabWatch">
+          <!-- 来源筛选Chips -->
+          <div style="display:flex;gap:8px;margin-bottom:16px;">
+            <button class="watch-sub-tab active" onclick="switchWatchSubTab('all')"
+              style="padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid #6366f1;background:#f0f0ff;color:#6366f1;border-radius:20px;">All (3)</button>
+            <button class="watch-sub-tab" onclick="switchWatchSubTab('rescue')"
+              style="padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid #ddd;background:#fff;color:#666;border-radius:20px;">Rescue (1)</button>
+            <button class="watch-sub-tab" onclick="switchWatchSubTab('upgrade')"
+              style="padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid #ddd;background:#fff;color:#666;border-radius:20px;">Upgrade (2)</button>
+          </div>
+          <!-- Prioritized Deals表格 -->
+          <table style="width:100%;border-collapse:collapse;font-size:13px;">
+            <thead>
+              <tr style="background:#f8f9fa;border-bottom:2px solid #e5e7eb;">
+                <th style="padding:10px 12px;text-align:left;">Opportunity Name</th>
+                <th style="padding:10px 12px;text-align:left;">Account</th>
+                <th style="padding:10px 12px;text-align:left;">Forecast Type</th>
+                <th style="padding:10px 12px;text-align:right;">Amount</th>
+                <th style="padding:10px 12px;text-align:center;">Close Date</th>
+                <th style="padding:10px 12px;text-align:center;">Stage</th>
+                <th style="padding:10px 12px;text-align:center;">✨ AI Score</th>
+                <th style="padding:10px 12px;text-align:center;">✨ AI Win Rate</th>
+                <th style="padding:10px 12px;text-align:center;">Last Activity</th>
+              </tr>
+            </thead>
+            <tbody id="prioritizedBody">
+              <tr style="border-bottom:1px solid #f0f0f0;" class="prioritized-row" data-source="rescue">
+                <td style="padding:10px 12px;font-weight:500;color:#3b82f6;cursor:pointer;">Apollo Project</td>
+                <td style="padding:10px 12px;">Huawei Tech</td>
+                <td style="padding:10px 12px;">Commit</td>
+                <td style="padding:10px 12px;text-align:right;">$1,000,000</td>
+                <td style="padding:10px 12px;text-align:center;">2026-04-15</td>
+                <td style="padding:10px 12px;text-align:center;">Negotiation</td>
+                <td style="padding:10px 12px;text-align:center;"><span style="background:#f59e0b;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;">Medium</span></td>
+                <td style="padding:10px 12px;text-align:center;color:#6366f1;font-weight:600;">42%</td>
+                <td style="padding:10px 12px;text-align:center;color:#999;">2026-03-28</td>
+              </tr>
+              <tr style="border-bottom:1px solid #f0f0f0;" class="prioritized-row" data-source="upgrade">
+                <td style="padding:10px 12px;font-weight:500;color:#3b82f6;cursor:pointer;">Aurora Solution</td>
+                <td style="padding:10px 12px;">ByteDance</td>
+                <td style="padding:10px 12px;">Best Case</td>
+                <td style="padding:10px 12px;text-align:right;">$800,000</td>
+                <td style="padding:10px 12px;text-align:center;">2026-04-30</td>
+                <td style="padding:10px 12px;text-align:center;">Proposal</td>
+                <td style="padding:10px 12px;text-align:center;"><span style="background:#22c55e;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;">High</span></td>
+                <td style="padding:10px 12px;text-align:center;color:#6366f1;font-weight:600;">91%</td>
+                <td style="padding:10px 12px;text-align:center;color:#999;">2026-03-29</td>
+              </tr>
+              <tr style="border-bottom:1px solid #f0f0f0;" class="prioritized-row" data-source="upgrade">
+                <td style="padding:10px 12px;font-weight:500;color:#3b82f6;cursor:pointer;">Cloud Migration</td>
+                <td style="padding:10px 12px;">Tencent</td>
+                <td style="padding:10px 12px;">Pipeline</td>
+                <td style="padding:10px 12px;text-align:right;">$1,700,000</td>
+                <td style="padding:10px 12px;text-align:center;">2026-05-20</td>
+                <td style="padding:10px 12px;text-align:center;">Discovery</td>
+                <td style="padding:10px 12px;text-align:center;"><span style="background:#f59e0b;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;">Medium</span></td>
+                <td style="padding:10px 12px;text-align:center;color:#6366f1;font-weight:600;">78%</td>
+                <td style="padding:10px 12px;text-align:center;color:#999;">2026-03-27</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div><!-- end Forecast Tab -->
+  </div><!-- end container -->
+  <!-- AI-Recommended Commit 抽屉 -->
+  <div id="aiCommitDrawer"
+    style="display:none;position:fixed;top:0;right:0;width:480px;height:100%;background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,0.1);z-index:150;overflow-y:auto;padding:24px;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
+      <h3 style="font-size:16px;">✨ AI Forecast</h3>
+      <button onclick="closeAICommitDrawer()"
+        style="border:none;background:none;font-size:20px;cursor:pointer;">✕</button>
+    </div>
+    <div style="font-size:12px;color:#888;margin-bottom:20px;"><span
+        style="font-weight:700;color:#6366f1;font-size:16px;">$6,800,000</span> <span style="margin-left:4px;">Based on deal health and engagement signals</span></div>
+    <!-- Closed Won 汇总 -->
+    <div style="background:#f8f9fa;border-radius:10px;padding:16px;margin-bottom:20px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;">
+        <div>
+          <div style="font-size:12px;color:#888;margin-bottom:2px;">Closed Won</div>
+          <div style="font-size:20px;font-weight:700;">$3,200,000</div>
+        </div>
+        <div style="font-size:12px;color:#999;">5 deals</div>
+      </div>
+    </div>
+    <!-- Tab切换 -->
+    <div style="display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid #e5e7eb;">
+      <button class="ai-commit-tab active" onclick="switchAICommitTab('pipeline')" style="padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:none;color:#6366f1;border-bottom:2px solid #6366f1;margin-bottom:-2px;">From Open Pipeline · $2,500,000 · 2 deals</button>
+      <button class="ai-commit-tab" onclick="switchAICommitTab('commit')" style="padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:none;color:#999;border-bottom:2px solid transparent;margin-bottom:-2px;">From Commit · $1,800,000 · 2 deals</button>
+    </div>
+    <!-- From Open Pipeline Tab -->
+    <div id="aiCommitPipelineTab">
+      <div style="border:1px solid #e5e7eb;border-left:3px solid #6366f1;border-radius:10px;padding:14px;margin-bottom:10px;">
+        <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+          <div>
+            <div style="font-weight:600;font-size:14px;">Starlight Initiative</div>
+            <div style="font-size:12px;color:#888;">Tencent · $500,000</div>
+          </div>
+          <span style="color:#6366f1;font-weight:600;font-size:13px;">✨ 52%</span>
+        </div>
+        <div style="font-size:12px;color:#999;">
+          <span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Pipeline</span>
+          <span style="margin-left:4px;">· Close: 2026-05-20</span>
+        </div>
+        <div style="font-size:12px;color:#666;background:#f8f9fa;padding:6px 8px;border-radius:4px;margin-top:6px;">Strong engagement signals and past wins with this account</div>
+      </div>
+      <div style="border:1px solid #e5e7eb;border-left:3px solid #6366f1;border-radius:10px;padding:14px;">
+        <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+          <div>
+            <div style="font-weight:600;font-size:14px;">Galaxy Partnership</div>
+            <div style="font-size:12px;color:#888;">Alibaba · $2,000,000</div>
+          </div>
+          <span style="color:#6366f1;font-weight:600;font-size:13px;">✨ 45%</span>
+        </div>
+        <div style="font-size:12px;color:#999;">
+          <span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Best Case</span>
+          <span style="margin-left:4px;">· Close: 2026-05-10</span>
+        </div>
+        <div style="font-size:12px;color:#666;background:#f8f9fa;padding:6px 8px;border-radius:4px;margin-top:6px;">High product usage and active engagement in last 7 days</div>
+      </div>
+    </div>
+    <!-- From Commit Tab -->
+    <div id="aiCommitCommitTab" style="display:none;">
+      <div style="border:1px solid #e5e7eb;border-radius:10px;padding:14px;margin-bottom:10px;">
+        <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+          <div>
+            <div style="font-weight:600;font-size:14px;">Aurora Solution</div>
+            <div style="font-size:12px;color:#888;">ByteDance · $800,000</div>
+          </div>
+          <span style="color:#6366f1;font-weight:600;font-size:13px;">✨ 91%</span>
+        </div>
+        <div style="font-size:12px;color:#999;">
+          <span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Commit</span>
+          <span style="margin-left:4px;">· Close: 2026-04-30</span>
+        </div>
+      </div>
+      <div style="border:1px solid #e5e7eb;border-radius:10px;padding:14px;">
+        <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">
+          <div>
+            <div style="font-weight:600;font-size:14px;">Apollo Project</div>
+            <div style="font-size:12px;color:#888;">Huawei Tech · $1,000,000</div>
+          </div>
+          <span style="color:#6366f1;font-weight:600;font-size:13px;">✨ 86%</span>
+        </div>
+        <div style="font-size:12px;color:#999;">
+          <span style="background:#f0f0f0;padding:1px 6px;border-radius:3px;font-size:10px;">Commit</span>
+          <span style="margin-left:4px;">· Close: 2026-04-15</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- ===== 全局Tooltip元素（Tab外部，始终可访问） ===== -->
+  <!-- Score Hover卡片 with radar chart -->
+  <div id="scoreTooltip"
+    style="display:none;position:fixed;background:#fff;border-radius:10px;padding:20px;width:360px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;">
+    <div style="font-weight:700;font-size:14px;margin-bottom:8px;">✨ Opportunity Score: <span id="stScore">High</span>
+    </div>
+    <div style="color:#666;font-size:12px;margin-bottom:12px;" id="stSummary">Customer has clear needs and budget
+      allocated.</div>
+    <canvas id="radarCanvas" width="200" height="200" style="display:block;margin:0 auto 12px;"></canvas>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;">
+      <div style="display:flex;justify-content:space-between;padding:4px 8px;background:#f8f9fa;border-radius:4px;">
+        <span>需求</span><span id="stDemand" style="font-weight:600;">优秀</span></div>
+      <div style="display:flex;justify-content:space-between;padding:4px 8px;background:#f8f9fa;border-radius:4px;">
+        <span>决策链</span><span id="stDecision" style="font-weight:600;">良好</span></div>
+      <div style="display:flex;justify-content:space-between;padding:4px 8px;background:#f8f9fa;border-radius:4px;">
+        <span>预算和采购流程</span><span id="stBudget" style="font-weight:600;">合格</span></div>
+      <div style="display:flex;justify-content:space-between;padding:4px 8px;background:#f8f9fa;border-radius:4px;">
+        <span>竞争</span><span id="stCompete" style="font-weight:600;">良好</span></div>
+    </div>
+  </div>
+  <!-- AI Win Rate Hover卡片 -->
+  <div id="winRateTooltip"
+    style="display:none;position:fixed;background:#fff;border-radius:10px;padding:16px;width:320px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;">
+    <div style="font-weight:600;font-size:12px;color:#888;margin-bottom:10px;">Baseline Probability <span
+        id="ttBaseline">86%</span></div>
+    <hr style="border:none;border-top:1px solid #eee;margin:8px 0;">
+    <div style="font-weight:600;margin-bottom:4px;">Positive Factors</div>
+    <div style="color:#22c55e;margin-bottom:8px;" id="ttPositives"></div>
+    <hr style="border:none;border-top:1px solid #eee;margin:8px 0;">
+    <div style="font-weight:600;margin-bottom:4px;">Negative Factors</div>
+    <div style="color:#ef4444;margin-bottom:8px;" id="ttNegatives"></div>
+    <hr style="border:none;border-top:1px solid #eee;margin:8px 0;">
+    <div style="display:flex;justify-content:space-between;font-weight:700;font-size:16px;"><span>AI Win
+        Rate</span><span id="ttWinRate" style="color:#6366f1;">86%</span></div>
+  </div>
+  <!-- 变动详情Hover卡片 -->
+  <div id="changeTooltip"
+    style="display:none;position:fixed;background:#fff;border-radius:10px;padding:16px;width:280px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;">
+    <div style="font-weight:700;font-size:14px;" id="ctTitle">Stage progressed</div>
+    <div style="margin:6px 0;color:#333;" id="ctDetail">Discovery → <span
+        style="color:#ec4899;font-weight:600;">Solution Fit</span></div>
+    <div style="color:#999;font-size:12px;" id="ctMeta">Changed on Jan 24, 2024</div>
+  </div>
+  <!-- Commit Hover卡片 -->
+  <div id="commitTooltip"
+    style="display:none;position:fixed;background:#fff;border-radius:10px;padding:0;width:320px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;overflow:hidden;">
+    <div style="border-top:3px solid #22c55e;padding:16px;">
+      <div style="display:flex;justify-content:space-between;align-items:start;">
+        <div>
+          <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
+            <span id="cmArrowIcon"
+              style="background:#22c55e;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;">↑</span>
+            <span style="font-weight:700;font-size:14px;" id="cmTitle">Value increased by $200K</span>
+          </div>
+          <div style="color:#333;margin-bottom:8px;" id="cmRange"></div>
+          <div style="color:#999;font-size:12px;" id="cmDate">Updated on Mar 25, 2026</div>
+        </div>
+        <span style="color:#999;cursor:pointer;font-size:16px;"
+          onclick="document.getElementById('commitTooltip').style.display='none'">✕</span>
+      </div>
+    </div>
+  </div>
+  <!-- AI Suggest Category Tooltip -->
+  <div id="fcSuggestTooltip"
+    style="display:none;position:fixed;background:#fff;border-radius:10px;padding:14px;width:300px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;border-left:3px solid #6366f1;">
+    <div style="font-weight:600;color:#6366f1;" id="fcSuggestText">✨ AI recommends: Commit</div>
+    <div style="color:#666;font-size:12px;margin-top:4px;" id="fcSuggestReason">Based on high product usage</div>
+  </div>
+  <!-- Risk Warning Tooltip -->
+  <div id="fcRiskTooltip"
+    style="display:none;position:fixed;background:#fff;border-radius:10px;padding:14px;width:300px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;border-left:3px solid #ef4444;">
+    <div style="font-weight:600;color:#ef4444;">✨ AI suggests De-commit</div>
+    <div style="color:#666;font-size:12px;margin-top:4px;" id="fcRiskReason"></div>
+  </div>
+  <!-- AI Forecast Hover卡片 -->
+  <div id="aiForecastTooltip"
+    style="display:none;position:fixed;background:#fff;border-radius:10px;padding:16px;width:280px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;">
+    <div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>Closed Won</span><span
+        id="afClosed" style="font-weight:600;"></span></div>
+    <div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>AI-Recommended Commit</span><span
+        id="afPredicted" style="font-weight:600;"></span></div>
+    <hr style="border:none;border-top:1px solid #eee;margin:8px 0;">
+    <div style="display:flex;justify-content:space-between;font-weight:700;"><span>Total AI Forecast</span><span
+        id="afTotal" style="color:#6366f1;"></span></div>
+  </div>
+  <script>
+    // 模拟数据
+    const people = [
+      { name: 'Alice', quota: 3000000, ai: 2400000, coverage: '2.8x', closed: 1200000, commit: 1800000, pulledIn: 800000, pulledInPct: 27, pulledInArrow: 'up', bestcase: 2500000, pipeline: 8400000, closedPct: 40, commitPct: 60, closedArrow: 'up', closedFrom: 1080000, commitArrow: 'up', commitFrom: 1600000, bestArrow: 'down', bestFrom: 2700000, pipeArrow: 'up', pipeFrom: 7900000 },
+      { name: 'Steve', quota: 3500000, ai: 2800000, coverage: '3.1x', closed: 800000, commit: 2200000, pulledIn: 500000, pulledInPct: 14, pulledInArrow: '', bestcase: 3000000, pipeline: 10850000, closedPct: 23, commitPct: 63, closedArrow: 'up', closedFrom: 600000, commitArrow: 'down', commitFrom: 2500000, bestArrow: 'up', bestFrom: 2600000, pipeArrow: 'up', pipeFrom: 10200000 },
+      { name: 'Chloe', quota: 3500000, ai: 1600000, coverage: '2.5x', closed: 1200000, commit: 1500000, pulledIn: 300000, pulledInPct: 9, pulledInArrow: 'up', bestcase: 2300000, pipeline: 8750000, closedPct: 34, commitPct: 43, closedArrow: '', closedFrom: 1200000, commitArrow: 'up', commitFrom: 1300000, bestArrow: '', bestFrom: 2300000, pipeArrow: 'down', pipeFrom: 9100000 }
+    ];
+    const opps = [
+      { name: 'Apollo Project', account: 'Huawei Tech', amount: 1000000, amtArrow: 'up', amtChange: { title: 'Amount increased', from: '$800,000', to: '$1,000,000', date: 'Mar 28, 2026' }, close: '2026-04-15', closeArrow: 'down', closeChange: { title: 'Close Date decreased', from: 'Mar 30', to: 'Apr 15', date: 'Mar 25, 2026' }, stage: 'Negotiation', stageArrow: 'up', stageChange: { title: 'Stage increased', from: 'Proposal', to: 'Negotiation', date: 'Mar 20, 2026' }, score: 'High', scoreColor: '#22c55e', scoreDims: { demand: '优秀', decision: '良好', budget: '合格', compete: '良好' }, scoreSummary: 'Customer has clear needs and budget allocated. Decision chain identified but not fully engaged.', winRate: '86%', lastAct: '2026-03-28 14:32:05', baseline: '80%', pos: 'Opportunity amount keeps going up. +6%<br>Past wins with this account. +4%', neg: 'Moving slowly vs historical velocity. -4%' },
+      { name: 'Starlight Initiative', account: 'Tencent', amount: 500000, amtArrow: '', amtChange: null, close: '2026-04-20', closeArrow: '', closeChange: null, stage: 'Needs Analysis', stageArrow: '', stageChange: null, score: 'Medium', scoreColor: '#f59e0b', scoreDims: { demand: '良好', decision: '风险', budget: '风险', compete: '合格' }, scoreSummary: 'Demand is validated but no executive sponsor. Budget and procurement process unclear.', winRate: '52%', lastAct: '2026-03-25 09:15:22', baseline: '59%', pos: 'Strong engagement signals. +8%', neg: 'No executive sponsor identified. -10%<br>Deal size above average for this stage. -5%' },
+      { name: 'Galaxy Partnership', account: 'Alibaba', amount: 2000000, amtArrow: 'down', amtChange: { title: 'Amount decreased', from: '$2,500,000', to: '$2,000,000', date: 'Mar 27, 2026' }, close: '2026-05-10', closeArrow: '', closeChange: null, stage: 'Proposal', stageArrow: 'up', stageChange: { title: 'Stage increased', from: 'Prospecting', to: 'Proposal', date: 'Mar 26, 2026' }, score: 'Medium', scoreColor: '#f59e0b', scoreDims: { demand: '合格', decision: '良好', budget: '合格', compete: '风险' }, scoreSummary: 'Strong competitor presence. Budget confirmed but procurement timeline is long.', winRate: '45%', lastAct: '2026-03-27 16:48:37', baseline: '54%', pos: 'Past wins with this account. +5%', neg: 'Opportunity is moving slowly. -8%<br>Low activity count. -6%' },
+      { name: 'Aurora Solution', account: 'ByteDance', amount: 800000, amtArrow: '', amtChange: null, close: '2026-04-30', closeArrow: 'up', closeChange: { title: 'Close Date increased', from: 'May 15', to: 'Apr 30', date: 'Mar 28, 2026' }, stage: 'Commit', stageArrow: '', stageChange: null, score: 'High', scoreColor: '#22c55e', scoreDims: { demand: '优秀', decision: '优秀', budget: '良好', compete: '优秀' }, scoreSummary: 'All dimensions strong. Executive sponsor fully engaged. No significant competition.', winRate: '91%', lastAct: '2026-03-29 11:05:18', baseline: '78%', pos: 'Very high engagement. +10%<br>Deal progressing faster than average. +5%', neg: 'Slightly above average deal size. -2%' }
+    ];
+    function fmt(n) { return '$' + n.toLocaleString(); }
+    // Add forecastType to opps
+    opps[0].forecastType = 'Commit';
+    opps[0].riskWarning = 'NPS dropped to 4, key sponsor left';
+    opps[0].isPrioritized = true;
+    opps[1].forecastType = 'Pipeline';
+    opps[2].forecastType = 'Best Case';
+    opps[2].aiSuggest = { cat: 'Commit', reason: 'Based on high product usage' };
+    opps[2].isPrioritized = false;
+    opps[3].forecastType = 'Commit';
+    function arrow(dir) { return dir === 'up' ? '<span style="color:#22c55e;font-weight:700;">↑</span>' : dir === 'down' ? '<span style="color:#ef4444;font-weight:700;">↓</span>' : ''; }
+    function pctBar(pct, quota) {
+      const color = pct >= 80 ? '#22c55e' : pct >= 50 ? '#f59e0b' : '#ef4444';
+      return '<div style="display:flex;align-items:center;gap:6px;margin-top:4px;"><span style="font-size:11px;color:#999;min-width:30px;">' + pct + '%</span><div style="flex:1;height:6px;background:#eee;border-radius:3px;"><div style="height:6px;border-radius:3px;background:' + color + ';width:' + Math.min(pct, 100) + '%;"></div></div></div>';
+    }
+  </script>
+  <script>
+    // 渲染矩阵表格
+    function renderMatrix() {
+      const body = document.getElementById('matrixBody');
+      body.innerHTML = '';
+      people.forEach(p => {
+        const tr = document.createElement('tr');
+        tr.style.borderBottom = '1px solid #f0f0f0';
+        tr.innerHTML = `
+      <td style="padding:12px;font-weight:600;">${p.name}</td>
+      <td style="padding:12px;text-align:right;">${fmt(p.quota)}</td>
+      <td style="padding:12px;text-align:right;cursor:pointer;color:#3b82f6;" class="ai-forecast-cell" data-name="${p.name}" data-closed="${p.closed}" data-predicted="${p.ai - p.closed}" data-total="${p.ai}" onclick="openAICommitDrawer()">${fmt(p.ai)}</td>
+      <td style="padding:12px;text-align:right;cursor:pointer;" onclick="filterOpps('${p.name}','Closed')">
+        ${fmt(p.closed)} ${arrow(p.closedArrow)}
+        ${pctBar(p.closedPct)}
+      </td>
+      <td style="padding:12px;text-align:right;cursor:pointer;" onclick="filterOpps('${p.name}','Commit')" class="commit-cell" data-name="${p.name}" data-commit="${p.commit}" data-orig="${p.commit - 200000}" data-arrow="${p.commitArrow}">
+        ${fmt(p.commit)} ${arrow(p.commitArrow)}
+        ${pctBar(p.commitPct)}
+      </td>
+      <td style="padding:12px;text-align:right;cursor:pointer;" onclick="filterOpps('${p.name}','Best Case')">
+        ${fmt(p.bestcase)} ${arrow(p.bestArrow)}
+      </td>
+      <td style="padding:12px;text-align:right;cursor:pointer;" onclick="filterOpps('${p.name}','Pipeline')">${fmt(p.pipeline)} ${arrow(p.pipeArrow)}</td>
+      <td style="padding:12px;text-align:right;">${p.coverage}</td>
+    `;
+        // Hover卡片 (Closed/BestCase/Pipeline) - 仅有箭头时展示
+        tr.querySelectorAll('td').forEach((td, i) => {
+          if (i === 3 || i === 5 || i === 6) {
+            const arrowDir = (i === 3 && p.closedArrow) || (i === 5 && p.bestArrow) || (i === 6 && p.pipeArrow);
+            const fieldName = i === 3 ? 'Closed' : i === 5 ? 'Best Case' : 'Pipeline';
+            if (arrowDir) {
+              td.addEventListener('mouseenter', function (e) {
+                const dir = i === 3 ? p.closedArrow : i === 5 ? p.bestArrow : p.pipeArrow;
+                const fromVal = i === 3 ? p.closedFrom : i === 5 ? p.bestFrom : p.pipeFrom;
+                const toVal = i === 3 ? p.closed : i === 5 ? p.bestcase : p.pipeline;
+                showHoverCardDynamic(e, fieldName, dir, fromVal, toVal);
+              });
+              td.addEventListener('mouseleave', hideHoverCard);
+            }
+          }
+        });
+        // Commit cell hover - 仅有箭头时展示，使用统一卡片样式
+        const commitCell = tr.querySelector('.commit-cell');
+        if (commitCell && p.commitArrow) {
+          commitCell.addEventListener('mouseenter', function (e) {
+            const commit = parseInt(this.dataset.commit);
+            const orig = parseInt(this.dataset.orig);
+            const diff = commit - orig;
+            const isUp = diff >= 0;
+            if (!hoverCard) {
+              hoverCard = document.createElement('div');
+              hoverCard.style.cssText = 'position:fixed;background:#fff;border-radius:10px;padding:14px;width:280px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;pointer-events:none;';
+              document.body.appendChild(hoverCard);
+            }
+            hoverCard.innerHTML = '<div style="font-weight:700;margin-bottom:6px;">Commit ' + (isUp ? 'increased' : 'decreased') + '</div><div>' + fmt(orig) + ' → <span style="color:#ec4899;font-weight:600;">' + fmt(commit) + '</span></div><div style="color:#999;font-size:11px;margin-top:6px;">Changed on Mar 25, 2026</div>';
+            hoverCard.style.display = 'block';
+            hoverCard.style.left = (e.clientX + 12) + 'px';
+            hoverCard.style.top = (e.clientY + 12) + 'px';
+          });
+          commitCell.addEventListener('mouseleave', hideHoverCard);
+        }
+        // AI Forecast cell hover
+        const aiCell = tr.querySelector('.ai-forecast-cell');
+        if (aiCell) {
+          aiCell.addEventListener('mouseenter', function (e) {
+            const tt = document.getElementById('aiForecastTooltip');
+            tt.querySelector('#afClosed').textContent = fmt(parseInt(this.dataset.closed));
+            tt.querySelector('#afPredicted').textContent = fmt(parseInt(this.dataset.predicted));
+            tt.querySelector('#afTotal').textContent = fmt(parseInt(this.dataset.total));
+            tt.style.display = 'block';
+            tt.style.left = (e.clientX + 12) + 'px';
+            tt.style.top = (e.clientY + 12) + 'px';
+          });
+          aiCell.addEventListener('mouseleave', function () {
+            document.getElementById('aiForecastTooltip').style.display = 'none';
+          });
+        }
+        body.appendChild(tr);
+      });
+    }
+    // 渲染商机列表
+    function renderOpps(filter) {
+      const body = document.getElementById('oppBody');
+      const title = document.getElementById('oppListTitle');
+      title.textContent = filter ? `Opportunity List — ${filter}` : 'Opportunity List';
+      body.innerHTML = '';
+      let totalAmt = 0;
+      opps.forEach(o => { totalAmt += o.amount; });
+      opps.forEach(o => {
+        const tr = document.createElement('tr');
+        tr.style.borderBottom = '1px solid #f0f0f0';
+        tr.innerHTML = `
+      <td style="padding:10px 12px;font-weight:500;color:#3b82f6;cursor:pointer;">${o.name}</td>
+      <td style="padding:10px 12px;">${o.account}</td>
+      <td style="padding:10px 12px;text-align:left;">${o.forecastType || 'Pipeline'}${o.aiSuggest ? '<span class="fc-suggest" data-cat="' + o.aiSuggest.cat + '" data-reason="' + o.aiSuggest.reason + '" style="cursor:pointer;margin-left:4px;">✨</span>' : ''}${o.riskWarning ? '<span class="fc-risk" data-msg="' + o.riskWarning + '" style="cursor:pointer;margin-left:4px;">⚠️</span>' : ''}${(o.aiSuggest || o.riskWarning) && o.isPrioritized ? '<span style="background:#e5e7eb;color:#666;padding:1px 6px;border-radius:3px;font-size:10px;margin-left:4px;">Prioritized</span>' : ''}</td>
+      <td style="padding:10px 12px;text-align:right;">
+        ${fmt(o.amount)} ${o.amtArrow ? '<span class="change-arrow" data-type="amt" data-idx="' + opps.indexOf(o) + '">' + arrow(o.amtArrow) + '</span>' : ''}
+      </td>
+      <td style="padding:10px 12px;text-align:center;">
+        ${o.close} ${o.closeArrow ? '<span class="change-arrow" data-type="close" data-idx="' + opps.indexOf(o) + '">' + arrow(o.closeArrow) + '</span>' : ''}
+      </td>
+      <td style="padding:10px 12px;text-align:center;">
+        ${o.stage} ${o.stageArrow ? '<span class="change-arrow" data-type="stage" data-idx="' + opps.indexOf(o) + '">' + arrow(o.stageArrow) + '</span>' : ''}
+      </td>
+      <td style="padding:10px 12px;text-align:center;cursor:pointer;" class="score-cell" data-idx="${opps.indexOf(o)}"><span style="background:${o.scoreColor};color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;">${o.score}</span></td>
+      <td style="padding:10px 12px;text-align:center;cursor:pointer;color:#6366f1;font-weight:600;" class="win-rate" data-idx="${opps.indexOf(o)}">${o.winRate}</td>
+      <td style="padding:10px 12px;text-align:center;color:#333;">${o.lastAct}</td>
+    `;
+        body.appendChild(tr);
+      });
+      bindTooltips();
+    }
+  </script>
+  <script>
+    // 交互函数
+    function setFilter(btn) {
+      btn.parentElement.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+    }
+    function refreshData() { renderMatrix(); renderOpps(); }
+    function filterOpps(name, category) {
+      // 自动切回All Opportunities Tab
+      switchOppTab('all');
+      document.getElementById('oppListTitle').textContent = `Opportunity List — ${name} / ${category}`;
+    }
+    // 商机列表Tab切换
+    function switchOppTab(tab) {
+      const allTab = document.getElementById('oppTabAll');
+      const watchTab = document.getElementById('oppTabWatch');
+      const btns = document.querySelectorAll('.opp-tab-btn');
+      if (tab === 'watch') {
+        watchTab.style.display = 'block';
+        allTab.style.display = 'none';
+        btns[0].style.color = '#6366f1';
+        btns[0].style.borderBottomColor = '#6366f1';
+        btns[1].style.color = '#999';
+        btns[1].style.borderBottomColor = 'transparent';
+      } else {
+        watchTab.style.display = 'none';
+        allTab.style.display = 'block';
+        btns[0].style.color = '#999';
+        btns[0].style.borderBottomColor = 'transparent';
+        btns[1].style.color = '#6366f1';
+        btns[1].style.borderBottomColor = '#6366f1';
+      }
+    }
+    // Prioritized Deals 来源筛选
+    function switchWatchSubTab(sub) {
+      document.querySelectorAll('.watch-sub-tab').forEach(b => {
+        b.style.border = '1px solid #ddd'; b.style.background = '#fff'; b.style.color = '#666';
+      });
+      event.target.style.border = '1px solid #6366f1'; event.target.style.background = '#f0f0ff'; event.target.style.color = '#6366f1';
+      document.querySelectorAll('.prioritized-row').forEach(row => {
+        if (sub === 'all') { row.style.display = ''; }
+        else { row.style.display = row.dataset.source === sub ? '' : 'none'; }
+      });
+    }
+    function openGapDrawer() { document.getElementById('gapDrawer').style.display = 'block'; }
+    function closeGapDrawer() { document.getElementById('gapDrawer').style.display = 'none'; }
+    function openRescueDrawer() { document.getElementById('rescueDrawer').style.display = 'block'; }
+    function closeRescueDrawer() { document.getElementById('rescueDrawer').style.display = 'none'; }
+    function openUpgradeDrawer() { document.getElementById('upgradeDrawer').style.display = 'block'; }
+    function closeUpgradeDrawer() { document.getElementById('upgradeDrawer').style.display = 'none'; }
+    function prioritizeDeal(cardId) {
+      const card = document.getElementById(cardId);
+      card.style.background = '#f0fdf4';
+      card.style.borderColor = '#22c55e';
+      card.querySelectorAll('button')[0].textContent = '✓ Prioritized';
+      card.querySelectorAll('button')[0].style.background = '#22c55e';
+      card.querySelectorAll('button')[1].style.display = 'none';
+    }
+    function dismissRescueDeal(cardId) {
+      const card = document.getElementById(cardId);
+      card.style.opacity = '0.4';
+      card.style.pointerEvents = 'none';
+    }
+    function dismissUpgradeDeal(cardId) {
+      const card = document.getElementById(cardId);
+      card.style.opacity = '0.4';
+      card.style.pointerEvents = 'none';
+    }
+    function openAICommitDrawer() { document.getElementById('aiCommitDrawer').style.display = 'block'; }
+    function closeAICommitDrawer() { document.getElementById('aiCommitDrawer').style.display = 'none'; }
+    function switchAICommitTab(tab) {
+      document.querySelectorAll('.ai-commit-tab').forEach(b => {
+        b.style.color = '#999'; b.style.borderBottomColor = 'transparent';
+      });
+      if (tab === 'pipeline') {
+        document.querySelectorAll('.ai-commit-tab')[0].style.color = '#6366f1';
+        document.querySelectorAll('.ai-commit-tab')[0].style.borderBottomColor = '#6366f1';
+        document.getElementById('aiCommitPipelineTab').style.display = 'block';
+        document.getElementById('aiCommitCommitTab').style.display = 'none';
+      } else {
+        document.querySelectorAll('.ai-commit-tab')[1].style.color = '#6366f1';
+        document.querySelectorAll('.ai-commit-tab')[1].style.borderBottomColor = '#6366f1';
+        document.getElementById('aiCommitPipelineTab').style.display = 'none';
+        document.getElementById('aiCommitCommitTab').style.display = 'block';
+      }
+    }
+    function acceptDeal(id) {
+      const card = document.getElementById('gapCard' + id);
+      card.style.background = '#f0fdf4';
+      card.style.borderColor = '#22c55e';
+      card.querySelector('button:first-child').textContent = '✓ Following';
+      card.querySelector('button:first-child').style.background = '#22c55e';
+      card.querySelector('button:last-child').style.display = 'none';
+    }
+    function dismissDeal(id) {
+      const card = document.getElementById('gapCard' + id);
+      card.style.opacity = '0.4';
+      card.style.pointerEvents = 'none';
+    }
+    // Hover卡片 - 矩阵
+    // Hover卡片 - 矩阵
+    let hoverCard = null;
+    function showHoverCardDynamic(e, fieldName, dir, fromVal, toVal) {
+      if (!hoverCard) {
+        hoverCard = document.createElement('div');
+        hoverCard.style.cssText = 'position:fixed;background:#fff;border-radius:10px;padding:14px;width:280px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:200;font-size:13px;pointer-events:none;';
+        document.body.appendChild(hoverCard);
+      }
+      var word = dir === 'up' ? 'increased' : 'decreased';
+      var valHtml = (fromVal !== undefined && toVal !== undefined) ? '<div>' + fmt(fromVal) + ' → <span style="color:#ec4899;font-weight:600;">' + fmt(toVal) + '</span></div>' : '';
+      hoverCard.innerHTML = '<div style="font-weight:700;margin-bottom:6px;">' + fieldName + ' ' + word + '</div>' + valHtml + '<div style="color:#999;font-size:11px;margin-top:6px;">Changed on Mar 28, 2026</div>';
+      hoverCard.style.display = 'block';
+      hoverCard.style.left = (e.clientX + 12) + 'px';
+      hoverCard.style.top = (e.clientY + 12) + 'px';
+    }
+    function hideHoverCard() { if (hoverCard) hoverCard.style.display = 'none'; }
+    // Tooltips - 商机列表
+    function bindTooltips() {
+      // Score hover
+      const scoreMap = { '优秀': 4, '良好': 3, '合格': 2, '风险': 1 };
+      const scoreColorMap = { '优秀': '#22c55e', '良好': '#3b82f6', '合格': '#f59e0b', '风险': '#ef4444' };
+      document.querySelectorAll('.score-cell').forEach(el => {
+        el.addEventListener('mouseenter', function (e) {
+          const idx = this.dataset.idx;
+          const o = opps[idx];
+          const st = document.getElementById('scoreTooltip');
+          st.querySelector('#stScore').textContent = o.score;
+          st.querySelector('#stScore').style.color = o.scoreColor;
+          st.querySelector('#stSummary').textContent = o.scoreSummary;
+          st.querySelector('#stDemand').textContent = o.scoreDims.demand;
+          st.querySelector('#stDemand').style.color = scoreColorMap[o.scoreDims.demand];
+          st.querySelector('#stDecision').textContent = o.scoreDims.decision;
+          st.querySelector('#stDecision').style.color = scoreColorMap[o.scoreDims.decision];
+          st.querySelector('#stBudget').textContent = o.scoreDims.budget;
+          st.querySelector('#stBudget').style.color = scoreColorMap[o.scoreDims.budget];
+          st.querySelector('#stCompete').textContent = o.scoreDims.compete;
+          st.querySelector('#stCompete').style.color = scoreColorMap[o.scoreDims.compete];
+          // Draw radar
+          const canvas = document.getElementById('radarCanvas');
+          const ctx = canvas.getContext('2d');
+          ctx.clearRect(0, 0, 200, 200);
+          const cx = 100, cy = 100, r = 70;
+          const dims = [o.scoreDims.demand, o.scoreDims.decision, o.scoreDims.budget, o.scoreDims.compete];
+          const vals = dims.map(d => scoreMap[d] / 4);
+          const labels = ['需求', '决策链', '预算/采购', '竞争'];
+          const angles = dims.map((_, i) => (Math.PI * 2 * i / 4) - Math.PI / 2);
+          // Grid
+          [0.25, 0.5, 0.75, 1].forEach(s => {
+            ctx.beginPath();
+            angles.forEach((a, i) => { const x = cx + Math.cos(a) * r * s; const y = cy + Math.sin(a) * r * s; i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); });
+            ctx.closePath(); ctx.strokeStyle = '#e5e7eb'; ctx.stroke();
+          });
+          // Axes
+          angles.forEach(a => { ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + Math.cos(a) * r, cy + Math.sin(a) * r); ctx.strokeStyle = '#e5e7eb'; ctx.stroke(); });
+          // Data
+          ctx.beginPath();
+          angles.forEach((a, i) => { const x = cx + Math.cos(a) * r * vals[i]; const y = cy + Math.sin(a) * r * vals[i]; i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); });
+          ctx.closePath(); ctx.fillStyle = 'rgba(99,102,241,0.2)'; ctx.fill(); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 2; ctx.stroke();
+          // Labels
+          ctx.fillStyle = '#666'; ctx.font = '11px sans-serif'; ctx.textAlign = 'center';
+          labels.forEach((l, i) => { const x = cx + Math.cos(angles[i]) * (r + 16); const y = cy + Math.sin(angles[i]) * (r + 16) + 4; ctx.fillText(l, x, y); });
+          st.style.display = 'block';
+          st.style.left = (e.clientX - 370) + 'px';
+          st.style.top = (e.clientY - 100) + 'px';
+        });
+        el.addEventListener('mouseleave', function () {
+          document.getElementById('scoreTooltip').style.display = 'none';
+        });
+      });
+      // AI Win Rate hover
+      document.querySelectorAll('.win-rate').forEach(el => {
+        el.addEventListener('mouseenter', function (e) {
+          const idx = this.dataset.idx;
+          const o = opps[idx];
+          const tt = document.getElementById('winRateTooltip');
+          tt.querySelector('#ttBaseline').textContent = o.baseline;
+          tt.querySelector('#ttPositives').innerHTML = o.pos;
+          tt.querySelector('#ttNegatives').innerHTML = o.neg;
+          tt.querySelector('#ttWinRate').textContent = o.winRate;
+          tt.style.display = 'block';
+          tt.style.left = (e.clientX - 330) + 'px';
+          tt.style.top = (e.clientY - 20) + 'px';
+        });
+        el.addEventListener('mouseleave', function () {
+          document.getElementById('winRateTooltip').style.display = 'none';
+        });
+      });
+      // 变动箭头hover
+      document.querySelectorAll('.change-arrow').forEach(el => {
+        el.style.cursor = 'pointer';
+        el.addEventListener('mouseenter', function (e) {
+          const idx = this.dataset.idx;
+          const type = this.dataset.type;
+          const o = opps[idx];
+          const change = type === 'amt' ? o.amtChange : type === 'close' ? o.closeChange : o.stageChange;
+          if (!change) return;
+          const ct = document.getElementById('changeTooltip');
+          ct.querySelector('#ctTitle').textContent = change.title;
+          ct.querySelector('#ctDetail').innerHTML = change.from + ' → <span style="color:#ec4899;font-weight:600;">' + change.to + '</span>';
+          ct.querySelector('#ctMeta').textContent = 'Changed on ' + change.date;
+          ct.style.display = 'block';
+          ct.style.left = (e.clientX + 12) + 'px';
+          ct.style.top = (e.clientY + 12) + 'px';
+        });
+        el.addEventListener('mouseleave', function () {
+          document.getElementById('changeTooltip').style.display = 'none';
+        });
+      });
+      // AI Suggest hover
+      document.querySelectorAll('.fc-suggest').forEach(el => {
+        el.addEventListener('mouseenter', function (e) {
+          const tt = document.getElementById('fcSuggestTooltip');
+          tt.querySelector('#fcSuggestText').textContent = '✨ AI recommends: ' + this.dataset.cat;
+          tt.querySelector('#fcSuggestReason').textContent = this.dataset.reason;
+          tt.style.display = 'block';
+          tt.style.left = (e.clientX + 12) + 'px';
+          tt.style.top = (e.clientY + 12) + 'px';
+        });
+        el.addEventListener('mouseleave', function () {
+          document.getElementById('fcSuggestTooltip').style.display = 'none';
+        });
+      });
+      // Risk Warning click
+      document.querySelectorAll('.fc-risk').forEach(el => {
+        el.addEventListener('click', function (e) {
+          e.stopPropagation();
+          const tt = document.getElementById('fcRiskTooltip');
+          tt.querySelector('#fcRiskReason').textContent = this.dataset.msg;
+          tt.style.display = tt.style.display === 'block' ? 'none' : 'block';
+          tt.style.left = (e.clientX + 12) + 'px';
+          tt.style.top = (e.clientY + 12) + 'px';
+        });
+      });
+    }
+    // KPI卡片点击联动
+    function filterPipelineByKpi(type) {
+      const labels = { open: 'Open Pipeline', new: 'New', won: 'Won', lost: 'Lost', overdue: 'Overdue', amtChanged: 'Amount Changed', dateChanged: 'Close Date Changed' };
+      document.getElementById('pipelineListTitle').textContent = 'Opportunity List — ' + (labels[type] || type);
+      renderPipelineOpps(type);
+    }
+    // Tab切换
+    function switchTab(tab) {
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+      document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+      if (tab === 'pipeline') {
+        document.querySelectorAll('.tab-btn')[0].classList.add('active');
+        document.getElementById('pipelineTab').classList.add('active');
+        document.getElementById('pageDesc').textContent = 'Pipeline: Review your opportunity funnel and deal health';
+        renderPipelineOpps('Open');
+      } else {
+        document.querySelectorAll('.tab-btn')[1].classList.add('active');
+        document.getElementById('forecastTab').classList.add('active');
+        document.getElementById('pageDesc').textContent = 'Forecast: Monitor quota attainment, review team forecasts, and uncover risks';
+      }
+    }
+    // 阶段切换
+    function switchStage(el, stage) {
+      document.querySelectorAll('.stage-tab').forEach(t => t.classList.remove('active'));
+      el.classList.add('active');
+      document.getElementById('pipelineListTitle').textContent = 'Opportunity List — ' + stage;
+      renderPipelineOpps(stage);
+    }
+    // 看板区点击联动阶段切换区
+    function selectStageByName(stageName) {
+      const tabs = document.querySelectorAll('.stage-tab');
+      tabs.forEach(tab => {
+        const name = tab.querySelector('.stage-name').textContent.trim();
+        if (name === stageName) {
+          switchStage(tab, stageName);
+        }
+      });
+    }
+    // Pipeline商机数据
+    const pipelineOpps = [
+      { name: 'Apollo Project', type: 'Commit', account: 'Huawei Tech', amount: 1000000, amtArrow: 'up', amtChange: { title: 'Amount increased', from: '$800,000', to: '$1,000,000', date: 'Mar 28, 2026' }, close: '2026-04-15', closeArrow: 'down', closeChange: { title: 'Close Date decreased', from: 'Mar 30', to: 'Apr 15', date: 'Mar 25, 2026' }, stage: 'Negotiation', stageArrow: 'up', stageChange: { title: 'Stage increased', from: 'Proposal', to: 'Negotiation', date: 'Mar 20, 2026' }, score: 'High', scoreColor: '#22c55e', scoreDims: { demand: '优秀', decision: '良好', budget: '合格', compete: '良好' }, scoreSummary: 'Customer has clear needs and budget allocated.', winRate: '86%', baseline: '80%', pos: 'Opportunity amount keeps going up. +6%<br>Past wins with this account. +4%', neg: 'Moving slowly vs historical velocity. -4%', lastAct: '2026-03-28 14:32:05' },
+      { name: 'Starlight Initiative', type: 'Pipeline', account: 'Tencent', amount: 500000, amtArrow: '', amtChange: null, close: '2026-04-20', closeArrow: '', closeChange: null, stage: 'Needs Analysis', stageArrow: '', stageChange: null, score: 'Medium', scoreColor: '#f59e0b', scoreDims: { demand: '良好', decision: '风险', budget: '风险', compete: '合格' }, scoreSummary: 'No executive sponsor. Budget unclear.', winRate: '52%', baseline: '59%', pos: 'Strong engagement signals. +8%', neg: 'No executive sponsor identified. -10%<br>Deal size above average. -5%', lastAct: '2026-03-25 09:15:22' },
+      { name: 'Galaxy Partnership', type: 'Best Case', account: 'Alibaba', amount: 2000000, amtArrow: 'down', amtChange: { title: 'Amount decreased', from: '$2,500,000', to: '$2,000,000', date: 'Mar 27, 2026' }, close: '2026-05-10', closeArrow: '', closeChange: null, stage: 'Proposal', stageArrow: 'up', stageChange: { title: 'Stage increased', from: 'Prospecting', to: 'Proposal', date: 'Mar 26, 2026' }, score: 'Medium', scoreColor: '#f59e0b', scoreDims: { demand: '合格', decision: '良好', budget: '合格', compete: '风险' }, scoreSummary: 'Strong competitor. Procurement timeline long.', winRate: '45%', baseline: '54%', pos: 'Past wins with this account. +5%', neg: 'Moving slowly. -8%<br>Low activity count. -6%', lastAct: '2026-03-27 16:48:37' },
+      { name: 'Aurora Solution', type: 'Commit', account: 'ByteDance', amount: 800000, amtArrow: '', amtChange: null, close: '2026-04-30', closeArrow: 'up', closeChange: { title: 'Close Date increased', from: 'May 15', to: 'Apr 30', date: 'Mar 28, 2026' }, stage: 'Commit', stageArrow: '', stageChange: null, score: 'High', scoreColor: '#22c55e', scoreDims: { demand: '优秀', decision: '优秀', budget: '良好', compete: '优秀' }, scoreSummary: 'All dimensions strong. No significant competition.', winRate: '91%', baseline: '78%', pos: 'Very high engagement. +10%<br>Progressing faster than average. +5%', neg: 'Slightly above average deal size. -2%', lastAct: '2026-03-29 11:05:18' },
+      { name: 'Cloud Migration', type: 'Pipeline', account: 'Meituan', amount: 1700000, amtArrow: '', amtChange: null, close: '2026-05-20', closeArrow: '', closeChange: null, stage: 'Prospecting', stageArrow: '', stageChange: null, score: 'Low', scoreColor: '#ef4444', scoreDims: { demand: '合格', decision: '风险', budget: '风险', compete: '风险' }, scoreSummary: 'Early stage. No decision maker identified.', winRate: '28%', baseline: '45%', pos: 'Large deal size potential. +3%', neg: 'No activity in 14 days. -12%<br>No sponsor. -8%', lastAct: '2026-03-20 08:22:41' },
+      { name: 'Data Platform', type: 'Best Case', account: 'JD.com', amount: 3500000, amtArrow: 'up', amtChange: { title: 'Amount increased', from: '$3,000,000', to: '$3,500,000', date: 'Mar 28, 2026' }, close: '2026-04-25', closeArrow: 'down', closeChange: { title: 'Close Date decreased', from: 'Apr 15', to: 'Apr 25', date: 'Mar 26, 2026' }, stage: 'Proposal', stageArrow: 'up', stageChange: { title: 'Stage increased', from: 'Needs Analysis', to: 'Proposal', date: 'Mar 25, 2026' }, score: 'High', scoreColor: '#22c55e', scoreDims: { demand: '优秀', decision: '良好', budget: '良好', compete: '合格' }, scoreSummary: 'Strong demand. Budget approved. Moderate competition.', winRate: '78%', baseline: '72%', pos: 'Amount increasing. +5%<br>High engagement. +8%', neg: 'Close date pushed. -7%', lastAct: '2026-03-28 14:32:05' }
+    ];
+    function renderPipelineOpps(stage) {
+      const body = document.getElementById('pipelineOppBody');
+      body.innerHTML = '';
+      const scoreMap = { '优秀': 4, '良好': 3, '合格': 2, '风险': 1 };
+      pipelineOpps.forEach((o, idx) => {
+        const tr = document.createElement('tr');
+        tr.style.borderBottom = '1px solid #f0f0f0';
+        const arrowHtml = (dir) => dir === 'up' ? '<span style="color:#22c55e;font-weight:700;margin-left:4px;">↑</span>' : dir === 'down' ? '<span style="color:#ef4444;font-weight:700;margin-left:4px;">↓</span>' : '';
+        tr.innerHTML = `
+      <td style="padding:10px 12px;font-weight:500;color:#3b82f6;cursor:pointer;">${o.name} <span style="color:#ccc;font-size:11px;cursor:pointer;" title="Edit">✏️</span></td>
+      <td style="padding:10px 12px;text-align:right;">$${o.amount.toLocaleString()} <span style="color:#ccc;font-size:11px;cursor:pointer;" title="Edit">✏️</span>${o.amtArrow ? '<span class="pl-change" data-type="amt" data-idx="' + idx + '" style="cursor:pointer;">' + arrowHtml(o.amtArrow) + '</span>' : ''}</td>
+      <td style="padding:10px 12px;text-align:center;">${o.close} <span style="color:#ccc;font-size:11px;cursor:pointer;" title="Edit">✏️</span>${o.closeArrow ? '<span class="pl-change" data-type="close" data-idx="' + idx + '" style="cursor:pointer;">' + arrowHtml(o.closeArrow) + '</span>' : ''}</td>
+      <td style="padding:10px 12px;text-align:center;">${o.stage}${o.stageArrow ? '<span class="pl-change" data-type="stage" data-idx="' + idx + '" style="cursor:pointer;">' + arrowHtml(o.stageArrow) + '</span>' : ''}</td>
+      <td style="padding:10px 12px;text-align:center;cursor:pointer;" class="pl-score" data-idx="${idx}"><span style="background:${o.scoreColor};color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;">${o.score}</span></td>
+      <td style="padding:10px 12px;text-align:center;cursor:pointer;color:#333;" class="pl-winrate" data-idx="${idx}" style="color:#333;">${o.winRate}</td>
+      <td style="padding:10px 12px;text-align:center;color:#333;">${o.lastAct}</td>
+    `;
+        body.appendChild(tr);
+      });
+      bindPipelineTooltips();
+    }
+    function bindPipelineTooltips() {
+      const scoreMap = { '优秀': 4, '良好': 3, '合格': 2, '风险': 1 };
+      const scoreColorMap = { '优秀': '#22c55e', '良好': '#3b82f6', '合格': '#f59e0b', '风险': '#ef4444' };
+      // Amount/CloseDate/Stage change arrows
+      document.querySelectorAll('.pl-change').forEach(el => {
+        el.addEventListener('mouseenter', function (e) {
+          const idx = this.dataset.idx;
+          const type = this.dataset.type;
+          const o = pipelineOpps[idx];
+          const change = type === 'amt' ? o.amtChange : type === 'close' ? o.closeChange : o.stageChange;
+          if (!change) return;
+          const ct = document.getElementById('changeTooltip');
+          ct.querySelector('#ctTitle').textContent = change.title;
+          ct.querySelector('#ctDetail').innerHTML = change.from + ' → <span style="color:#ec4899;font-weight:600;">' + change.to + '</span>';
+          ct.querySelector('#ctMeta').textContent = 'Changed on ' + change.date;
+          ct.style.display = 'block';
+          ct.style.left = (e.clientX + 12) + 'px';
+          ct.style.top = (e.clientY + 12) + 'px';
+        });
+        el.addEventListener('mouseleave', function () {
+          document.getElementById('changeTooltip').style.display = 'none';
+        });
+      });
+      // Score hover
+      document.querySelectorAll('.pl-score').forEach(el => {
+        el.addEventListener('mouseenter', function (e) {
+          const o = pipelineOpps[this.dataset.idx];
+          const st = document.getElementById('scoreTooltip');
+          st.querySelector('#stScore').textContent = o.score;
+          st.querySelector('#stScore').style.color = o.scoreColor;
+          st.querySelector('#stSummary').textContent = o.scoreSummary;
+          st.querySelector('#stDemand').textContent = o.scoreDims.demand;
+          st.querySelector('#stDemand').style.color = scoreColorMap[o.scoreDims.demand];
+          st.querySelector('#stDecision').textContent = o.scoreDims.decision;
+          st.querySelector('#stDecision').style.color = scoreColorMap[o.scoreDims.decision];
+          st.querySelector('#stBudget').textContent = o.scoreDims.budget;
+          st.querySelector('#stBudget').style.color = scoreColorMap[o.scoreDims.budget];
+          st.querySelector('#stCompete').textContent = o.scoreDims.compete;
+          st.querySelector('#stCompete').style.color = scoreColorMap[o.scoreDims.compete];
+          const canvas = document.getElementById('radarCanvas');
+          const ctx = canvas.getContext('2d');
+          ctx.clearRect(0, 0, 200, 200);
+          const cx = 100, cy = 100, r = 70;
+          const dims = [o.scoreDims.demand, o.scoreDims.decision, o.scoreDims.budget, o.scoreDims.compete];
+          const vals = dims.map(d => scoreMap[d] / 4);
+          const labels = ['需求', '决策链', '预算/采购', '竞争'];
+          const angles = dims.map((_, i) => (Math.PI * 2 * i / 4) - Math.PI / 2);
+          [0.25, 0.5, 0.75, 1].forEach(s => { ctx.beginPath(); angles.forEach((a, i) => { const x = cx + Math.cos(a) * r * s; const y = cy + Math.sin(a) * r * s; i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); }); ctx.closePath(); ctx.strokeStyle = '#e5e7eb'; ctx.stroke(); });
+          angles.forEach(a => { ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + Math.cos(a) * r, cy + Math.sin(a) * r); ctx.strokeStyle = '#e5e7eb'; ctx.stroke(); });
+          ctx.beginPath(); angles.forEach((a, i) => { const x = cx + Math.cos(a) * r * vals[i]; const y = cy + Math.sin(a) * r * vals[i]; i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); }); ctx.closePath(); ctx.fillStyle = 'rgba(99,102,241,0.2)'; ctx.fill(); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 2; ctx.stroke();
+          ctx.fillStyle = '#666'; ctx.font = '11px sans-serif'; ctx.textAlign = 'center';
+          labels.forEach((l, i) => { ctx.fillText(l, cx + Math.cos(angles[i]) * (r + 16), cy + Math.sin(angles[i]) * (r + 16) + 4); });
+          st.style.display = 'block';
+          st.style.left = (e.clientX - 370) + 'px';
+          st.style.top = (e.clientY - 100) + 'px';
+        });
+        el.addEventListener('mouseleave', function () { document.getElementById('scoreTooltip').style.display = 'none'; });
+      });
+      // AI Win Rate hover
+      document.querySelectorAll('.pl-winrate').forEach(el => {
+        el.addEventListener('mouseenter', function (e) {
+          const o = pipelineOpps[this.dataset.idx];
+          const tt = document.getElementById('winRateTooltip');
+          tt.querySelector('#ttBaseline').textContent = o.baseline;
+          tt.querySelector('#ttPositives').innerHTML = o.pos;
+          tt.querySelector('#ttNegatives').innerHTML = o.neg;
+          tt.querySelector('#ttWinRate').textContent = o.winRate;
+          tt.style.display = 'block';
+          tt.style.left = (e.clientX - 330) + 'px';
+          tt.style.top = (e.clientY - 20) + 'px';
+        });
+        el.addEventListener('mouseleave', function () { document.getElementById('winRateTooltip').style.display = 'none'; });
+      });
+    }
+    // 初始化
+    renderPipelineOpps('Open');
+    renderMatrix();
+    renderOpps();
+  </script>
+  <!-- AI分析弹窗 - Pipeline Funnel -->
+  <div id="funnelAiModal"
+    style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:300;justify-content:center;align-items:center;"
+    onclick="if(event.target===this)this.style.display='none'">
+    <div style="background:#fff;border-radius:12px;padding:24px;width:480px;box-shadow:0 20px 60px rgba(0,0,0,0.2);">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+        <h3 style="font-size:16px;">✨ AI Insight</h3>
+        <span onclick="document.getElementById('funnelAiModal').style.display='none'"
+          style="cursor:pointer;font-size:20px;color:#999;">✕</span>
+      </div>
+      <div style="font-size:13px;color:#555;line-height:1.8;">
+        Proposal stage holds the largest amount ($4.5M), accounting for 40.5% of total pipeline. Consider reviewing deal
+        progression speed in this stage to prevent stagnation.<br><br>
+        Closed Won conversion rate is 10.0% from Prospecting — below the historical average of 15%. The drop-off between
+        Needs Analysis and Proposal suggests qualification criteria may need tightening.
+      </div>
+    </div>
+  </div>
+  <!-- AI分析弹窗 - Avg. Time in Stage -->
+  <div id="stageTimeAiModal"
+    style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:300;justify-content:center;align-items:center;"
+    onclick="if(event.target===this)this.style.display='none'">
+    <div style="background:#fff;border-radius:12px;padding:24px;width:480px;box-shadow:0 20px 60px rgba(0,0,0,0.2);">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+        <h3 style="font-size:16px;">✨ AI Insight</h3>
+        <span onclick="document.getElementById('stageTimeAiModal').style.display='none'"
+          style="cursor:pointer;font-size:20px;color:#999;">✕</span>
+      </div>
+      <div style="font-size:13px;color:#555;line-height:1.8;">
+        Proposal stage avg. time (22d 8h) exceeds the limit of 20 days. 3 deals have been stuck for over 25 days —
+        recommend checking decision chain engagement.<br><br>
+        Prospecting stage is performing well at 8d 6h, within the target of 10 days. Needs Analysis shows early signs of
+        delay at 15d 12h, approaching the limit threshold.
+      </div>
+    </div>
+  </div>
+  <!-- AI分析弹窗 - Forecast Overview -->
+  <div id="forecastAiModal"
+    style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:300;justify-content:center;align-items:center;"
+    onclick="if(event.target===this)this.style.display='none'">
+    <div style="background:#fff;border-radius:12px;padding:24px;width:480px;box-shadow:0 20px 60px rgba(0,0,0,0.2);">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+        <h3 style="font-size:16px;">✨ AI Insight</h3>
+        <span onclick="document.getElementById('forecastAiModal').style.display='none'"
+          style="cursor:pointer;font-size:20px;color:#999;">✕</span>
+      </div>
+      <div style="border-left:4px solid #6366f1; padding-left:16px;">
+        <div style="font-size:13px;font-weight:600;color:#6366f1;margin-bottom:8px;">Current Status</div>
+        <div style="font-size:13px;color:#555;line-height:1.8;">
+          Current forecast ($7.5M) covers 75% of quota. AI predicts $6.8M — a $700K gap vs. team commit.<br><br>
+          Steve's coverage (3.1x) is strong but commit rate is low at 23%, suggest reviewing deal quality and ensuring
+          high-score deals are properly prioritized in the commit list.
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 日期范围选择弹窗 -->
+  <div id="datePickerOverlay" class="date-picker-overlay" onclick="if(event.target===this)closeDatePicker()">
+    <div class="date-picker-modal">
+      <div class="date-picker-header">
+        <div id="dpStartBox" class="date-input-box" onclick="dpFocus='start'"><span>Select date</span><span>📅</span>
+        </div>
+        <div id="dpEndBox" class="date-input-box" onclick="dpFocus='end'"><span>Select date</span><span>📅</span></div>
+      </div>
+      <div class="date-picker-body">
+        <div class="calendar">
+          <div class="calendar-nav">
+            <span onclick="dpNav(-12,'left')">«</span>
+            <span onclick="dpNav(-1,'left')">‹</span>
+            <span id="dpLeftTitle">Mar 2026</span>
+            <span onclick="dpNav(1,'left')">›</span>
+            <span onclick="dpNav(12,'left')">»</span>
+          </div>
+          <div class="calendar-grid" id="dpLeftGrid"></div>
+        </div>
+        <div class="calendar">
+          <div class="calendar-nav">
+            <span onclick="dpNav(-12,'right')">«</span>
+            <span onclick="dpNav(-1,'right')">‹</span>
+            <span id="dpRightTitle">Mar 2026</span>
+            <span onclick="dpNav(1,'right')">›</span>
+            <span onclick="dpNav(12,'right')">»</span>
+          </div>
+          <div class="calendar-grid" id="dpRightGrid"></div>
+        </div>
+      </div>
+      <div class="date-picker-footer">
+        <button onclick="confirmDatePicker()">OK</button>
+      </div>
+    </div>
+  </div>
+  <!-- 单日期选择弹窗（Changes Since） -->
+  <div id="singleDateOverlay" class="date-picker-overlay" onclick="if(event.target===this)closeSingleDatePicker()">
+    <div class="date-picker-modal" style="width:360px;">
+      <div class="date-picker-header">
+        <div id="sdpDateBox" class="date-input-box"><span>Select date</span><span>📅</span></div>
+      </div>
+      <div class="date-picker-body">
+        <div class="calendar" style="flex:1;">
+          <div class="calendar-nav">
+            <span onclick="sdpNav(-12)">«</span>
+            <span onclick="sdpNav(-1)">‹</span>
+            <span id="sdpTitle">Mar 2026</span>
+            <span onclick="sdpNav(1)">›</span>
+            <span onclick="sdpNav(12)">»</span>
+          </div>
+          <div class="calendar-grid" id="sdpGrid"></div>
+        </div>
+      </div>
+      <div class="date-picker-footer">
+        <button onclick="confirmSingleDatePicker()">OK</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 日期范围选择器逻辑
+    let dpSource = 'pipeline'; // 当前触发来源
+    let dpFocus = 'start'; // 当前聚焦：start / end
+    let dpStartDate = null;
+    let dpEndDate = null;
+    let dpLeftMonth = new Date(2026, 2, 1); // Mar 2026
+    let dpRightMonth = new Date(2026, 2, 1);
+    const dpMonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    function onCloseDateChange(sel) {
+      if (sel.value === 'Custom') {
+        dpSource = sel.id === 'forecastCloseDate' ? 'forecast' : 'pipeline';
+        openDatePicker(dpSource);
+      }
+    }
+    function openDatePicker(source) {
+      dpSource = source;
+      dpStartDate = null;
+      dpEndDate = null;
+      dpFocus = 'start';
+      dpLeftMonth = new Date(2026, 2, 1);
+      dpRightMonth = new Date(2026, 2, 1);
+      document.getElementById('dpStartBox').querySelector('span').textContent = 'Select date';
+      document.getElementById('dpStartBox').classList.remove('has-value');
+      document.getElementById('dpEndBox').querySelector('span').textContent = 'Select date';
+      document.getElementById('dpEndBox').classList.remove('has-value');
+      renderCalendars();
+      document.getElementById('datePickerOverlay').style.display = 'block';
+    }
+    function closeDatePicker() {
+      document.getElementById('datePickerOverlay').style.display = 'none';
+      // 如果没选日期，恢复下拉为This Quarter
+      if (!dpStartDate || !dpEndDate) {
+        const sel = document.getElementById(dpSource === 'forecast' ? 'forecastCloseDate' : 'pipelineCloseDate');
+        sel.value = 'This Quarter';
+        const rangeSpan = document.getElementById(dpSource === 'forecast' ? 'forecastCustomRange' : 'pipelineCustomRange');
+        rangeSpan.style.display = 'none';
+      }
+    }
+    function dpNav(offset, side) {
+      if (side === 'left') {
+        dpLeftMonth = new Date(dpLeftMonth.getFullYear(), dpLeftMonth.getMonth() + offset, 1);
+      } else {
+        dpRightMonth = new Date(dpRightMonth.getFullYear(), dpRightMonth.getMonth() + offset, 1);
+      }
+      renderCalendars();
+    }
+    function renderCalendars() {
+      renderOneCalendar('dpLeftGrid', 'dpLeftTitle', dpLeftMonth);
+      renderOneCalendar('dpRightGrid', 'dpRightTitle', dpRightMonth);
+    }
+    function renderOneCalendar(gridId, titleId, monthDate) {
+      const grid = document.getElementById(gridId);
+      const title = document.getElementById(titleId);
+      const year = monthDate.getFullYear();
+      const month = monthDate.getMonth();
+      title.textContent = dpMonthNames[month] + '  ' + year;
+      let html = '';
+      ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].forEach(d => { html += '<div class="day-header">' + d + '</div>'; });
+      const firstDay = new Date(year, month, 1).getDay();
+      const daysInMonth = new Date(year, month + 1, 0).getDate();
+      const prevDays = new Date(year, month, 0).getDate();
+      const today = new Date();
+      // 上月尾部
+      for (let i = firstDay - 1; i >= 0; i--) {
+        html += '<div class="day other-month">' + (prevDays - i) + '</div>';
+      }
+      // 本月
+      for (let d = 1; d <= daysInMonth; d++) {
+        const date = new Date(year, month, d);
+        let cls = 'day';
+        if (date.toDateString() === today.toDateString()) cls += ' today';
+        if (dpStartDate && date.toDateString() === dpStartDate.toDateString()) cls += ' selected';
+        if (dpEndDate && date.toDateString() === dpEndDate.toDateString()) cls += ' selected';
+        if (dpStartDate && dpEndDate && date > dpStartDate && date < dpEndDate) cls += ' in-range';
+        html += '<div class="' + cls + '" onclick="dpSelectDay(' + year + ',' + month + ',' + d + ')">' + d + '</div>';
+      }
+      // 下月头部
+      const totalCells = firstDay + daysInMonth;
+      const remaining = (7 - totalCells % 7) % 7;
+      for (let i = 1; i <= remaining; i++) {
+        html += '<div class="day other-month">' + i + '</div>';
+      }
+      grid.innerHTML = html;
+    }
+    function dpSelectDay(y, m, d) {
+      const date = new Date(y, m, d);
+      if (dpFocus === 'start') {
+        dpStartDate = date;
+        if (dpEndDate && dpEndDate < dpStartDate) dpEndDate = null;
+        dpFocus = 'end';
+      } else {
+        if (date < dpStartDate) {
+          dpStartDate = date;
+        } else {
+          dpEndDate = date;
+        }
+      }
+      // 更新输入框
+      if (dpStartDate) {
+        document.getElementById('dpStartBox').querySelector('span').textContent = fmtDate(dpStartDate);
+        document.getElementById('dpStartBox').classList.add('has-value');
+      }
+      if (dpEndDate) {
+        document.getElementById('dpEndBox').querySelector('span').textContent = fmtDate(dpEndDate);
+        document.getElementById('dpEndBox').classList.add('has-value');
+      }
+      renderCalendars();
+    }
+    function fmtDate(d) {
+      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+    }
+    function confirmDatePicker() {
+      if (!dpStartDate || !dpEndDate) return;
+      const rangeText = fmtDate(dpStartDate) + ' ~ ' + fmtDate(dpEndDate);
+      const rangeSpan = document.getElementById(dpSource === 'forecast' ? 'forecastCustomRange' : 'pipelineCustomRange');
+      rangeSpan.textContent = rangeText;
+      rangeSpan.style.display = 'inline';
+      document.getElementById('datePickerOverlay').style.display = 'none';
+    }
+    // 绑定Close Date下拉事件
+    document.getElementById('pipelineCloseDate').addEventListener('change', function () {
+      if (this.value === 'Custom') { openDatePicker('pipeline'); }
+    });
+    document.getElementById('forecastCloseDate').addEventListener('change', function () {
+      if (this.value === 'Custom') { openDatePicker('forecast'); }
+    });
+    // Owner选人选部门组件（多选）
+    function toggleOwnerPicker(source) {
+      const dd = document.getElementById(source + 'OwnerDropdown');
+      const isOpen = dd.classList.contains('open');
+      document.querySelectorAll('.owner-picker-dropdown').forEach(d => d.classList.remove('open'));
+      if (!isOpen) {
+        dd.classList.add('open');
+        dd.querySelector('.owner-search').value = '';
+        dd.querySelectorAll('.owner-item').forEach(item => item.style.display = '');
+      }
+    }
+    function toggleOwnerItem(source, el) {
+      el.classList.toggle('selected');
+      const check = el.querySelector('.owner-check');
+      check.textContent = el.classList.contains('selected') ? '✓' : '';
+      updateOwnerText(source);
+    }
+    function updateOwnerText(source) {
+      const wrap = document.getElementById(source + 'OwnerWrap');
+      const selected = wrap.querySelectorAll('.owner-item.selected');
+      const names = Array.from(selected).map(item => item.dataset.name);
+      const textEl = document.getElementById(source + 'OwnerText');
+      if (names.length === 0) {
+        textEl.textContent = 'Select...';
+      } else if (names.length === 1) {
+        textEl.textContent = names[0];
+      } else {
+        textEl.textContent = names[0] + ' +' + (names.length - 1);
+      }
+    }
+    function filterOwnerList(source, keyword) {
+      const dd = document.getElementById(source + 'OwnerDropdown');
+      const kw = keyword.toLowerCase();
+      dd.querySelectorAll('.owner-item').forEach(item => {
+        const text = item.textContent.toLowerCase();
+        item.style.display = text.includes(kw) ? '' : 'none';
+      });
+    }
+    // 点击外部关闭Owner下拉
+    document.addEventListener('click', function (e) {
+      if (!e.target.closest('.owner-picker-wrap')) {
+        document.querySelectorAll('.owner-picker-dropdown').forEach(d => d.classList.remove('open'));
+      }
+    });
+    // 单日期选择器（Changes Since）
+    let sdpSource = 'pipeline';
+    let sdpSelectedDate = null;
+    let sdpMonth = new Date(2026, 2, 1);
+    function openSingleDatePicker(source) {
+      sdpSource = source;
+      sdpSelectedDate = null;
+      sdpMonth = new Date(2026, 2, 1);
+      document.getElementById('sdpDateBox').querySelector('span').textContent = 'Select date';
+      document.getElementById('sdpDateBox').classList.remove('has-value');
+      renderSingleCalendar();
+      document.getElementById('singleDateOverlay').style.display = 'block';
+    }
+    function closeSingleDatePicker() {
+      document.getElementById('singleDateOverlay').style.display = 'none';
+      if (!sdpSelectedDate) {
+        const sel = document.getElementById(sdpSource + 'ChangesSince');
+        sel.value = 'Start of the Period';
+        document.getElementById(sdpSource + 'ChangesSinceDate').style.display = 'none';
+      }
+    }
+    function sdpNav(offset) {
+      sdpMonth = new Date(sdpMonth.getFullYear(), sdpMonth.getMonth() + offset, 1);
+      renderSingleCalendar();
+    }
+    function renderSingleCalendar() {
+      const grid = document.getElementById('sdpGrid');
+      const title = document.getElementById('sdpTitle');
+      const year = sdpMonth.getFullYear();
+      const month = sdpMonth.getMonth();
+      title.textContent = dpMonthNames[month] + '  ' + year;
+      let html = '';
+      ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].forEach(d => { html += '<div class="day-header">' + d + '</div>'; });
+      const firstDay = new Date(year, month, 1).getDay();
+      const daysInMonth = new Date(year, month + 1, 0).getDate();
+      const prevDays = new Date(year, month, 0).getDate();
+      const today = new Date();
+      for (let i = firstDay - 1; i >= 0; i--) {
+        html += '<div class="day other-month">' + (prevDays - i) + '</div>';
+      }
+      for (let d = 1; d <= daysInMonth; d++) {
+        const date = new Date(year, month, d);
+        let cls = 'day';
+        if (date.toDateString() === today.toDateString()) cls += ' today';
+        if (sdpSelectedDate && date.toDateString() === sdpSelectedDate.toDateString()) cls += ' selected';
+        html += '<div class="' + cls + '" onclick="sdpSelectDay(' + year + ',' + month + ',' + d + ')">' + d + '</div>';
+      }
+      const totalCells = firstDay + daysInMonth;
+      const remaining = (7 - totalCells % 7) % 7;
+      for (let i = 1; i <= remaining; i++) {
+        html += '<div class="day other-month">' + i + '</div>';
+      }
+      grid.innerHTML = html;
+    }
+    function sdpSelectDay(y, m, d) {
+      sdpSelectedDate = new Date(y, m, d);
+      document.getElementById('sdpDateBox').querySelector('span').textContent = fmtDate(sdpSelectedDate);
+      document.getElementById('sdpDateBox').classList.add('has-value');
+      renderSingleCalendar();
+    }
+    function confirmSingleDatePicker() {
+      if (!sdpSelectedDate) return;
+      const dateText = fmtDate(sdpSelectedDate);
+      const span = document.getElementById(sdpSource + 'ChangesSinceDate');
+      span.textContent = dateText;
+      span.style.display = 'inline';
+      document.getElementById('singleDateOverlay').style.display = 'none';
+    }
+    // 绑定Changes Since下拉事件
+    document.getElementById('pipelineChangesSince').addEventListener('change', function () {
+      if (this.value === 'Custom') { openSingleDatePicker('pipeline'); }
+      else { document.getElementById('pipelineChangesSinceDate').style.display = 'none'; }
+    });
+    document.getElementById('forecastChangesSince').addEventListener('change', function () {
+      if (this.value === 'Custom') { openSingleDatePicker('forecast'); }
+      else { document.getElementById('forecastChangesSinceDate').style.display = 'none'; }
+    });
+    // Pipeline列表排序与筛选（原型演示）
+    let pipelineSortField = 'amount';
+    let pipelineSortDir = 'desc';
+    function togglePipelineSort(field) {
+      if (pipelineSortField === field) {
+        pipelineSortDir = pipelineSortDir === 'desc' ? 'asc' : pipelineSortDir === 'asc' ? 'none' : 'desc';
+      } else {
+        pipelineSortField = field;
+        pipelineSortDir = 'desc';
+      }
+      updatePipelineSortFilterBar();
+    }
+    function togglePipelineFilter(field) {
+      // 原型演示：仅展示交互效果
+      alert('Filter panel for: ' + field);
+    }
+    function updatePipelineSortFilterBar() {
+      const bar = document.getElementById('pipelineSortFilterBar');
+      const fieldNames = { name: 'Opportunity Name', amount: 'Amount', closeDate: 'Close Date', score: 'Score', winRate: 'AI Win Rate', lastAct: 'Last Activity' };
+      const sortText = pipelineSortDir !== 'none' ? 'Sorted by ' + (fieldNames[pipelineSortField] || pipelineSortField) : '';
+      const filterText = 'Filtered by Close Date, Current User, Open Pipeline';
+      bar.textContent = [sortText, filterText].filter(Boolean).join(' · ');
+    }
+  </script>
+</body>
+</html>