编辑页面

页面标题
有效期修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>销售CRM · 钉钉小程序原型</title>
<style>
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; background: #e6e8eb; color: #1a1a1a; }
  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px 0; background: #e6e8eb; }
  body::before, body::after { content: ""; flex-shrink: 0; }

  /* 手机外壳 */
  .phone {
    width: 390px; height: 844px; background: #fff; border-radius: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,.15), 0 0 0 8px #2a2a2a, 0 0 0 10px #404040;
    position: relative; overflow: hidden;
  }
  .phone::before { /* 状态栏留白 */
    content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 28px; background: #000; border-radius: 16px; z-index: 9999;
  }
  .app { width: 100%; height: 100%; position: relative; background: #f2f3f5; overflow: hidden; }

  /* 状态栏 */
  .status-bar { height: 50px; padding: 18px 28px 0; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: #1a1a1a; }
  .status-bar .icons { display: flex; gap: 6px; align-items: center; }
  .status-bar svg { display: block; }

  /* 顶部导航 - 商务深蓝 */
  .nav { background: #1a3a5c; color: #fff; padding: 10px 16px 12px; display: flex; align-items: center; position: relative; }
  .nav .back { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; font-size: 20px; }
  .nav .back:active { background: rgba(255,255,255,.12); }
  .nav .title { flex: 1; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: 1px; }
  .nav .right { min-width: 30px; text-align: right; font-size: 13px; cursor: pointer; }
  .nav.center-title .title { margin-left: 0; }
  .nav .placeholder-back { width: 30px; }

  /* 主体内容区 */
  .body { position: absolute; top: 50px; left: 0; right: 0; bottom: 60px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .body::-webkit-scrollbar { width: 0; }

  /* 底部 tabbar - 商务灰蓝 */
  .tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: 58px; background: #fff; display: flex; border-top: 1px solid #d9d9d9; padding-bottom: 4px; }
  .tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #666; cursor: pointer; position: relative; }
  .tabbar .tab .icon { width: 22px; height: 22px; margin-bottom: 2px; }
  .tabbar .tab.active { color: #1a3a5c; }
  .tabbar .tab .badge { position: absolute; top: 2px; right: calc(50% - 20px); background: #d93636; color: #fff; font-size: 9px; min-width: 14px; height: 14px; line-height: 14px; border-radius: 7px; padding: 0 3px; text-align: center; }

  /* 页面隐藏 */
  .page { display: none; position: absolute; inset: 0; background: #f2f3f5; z-index: 1; }
  .page.active { display: block; z-index: 10; }
  #page-login.active { display: flex; flex-direction: column; }

  /* 通用卡片 - 商务简洁 */
  .card { background: #fff; border-radius: 6px; margin: 10px 12px; padding: 14px; border: 1px solid #e8e8e8; }
  .card-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; color: #1a1a1a; }
  .card-title .more { font-size: 12px; color: #999; font-weight: normal; cursor: pointer; }

  /* 数据看板 */
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-item { background: #fff; border-radius: 6px; padding: 14px; border: 1px solid #e8e8e8; }
  .stat-item .label { font-size: 11px; color: #666; }
  .stat-item .value { font-size: 20px; font-weight: 600; color: #1a1a1a; margin-top: 4px; }
  .stat-item .delta { font-size: 10px; margin-top: 2px; }
  .delta.up { color: #52c41a; }
  .delta.down { color: #d93636; }

  /* 快捷入口 - 商务方块 */
  .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 0; }
  .quick-item { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; cursor: pointer; border-radius: 4px; }
  .quick-item:active { background: #f0f0f0; }
  .quick-item .qicon { width: 38px; height: 38px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; color: #fff; }
  .quick-item .qicon svg { width: 20px; height: 20px; }
  .quick-item .qlabel { font-size: 11px; color: #333; }

  /* 列表 - 商务简洁 */
  .list-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
  .list-item:active { background: #fafafa; }
  .list-item:last-child { border-bottom: 0; }
  .list-item .avatar { width: 38px; height: 38px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; background: #1a3a5c; }
  .list-item .content { flex: 1; margin-left: 10px; min-width: 0; }
  .list-item .top-line { display: flex; justify-content: space-between; align-items: center; }
  .list-item .name { font-size: 14px; font-weight: 500; color: #1a1a1a; }
  .list-item .time { font-size: 11px; color: #999; }
  .list-item .desc { font-size: 12px; color: #888; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list-item .tag { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: 10px; margin-left: 5px; vertical-align: middle; }
  .tag-red { background: #fff1f0; color: #d93636; }
  .tag-orange { background: #fff7e6; color: #d97706; }
  .tag-blue { background: #e6f4ff; color: #1a3a5c; }
  .tag-green { background: #f6ffed; color: #389e0d; }

  /* 八大客户体系标签 - 商务灰色系 */
  .sys-grid { background: #f0f5ff; color: #1a3a5c; border: 1px solid #c5d4e8; }
  .sys-telco { background: #f5f5f5; color: #595959; border: 1px solid #d9d9d9; }
  .sys-oil   { background: #f5f5f5; color: #595959; border: 1px solid #d9d9d9; }
  .sys-bank  { background: #f5f5f5; color: #595959; border: 1px solid #d9d9d9; }
  .sys-edu   { background: #f5f5f5; color: #595959; border: 1px solid #d9d9d9; }
  .sys-data  { background: #f5f5f5; color: #595959; border: 1px solid #d9d9d9; }
  .sys-mfg   { background: #f5f5f5; color: #595959; border: 1px solid #d9d9d9; }
  .sys-reno  { background: #f5f5f5; color: #595959; border: 1px solid #d9d9d9; }

  /* 八大体系筛选行 */
  .sys-filter-title { padding: 10px 14px 4px; font-size: 12px; color: #8c8c8c; font-weight: 500; background: #fff; display: flex; align-items: center; justify-content: space-between; }
  .sys-filter-title .sf-hint { font-size: 10px; color: #1677ff; font-weight: normal; cursor: pointer; }
  .sys-filter-chips { display: flex; gap: 8px; padding: 4px 12px 10px; overflow-x: auto; background: #fff; border-bottom: 1px solid #f2f3f5; }
  .sys-filter-chips::-webkit-scrollbar { display: none; }
  .sys-chip { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 14px; font-size: 12px; background: #f7f8fa; color: #4e5969; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
  .sys-chip .sc-emoji { font-size: 13px; }
  .sys-chip.active { background: #e8f3ff; color: #1677ff; border-color: #1677ff; font-weight: 500; }
  .sys-chip .sc-count { background: rgba(22,119,255,.12); color: #1677ff; padding: 0 5px; border-radius: 8px; font-size: 10px; margin-left: 2px; }

  /* 客户体系下拉 Sheet */
  .sys-sheet-mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 1500; display: none; align-items: flex-end; }
  .sys-sheet-mask.show { display: flex; }
  .sys-sheet { background: #fff; width: 100%; border-radius: 16px 16px 0 0; max-height: 78%; display: flex; flex-direction: column; animation: slideUp .25s ease-out; }
  .sys-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f2f3f5; }
  .sys-sheet-head .ssh-title { font-size: 16px; font-weight: 600; }
  .sys-sheet-head .ssh-close { font-size: 14px; color: #8c8c8c; padding: 4px 8px; cursor: pointer; }
  .sys-sheet-body { overflow-y: auto; padding: 8px 14px 14px; }
  .sys-sheet-row { display: flex; align-items: center; padding: 12px 4px; border-bottom: 1px solid #f2f3f5; cursor: pointer; }
  .sys-sheet-row:last-child { border-bottom: 0; }
  .sys-sheet-row .ssr-emoji { font-size: 22px; width: 36px; text-align: center; }
  .sys-sheet-row .ssr-info { flex: 1; margin-left: 10px; }
  .sys-sheet-row .ssr-name { font-size: 14px; font-weight: 600; color: #1f2329; }
  .sys-sheet-row .ssr-desc { font-size: 11px; color: #8c8c8c; margin-top: 2px; }
  .sys-sheet-row .ssr-count { background: #f2f3f5; color: #4e5969; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }

  /* 商机 / ERP 订单条目 */
  .biz-item, .erp-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f2f3f5; cursor: pointer; }
  .biz-item:last-child, .erp-item:last-child { border-bottom: 0; }
  .biz-item .biz-l, .erp-item .erp-l { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .biz-item .biz-c, .erp-item .erp-c { flex: 1; margin-left: 12px; min-width: 0; }
  .biz-item .biz-title, .erp-item .erp-title { font-size: 14px; font-weight: 500; color: #1f2329; }
  .biz-item .biz-meta, .erp-item .erp-meta { font-size: 12px; color: #8c8c8c; margin-top: 3px; }
  .biz-item .biz-amount, .erp-item .erp-amount { font-size: 14px; font-weight: 600; color: #ff4d4f; }
  .biz-stage { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; margin-left: 6px; vertical-align: middle; }
  .stage-n { background: #f2f3f5; color: #4e5969; }   /* 初步接洽 */
  .stage-r { background: #e8f3ff; color: #1677ff; }   /* 方案确认 */
  .stage-q { background: #fff7e6; color: #ff8f1f; }   /* 报价中 */
  .stage-b { background: #fff1f0; color: #ff4d4f; }   /* 商务谈判 */
  .stage-w { background: #e8fff4; color: #00b578; }   /* 已签约 */
  .erp-state { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; }
  .erp-state.delivered { background: #e8fff4; color: #00b578; }
  .erp-state.shipping { background: #e8f3ff; color: #1677ff; }
  .erp-state.paid { background: #f9f0ff; color: #722ed1; }

  /* ===== 商机管理 ===== */
  /* 阶段进度条 */
  .stage-bar { display: flex; padding: 14px 14px 6px; background: #fff; align-items: flex-start; position: relative; }
  .stage-bar .sb-item { flex: 1; text-align: center; position: relative; }
  .stage-bar .sb-dot { width: 22px; height: 22px; border-radius: 50%; background: #f2f3f5; color: #c9cdd4; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin: 0 auto 4px; border: 2px solid #fff; box-shadow: 0 0 0 1px #e8eaee; }
  .stage-bar .sb-item.done .sb-dot { background: #00b578; color: #fff; box-shadow: 0 0 0 1px #00b578; }
  .stage-bar .sb-item.current .sb-dot { background: #1677ff; color: #fff; box-shadow: 0 0 0 1px #1677ff, 0 0 0 4px rgba(22,119,255,.18); }
  .stage-bar .sb-item.rejected .sb-dot { background: #ff4d4f; color: #fff; box-shadow: 0 0 0 1px #ff4d4f; }
  .stage-bar .sb-name { font-size: 11px; color: #8c8c8c; }
  .stage-bar .sb-item.done .sb-name, .stage-bar .sb-item.current .sb-name { color: #1f2329; font-weight: 500; }
  .stage-bar .sb-item.rejected .sb-name { color: #ff4d4f; font-weight: 500; }
  .stage-bar .sb-item:not(:last-child)::after { content: ""; position: absolute; left: 50%; right: -50%; top: 11px; height: 2px; background: #e8eaee; z-index: 0; }
  .stage-bar .sb-item.done:not(:last-child)::after { background: #00b578; }
  .stage-bar .sb-item.current:not(:last-child)::after { background: linear-gradient(90deg, #1677ff 0%, #e8eaee 100%); }

  /* 商机状态标签 */
  .biz-state { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 500; }
  .biz-state.open      { background: #e8f3ff; color: #1677ff; }
  .biz-state.won       { background: #e8fff4; color: #00b578; }
  .biz-state.lost      { background: #fff1f0; color: #ff4d4f; }
  .biz-state.paused    { background: #f2f3f5; color: #8c8c8c; }

  /* 商机筛选行 */
  .biz-filter-tabs { display: flex; background: #fff; border-bottom: 1px solid #f2f3f5; }
  .biz-filter-tabs .bft { flex: 1; text-align: center; padding: 11px 0; font-size: 13px; color: #4e5969; position: relative; cursor: pointer; }
  .biz-filter-tabs .bft.active { color: #1677ff; font-weight: 600; }
  .biz-filter-tabs .bft.active::after { content: ""; position: absolute; bottom: 0; left: 30%; right: 30%; height: 3px; background: #1677ff; border-radius: 3px 3px 0 0; }
  .biz-filter-tabs .bft .bfc { display: inline-block; background: #f2f3f5; color: #8c8c8c; padding: 0 5px; border-radius: 8px; font-size: 10px; margin-left: 3px; }
  .biz-filter-tabs .bft.active .bfc { background: #e8f3ff; color: #1677ff; }

  /* 商机列表卡片 */
  .biz-card { background: #fff; margin: 10px 12px; border-radius: 12px; padding: 12px 14px; cursor: pointer; position: relative; }
  .biz-card:active { background: #f7f8fa; }
  .biz-card .bc-head { display: flex; justify-content: space-between; align-items: flex-start; }
  .biz-card .bc-title { font-size: 15px; font-weight: 600; color: #1f2329; flex: 1; margin-right: 8px; }
  .biz-card .bc-amount { font-size: 18px; font-weight: 700; color: #ff4d4f; }
  .biz-card .bc-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
  .biz-card .bc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #f2f3f5; }
  .biz-card .bc-stage { font-size: 12px; color: #1677ff; font-weight: 500; }
  .biz-card .bc-date { font-size: 11px; color: #8c8c8c; }

  /* 商机阶段筛选 Sheet */
  .biz-stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 14px 14px; }
  .biz-stage-cell { background: #f7f8fa; border: 1px solid transparent; border-radius: 8px; padding: 12px 6px; text-align: center; cursor: pointer; }
  .biz-stage-cell.active { background: #e8f3ff; border-color: #1677ff; }
  .biz-stage-cell .bsc-dot { width: 8px; height: 8px; border-radius: 50%; background: #1677ff; margin: 0 auto 4px; }
  .biz-stage-cell .bsc-name { font-size: 12px; color: #1f2329; }
  .biz-stage-cell .bsc-count { font-size: 10px; color: #8c8c8c; margin-top: 2px; }

  /* 报价/送样/丢单 操作按钮组 */
  .biz-ops { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #f2f3f5; overflow-x: auto; }
  .biz-ops::-webkit-scrollbar { display: none; }
  .biz-op { flex: 0 0 auto; padding: 8px 14px; border-radius: 18px; font-size: 13px; cursor: pointer; border: 1px solid #e8eaee; background: #fff; color: #4e5969; white-space: nowrap; }
  .biz-op.primary { background: #1677ff; color: #fff; border-color: #1677ff; }
  .biz-op.danger { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }
  .biz-op.success { background: #389e0d; color: #fff; border-color: #389e0d; }

  /* 产品条目 */
  .prod-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
  .prod-item:last-child { border-bottom: 0; }
  .prod-item .pi-icon { width: 36px; height: 36px; border-radius: 4px; background: #f5f5f5; color: #1a3a5c; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .prod-item .pi-info { flex: 1; margin-left: 10px; min-width: 0; }
  .prod-item .pi-name { font-size: 13px; font-weight: 500; color: #1a1a1a; }
  .prod-item .pi-spec { font-size: 11px; color: #888; margin-top: 2px; }
  .prod-item .pi-price { font-size: 13px; font-weight: 600; color: #d93636; }
  .prod-item .pi-qty { font-size: 11px; color: #888; }

  /* 阶段轨迹 */
  .phase-track { padding: 0 14px 6px; }
  .phase-item { display: flex; padding: 8px 0; position: relative; }
  .phase-item .pi-dot { width: 10px; height: 10px; border-radius: 50%; background: #1a3a5c; margin-top: 5px; flex-shrink: 0; position: relative; }
  .phase-item .pi-dot::before { content: ""; position: absolute; left: 50%; top: 12px; bottom: -16px; width: 1px; background: #e0e0e0; transform: translateX(-50%); }
  .phase-item:last-child .pi-dot::before { display: none; }
  .phase-item .pi-dot.done { background: #389e0d; }
  .phase-item .pi-dot.gray { background: #ccc; }
  .phase-item .pi-c { flex: 1; margin-left: 10px; }
  .phase-item .pi-tt { font-size: 13px; font-weight: 500; }
  .phase-item .pi-tm { font-size: 11px; color: #888; margin-top: 2px; }
  .phase-item .pi-rmk { font-size: 12px; color: #666; background: #f5f5f5; padding: 6px 8px; border-radius: 4px; margin-top: 4px; }

  /* ===== AI 智能洞察 ===== */
  /* AI 按钮特殊样式 - 商务稳重 */
  .ai-btn { background: #1a3a5c !important; color: #fff !important; border: 0 !important; }
  .ai-btn:active { opacity: .85; }
  .ai-btn .ai-icon { display: inline-block; }

  /* AI 头部背景 - 商务深蓝 */
  .ai-header { background: #1a3a5c; color: #fff; padding: 20px 16px 50px; position: relative; }
  .ai-header > * { position: relative; z-index: 1; }
  .ai-header .ai-orb { width: 44px; height: 44px; border-radius: 8px; background: #2d5a8a; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  .ai-header .ai-tt { font-size: 16px; font-weight: 500; margin-top: 10px; }
  .ai-header .ai-st { font-size: 12px; opacity: .75; margin-top: 4px; }

  /* AI 加载状态 */
  .ai-loading-card { background: #fff; margin: -30px 12px 12px; border-radius: 6px; padding: 16px 14px; border: 1px solid #e0e0e0; position: relative; z-index: 2; }
  .ai-loading-card .alc-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .ai-loading-card .alc-sub { font-size: 12px; color: #888; margin-top: 4px; }
  .ai-progress { height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden; margin-top: 10px; }
  .ai-progress .ai-prog-bar { height: 100%; background: #1a3a5c; border-radius: 2px; transition: width .4s; }
  .ai-steps { margin-top: 12px; }
  .ai-step { display: flex; align-items: center; padding: 5px 0; font-size: 12px; }
  .ai-step .as-dot { width: 16px; height: 16px; border-radius: 50%; background: #e0e0e0; color: #999; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; flex-shrink: 0; }
  .ai-step.done .as-dot { background: #389e0d; color: #fff; }
  .ai-step.running .as-dot { background: #1a3a5c; color: #fff; }
  .ai-step .as-name { margin-left: 10px; color: #666; flex: 1; }
  .ai-step.done .as-name { color: #1a1a1a; }
  .ai-step .as-time { font-size: 10px; color: #999; }

  /* AI 情报汇总卡 - 商务灰 */
  .ai-summary { background: #f5f5f5; margin: 0 12px 12px; border-radius: 6px; padding: 14px; border: 1px solid #e0e0e0; }
  .ai-summary .ast-title { font-size: 13px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
  .ai-summary .ast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
  .ai-summary .ast-cell { background: #fff; border-radius: 4px; padding: 10px 6px; text-align: center; border: 1px solid #e0e0e0; }
  .ai-summary .ast-num { font-size: 18px; font-weight: 600; color: #1a3a5c; }
  .ai-summary .ast-lbl { font-size: 11px; color: #888; margin-top: 2px; }
  .ai-summary .ast-foot { font-size: 11px; color: #888; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e0e0e0; }

  /* 数据来源 */
  .source-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .source-tag { background: #f5f5f5; color: #666; padding: 3px 8px; border-radius: 2px; font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
  .source-tag .st-icon { font-size: 10px; }

  /* 提示气泡 */
  .ai-tip { display: flex; gap: 8px; padding: 10px 12px; background: #fffbe6; border-radius: 4px; margin: 0 12px 12px; border-left: 3px solid #d97706; }
  .ai-tip .at-icon { font-size: 14px; }
  .ai-tip .at-text { font-size: 12px; color: #666; line-height: 1.6; }
  .ai-tip .at-text b { color: #d97706; }

  /* ===== 组织架构 + 决策链 ===== */
  /* 顶部数据看板 */
  .org-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; margin: 0 12px; border-radius: 6px; padding: 12px 0; border: 1px solid #e0e0e0; }
  .org-stat .os { text-align: center; border-right: 1px solid #f0f0f0; }
  .org-stat .os:last-child { border-right: 0; }
  .org-stat .os-n { font-size: 18px; font-weight: 600; color: #1a3a5c; }
  .org-stat .os-l { font-size: 11px; color: #888; margin-top: 2px; }

  /* 5层架构总览图 */
  .org-tree { background: #fff; margin: 12px; border-radius: 6px; padding: 14px 12px 8px; border: 1px solid #e0e0e0; }
  .org-tree .ot-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; color: #1a1a1a; }
  .org-tree .ot-5 { display: flex; flex-direction: column; gap: 0; padding: 6px 0; }
  .org-tree .ot-layer { display: flex; align-items: center; padding: 8px 0; position: relative; }
  .org-tree .ot-layer:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 34px; bottom: -2px; width: 1px; background: #e0e0e0; }
  .org-tree .ot-node { width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; background: #1a3a5c; }
  .org-tree .ot-info { flex: 1; margin-left: 10px; }
  .org-tree .ot-name { font-size: 13px; font-weight: 500; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
  .org-tree .ot-pos { font-size: 11px; color: #888; margin-top: 2px; }
  .org-tree .ot-power { display: flex; gap: 1px; }
  .org-tree .ot-power .op { width: 10px; height: 4px; border-radius: 2px; background: #e0e0e0; }
  .org-tree .ot-power .op.on { background: #d97706; }

  /* 层级详情卡 */
  .org-level { background: #fff; margin: 12px; border-radius: 6px; overflow: hidden; border: 1px solid #e0e0e0; }
  .org-level .ol-head { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0; background: #fafafa; }
  .org-level .ol-head .ol-l { display: flex; align-items: center; gap: 8px; }
  .org-level .ol-head .ol-icon { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: #1a3a5c; }
  .org-level .ol-head .ol-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
  .org-level .ol-head .ol-sub { font-size: 11px; color: #888; margin-top: 1px; }
  .org-level .ol-head .ol-power { display: flex; gap: 2px; align-items: center; }
  .org-level .ol-head .ol-power .op { width: 10px; height: 4px; border-radius: 2px; background: #e0e0e0; }
  .org-level .ol-head .ol-power .op.on { background: #d97706; }
  .org-level .ol-head .ol-power .op.lv-on { background: #1a3a5c; }

  /* 人员条目 */
  .org-person { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
  .org-person:last-child { border-bottom: 0; }
  .org-person:active { background: #fafafa; }
  .org-person .op-avatar { width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; background: #1a3a5c; }
  .org-person .op-info { flex: 1; margin-left: 10px; min-width: 0; }
  .org-person .op-name { font-size: 13px; font-weight: 500; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
  .org-person .op-pos { font-size: 11px; color: #888; margin-top: 2px; }
  .org-person .op-right { text-align: right; flex-shrink: 0; margin-left: 8px; }
  .org-person .op-stars { display: flex; gap: 1px; justify-content: flex-end; }
  .org-person .op-stars .star { font-size: 10px; color: #ccc; }
  .org-person .op-stars .star.on { color: #d97706; }
  .org-person .op-role { font-size: 10px; padding: 1px 5px; border-radius: 2px; margin-top: 2px; display: inline-block; }
  .role-key   { background: #fff1f0; color: #d93636; }
  .role-tech  { background: #e6f4ff; color: #1a3a5c; }
  .role-buy   { background: #fffbe6; color: #d97706; }
  .role-exec  { background: #f6ffed; color: #389e0d; }
  .role-ops   { background: #f5f5f5; color: #595959; }

  /* 层级颜色变量 */
  .lv-decision { --lv-c: #d93636; --lv-bg: #fff1f0; }
  .lv-tech     { --lv-c: #1a3a5c; --lv-bg: #e6f4ff; }
  .lv-buy      { --lv-c: #d97706; --lv-bg: #fffbe6; }
  .lv-exec     { --lv-c: #389e0d; --lv-bg: #f6ffed; }
  .lv-ops      { --lv-c: #595959; --lv-bg: #f5f5f5; }

  /* ===== 拜访日志 · AI 标准化模板 ===== */
  /* 区段容器 */
  .vl-section { background: #fff; margin: 10px 12px; border-radius: 6px; overflow: hidden; border: 1px solid #e0e0e0; }
  .vl-sec-head { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0; background: #fafafa; }
  .vl-sec-head .vs-l { display: flex; align-items: center; gap: 8px; }
  .vl-sec-head .vs-idx { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; background: #1a3a5c; }
  .vl-sec-head .vs-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
  .vl-sec-head .vs-tag { font-size: 10px; padding: 1px 5px; border-radius: 2px; }
  .tag-auto { background: #f6ffed; color: #389e0d; }
  .tag-req  { background: #fff1f0; color: #d93636; }
  .tag-key  { background: #fffbe6; color: #d97706; }

  /* 字段 */
  .vl-field { padding: 11px 14px; border-bottom: 1px solid #f2f3f5; display: flex; align-items: flex-start; }
  .vl-field:last-child { border-bottom: 0; }
  .vl-field .vf-lbl { width: 88px; font-size: 13px; color: #4e5969; padding-top: 7px; flex-shrink: 0; }
  .vl-field .vf-lbl .req-star { color: #ff4d4f; margin-left: 2px; }
  .vl-field .vf-lbl .key-star { color: #d97706; font-size: 11px; margin-left: 2px; }
  .vl-field .vf-ctrl { flex: 1; min-width: 0; }

  /* 自动回填样式 - 灰底只读 */
  .vl-field.auto .vf-ctrl { background: #f5f5f5; border-radius: 4px; padding: 7px 10px; color: #1a1a1a; font-size: 13px; display: flex; align-items: center; gap: 6px; }
  .vl-field.auto .vf-ctrl .auto-icon { color: #389e0d; font-size: 12px; }

  /* 输入控件 */
  .vl-input, .vl-textarea {
    width: 100%; border: 1px solid #d9d9d9; border-radius: 4px; padding: 7px 10px;
    font-size: 13px; font-family: inherit; color: #1a1a1a; background: #fff;
    transition: border-color .2s;
  }
  .vl-input:focus, .vl-textarea:focus { outline: none; border-color: #1a3a5c; }
  .vl-textarea { min-height: 60px; resize: none; line-height: 1.5; }
  .vf-ctrl .vl-input::placeholder, .vf-ctrl .vl-textarea::placeholder { color: #bfbfbf; }

  /* 单选 chip 组 */
  .vl-options { display: flex; flex-wrap: wrap; gap: 6px; }
  .vl-opt { padding: 5px 12px; border-radius: 4px; font-size: 12px; background: #f5f5f5; color: #666; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
  .vl-opt.active { background: #1a3a5c; color: #fff; font-weight: 500; }

  /* 多选 */
  .vl-check { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #f5f5f5; border-radius: 4px; cursor: pointer; }
  .vl-check input { margin: 0; }
  .vl-check.active { background: #e6f4ff; color: #1a3a5c; }
  .vl-check-list { display: flex; flex-wrap: wrap; gap: 6px; }

  /* 字数限制提示 */
  .vl-counter { font-size: 11px; color: #999; text-align: right; margin-top: 4px; }
  .vl-counter.over { color: #d93636; }

  /* 评分重点字段 - 商务边框 */
  .vl-field.key { background: #fffbe6; }
  .vl-field.key .vf-ctrl .vl-input,
  .vl-field.key .vf-ctrl .vl-textarea { border-color: #d97706; background: #fff; }

  /* 模板说明卡 */
  .vl-intro { background: #f5f5f5; margin: 0 12px 10px; border-radius: 6px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e0e0e0; }
  .vl-intro .vi-icon { font-size: 16px; flex-shrink: 0; }
  .vl-intro .vi-text { font-size: 12px; color: #666; line-height: 1.7; }
  .vl-intro .vi-text b { color: #1a3a5c; }

  /* 进度条 */
  .vl-progress { background: #fff; margin: 10px 12px; border-radius: 6px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #e0e0e0; }
  .vl-progress .vp-info { flex: 1; }
  .vl-progress .vp-title { font-size: 12px; font-weight: 500; }
  .vl-progress .vp-bar { height: 4px; background: #e0e0e0; border-radius: 2px; margin-top: 6px; overflow: hidden; }
  .vl-progress .vp-fill { height: 100%; background: #1a3a5c; border-radius: 2px; transition: width .3s; }
  .vl-progress .vp-pct { font-size: 16px; font-weight: 600; color: #1a3a5c; flex-shrink: 0; }
  .list-item .arrow { color: #ccc; margin-left: 8px; }

  /* 消息分组 */
  .msg-group { background: #fff; margin: 10px 12px; border-radius: 6px; overflow: hidden; border: 1px solid #e0e0e0; }
  .msg-group .group-title { padding: 10px 12px 4px; font-size: 12px; color: #888; font-weight: 500; }

  /* 登录页 - 商务稳重 */
  .login-page { background: #1a3a5c; position: absolute; inset: 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
  .login-page .login-card { flex-shrink: 0; }
  .login-header { text-align: center; padding: 60px 0 40px; color: #fff; }
  .login-logo { width: 68px; height: 68px; background: #fff; border-radius: 12px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
  .login-logo svg { width: 40px; height: 40px; color: #1a3a5c; }
  .login-title { font-size: 20px; font-weight: 500; }
  .login-subtitle { font-size: 12px; opacity: .7; margin-top: 6px; }
  .login-card { background: #fff; margin: 0 20px; border-radius: 8px; padding: 22px 18px; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .login-card .user-info { display: flex; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
  .login-card .user-avatar { width: 48px; height: 48px; border-radius: 6px; background: #1a3a5c; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 500; }
  .login-card .user-meta { margin-left: 12px; }
  .login-card .user-name { font-size: 15px; font-weight: 500; }
  .login-card .user-org { font-size: 12px; color: #888; margin-top: 2px; }
  .login-card .login-tip { font-size: 12px; color: #888; line-height: 1.7; margin-top: 14px; }
  .login-card .login-tip b { color: #1a3a5c; }
  .btn-primary { display: block; width: 100%; background: #1a3a5c; color: #fff; text-align: center; padding: 12px; border-radius: 6px; font-size: 14px; font-weight: 500; margin-top: 16px; cursor: pointer; border: 0; }
  .btn-primary:active { background: #0f2840; }
  .btn-secondary { display: block; width: 100%; background: #fff; color: #1a3a5c; text-align: center; padding: 11px; border-radius: 6px; font-size: 13px; margin-top: 8px; cursor: pointer; border: 1px solid #1a3a5c; }
  .login-footer { text-align: center; font-size: 11px; color: #999; margin-top: 20px; }

  /* 工作台 banner - 商务深蓝 */
  .banner { margin: 12px; padding: 12px 14px; border-radius: 6px; background: #1a3a5c; color: #fff; display: flex; align-items: center; cursor: pointer; border: 1px solid #0f2840; }
  .banner .b-text { flex: 1; }
  .banner .b-title { font-size: 13px; font-weight: 500; }
  .banner .b-sub { font-size: 11px; opacity: .7; margin-top: 2px; }
  .banner .b-icon { width: 40px; height: 40px; background: rgba(255,255,255,.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; }

  /* 客户详情 - 商务深蓝 */
  .profile-header { background: #1a3a5c; color: #fff; padding: 0 16px 20px; text-align: center; }
  .profile-avatar { width: 64px; height: 64px; border-radius: 8px; background: rgba(255,255,255,.15); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; }
  .profile-name { font-size: 18px; font-weight: 500; }
  .profile-company { font-size: 12px; opacity: .75; margin-top: 4px; }
  .profile-tags { margin-top: 10px; }
  .profile-tags .tag { background: rgba(255,255,255,.2); color: #fff; }
  .info-row { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
  .info-row .label { color: #888; }
  .info-row .value { color: #1a1a1a; }

  /* 操作按钮组 */
  .action-bar { display: flex; padding: 10px 12px; gap: 8px; background: #fff; border-bottom: 1px solid #f0f0f0; }
  .action-bar .btn { flex: 1; padding: 8px; text-align: center; border-radius: 4px; font-size: 12px; cursor: pointer; }
  .btn-light { background: #e6f4ff; color: #1a3a5c; }
  .btn-outline { background: #fff; color: #1a3a5c; border: 1px solid #1a3a5c; }

  /* Timeline */
  .timeline { padding: 0 14px; }
  .timeline-item { position: relative; padding: 0 0 14px 18px; }
  .timeline-item::before { content: ""; position: absolute; left: 5px; top: 5px; bottom: 0; width: 1px; background: #e0e0e0; }
  .timeline-item:last-child::before { display: none; }
  .timeline-item::after { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #1a3a5c; border: 2px solid #fff; }
  .timeline-item .t-time { font-size: 11px; color: #999; }
  .timeline-item .t-title { font-size: 13px; font-weight: 500; margin: 2px 0 4px; }
  .timeline-item .t-desc { font-size: 12px; color: #666; line-height: 1.5; background: #f5f5f5; padding: 8px 10px; border-radius: 4px; }

  /* 弹窗 */
  .modal { display: none; position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; align-items: center; justify-content: center; }
  .modal.show { display: flex; }
  .modal-content { background: #fff; border-radius: 8px; width: 85%; max-width: 300px; overflow: hidden; }
  .modal-header { padding: 16px 14px 8px; text-align: center; font-size: 15px; font-weight: 500; }
  .modal-body { padding: 0 16px 14px; font-size: 13px; color: #666; line-height: 1.6; text-align: center; }
  .modal-footer { display: flex; border-top: 1px solid #f0f0f0; }
  .modal-footer .mbtn { flex: 1; padding: 12px; text-align: center; font-size: 13px; cursor: pointer; }
  .modal-footer .mbtn.cancel { color: #666; border-right: 1px solid #f0f0f0; }
  .modal-footer .mbtn.confirm { color: #1a3a5c; font-weight: 500; }

  /* 通知 toast */
  .toast { position: absolute; top: 80px; left: 50%; transform: translateX(-50%) translateY(-10px); background: rgba(0,0,0,.75); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 13px; opacity: 0; transition: all .2s; z-index: 2000; pointer-events: none; max-width: 80%; text-align: center; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* 搜索 */
  .search-bar { background: #fff; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
  .search-input { flex: 1; background: #f5f5f5; border-radius: 6px; padding: 7px 12px; font-size: 13px; color: #666; display: flex; align-items: center; gap: 6px; }
  .search-input input { border: 0; background: transparent; outline: none; flex: 1; font-size: 13px; }
  .filter-chips { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; background: #fff; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { padding: 4px 10px; border-radius: 4px; font-size: 12px; background: #f5f5f5; color: #666; white-space: nowrap; cursor: pointer; }
  .chip.active { background: #1a3a5c; color: #fff; }

  /* 我的页 - 商务深蓝 */
  .my-header { background: #1a3a5c; color: #fff; padding: 0 16px 20px; display: flex; align-items: center; }
  .my-header .avatar { width: 54px; height: 54px; border-radius: 8px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; }
  .my-header .meta { margin-left: 12px; }
  .my-header .name { font-size: 16px; font-weight: 500; }
  .my-header .pos { font-size: 12px; opacity: .75; margin-top: 4px; }
  .my-header .dept { font-size: 12px; opacity: .75; margin-top: 2px; }
  .my-stats { background: #fff; margin: -8px 12px 12px; border-radius: 6px; display: flex; padding: 12px 0; border: 1px solid #e0e0e0; }
  .my-stats .ms { flex: 1; text-align: center; }
  .my-stats .v { font-size: 16px; font-weight: 600; color: #1a3a5c; }
  .my-stats .l { font-size: 11px; color: #888; margin-top: 2px; }

  /* 表单 */
  .form-group { padding: 12px 14px; background: #fff; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; }
  .form-group .lbl { width: 80px; font-size: 13px; color: #666; }
  .form-group .ctrl { flex: 1; font-size: 13px; }
  .form-group .ctrl input, .form-group .ctrl textarea { border: 0; outline: none; width: 100%; font-size: 14px; font-family: inherit; background: transparent; }
  .form-group .ctrl textarea { min-height: 60px; resize: none; }

  /* 风险/预警条 */
  .alert-bar { background: #fffbe6; color: #d97706; padding: 8px 14px; font-size: 12px; display: flex; align-items: center; gap: 6px; border: 1px solid #ffe58f; }

  /* 业绩图表 */
  .chart { display: flex; align-items: flex-end; height: 100px; gap: 6px; padding: 6px 0; }
  .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .bar { width: 100%; background: #1a3a5c; border-radius: 2px 2px 0 0; }
  .bar.dim { background: #e0e0e0; }
  .bar-lbl { font-size: 10px; color: #888; }

  .empty { padding: 40px 20px; text-align: center; color: #999; font-size: 13px; }
  .empty svg { width: 60px; height: 60px; color: #ccc; margin-bottom: 10px; }

  /* ===== 外勤管理 ===== */
  .field-card { background: #fff; margin: 12px; border-radius: 6px; overflow: hidden; border: 1px solid #e0e0e0; }
  .field-card .field-head { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; }
  .field-card .field-head .h-title { font-size: 14px; font-weight: 500; }
  .field-card .field-head .h-status { display: flex; align-items: center; gap: 4px; font-size: 12px; }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #389e0d; }
  .status-dot.warn { background: #d97706; }
  .status-dot.danger { background: #d93636; }
  .status-dot.gray { background: #ccc; }

  /* 模拟地图 - 商务简洁 */
  .map-area { height: 260px; background: #e8eef3; position: relative; overflow: hidden; }
  .map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(26,58,92,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,58,92,.05) 1px, transparent 1px); background-size: 30px 30px; }
  .map-road { position: absolute; background: #fff; }
  .map-road.h1 { left: 0; right: 0; top: 45%; height: 12px; }
  .map-road.h2 { left: 0; right: 0; top: 70%; height: 6px; }
  .map-road.v1 { top: 0; bottom: 0; left: 35%; width: 10px; }
  .map-road.v2 { top: 0; bottom: 0; left: 65%; width: 6px; }
  .map-poi { position: absolute; background: #1a3a5c; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 2px; }
  .map-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
  .map-center .ring { width: 70px; height: 70px; border: 2px solid #1a3a5c; border-radius: 50%; background: rgba(26,58,92,.08); display: flex; align-items: center; justify-content: center; position: relative; }
  .map-center .pin { width: 24px; height: 24px; background: #1a3a5c; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .map-center .pin::after { content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
  .map-user { position: absolute; width: 14px; height: 14px; background: #d93636; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%,-50%); }
  .map-line { position: absolute; height: 2px; background: #d93636; transform-origin: 0 50%; }
  .map-distance-label { position: absolute; background: #d93636; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 2px; transform: translate(-50%,-50%); white-space: nowrap; }

  /* 打卡信息卡 */
  .checkin-info { padding: 14px; }
  .checkin-info .ci-row { display: flex; align-items: center; padding: 6px 0; }
  .checkin-info .ci-row .lbl { width: 70px; font-size: 12px; color: #888; }
  .checkin-info .ci-row .val { flex: 1; font-size: 12px; color: #1a1a1a; }
  .checkin-time { text-align: center; padding: 8px0 14px; }
  .checkin-time .t-num { font-size: 36px; font-weight: 600; color: #1a1a1a; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
  .checkin-time .t-date { font-size: 12px; color: #888; margin-top: 4px; }
  .checkin-time .t-state { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 4px; font-size: 12px; }
  .checkin-time .t-state.on { background: #f6ffed; color: #389e0d; }
  .checkin-time .t-state.off { background: #f5f5f5; color: #999; }

  /* 大按钮 */
  .big-btn { margin: 14px 12px; padding: 12px; text-align: center; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: 0; display: block; width: calc(100% - 24px); }
  .big-btn.primary { background: #1a3a5c; color: #fff; }
  .big-btn.primary:active { background: #0f2840; }
  .big-btn.danger { background: #d93636; color: #fff; }
  .big-btn.danger:active { background: #a32828; }
  .big-btn.outline { background: #fff; color: #1a3a5c; border: 1px solid #1a3a5c; }
  .big-btn[disabled] { background: #ccc; color: #fff; cursor: not-allowed; }

  /* 今日打卡记录时间线 */
  .day-track { padding: 6px 14px 14px; }
  .day-track-item { display: flex; padding: 8px 0; position: relative; }
  .day-track-item .t-dot { width: 10px; height: 10px; border-radius: 50%; background: #1a3a5c; margin-top: 4px; flex-shrink: 0; position: relative; }
  .day-track-item .t-dot::before { content: ""; position: absolute; left: 50%; top: 12px; bottom: -14px; width: 1px; background: #e0e0e0; transform: translateX(-50%); }
  .day-track-item:last-child .t-dot::before { display: none; }
  .day-track-item .t-dot.gray { background: #ccc; }
  .day-track-item .t-content { flex: 1; margin-left: 10px; }
  .day-track-item .t-content .tc-title { font-size: 13px; font-weight: 500; }
  .day-track-item .t-content .tc-time { font-size: 11px; color: #888; margin-top: 2px; }
  .day-track-item .t-content .tc-loc { font-size: 12px; color: #666; margin-top: 2px; }

  /* 报备类型选择 */
  .type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; }
  .type-cell { background: #f5f5f5; border: 1px solid transparent; border-radius: 6px; padding: 12px 8px; text-align: center; cursor: pointer; }
  .type-cell.active { background: #1a3a5c; color: #fff; }
  .type-cell .tc-icon { font-size: 20px; }
  .type-cell .tc-name { font-size: 12px; margin-top: 4px; }
  .type-cell.active .tc-name { color: #fff; }
  .type-cell:not(.active) .tc-name { color: #666; }

  /* 报备状态 tag */
  .status-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 2px; font-size: 11px; }
  .status-tag.pending { background: #fffbe6; color: #d97706; }
  .status-tag.approved { background: #f6ffed; color: #389e0d; }
  .status-tag.rejected { background: #fff1f0; color: #d93636; }

  /* 预警卡片 */
  .alert-card { background: #fff; margin: 10px 12px; border-radius: 6px; padding: 14px; border: 1px solid #e0e0e0; border-left: 3px solid #d93636; }
  .alert-card.warn { border-left-color: #d97706; }
  .alert-card .ac-head { display: flex; justify-content: space-between; align-items: center; }
  .alert-card .ac-title { font-size: 13px; font-weight: 500; }
  .alert-card .ac-time { font-size: 11px; color: #999; }
  .alert-card .ac-body { margin-top: 8px; font-size: 12px; color: #666; line-height: 1.5; }
  .alert-card .ac-stats { display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
  .alert-card .ac-stats .item { flex: 1; }
  .alert-card .ac-stats .item .l { font-size: 11px; color: #999; }
  .alert-card .ac-stats .item .v { font-size: 14px; font-weight: 600; color: #d93636; margin-top: 2px; }
  .alert-card .ac-stats .item .v.normal { color: #389e0d; }

  /* 底部弹层 Sheet */
  .sheet-mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 1500; display: none; align-items: flex-end; }
  .sheet-mask.show { display: flex; }
  .sheet { background: #fff; width: 100%; border-radius: 12px 12px 0 0; max-height: 70%; display: flex; flex-direction: column; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
  .sheet-head .sh-title { font-size: 15px; font-weight: 500; }
  .sheet-head .sh-close { font-size: 13px; color: #999; padding: 4px 8px; cursor: pointer; }
  .sheet-body { overflow-y: auto; padding-bottom: 8px; }
  .sheet-item { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
  .sheet-item:active { background: #fafafa; }
  .sheet-item:last-child { border-bottom: 0; }
  .sheet-item .si-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #ccc; margin-right: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .sheet-item .si-radio.checked { border-color: #1a3a5c; }
  .sheet-item .si-radio.checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #1a3a5c; }
  .sheet-item .si-content { flex: 1; }
  .sheet-item .si-title { font-size: 13px; font-weight: 500; }
  .sheet-item .si-sub { font-size: 12px; color: #888; margin-top: 2px; }
  .sheet-item .si-tag { font-size: 11px; padding: 1px 5px; border-radius: 2px; background: #e6f4ff; color: #1a3a5c; margin-left: 5px; }
  .sheet-quick { display: flex; gap: 8px; padding: 12px 16px 4px; flex-wrap: wrap; }
  .sheet-quick .sq { padding: 5px 10px; background: #f5f5f5; border-radius: 4px; font-size: 12px; color: #666; cursor: pointer; }
  .sheet-quick .sq.active { background: #1a3a5c; color: #fff; }
  .sheet-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 16px; }
  .sheet-time-grid .tg { text-align: center; padding: 10px 0; background: #f5f5f5; border-radius: 4px; font-size: 12px; cursor: pointer; color: #1a1a1a; }
  .sheet-time-grid .tg.active { background: #1a3a5c; color: #fff; }
  .sheet-time-grid .tg.dim { color: #ccc; }
  .sheet-section { padding: 4px 16px; font-size: 12px; color: #999; margin-top: 6px; }

  /* 模拟钉钉原生通知样式 */
  .dd-notify { position: absolute; top: 50px; right: 8px; background: #fff; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 12px; width: 280px; z-index: 900; transform: translateY(-10px); opacity: 0; transition: all .2s; }
  .dd-notify.show { transform: translateY(0); opacity: 1; }
  .dd-notify .dd-title { font-size: 13px; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
  .dd-notify .dd-title .dot { width: 6px; height: 6px; background: #d93636; border-radius: 50%; }
  .dd-notify .dd-item { padding: 8px 0; border-top: 1px solid #f0f0f0; font-size: 12px; }
  .dd-notify .dd-item .d-title { color: #1a1a1a; font-weight: 500; }
  .dd-notify .dd-item .d-desc { color: #888; margin-top: 2px; line-height: 1.4; }
  .dd-notify .dd-item .d-time { color: #ccc; font-size: 10px; margin-top: 2px; }
</style>
</head>
<body>
<div class="phone">
  <div class="app" id="app">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span id="time">9:41</span>
      <span class="icons">
        <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor"><path d="M1 8h2v3H1zM5 6h2v5H5zM9 3h2v8H9zM13 0h2v11h-2z"/></svg>
        <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor"><path d="M8 2.5C5 2.5 2.4 3.6.4 5.6L8 13l7.6-7.4C13.6 3.6 11 2.5 8 2.5z"/></svg>
        <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0" y="1" width="18" height="9" rx="2" stroke="currentColor" stroke-width="1"/><rect x="2" y="3" width="12" height="5" fill="currentColor"/><rect x="19" y="3.5" width="1.5" height="4" fill="currentColor"/></svg>
      </span>
    </div>

    <!-- 主体 -->
    <div class="body" id="body">

      <!-- ============== 登录页 ============== -->
      <div class="page active" id="page-login">
        <div class="login-page">
          <div class="login-header">
            <div class="login-logo">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            </div>
            <div class="login-title">销售CRM</div>
            <div class="login-subtitle">钉钉工作台 · 企业专属应用</div>
          </div>
          <div class="login-card">
            <div class="user-info">
              <div class="user-avatar">小</div>
              <div class="user-meta">
                <div class="user-name">小李 · 销售经理</div>
                <div class="user-org">杭州数智科技有限公司 / 华东大区</div>
              </div>
            </div>
            <div class="login-tip">
              系统将<b>复用钉钉组织架构与员工账号</b>，确认后通过钉钉身份认证自动登录CRM，全程无需输入账号密码。
            </div>
            <button class="btn-primary" onclick="doSSOLogin()">钉钉一键登录</button>
            <div class="btn-secondary" onclick="showToast('已切换其他账号')">切换账号</div>
            <div class="login-footer">登录即代表同意《用户协议》与《隐私政策》</div>
          </div>
        </div>
      </div>

      <!-- ============== 工作台 ============== -->
      <div class="page" id="page-workbench">
        <div class="banner" onclick="goPage('page-target')">
          <div class="b-text">
            <div class="b-title">本月销售目标：¥ 1,200,000</div>
            <div class="b-sub">已完成 73.5% · 距离月底还有 12 天</div>
          </div>
          <div class="b-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
          </div>
        </div>

        <!-- 外勤状态卡 -->
        <div class="field-card" style="margin:12px" onclick="goPage('page-attendance')">
          <div class="field-head">
            <div class="h-title">📍 今日外勤</div>
            <div class="h-status">
              <span class="status-dot"></span>
              <span style="color:#00b578">在岗中</span>
            </div>
          </div>
          <div style="display:flex;align-items:center;padding:6px 14px 14px">
            <div style="flex:1">
              <div style="font-size:12px;color:#8c8c8c">当前打卡点</div>
              <div style="font-size:14px;font-weight:600;margin-top:2px">杭州·西湖区·文三路 388 号</div>
              <div style="font-size:11px;color:#8c8c8c;margin-top:4px">签到 09:01 · 在岗 3h 45m · 偏差 0 m</div>
            </div>
            <div style="background:#1677ff;color:#fff;padding:8px 16px;border-radius:18px;font-size:13px">打卡 ›</div>
          </div>
          <div style="display:flex;border-top:1px solid #f2f3f5">
            <div style="flex:1;padding:10px 14px;text-align:center;border-right:1px solid #f2f3f5" onclick="event.stopPropagation();goPage('page-report')">
              <div style="font-size:16px;font-weight:600">2</div>
              <div style="font-size:11px;color:#8c8c8c">报备中</div>
            </div>
            <div style="flex:1;padding:10px 14px;text-align:center" onclick="event.stopPropagation();goPage('page-alert')">
              <div style="font-size:16px;font-weight:600;color:#ff4d4f">1</div>
              <div style="font-size:11px;color:#8c8c8c">今日预警</div>
            </div>
          </div>
        </div>

        <div class="stats" style="padding: 0 12px; margin-top: 12px;">
          <div class="stat-item blue" onclick="goPage('page-msg')">
            <div class="label">今日待办</div>
            <div class="value">8</div>
            <div class="delta up">较昨日 +2</div>
          </div>
          <div class="stat-item orange" onclick="goPage('page-msg')">
            <div class="label">预警客户</div>
            <div class="value">3</div>
            <div class="delta down">需立即跟进</div>
          </div>
          <div class="stat-item green" onclick="goPage('page-customers')">
            <div class="label">跟进客户</div>
            <div class="value">42</div>
            <div class="delta up">本周 +5</div>
          </div>
          <div class="stat-item purple" onclick="goPage('page-target')">
            <div class="label">本月业绩</div>
            <div class="value">¥ 88万</div>
            <div class="delta up">同比 +18%</div>
          </div>
        </div>

        <div class="card">
          <div class="card-title">
            快捷入口
          </div>
          <div class="quick-grid">
            <div class="quick-item" onclick="goPage('page-customer-add')">
              <div class="qicon" style="background:#1677ff"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0116 0v1"/><path d="M19 8v6M22 11h-6"/></svg></div>
              <div class="qlabel">新增客户</div>
            </div>
            <div class="quick-item" onclick="goPage('page-customers')">
              <div class="qicon" style="background:#00b578"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-6 9 6v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><path d="M9 21V12h6v9"/></svg></div>
              <div class="qlabel">客户列表</div>
            </div>
            <div class="quick-item" onclick="goPage('page-biz')">
              <div class="qicon" style="background:#722ed1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M5 9l7-7 7 7M5 15l7 7 7-7"/></svg></div>
              <div class="qlabel">商机管理</div>
            </div>
            <div class="quick-item" onclick="goPage('page-biz-new')">
              <div class="qicon" style="background:#ff8f1f"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg></div>
              <div class="qlabel">新建商机</div>
            </div>
            <div class="quick-item" onclick="goPage('page-followup')">
              <div class="qicon" style="background:#13c2c2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0z"/><path d="M9 11l2 2 4-4"/></svg></div>
              <div class="qlabel">跟进记录</div>
            </div>
            <div class="quick-item" onclick="goPage('page-target')">
              <div class="qicon" style="background:#8c54ff"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div>
              <div class="qlabel">销售目标</div>
            </div>
            <div class="quick-item" onclick="goPage('page-msg')">
              <div class="qicon" style="background:#ff4d4f"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 004 0"/></svg></div>
              <div class="qlabel">消息中心</div>
            </div>
            <div class="quick-item" onclick="goPage('page-attendance')">
              <div class="qicon" style="background:#1677ff"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1118 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
              <div class="qlabel">外勤打卡</div>
            </div>
            <div class="quick-item" onclick="goPage('page-report')">
              <div class="qicon" style="background:#00b578"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h8"/></svg></div>
              <div class="qlabel">外勤报备</div>
            </div>
            <div class="quick-item" onclick="goPage('page-alert')">
              <div class="qicon" style="background:#ff4d4f"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/></svg></div>
              <div class="qlabel">离岗预警</div>
            </div>
            <div class="quick-item" onclick="goPage('page-product')">
              <div class="qicon" style="background:#722ed1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
              <div class="qlabel">产品选择</div>
            </div>
            <div class="quick-item" onclick="goPage('page-erp')">
              <div class="qicon" style="background:#1677ff"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div>
              <div class="qlabel">ERP订单</div>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-title">待办任务 <span class="more" onclick="goPage('page-msg')">查看全部 ›</span></div>
          <div class="list-item" onclick="goPage('page-msg')">
            <div class="avatar" style="background:#ff4d4f">!</div>
            <div class="content">
              <div class="top-line"><span class="name">王芳的客户「ABC科技」合同即将到期</span><span class="time">10:30</span></div>
              <div class="desc">建议尽快安排续约沟通...</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <div class="list-item" onclick="goPage('page-msg')">
            <div class="avatar" style="background:#ff8f1f">⚡</div>
            <div class="content">
              <div class="top-line"><span class="name">「未来制造」30天未跟进，请尽快联系</span><span class="time">09:15</span></div>
              <div class="desc">系统检测到该客户已超过30天无跟进记录...</div>
            </div>
            <div class="arrow">›</div>
          </div>
        </div>
      </div>

      <!-- ============== 消息中心 ============== -->
      <div class="page" id="page-msg">
        <div class="nav center-title" style="background:#1677ff">
          <div class="placeholder-back"></div>
          <div class="title">消息中心 <span style="font-size:12px;font-weight:normal;opacity:.85">(3)</span></div>
          <div class="right" onclick="showToast('已全部标记已读')">全部已读</div>
        </div>

        <div class="msg-group">
          <div class="group-title">预警提醒 · 2</div>
          <div class="list-item" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#ff4d4f">!</div>
            <div class="content">
              <div class="top-line"><span class="name">合同到期预警 <span class="tag tag-red">紧急</span></span><span class="time">10:30</span></div>
              <div class="desc">客户「ABC科技」的「数据中台采购合同」将于 3 天后到期，请尽快推进续约...</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <div class="list-item" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#ff8f1f">⚡</div>
            <div class="content">
              <div class="top-line"><span class="name">客户流失风险 <span class="tag tag-orange">高</span></span><span class="time">09:15</span></div>
              <div class="desc">「未来制造」30 天未跟进，AI 评估为高流失风险，建议今日上门拜访...</div>
            </div>
            <div class="arrow">›</div>
          </div>
        </div>

        <div class="msg-group">
          <div class="group-title">待办任务 · 1</div>
          <div class="list-item" onclick="showToast('打开跟进详情')">
            <div class="avatar" style="background:#1677ff">✓</div>
            <div class="content">
              <div class="top-line"><span class="name">本周客户回访 <span class="tag tag-blue">任务</span></span><span class="time">昨天</span></div>
              <div class="desc">需完成 5 位重点客户的本周回访，已完成 2/5</div>
            </div>
            <div class="arrow">›</div>
          </div>
        </div>

        <div class="msg-group">
          <div class="group-title">系统通知</div>
          <div class="list-item" onclick="showToast('查看通知详情')">
            <div class="avatar" style="background:#00b578">⚙</div>
            <div class="content">
              <div class="top-line"><span class="name">钉钉工作台同步完成</span><span class="time">08:00</span></div>
              <div class="desc">今日组织架构已同步，新增同事 2 人，离职 1 人</div>
            </div>
            <div class="arrow">›</div>
          </div>
        </div>
      </div>

      <!-- ============== 客户列表 ============== -->
      <div class="page" id="page-customers">
        <div class="search-bar">
          <div class="search-input">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <input placeholder="搜索客户名称/联系人" />
          </div>
        </div>
        <div class="filter-chips">
          <div class="chip active">全部 42</div>
          <div class="chip">我负责的 28</div>
          <div class="chip">公海 14</div>
          <div class="chip">A类 6</div>
          <div class="chip">B类 18</div>
          <div class="chip">C类 18</div>
        </div>

        <!-- 八大客户体系筛选 -->
        <div class="sys-filter-title">
          <span>八大客户体系</span>
          <span class="sf-hint" onclick="openSysSheet()">全部体系 ›</span>
        </div>
        <div class="sys-filter-chips">
          <div class="sys-chip active" data-sys="all" onclick="filterBySys(this)"><span class="sc-emoji">🏷</span>全部<span class="sc-count">42</span></div>
          <div class="sys-chip" data-sys="grid" onclick="filterBySys(this)"><span class="sc-emoji">⚡</span>国网/南网<span class="sc-count">8</span></div>
          <div class="sys-chip" data-sys="telco" onclick="filterBySys(this)"><span class="sc-emoji">📡</span>三大运营商<span class="sc-count">6</span></div>
          <div class="sys-chip" data-sys="oil" onclick="filterBySys(this)"><span class="sc-emoji">⛽</span>三桶油·加油站<span class="sc-count">5</span></div>
          <div class="sys-chip" data-sys="bank" onclick="filterBySys(this)"><span class="sc-emoji">🏦</span>银行<span class="sc-count">4</span></div>
          <div class="sys-chip" data-sys="edu" onclick="filterBySys(this)"><span class="sc-emoji">🎓</span>高校<span class="sc-count">3</span></div>
          <div class="sys-chip" data-sys="data" onclick="filterBySys(this)"><span class="sc-emoji">💾</span>数据中心<span class="sc-count">5</span></div>
          <div class="sys-chip" data-sys="mfg" onclick="filterBySys(this)"><span class="sc-emoji">🏭</span>工业制造<span class="sc-count">7</span></div>
          <div class="sys-chip" data-sys="reno" onclick="filterBySys(this)"><span class="sc-emoji">🏗</span>旧城改造<span class="sc-count">4</span></div>
        </div>

        <div class="alert-bar">
          <span>⚠️</span><span>3 位客户存在跟进风险，已生成预警</span>
        </div>

        <div class="card" style="padding:0;margin-top:0" id="customerListCard">
          <!-- 国网/南网 -->
          <div class="list-item" data-sys="grid" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#1677ff">A</div>
            <div class="content">
              <div class="top-line"><span class="name">ABC科技 <span class="tag sys-grid">⚡ 国网/南网</span> <span class="tag tag-red">紧急</span></span><span class="time" style="color:#ff4d4f">3天到期</span></div>
              <div class="desc">王芳 · 智能电网数据中台 · 合同 ¥ 580,000</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 工业制造 -->
          <div class="list-item" data-sys="mfg" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#ff8f1f">未</div>
            <div class="content">
              <div class="top-line"><span class="name">未来制造 <span class="tag sys-mfg">🏭 工业制造</span> <span class="tag tag-orange">高风险</span></span><span class="time">30天未跟</span></div>
              <div class="desc">陈强 · 智能产线方案 · 预计 ¥ 1,200,000</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 三大运营商 -->
          <div class="list-item" data-sys="telco" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#00b578">蓝</div>
            <div class="content">
              <div class="top-line"><span class="name">蓝海贸易 <span class="tag sys-telco">📡 三大运营商</span></span><span class="time">2天前</span></div>
              <div class="desc">林晓 · 运营商供应链系统 · 报价阶段</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 数据中心 -->
          <div class="list-item" data-sys="data" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#8c54ff">智</div>
            <div class="content">
              <div class="top-line"><span class="name">智能云科 <span class="tag sys-data">💾 数据中心</span></span><span class="time">5天前</span></div>
              <div class="desc">赵敏 · IDC 机房运维 SaaS · 续约中</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 高校 -->
          <div class="list-item" data-sys="edu" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#1677ff">远</div>
            <div class="content">
              <div class="top-line"><span class="name">远见教育 <span class="tag sys-edu">🎓 高校</span></span><span class="time">1周前</span></div>
              <div class="desc">孙涛 · 高校在线教学平台 · 商务谈判</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 三桶油·加油站 -->
          <div class="list-item" data-sys="oil" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#ff4d4f">中</div>
            <div class="content">
              <div class="top-line"><span class="name">中石油·杭州加油站 <span class="tag sys-oil">⛽ 三桶油·加油站</span> <span class="tag tag-green">新签</span></span><span class="time">3天前</span></div>
              <div class="desc">李站长 · 加油站收银系统 · 合同 ¥ 86,000</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 银行 -->
          <div class="list-item" data-sys="bank" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#722ed1">招</div>
            <div class="content">
              <div class="top-line"><span class="name">招商银行·西湖支行 <span class="tag sys-bank">🏦 银行</span></span><span class="time">4天前</span></div>
              <div class="desc">周行长 · 网点排队机系统 · 方案确认</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 旧城改造 -->
          <div class="list-item" data-sys="reno" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#d4380d">城</div>
            <div class="content">
              <div class="top-line"><span class="name">城南旧改指挥部 <span class="tag sys-reno">🏗 旧城改造</span></span><span class="time">6天前</span></div>
              <div class="desc">吴主任 · 安置房智能管控 · 商务谈判</div>
            </div>
            <div class="arrow">›</div>
          </div>
          <!-- 空态 -->
          <div class="empty" id="customerEmpty" style="display:none">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <div>该体系下暂无客户</div>
          </div>
        </div>
      </div>

      <!-- ============== 客户详情 ============== -->
      <div class="page" id="page-customer-detail">
        <div class="profile-header">
          <div style="height:6px"></div>
          <div class="profile-avatar">A</div>
          <div class="profile-name">ABC科技 <span class="tag tag-red" style="font-size:10px;margin-left:6px">紧急</span></div>
          <div class="profile-company">国网浙江杭州供电公司 · 信息中心</div>
          <div class="profile-tags">
            <span class="tag sys-grid">⚡ 国网/南网</span>
            <span class="tag">A类客户</span>
            <span class="tag">合同期</span>
            <span class="tag">数据中台</span>
          </div>
        </div>

        <div class="action-bar">
          <div class="btn btn-light" onclick="showToast('已拨打 138-xxxx-9527')">📞 打电话</div>
          <div class="btn btn-outline" onclick="goPage('page-visit-log-edit')">📋 写日志</div>
          <div class="btn btn-outline" onclick="goPage('page-followup-edit')">+ 写跟进</div>
          <div class="btn ai-btn" onclick="goPage('page-ai-insight')"><span class="ai-icon">✨</span>AI 洞察</div>
        </div>

        <div class="card" style="padding:0">
          <div class="info-row"><span class="label">所属体系</span><span class="value"><span class="tag sys-grid">⚡ 国网/南网</span></span></div>
          <div class="info-row"><span class="label">主联系人</span><span class="value">王芳 / CTO</span></div>
          <div class="info-row"><span class="label">联系电话</span><span class="value">138-xxxx-9527</span></div>
          <div class="info-row"><span class="label">客户来源</span><span class="value">钉钉商务合作</span></div>
          <div class="info-row"><span class="label">合同金额</span><span class="value" style="color:#ff4d4f;font-weight:600">¥ 580,000</span></div>
          <div class="info-row"><span class="label">到期时间</span><span class="value">2026-06-19 <span class="tag tag-red">3天后</span></span></div>
          <div class="info-row"><span class="label">所属销售</span><span class="value">小李（我）</span></div>
        </div>

        <div class="card">
          <div class="card-title">跟进时间线 <span class="more" onclick="goPage('page-followup-edit')">+ 写跟进</span></div>
          <div class="timeline">
            <div class="timeline-item">
              <div class="t-time">2026-06-15 14:30</div>
              <div class="t-title">电话沟通</div>
              <div class="t-desc">王芳反馈当前数据中台使用稳定，询问续约价格，已发送报价单。</div>
            </div>
            <div class="timeline-item">
              <div class="t-time">2026-06-08 10:00</div>
              <div class="t-title">拜访 · 客户现场</div>
              <div class="t-desc">与CTO王芳面谈，讨论下阶段数据治理需求，约定 3 天后回访。</div>
            </div>
            <div class="timeline-item">
              <div class="t-time">2026-05-20 16:45</div>
              <div class="t-title">钉钉IM沟通</div>
              <div class="t-desc">客户咨询订单详情，已转发合同 PDF 至客户钉钉。</div>
            </div>
          </div>
        </div>

        <!-- 关联商机 -->
        <div class="card">
          <div class="card-title">关联商机 <span class="more" onclick="goPage('page-biz-new')">+ 新建</span></div>
          <div class="biz-item" onclick="goPage('page-biz-detail')">
            <div class="biz-l" style="background:#fff1f0;color:#ff4d4f">📊</div>
            <div class="biz-c">
              <div class="biz-title">智能电网数据中台二期<span class="biz-stage stage-b">商务谈判</span></div>
              <div class="biz-meta">预计签约 6/30 · 负责人 小李 · 竞品 烽火</div>
            </div>
            <div class="biz-amount">¥ 580,000</div>
          </div>
          <div class="biz-item" onclick="goPage('page-biz-detail')">
            <div class="biz-l" style="background:#e8f3ff;color:#1677ff">📈</div>
            <div class="biz-c">
              <div class="biz-title">数据治理增值服务<span class="biz-stage stage-r">方案确认</span></div>
              <div class="biz-meta">预计签约 7/15 · 负责人 小李 · 决策人 王芳</div>
            </div>
            <div class="biz-amount">¥ 120,000</div>
          </div>
          <div class="biz-item" onclick="goPage('page-biz-detail')">
            <div class="biz-l" style="background:#fff7e6;color:#ff8f1f">🤝</div>
            <div class="biz-c">
              <div class="biz-title">采购管理模块扩充<span class="biz-stage stage-n">初步接洽</span></div>
              <div class="biz-meta">预计签约 8/20 · 负责人 小李 · 需求待评估</div>
            </div>
            <div class="biz-amount">¥ 80,000</div>
          </div>
        </div>

        <!-- ERP 订单 -->
        <div class="card">
          <div class="card-title">ERP 订单 <span class="more">查看全部 ›</span></div>
          <div class="erp-item" onclick="showToast('查看订单详情')">
            <div class="erp-l" style="background:#e8fff4;color:#00b578">📦</div>
            <div class="erp-c">
              <div class="erp-title">SO-20260312-001 · 数据中台 V1.0 <span class="erp-state delivered">已交付</span></div>
              <div class="erp-meta">下单 2026-03-12 · 已发货 · 已回款 70%</div>
            </div>
            <div class="erp-amount">¥ 580,000</div>
          </div>
          <div class="erp-item" onclick="showToast('查看订单详情')">
            <div class="erp-l" style="background:#f9f0ff;color:#722ed1">💰</div>
            <div class="erp-c">
              <div class="erp-title">SO-20250915-002 · 数据中台 V0.9 <span class="erp-state paid">已回款</span></div>
              <div class="erp-meta">下单 2025-09-15 · 验收完成 · 质保中</div>
            </div>
            <div class="erp-amount">¥ 480,000</div>
          </div>
          <div class="erp-item" onclick="showToast('查看订单详情')">
            <div class="erp-l" style="background:#e8f3ff;color:#1677ff">🚚</div>
            <div class="erp-c">
              <div class="erp-title">PO-20260601-008 · 维保服务 <span class="erp-state shipping">服务中</span></div>
              <div class="erp-meta">下单 2026-06-01 · 服务周期 6/1 - 8/31</div>
            </div>
            <div class="erp-amount">¥ 36,000</div>
          </div>
        </div>
      </div>

      <!-- ============== 商机列表 ============== -->
      <div class="page" id="page-biz">
        <div class="nav" style="background:#1677ff">
          <div class="back" onclick="historyBack()">‹</div>
          <div class="title">商机管理</div>
          <div class="right" onclick="goPage('page-biz-new')">+ 新建</div>
        </div>

        <div class="search-bar">
          <div class="search-input">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <input placeholder="搜索商机名称/客户" />
          </div>
        </div>

        <!-- 顶部数据看板 -->
        <div style="background:linear-gradient(135deg,#722ed1,#a855f7);color:#fff;margin:0 12px;border-radius:12px;padding:14px">
          <div style="font-size:12px;opacity:.85">本月商机总额 · 进行中 6 单</div>
          <div style="font-size:26px;font-weight:700;margin:4px 0">¥ 2,380,000</div>
          <div style="display:flex;gap:18px;margin-top:8px;font-size:11px;opacity:.92">
            <span>成交 ¥ 1,280,000 <i style="opacity:.7">· 53.8%</i></span>
            <span>预计 ¥ 780,000 <i style="opacity:.7">· 32.8%</i></span>
            <span>丢单 ¥ 320,000</span>
          </div>
        </div>

        <!-- 状态 Tab -->
        <div class="biz-filter-tabs">
          <div class="bft active" data-st="all" onclick="filterBizTab(this)">全部<span class="bfc">10</span></div>
          <div class="bft" data-st="open" onclick="filterBizTab(this)">进行中<span class="bfc">6</span></div>
          <div class="bft" data-st="won" onclick="filterBizTab(this)">已成交<span class="bfc">3</span></div>
          <div class="bft" data-st="lost" onclick="filterBizTab(this)">已丢单<span class="bfc">1</span></div>
        </div>

        <!-- 多维筛选行 -->
        <div class="filter-chips">
          <div class="chip active" onclick="openStageFilter()">🎯 全部阶段</div>
          <div class="chip">💰 金额 ▾</div>
          <div class="chip">📅 时间 ▾</div>
          <div class="chip">👤 销售</div>
        </div>

        <div class="alert-bar">
          <span>⏰</span><span>2 个商机超过 30 天未推进，建议近期跟进</span>
        </div>

        <div id="bizList">
          <div class="biz-card" data-st="open" data-stage="b" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">智能电网数据中台二期</div>
              <div class="bc-amount">¥ 580,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-grid">⚡ ABC科技</span>
              <span class="biz-stage stage-b">商务谈判</span>
              <span class="tag tag-red">紧急</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage">下一动作：送样 · 预计 6/22</span>
              <span class="bc-date">更新 2 小时前</span>
            </div>
          </div>

          <div class="biz-card" data-st="open" data-stage="r" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">智能产线 MES 方案</div>
              <div class="bc-amount">¥ 1,200,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-mfg">🏭 未来制造</span>
              <span class="biz-stage stage-r">方案确认</span>
              <span class="tag tag-orange">高风险</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage">下一动作：报价 · 预计 6/25</span>
              <span class="bc-date">更新 1 天前</span>
            </div>
          </div>

          <div class="biz-card" data-st="open" data-stage="q" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">运营商供应链 BSS 模块</div>
              <div class="bc-amount">¥ 360,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-telco">📡 蓝海贸易</span>
              <span class="biz-stage stage-q">报价中</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage">下一动作：合同谈判 · 预计 6/30</span>
              <span class="bc-date">更新 2 天前</span>
            </div>
          </div>

          <div class="biz-card" data-st="open" data-stage="n" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">IDC 机房运维 SaaS 续约</div>
              <div class="bc-amount">¥ 220,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-data">💾 智能云科</span>
              <span class="biz-stage stage-n">初步接洽</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage">下一动作：需求评估 · 预计 7/5</span>
              <span class="bc-date">更新 5 天前</span>
            </div>
          </div>

          <div class="biz-card" data-st="open" data-stage="r" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">高校在线教学平台采购</div>
              <div class="bc-amount">¥ 480,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-edu">🎓 远见教育</span>
              <span class="biz-stage stage-r">方案确认</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage">下一动作：送样 · 预计 6/28</span>
              <span class="bc-date">更新 1 周前</span>
            </div>
          </div>

          <div class="biz-card" data-st="open" data-stage="q" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">加油站收银系统首批 5 站</div>
              <div class="bc-amount">¥ 86,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-oil">⛽ 中石油·杭州加油站</span>
              <span class="biz-stage stage-q">报价中</span>
              <span class="tag tag-green">新签</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage">下一动作：合同签订 · 预计 6/20</span>
              <span class="bc-date">更新 3 天前</span>
            </div>
          </div>

          <div class="biz-card" data-st="won" data-stage="w" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">数据中台 V1.0 交付项目</div>
              <div class="bc-amount" style="color:#00b578">¥ 580,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-grid">⚡ ABC科技</span>
              <span class="biz-state won">✓ 已成交</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage" style="color:#00b578">成交日 2026-03-12</span>
              <span class="bc-date">· 交付中</span>
            </div>
          </div>

          <div class="biz-card" data-st="won" data-stage="w" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">银行网点排队机系统</div>
              <div class="bc-amount" style="color:#00b578">¥ 220,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-bank">🏦 招商银行·西湖支行</span>
              <span class="biz-state won">✓ 已成交</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage" style="color:#00b578">成交日 2026-05-20</span>
              <span class="bc-date">· 验收中</span>
            </div>
          </div>

          <div class="biz-card" data-st="won" data-stage="w" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">旧改安置房智能管控</div>
              <div class="bc-amount" style="color:#00b578">¥ 480,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag sys-reno">🏗 城南旧改指挥部</span>
              <span class="biz-state won">✓ 已成交</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage" style="color:#00b578">成交日 2026-04-08</span>
              <span class="bc-date">· 已交付 70%</span>
            </div>
          </div>

          <div class="biz-card" data-st="lost" data-stage="w" onclick="goPage('page-biz-detail')">
            <div class="bc-head">
              <div class="bc-title">某车联网 OTA 项目</div>
              <div class="bc-amount" style="color:#8c8c8c;text-decoration:line-through">¥ 320,000</div>
            </div>
            <div class="bc-meta">
              <span class="tag">⛔ 已丢单</span>
              <span class="biz-state lost">× 丢单</span>
              <span class="tag tag-red">竞品胜出</span>
            </div>
            <div class="bc-foot">
              <span class="bc-stage" style="color:#ff4d4f">丢单原因：价格过高</span>
              <span class="bc-date">丢单于 6/12</span>
            </div>
          </div>
        </div>
      </div>

      <!-- ============== 商机详情 ============== -->
      <div class="page" id="page-biz-detail">
        <div class="nav" style="background:#1677ff">
          <div class="back" onclick="historyBack()">‹</div>
          <div class="title">商机详情</div>
          <div class="right" onclick="showToast('已分享到钉钉')">分享</div>
        </div>

        <!-- 阶段进度条 -->
        <div class="stage-bar">
          <div class="sb-item done">
            <div class="sb-dot">1</div>
            <div class="sb-name">新建</div>
          </div>
          <div class="sb-item done">
            <div class="sb-dot">2</div>
            <div class="sb-name">跟进</div>
          </div>
          <div class="sb-item done">
            <div class="sb-dot">3</div>
            <div class="sb-name">报价</div>
          </div>
          <div class="sb-item current">
            <div class="sb-dot">4</div>
            <div class="sb-name">送样</div>
          </div>
          <div class="sb-item">
            <div class="sb-dot">5</div>
            <div class="sb-name">成交</div>
          </div>
        </div>

        <!-- 头部概要 -->
        <div style="background:#fff;padding:14px 16px 16px;border-bottom:1px solid #f2f3f5">
          <div style="font-size:17px;font-weight:600">智能电网数据中台二期</div>
          <div style="display:flex;align-items:baseline;gap:8px;margin-top:6px">
            <span style="font-size:24px;font-weight:700;color:#ff4d4f">¥ 580,000</span>
            <span class="biz-stage stage-b">商务谈判</span>
            <span class="tag tag-red">紧急</span>
          </div>
          <div style="font-size:12px;color:#8c8c8c;margin-top:6px">预计成交 2026-06-30 · 预计回款 2026-07-15 · 销售 小李</div>
        </div>

        <!-- 阶段推进操作 -->
        <div class="biz-ops">
          <div class="biz-op" onclick="showToast('已记录跟进')">+ 写跟进</div>
          <div class="biz-op" onclick="showToast('报价已发送')">📄 发报价</div>
          <div class="biz-op" onclick="showToast('已申请送样')">📦 申请送样</div>
          <div class="biz-op success" onclick="confirmBizWin()">✓ 成交</div>
          <div class="biz-op danger" onclick="confirmBizLost()">× 丢单</div>
        </div>

        <!-- 关联客户 -->
        <div class="card">
          <div class="card-title">关联客户 <span class="more" onclick="goPage('page-customer-detail')">查看详情 ›</span></div>
          <div class="list-item" style="padding:0" onclick="goPage('page-customer-detail')">
            <div class="avatar" style="background:#1677ff">A</div>
            <div class="content">
              <div class="top-line"><span class="name">ABC科技 <span class="tag sys-grid">⚡ 国网/南网</span></span><span class="time" style="color:#ff4d4f">3天到期</span></div>
              <div class="desc">王芳 / CTO · 138-xxxx-9527</div>
            </div>
            <div class="arrow">›</div>
          </div>
        </div>

        <!-- 产品明细 -->
        <div class="card">
          <div class="card-title">产品明细 <span class="more">+ 添加</span></div>
          <div class="prod-item">
            <div class="pi-icon">🖥</div>
            <div class="pi-info">
              <div class="pi-name">数据中台 V2.0 · 企业版</div>
              <div class="pi-spec">支持 200 节点 · 含 3 年维保</div>
              <div class="pi-qty">× 2 套</div>
            </div>
            <div class="pi-price">¥ 240,000</div>
          </div>
          <div class="prod-item">
            <div class="pi-icon">⚙</div>
            <div class="pi-info">
              <div class="pi-name">数据治理增值模块</div>
              <div class="pi-spec">质量 / 元数据 / 主数据</div>
              <div class="pi-qty">× 1 套</div>
            </div>
            <div class="pi-price">¥ 120,000</div>
          </div>
          <div class="prod-item">
            <div class="pi-icon">🛠</div>
            <div class="pi-info">
              <div class="pi-name">实施服务费</div>
              <div class="pi-spec">现场部署 30 人天</div>
              <div class="pi-qty">× 1</div>
            </div>
            <div class="pi-price">¥ 220,000</div>
          </div>
          <div style="display:flex;justify-content:space-between;padding-top:10px;border-top:1px dashed #f2f3f5;margin-top:4px">
            <span style="font-size:12px;color:#8c8c8c">合计 · 已含 8 折优惠</span>
            <span style="font-size:15px;font-weight:700;color:#ff4d4f">¥ 580,000</span>
          </div>
        </div>

        <!-- 阶段轨迹 -->
        <div class="card">
          <div class="card-title">阶段轨迹</div>
          <div class="phase-track">
            <div class="phase-item">
              <div class="pi-dot"></div>
              <div class="pi-c">
                <div class="pi-tt">送样申请中</div>
                <div class="pi-tm">2026-06-15 16:00 · 小李</div>
                <div class="pi-rmk">已提交送样申请，准备 POC 环境，等待客户确认演示时间</div>
              </div>
            </div>
            <div class="phase-item">
              <div class="pi-dot done"></div>
              <div class="pi-c">
                <div class="pi-tt">报价已发送</div>
                <div class="pi-tm">2026-06-12 11:30 · 小李</div>
                <div class="pi-rmk">发送报价单 V2.0，总价 ¥ 580,000，含 8 折优惠</div>
              </div>
            </div>
            <div class="phase-item">
              <div class="pi-dot done"></div>
              <div class="pi-c">
                <div class="pi-tt">方案确认</div>
                <div class="pi-tm">2026-06-08 14:00 · 小李</div>
                <div class="pi-rmk">客户技术团队对方案认可，进入商务报价阶段</div>
              </div>
            </div>
            <div class="phase-item">
              <div class="pi-dot done"></div>
              <div class="pi-c">
                <div class="pi-tt">首次跟进</div>
                <div class="pi-tm">2026-05-28 10:00 · 小李</div>
                <div class="pi-rmk">拜访国网浙江杭州供电公司，调研二期需求</div>
              </div>
            </div>
            <div class="phase-item">
              <div class="pi-dot done"></div>
              <div class="pi-c">
                <div class="pi-tt">商机新建</div>
                <div class="pi-tm">2026-05-20 09:15 · 小李</div>
                <div class="pi-rmk">从 ABC 科技客户档案创建，初始金额预估 ¥ 600,000</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 跟进记录 -->
        <div class="card">
          <div class="card-title">跟进记录 <span class="more" onclick="showToast('查看全部')">全部 8 条 ›</span></div>
          <div class="timeline">
            <div class="timeline-item">
              <div class="t-time">2026-06-15 14:30</div>
              <div class="t-title">电话沟通 · 王芳</div>
              <div class="t-desc">询问续约价格，已发送报价单 V2.0，客户表示需要走内部审批</div>
            </div>
            <div class="timeline-item">
              <div class="t-time">2026-06-08 10:00</div>
              <div class="t-title">客户现场拜访</div>
              <div class="t-desc">与 CTO 王芳面谈，讨论下阶段数据治理需求，约定送样时间</div>
            </div>
            <div class="timeline-item">
              <div class="t-time">2026-05-28 15:20</div>
              <div class="t-title">钉钉 IM · 技术交流</div>
              <div class="t-desc">发送产品白皮书 V2.0，客户技术团队初步认可</div>
            </div>
          </div>
        </div>
      </div>

      <!-- ============== 新建商机 ============== -->
      <div class="page" id="page-biz-new">
        <div class="nav" style="background:#1677ff">
          <div class="back" onclick="historyBack()">‹</div>
          <div class="title">新建商机</div>
          <div class="right" onclick="submitBiz()">保存</div>
        </div>

        <div class="form-group" onclick="openCustomerPicker()"><div class="lbl">关联客户</div><div class="ctrl" id="bn-customer" style="color:#8c8c8c;display:flex;align-items:center;justify-content:space-between">请选择客户 ›<span style="color:#1677ff">›</span></div></div>
        <div class="form-group"><div class="lbl">商机名称</div><div class="ctrl"><input placeholder="如：智能电网数据中台二期" value=""/></div></div>
        <div class="form-group"><div class="lbl">商机金额</div><div class="ctrl" style="display:flex;align-items:center;gap:4px"><span style="color:#8c8c8c">¥</span><input type="number" placeholder="预估金额" value=""/></div></div>
        <div class="form-group" onclick="openTimePicker('start')"><div class="lbl">预计成交</div><div class="ctrl" id="bn-date" style="color:#1f2329;display:flex;align-items:center;justify-content:space-between">2026-07-30<span style="color:#1677ff">›</span></div></div>
        <div class="form-group" onclick="openStageFilter()"><div class="lbl">当前阶段</div><div class="ctrl" style="color:#1677ff;display:flex;align-items:center;justify-content:space-between">初步接洽<span style="color:#1677ff">›</span></div></div>
        <div class="form-group"><div class="lbl">客户体系</div><div class="ctrl" style="color:#8c8c8c;display:flex;align-items:center;justify-content:space-between">选择后自动填充 ›<span style="color:#1677ff">›</span></div></div>
        <div class="form-group"><div class="lbl">负责人</div><div class="ctrl" style="color:#1f2329">小李（我）</div></div>
        <div class="form-group" style="align-items:flex-start"><div class="lbl" style="padding-top:6px">备注</div><div class="ctrl"><textarea placeholder="商机背景、关键信息等">
📌 创建说明
1. 商机必须关联一个客户；
2. 金额将作为业绩预测依据；
3. 创建后自动进入 初步接洽 阶段，可随时推进；
4. 支持钉钉同步推送至客户群。
拜访 · 蓝海贸易昨天 10:00
现场演示供应链系统，客户对库存预警模块很感兴趣
拜访