/* ==================================================================
   流量分析 · 页面样式
   ------------------------------------------------------------------
   独立文件，排在 ec-polish.css / ec-market.css 之后加载 —— 只新增 .fv-* 类，
   不改 ec-design / ec-shell / ec-overview 里的任何既有规则。
   作用域全部挂在 #page-anTraffic 下，避免和别的页撞名。

   页面构成（自上而下）：
     工具栏  日期（ec-dp 面板）→ 粒度 → 区间 → 口径说明
     两列    天猫一列 / 京东一列，列头各带**单选**店铺切片器
              概览卡（当期 KPI + 同环比 + 可点走势 + 不完整黄条）
              下钻卡（8 列，每行右侧呼出走势弹窗）

   第 106 轮（老板五条）：下钻走势改弹窗 / 下钻补同环比成交转化 /
     店铺改单选切片器 / 概览走势可点跳期 / 单点卡去掉店铺列表。
   第 107 轮（老板两条）：
     ① 「单点流量可以不要了，我都有流量下钻了」⇒ 整卡删除，黄条搬进概览卡；
     ② 「日期的选择格式把右上角那个直接移动过来用」⇒ <select> 换成顶栏的
        .ec-dp-btn + 月历面板（灰的日期没数据，带黄点的是不完整期）。
   ================================================================== */

/* ---------- 顶部工具栏 ---------- */
#page-anTraffic .fv-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 0 0 14px;
}
#page-anTraffic .fv-grp {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
#page-anTraffic .fv-lab {
  font-size: 12px; color: var(--ink-3); flex: 0 0 auto; white-space: nowrap;
}

/* 粒度分段：日 / 月 / 年 —— 三项都要看得出"是按钮"（主页面与弹窗共用） */
#page-anTraffic .fv-gran {
  display: inline-flex; gap: 2px; padding: 2px;
  background: #eef0f4; border: 1px solid var(--panel-line); border-radius: 9px;
  flex: 0 0 auto;
}
#page-anTraffic .fv-gb {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink-2);
  height: 26px; min-width: 38px; padding: 0 12px; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
#page-anTraffic .fv-gb:hover { background: #e3e7ee; color: var(--ink-1); }
#page-anTraffic .fv-gb.on {
  background: #ffffff; color: var(--ink-1); font-weight: 650;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
#page-anTraffic .fv-gb.on:hover { background: #fff; }

/* ---------- 日期选择：顶栏那颗 `.ec-dp-btn` + 面板搬进本页（第 107 轮） ----------
   老板原话「日期的选择格式可以把右上角那个直接移动过来用」。
   样式的**真源仍在 ec-shell.css**（.ec-dp-btn / .ec-dp / .ec-dp-cal 等），这里只做三件事：
   ① 容器定位（顶栏是 right:0，这里要在按钮左下方展开）；② 宽度收到 268px；
   ③ 补「没数据的日子灰掉」「不完整期带黄点」这两条本页专属语义。 */
#page-anTraffic .fv-dp-w { position: relative; }
/* ★ r108：按钮宽度必须**固定**。切粒度时标签长度是三种（2026-10-30 · 半天 /
   2026-10 / 2026），按钮跟着缩，右边的「粒度 / 区间 / ?」就整体往左跳（老板报的）。
   178px 装得下最长的一档（实测 164px），三档切换宽度一模一样。
   ★ r109：区间标签「2026-10-07 ~ 10-26」实测 179px ⇒ 抬到 180，三档仍然一样宽。 */
#page-anTraffic .fv-dp-btn { height: 32px; font-size: 12.5px; min-width: 180px; }
/* 定宽后标签长短不一，箭头自己贴右边，否则短标签（「2026」）右边空一大块 */
#page-anTraffic .fv-dp-btn .ec-dp-cv { margin-left: auto; }
#page-anTraffic .fv-dp { left: 0; right: auto; width: 268px; }
#page-anTraffic .fv-dp-tt { font-size: 12.5px; font-weight: 650; color: var(--ink-1); }
/* 没上报的日期：灰掉且点不动（顶栏只有 disabled 的 hover 例外，没有颜色定义） */
#page-anTraffic .fv-dp .cal-day.disabled { color: #cfd8e6; cursor: default; }
#page-anTraffic .fv-dp .month-cell.disabled { color: #cfd8e6; background: #fbfcfe; border-color: #f0f4fa; cursor: default; }
#page-anTraffic .fv-dp .month-cell.disabled:hover { color: #cfd8e6; background: #fbfcfe; border-color: #f0f4fa; }
/* ★ 年格用 3 列：面板只有 268px，顶栏那套 4 列会把「2025年」挤成两行「2025 / 年」（实测）。
   月格 4 列能放下「10月」，年格必须放宽 + 禁止折行。 */
