/* ================= 框架布局（PC 端） ================= */
.app{display:flex;min-height:100vh}
.sidebar{
  width:220px;background:#1f2937;color:#cbd5e1;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;z-index:100;
  transition:transform .22s ease,visibility .22s ease;   /* 整块收起时有滑动过渡 */
}
.sidebar .logo{padding:18px 18px 14px;border-bottom:1px solid #374151}
.sidebar .logo .t{color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px}
.sidebar .logo .s{color:#8b98a5;font-size:11.5px;margin-top:2px}
.sidebar nav{flex:1;overflow-y:auto;padding:10px 0}
.sidebar nav a{
  display:flex;align-items:center;gap:9px;padding:9px 18px;color:#cbd5e1;font-size:14px;
  border-left:3px solid transparent;transition:.15s;
}
.sidebar nav a:hover{background:#374151;color:#fff}
.sidebar nav a.on{background:#374151;color:#fff;border-left-color:var(--brand)}
.sidebar nav a .ic{width:18px;text-align:center;font-size:15px}
.sidebar .grp{color:#6b7280;font-size:11.5px;padding:12px 18px 4px;letter-spacing:1px}
.main{flex:1;margin-left:220px;min-width:0;transition:margin-left .22s ease}
.topbar{
  height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:50;
}
.topbar .title{font-size:16px;font-weight:700}
.topbar .uinfo{display:flex;align-items:center;gap:12px;font-size:13.5px}
.tleft{display:flex;align-items:center;gap:8px;min-width:0}
.tleft .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 左侧主菜单整块收起/展开（按钮在顶栏最左，收起后常驻可再点开） */
.navtog{
  width:32px;height:32px;flex:0 0 auto;border:0;background:none;border-radius:7px;cursor:pointer;
  color:var(--tx2);display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0;
}
.navtog:hover{background:#eef2f7;color:var(--tx)}
.navtog.on{color:var(--brand);background:var(--brand-l)}   /* 已收起：给个视觉呼应 */
body.fold .sidebar{transform:translateX(-100%);visibility:hidden;pointer-events:none}
body.fold .main{margin-left:0}

.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.page{padding:20px}
@media(max-width:860px){
  /* 窄屏退化成图标栏：只留图标，文字与分组标题收起（原来连同 .ic 图标一起被隐藏，菜单是空的） */
  .sidebar{width:60px}
  .sidebar .logo{padding:16px 0;text-align:center}
  .sidebar .logo .t,.sidebar .logo .s,.sidebar .grp,.sidebar nav a>span:not(.ic){display:none}
  .sidebar nav a{padding:10px 0;justify-content:center;gap:0}
  .sidebar nav a .ic{font-size:17px}
  .main{margin-left:60px}
}

/* ================= 看板 ================= */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.bcol{background:#eef2f7;border-radius:12px;width:250px;flex-shrink:0;min-height:180px;display:flex;flex-direction:column;max-height:calc(100vh - 230px)}
.bcol .ch{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700;border-bottom:1px solid #e2e8f0;flex:0 0 auto}
.bcol .ch .n{background:#fff;border-radius:20px;padding:0 8px;font-size:12px;color:var(--tx2);font-weight:600}
/* 卡片区独立滚动：每个阶段列各自滚动，不带动整页 */
.bcol .cl{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:60px;overflow-y:auto;flex:1 1 auto;overscroll-behavior:contain}
.bcol .cl::-webkit-scrollbar{width:6px}
.bcol .cl::-webkit-scrollbar-thumb{background:#c8d3e0;border-radius:3px}
.bcol .cl::-webkit-scrollbar-track{background:transparent}
.bcol .sum{padding:6px 12px;font-size:12px;color:var(--tx2);border-top:1px solid #e2e8f0;flex:0 0 auto}
.ocard{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 11px;cursor:pointer;transition:.15s}
.ocard:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:#c7d2fe}
.ocard .t{font-size:13.5px;font-weight:600;line-height:1.4;margin-bottom:5px}
/* 卡片首行：标题 + 右上角编辑图标（点图标改基本信息，点卡片看详情） */
.ocard .th{display:flex;align-items:flex-start;gap:6px;margin-bottom:5px}
.ocard .th .t{flex:1 1 auto;min-width:0;margin-bottom:0}
.ocard .oi{flex:0 0 auto;border:0;background:transparent;color:#94a3b8;cursor:pointer;padding:2px;border-radius:5px;line-height:0;font-family:inherit}
.ocard .oi:hover{background:#eef2f7;color:var(--brand)}
.ocard .m{font-size:12px;color:var(--tx2);display:flex;align-items:center;justify-content:space-between;gap:6px}
.ocard .b{margin-top:6px;font-size:11.5px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.ocard .je{font-weight:700;color:var(--tx);font-size:13px}
/* 卡片右下角两个标签（C139 得分 / 建议赢率）并排，控件更紧凑 */
.ocard .pill{padding:2px 7px;font-size:11.5px}

/* ---------- 客户卡片网格（客户与 MCR 的卡片模式） ---------- */
/* 客户没有「阶段」这条主维度，不能照搬看板的阶段分列，用自适应网格铺开更合适；
   列宽 258px 与看板卡片列（250px）接近，视觉节奏一致。 */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}

/* ---------- 看板：分栏模式（左列表 + 右详情） ---------- */
.split{display:flex;gap:12px;align-items:flex-start}
.split .sl{width:320px;flex:0 0 320px;background:#eef2f7;border-radius:12px;padding:8px;max-height:calc(100vh - 230px);overflow-y:auto;overscroll-behavior:contain}
.split .sr{flex:1 1 auto;min-width:0;max-height:calc(100vh - 230px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.split .sl::-webkit-scrollbar,.split .sr::-webkit-scrollbar{width:6px}
.split .sl::-webkit-scrollbar-thumb,.split .sr::-webkit-scrollbar-thumb{background:#c8d3e0;border-radius:3px}
.split .sl::-webkit-scrollbar-track,.split .sr::-webkit-scrollbar-track{background:transparent}
.sg{margin-bottom:8px}
.sgh{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:12.5px;font-weight:700;color:var(--tx2)}
.sgh .n{background:#fff;border-radius:20px;padding:0 7px;font-size:11.5px;font-weight:600;color:var(--tx2)}
.sitem{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;transition:.15s;margin-bottom:6px}
.sitem:hover{border-color:#c7d2fe;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.sitem.on{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.18)}
.sitem .t{font-size:13px;font-weight:600;line-height:1.35;margin-bottom:4px}
.sitem .s{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--tx2)}
.sitem .s>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitem .s2{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px;font-size:11px;color:#94a3b8}
.sitem .je{font-weight:700;color:var(--tx);white-space:nowrap}

/* ---------- 看板：列表模式（表格 + 抽屉详情） ---------- */
/* 行可点：整行点开右侧抽屉看详情，行内「编辑商机」按钮改基本信息 */
.btbl .tbl-wrap{max-height:calc(100vh - 300px);overflow:auto}
.btbl thead th{position:sticky;top:0;z-index:1}
tbody tr.otr{cursor:pointer}
tbody tr.otr:hover{background:#f8fafc}
tbody tr.otr.sel,tbody tr.otr.sel:hover{background:#eef2ff}

/* 展示方式切换（卡片 / 分栏 / 列表） */
.seg{display:inline-flex;background:#eef2f7;border-radius:8px;padding:2px}
.seg button{border:0;background:transparent;padding:5px 12px;font-size:12.5px;border-radius:6px;cursor:pointer;color:var(--tx2);font-family:inherit}
.seg button:hover{color:var(--tx)}
.seg button.on{background:#fff;color:var(--tx);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- 卡片模式与列表模式点击行：右侧悬浮详情抽屉 ---------- */
.dw{position:fixed;inset:0;z-index:900;display:flex;justify-content:flex-end}
.dw.hide{display:none}
.dw-mask{position:absolute;inset:0;background:rgba(15,23,42,.35);animation:dwFade .18s ease}
.dw-panel{position:relative;width:min(900px,94vw);height:100%;background:#f6f8fb;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(15,23,42,.18);animation:dwIn .22s ease}
.dw-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:#fff;border-bottom:1px solid var(--line)}
.dw-head .tt{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--tx2);cursor:pointer;padding:0 8px;border-radius:6px;font-family:inherit}
.dw-x:hover{background:#eef2f7;color:var(--tx)}
.dw-body{flex:1 1 auto;overflow-y:auto;padding:16px;overscroll-behavior:contain}
.dw-body::-webkit-scrollbar{width:8px}
.dw-body::-webkit-scrollbar-thumb{background:#c8d3e0;border-radius:4px}
.dw-body::-webkit-scrollbar-track{background:transparent}
.ocard.sel{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.18)}
/* 表格行没有边框，选中态用底色 + 首列内阴影亮条表达（tr 上加 box-shadow 在部分浏览器不生效） */
tbody tr.otr.sel td:first-child{box-shadow:inset 3px 0 0 #6366f1}
@keyframes dwIn{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
@keyframes dwFade{from{opacity:0}to{opacity:1}}

/* ================= 详情 Tabs ================= */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{
  padding:9px 16px;border:0;background:none;cursor:pointer;color:var(--tx2);font-size:14px;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.tabs button:hover{color:var(--brand)}

/* ================= 时间轴 ================= */
.tl{position:relative;padding-left:20px}
.tl:before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .it{position:relative;padding-bottom:16px}
.tl .it:before{content:'';position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:0 0 0 2px var(--brand-l)}
.tl .it .h{font-size:13.5px;font-weight:600;margin-bottom:2px}
.tl .it .d{font-size:12px;color:var(--tx3);margin-bottom:4px}
.tl .it .c{font-size:13.5px;color:var(--tx2);background:#f8fafc;border-radius:8px;padding:8px 10px}

/* ================= C139 ================= */
.c139-head{display:flex;align-items:center;gap:20px;padding:16px 18px;background:linear-gradient(135deg,#f8fafc,#eef2f7);border-radius:12px;border:1px solid var(--line)}
.c139-score{text-align:center}
.c139-score .n{font-size:40px;font-weight:800;line-height:1}
.c139-score .l{font-size:12px;color:var(--tx2)}
.c139-parts{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:800px){.c139-parts{grid-template-columns:repeat(2,1fr)}}
.c139-p{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.c139-p .k{font-size:12px;color:var(--tx2)}
.c139-p .v{font-size:17px;font-weight:700}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
@media(max-width:800px){.acts{grid-template-columns:repeat(2,1fr)}}
.act{display:flex;align-items:center;gap:7px;font-size:13px;padding:6px 9px;border-radius:7px;background:#f8fafc;border:1px solid var(--line)}
.act.ok{background:var(--green-l);border-color:#bfe3cd;color:var(--green)}
.act.no{color:var(--tx3)}

/* 进度条 */
.bar{height:6px;background:#eef2f7;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:4px}
.bar i.green{background:var(--green)}.bar i.amber{background:var(--amber)}.bar i.red{background:var(--red)}

/* 权力地图卡片 */
.pm{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pm-c{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.pm-c .n{font-size:14px;font-weight:700}
.pm-c .r{font-size:12px;color:var(--tx2);margin-bottom:6px}

/* 漏斗 / 阶段分布 */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{padding:3px 10px;border:0;background:#fff;cursor:pointer;font-size:12px;color:var(--tx2);line-height:1.6}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--brand);color:#fff;font-weight:600}
.seg button:hover:not(.on){background:#f1f5f9}
.fn{margin-bottom:12px}
.fn .lb{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.fn .tr{height:10px;background:#eef2f7;border-radius:5px;overflow:hidden}
.fn .tr i{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb);border-radius:5px;min-width:0;transition:width .3s}