#page-anTraffic .fv-dp .ec-dp-years { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page-anTraffic .fv-dp .year-cell,
#page-anTraffic .fv-dp .month-cell { white-space: nowrap; }
/* 不完整期：右上角一个小黄点（用 ::before 让开 today 的蓝点 ::after） */
#page-anTraffic .fv-dp .cal-day.fv-cal-bad::before {
  content: ''; position: absolute; top: 3px; right: 4px;
  width: 4px; height: 4px; border-radius: 50%; background: #f0b429;
}
#page-anTraffic .fv-dp .cal-day.selected.fv-cal-bad::before { background: #ffe08a; }
#page-anTraffic .fv-range {
  font-size: 12px; color: var(--ink-3);
  white-space: nowrap; flex: 0 0 auto; padding-right: 2px;
}
#page-anTraffic .fv-help {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--panel-line); background: #fff;
  color: var(--ink-3); font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
}
#page-anTraffic .fv-help:hover { color: var(--ink-1); border-color: var(--ink-3); }

/* ---------- 两列：天猫左 / 京东右；列头带店铺切片器 ---------- */
#page-anTraffic .fv-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px; align-items: stretch;
}
#page-anTraffic .fv-col {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
/* 下钻卡吃掉列里剩下的高度 ⇒ 两列底边对齐（换列布局后 grid 不再自动拉同行等高） */
#page-anTraffic .fv-col > .fv-card-dr { flex: 1 1 auto; }
@media (max-width: 1180px) {
  #page-anTraffic .fv-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* 平台列头：平台名 + 店铺切片器（**单选**） */
#page-anTraffic .fv-ph {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 2px 0;
}
#page-anTraffic .fv-ph-n {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: 13.5px; font-weight: 650; color: var(--ink-1); white-space: nowrap;
}
#page-anTraffic .fv-ph-sl { font-size: 11.5px; color: var(--ink-3); margin-left: 4px; flex: 0 0 auto; }
#page-anTraffic .fv-sl {
  display: flex; flex-wrap: wrap; gap: 5px; min-width: 0;
}
#page-anTraffic .fv-slb {
  appearance: none; font: inherit; cursor: pointer;
  height: 26px; max-width: 190px; padding: 0 12px;
  border: 1px solid var(--panel-line); border-radius: 14px; background: #fff;
  color: var(--ink-2); font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
#page-anTraffic .fv-slb:hover { border-color: var(--ink-3); color: var(--ink-1); }
#page-anTraffic .fv-slb.on {
  background: #eef2ff; border-color: #c7d2fe; color: #4338ca; font-weight: 650;
}

#page-anTraffic .fv-card .ec-card-head h4 { flex: 0 0 auto; white-space: nowrap; }
#page-anTraffic .fv-pf { display: inline-flex; align-items: center; gap: 7px; }
#page-anTraffic .fv-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
}
/* 卡头事实标签：**不是 .hint** —— .hint 在本页被第 82 轮规则整条 display:none */
#page-anTraffic .fv-tag {
  font-size: 11.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  flex: 0 1 auto;
}

/* ---------- 概览：5 个 KPI + 同环比 + 走势 ---------- */
#page-anTraffic .fv-ov-pad { padding-bottom: 12px; }
#page-anTraffic .fv-kpi {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  box-shadow: none;
}
#page-anTraffic .fv-kpi > .ec-kpi-cell { padding: 10px 11px; }
#page-anTraffic .fv-kpi .ec-kpi-label { font-size: 11px; white-space: nowrap; }
/* 金额不折行：「¥969.7万」在窄格里一旦允许换行，「万」就掉到第二行（实测过） */
#page-anTraffic .fv-kpi .ec-kpi-value {
  font-size: 17px; margin-top: 4px; letter-spacing: -0.01em; white-space: nowrap;
}
#page-anTraffic .fv-cmps {
  display: flex; flex-direction: column; gap: 1px; margin-top: 6px;
}
#page-anTraffic .fv-cmp {
  display: flex; align-items: baseline; gap: 4px; font-size: 10.5px; line-height: 1.35;
  white-space: nowrap;
}
#page-anTraffic .fv-cmp em { font-style: normal; color: var(--ink-3); flex: 0 0 auto; }
#page-anTraffic .fv-cmp b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 点 KPI 格切走势图指标（r108）：选中的那格压一条主色下划线，未选中悬停给反馈 */
#page-anTraffic .fv-kc { cursor: pointer; transition: background .15s, box-shadow .15s; }
#page-anTraffic .fv-kc:hover { background: #f8fafc; }
#page-anTraffic .fv-kc.is-on { background: #f5f7ff; box-shadow: inset 0 -2px 0 #4f46e5; }
#page-anTraffic .fv-kc.is-on .ec-kpi-label { color: #4338ca; font-weight: 650; }
#page-anTraffic .fv-kc:focus-visible { outline: 2px solid rgba(79, 70, 229, .45); outline-offset: -2px; }
/* 涨红跌绿（中国习惯）：danger 红 / success 绿 / 持平灰 */
#page-anTraffic .fv-cmp b.up,
#page-anTraffic .fv-dr-c.up { color: #d92d20; }
#page-anTraffic .fv-cmp b.down,
#page-anTraffic .fv-dr-c.down { color: #067647; }
#page-anTraffic .fv-cmp b.flat,
#page-anTraffic .fv-dr-c.flat { color: var(--ink-3); font-weight: 500; }
@media (max-width: 1440px) {
  #page-anTraffic .fv-kpi .ec-kpi-value { font-size: 15.5px; }
  #page-anTraffic .fv-cmp { font-size: 10px; }
}

/* 走势图：maintainAspectRatio:false 要求父容器有确定高度 */
#page-anTraffic .fv-cv { position: relative; height: 150px; margin-top: 14px; }
/* 图可点（切期次）—— 用指针光标表达，不写"点曲线切换期次"那种解释小字 */
#page-anTraffic .fv-cv canvas { cursor: pointer; }

/* 点上方走势图切期次后，把这一列的**下钻卡**闪一下（跳转要有反馈）
   ★ 第 107 轮删掉单点卡后，跳转目标从 .fv-card-pt 改成 .fv-card-dr */
@keyframes fv-flash-k {
  0% { outline-color: rgba(79, 70, 229, .55); }
  100% { outline-color: rgba(79, 70, 229, 0); }
}
#page-anTraffic .fv-card-dr.fv-flash {
  outline: 2px solid rgba(79, 70, 229, .55);
  animation: fv-flash-k 1.4s ease-out 1;
}

/* ---------- 流量下钻（8 列：当期 / 占比 / 环比 / 同比 / 支付金额 / 转化率 / 走势） ---------- */
#page-anTraffic .fv-pad-0 { padding: 0; }
#page-anTraffic .fv-dr-head,
#page-anTraffic .fv-dr-h,
#page-anTraffic .fv-sr-h {
  display: grid; align-items: center; gap: 6px;
  grid-template-columns: minmax(0, 1fr) 58px 46px 54px 54px 72px 50px 26px;
}
#page-anTraffic .fv-dr-head {
  font-size: 11px; color: var(--ink-3);
  padding: 9px 12px 7px 24px;
  border-bottom: 1px solid var(--panel-line-soft);
}
#page-anTraffic .fv-dr-head span:not(:first-child) { text-align: right; }
#page-anTraffic .fv-dr { border-top: 1px solid var(--panel-line-soft); position: relative; }
#page-anTraffic .fv-dr:first-of-type { border-top: 0; }
#page-anTraffic .fv-dr-h {
  width: 100%; padding: 9px 12px 9px 24px;
  font-size: 12px; color: var(--ink-2);
  position: relative; cursor: default;
}
#page-anTraffic .fv-dr-h.has-subs { cursor: pointer; }
#page-anTraffic .fv-dr-h:hover { background: #fafbfc; }
#page-anTraffic .fv-dr-ar {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--ink-3); transition: transform .14s ease;
}
#page-anTraffic .fv-dr-h:not(.has-subs) .fv-dr-ar { opacity: 0; }
#page-anTraffic .fv-dr.is-open .fv-dr-ar { transform: translateY(-50%) rotate(90deg); }
#page-anTraffic .fv-dr-k {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-1);
}
#page-anTraffic .fv-dr-k i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
#page-anTraffic .fv-dr-v { text-align: right; color: var(--ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }
#page-anTraffic .fv-dr-p { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#page-anTraffic .fv-dr-c { text-align: right; font-variant-numeric: tabular-nums; font-size: 11.5px; }
#page-anTraffic .fv-dr-g { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#page-anTraffic .fv-dr-r { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#page-anTraffic .fv-dr-go {
  appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
  width: 26px; height: 24px; border-radius: 6px; padding: 0;
  color: #94a3b8; font-size: 12px; line-height: 22px; text-align: center;
  justify-self: end;
}
#page-anTraffic .fv-dr-go:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
#page-anTraffic .fv-dr-b { padding: 0; }

/* 二级渠道：比一级再缩进一档，视觉上明确"在它下面" */
#page-anTraffic .fv-subs {
  padding-top: 2px; padding-bottom: 4px;
  background: #fbfcfe; border-top: 1px dashed var(--panel-line-soft);
}
#page-anTraffic .fv-sr-h { padding: 6px 12px 6px 40px; font-size: 11.5px; }
#page-anTraffic .fv-sr-k {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-2);
}
#page-anTraffic .fv-sr-tb { font-size: 9px; color: #cbd5e1; transform: rotate(90deg); flex: 0 0 auto; }
#page-anTraffic .fv-sr-h:hover { background: #f5f7fb; }
#page-anTraffic .fv-na { color: #cbd5e1; }

/* ★ r105：不完整期的黄条（半天快照 / 店铺没报齐） */
#page-anTraffic .fv-warn {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0 0 9px; padding: 7px 10px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 7px;
  font-size: 11.5px; line-height: 1.55; color: #92400e;
}
#page-anTraffic .fv-warn i { margin-top: 2px; color: #d97706; flex: 0 0 auto; font-size: 11px; }
#page-anTraffic .fv-warn b { color: #78350f; }
/* 数据体检类告警（两家店报表逐行相同）用红系，和"这期不完整"的琥珀色分开 */
#page-anTraffic .fv-warn.is-dup { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
#page-anTraffic .fv-warn.is-dup i { color: #dc2626; }
#page-anTraffic .fv-warn.is-dup b { color: #7f1d1d; }
/* ★ r115：换店后期次被回退（选的那一期这家店没报表）—— 中性蓝。
   它不是"数据有问题"，是"你选的那期这家店没有"，用琥珀色会让人以为报表坏了。 */
#page-anTraffic .fv-warn.is-fb { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
#page-anTraffic .fv-warn.is-fb i { color: #2563eb; }
#page-anTraffic .fv-warn.is-fb b { color: #1e3a8a; }

/* ---------- 走势弹窗（第 106 轮新增） ---------- */
#page-anTraffic .fv-modal {
  width: min(940px, 100%); max-height: 90vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .24);
  overflow: hidden;
}
#page-anTraffic .fv-m-h {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid #eef2f7;
}
#page-anTraffic .fv-m-h > b {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 14px; font-weight: 650; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-anTraffic .fv-m-sub { font-weight: 500; color: var(--ink-2); margin-left: 5px; }
#page-anTraffic .fv-m-x {
  margin-left: auto; flex: none; appearance: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; padding: 0;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-3); font-size: 13px; line-height: 24px; text-align: center;
}
#page-anTraffic .fv-m-x:hover { background: #f1f3f8; color: var(--ink-1); }
#page-anTraffic .fv-m-bar {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid #eef2f7; background: #fcfdff;
}
#page-anTraffic .fv-m-note { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
/* flex 子项要滚必须 min-height:0，否则被内容撑开、滚动条永远不出现 */
#page-anTraffic .fv-m-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px 14px; }
#page-anTraffic .fv-m-kpis {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
#page-anTraffic .fv-mk {
  background: #fafbfc; border: 1px solid var(--panel-line-soft); border-radius: 8px;
  padding: 8px 10px; min-width: 0;
}
#page-anTraffic .fv-mk-l {
  display: block; font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-anTraffic .fv-mk-v {
  display: block; margin-top: 3px;
  font-size: 16px; font-weight: 650; color: var(--ink-1); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-anTraffic .fv-mk-v.up { color: #d92d20; }
#page-anTraffic .fv-mk-v.down { color: #067647; }
#page-anTraffic .fv-mk-v.flat { color: var(--ink-3); }
#page-anTraffic .fv-m-cv { position: relative; height: 320px; margin-top: 12px; }
#page-anTraffic .fv-m-cv canvas { cursor: pointer; }
#page-anTraffic .fv-m-cap { margin-top: 6px; font-size: 11px; color: var(--ink-3); }
@media (max-width: 1180px) {
  #page-anTraffic .fv-m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-anTraffic .fv-m-cv { height: 240px; }
}

#page-anTraffic .fv-none {
  font-size: 12.5px; color: var(--ink-3); padding: 10px 0;
}
#page-anTraffic .fv-loading {
  font-size: 12.5px; color: var(--ink-3);
}

/* ==================================================================
   第 109 轮：日期**区间**选择 + 弹窗对齐概览
   ------------------------------------------------------------------
   老板：「年月日 里面 我要支持可以点两下 一个起 一个截止时间，增加范围选择的功能」
        「流量下钻的弹窗 要跟概况里面的内容一样。还有日期的选择也要一样」
   ⇒ ① 面板两次点击选起止；② 弹窗里搬进同款日期面板 + 同款 5 格 KPI（点格切指标）。
   日格的 in-range / range-start / range-end 样式在 ec-shell.css 里已有（顶栏那套），
   这里只补**月格 / 年格**（顶栏的月模式是多选，没有区间语义，所以没这套类）。
   ================================================================== */

/* 月格 / 年格：区间底色 + 起止圆角（与日格的视觉语言保持一致） */
#page-anTraffic .fv-dp .month-cell.in-range,
#page-anTraffic .fv-dp .year-cell.in-range {
  background: #e8f1ff; border-color: #d7e5fb; color: #1f4fd8; border-radius: 0;
}
#page-anTraffic .fv-dp .month-cell.in-range:hover,
#page-anTraffic .fv-dp .year-cell.in-range:hover { background: #dfeaff; border-color: #c6d8f2; }
#page-anTraffic .fv-dp .month-cell.selected.range-start,
#page-anTraffic .fv-dp .year-cell.selected.range-start { border-radius: 9px 0 0 9px; }
#page-anTraffic .fv-dp .month-cell.selected.range-end,
#page-anTraffic .fv-dp .year-cell.selected.range-end { border-radius: 0 9px 9px 0; }
/* 起止是同一天 / 同一个月时两个类同时出现 —— 圆角还原成整块，否则左边被削平 */
#page-anTraffic .fv-dp .cal-day.selected.range-start.range-end,
#page-anTraffic .fv-dp .month-cell.selected.range-start.range-end,
#page-anTraffic .fv-dp .year-cell.selected.range-start.range-end { border-radius: 9px; }
#page-anTraffic .fv-dp .cal-day.selected.range-start.range-end { border-radius: 8px; }

/* 按钮处于区间态时给个静默标记：不换色（那是"选中"的意思），只在 title 里说全量 */
#page-anTraffic .fv-dp-btn.is-rng .ec-dp-cv { color: #6b7a94; }

/* 等第二下时的提示是**两行**（"再点一次选截止" + "点同一天 = 只看这一天"），
   一行塞不下会把「共 N 天」挤到行中间（实拍 x1 看到的就是这个）。 */
#page-anTraffic .fv-dp .ec-dp-hint { align-items: flex-start; }
#page-anTraffic .fv-dp .ec-dp-tip { line-height: 1.55; }

/* 弹窗里的日期面板：从工具条往下展开，盖在 KPI 上（.fv-modal 是 overflow:hidden，
   面板高度 320px 左右、工具条在顶部，90vh 的弹窗装得下 —— 不会被切） */
#page-anTraffic .fv-m-bar { position: relative; z-index: 6; }
#page-anTraffic .fv-m-bar .fv-dp { left: 0; right: auto; width: 268px; top: 100%; margin-top: 6px; z-index: 30; }
/* 弹窗的 5 格 KPI 比概览宽一截，值可以给大一点（概览那边受列宽限制才压到 17px） */
#page-anTraffic .fv-m-kpi { margin-bottom: 2px; }
#page-anTraffic .fv-m-kpi .ec-kpi-label { white-space: nowrap; }
#page-anTraffic .fv-m-kpi .ec-kpi-value { white-space: nowrap; }

/* ===== r111 · 概况 5 格改吃销售日报 ===== */
/* 口径说明**常显**一行小字。不能靠 title 悬停：老板一眼看到「卡片 11,815 / 图上 21,982」
   只会得出"系统算错了"，不会去把鼠标挪上去。 */
#page-anTraffic .fv-src {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 8px 0 2px; padding: 7px 10px;
  border-radius: 8px; background: #f5f7fb; color: #64748b;
  font-size: 11.5px; line-height: 1.55;
}
#page-anTraffic .fv-src i { margin-top: 3px; color: #94a3b8; font-size: 11px; }
#page-anTraffic .fv-src b { color: #334155; font-weight: 600; }

/* 重复上报提示挂在下钻卡**下面**（父容器 .fv-pad-0 内边距是 0，得自己给） */
#page-anTraffic .fv-dup-note { margin: 0 14px 14px; }

/* 弹窗 KPI 上方的口径说明：弹窗是渠道口径，不是销售日报 */
#page-anTraffic .fv-m-src {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 7px; color: #7c8798; font-size: 11.5px;
}
#page-anTraffic .fv-m-src i { font-size: 10.5px; color: #9aa5b5; }