/* ═══════════════════════════════════════════════════════════════════════════
   品牌端「会员全息中心」排版收紧 + 动效底座
   MEMBERS_POLISH_20260930 · 九哥 12:21 指令
   —— 只改排版/间距/圆角/交互反馈，不动任何文字、数字、接口、业务逻辑
   —— 遵守全站视觉规范：静态黑白灰，唯一强调色紫 #7c3aed（只在点击/选中/hover 出现）
   —— 遵守动效铁律：只动 transform/opacity，点击 120ms / 小变化 200ms / 面板 320ms
   ═══════════════════════════════════════════════════════════════════════════ */

/* 作用域：只命中会员全息页，其他页一律不受影响 */
.member-holistic {
  max-width: none !important;   /* 原来写死 1200px，右边一大片空白 → 铺满 */
  width: 100% !important;
  animation: mhFadeUp .38s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mhFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── 页头收紧 ── */
.member-holistic .page-header { margin-bottom: 12px !important; align-items: center !important; }
.member-holistic .page-title { font-size: 18px !important; font-weight: 600 !important; }
.member-holistic .page-subtitle { font-size: 12px !important; color: #94a3b8 !important; }

/* ═══════════ 一、统计卡片组：按类收缩（核心修复） ═══════════
   原来写死 repeat(5,1fr)，每组只有 4~8 张卡 → 第二行右侧留空。
   改法：flex 自动换行 + 弹性拉伸，每行（包括最后一行）卡片等分铺满，绝不留右侧空位。 */
.member-holistic .stats-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
/* 卡片本身：统一高度、内容垂直居中、数值不被压 */
.member-holistic .stats-grid .stat-card {
  flex: 1 1 196px !important;
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 9px 11px !important;
  gap: 9px !important;
  align-items: center !important;
}
/* B 方案（2026-09-30 九哥定）：拉伸铺满、绝不留下空白。
   去掉单卡宽度封顶：同一行内卡片 flex 等分、自动拉伸补满整行；
   （已核对每组卡片数，任何一行剩余≥ 2 张，不会出现单卡撑满整行的异常） */
.member-holistic .stats-grid > .stat-card { max-width: none !important; }
.member-holistic .card-row > *            { max-width: none !important; }
.member-holistic .stats-grid .stat-icon {
  width: 30px !important; height: 30px !important; border-radius: 9px !important; flex: none;
}
.member-holistic .stats-grid .stat-label { font-size: 11px !important; line-height: 1.25 !important; }
.member-holistic .stats-grid .stat-value { font-size: 17px !important; line-height: 1.15 !important; }
.member-holistic .stats-grid .stat-sub { font-size: 10px !important; line-height: 1.3 !important; }

/* ═══════════ 二、水平卡片条（客群等级 / 活跃度 / 项目类型）═══════════
   同样改 flex 自动换行 + 拉伸：每行卡片等分铺满，最后一行也不再留右侧空位。 */
.member-holistic .card-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
.member-holistic .grade-row    > * { flex: 1 1 150px !important; min-width: 0 !important; }
.member-holistic .activity-row > * { flex: 1 1 168px !important; min-width: 0 !important; }
.member-holistic .service-row  > * { flex: 1 1 158px !important; min-width: 0 !important; }

/* 卡片内文字防截断：等级卡「卡内未做完…」等说明行原为 nowrap 会被裁掉 → 允许换行 */
.member-holistic .grade-card { overflow: visible !important; height: auto !important; }
.member-holistic .grade-meta-inline,
.member-holistic .grade-asset-line,
.member-holistic .grade-count { white-space: normal !important; overflow-wrap: anywhere !important; }
/* 活跃度/项目类型小卡内部是 nowrap flex 行：给内容兜底可收缩，杜绝横向裁切 */
.member-holistic .card-row .stat-card {
  gap: 6px !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
}
.member-holistic .card-row .stat-card .card-label { white-space: nowrap !important; flex: none !important; }
.member-holistic .card-row .stat-card .card-en {
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.member-holistic .card-row .stat-card .card-count,
.member-holistic .card-row .stat-card .card-pct { flex: none !important; }
.member-holistic .card-row .stat-card .card-icn { flex: none !important; }

/* 卡片统一：内容少的不再撑出大留白 */
.member-holistic .card-row .stat-card,
.member-holistic .grade-card {
  min-height: 56px !important;
  height: 100% !important;
  justify-content: center !important;
  padding: 9px 10px !important;
}
.member-holistic .grade-card { min-height: 88px !important; justify-content: flex-start !important; }
.member-holistic .card-count { font-size: 16px !important; }
.member-holistic .card-label { font-size: 11px !important; }
.member-holistic .card-pct,
.member-holistic .card-sublabel,
.member-holistic .grade-pct { font-size: 10px !important; }

/* ═══════════ 三、区块之间收紧，去掉多余纵向留白 ═══════════ */
.member-holistic .section-block { padding: 5px 0 !important; margin-bottom: 0 !important; }
.member-holistic .filter-bar,
.member-holistic .chart-section { margin-bottom: 10px !important; }
.member-holistic .list-card { padding: 16px !important; }

/* ═══════════ 四、统一卡片观感（黑白灰 + 12px 圆角 + 轻投影）═══════════ */
.member-holistic .stat-card,
.member-holistic .grade-card,
.member-holistic .mini-card,
.member-holistic .chart-card,
.member-holistic .tier-card {
  background: #fff !important;
  border: 1px solid #e8ecf1 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
/* hover / 选中：只出现紫边 + 淡紫底（唯一强调色只在交互时出现） */
.member-holistic .stat-card:hover,
.member-holistic .grade-card:hover,
.member-holistic .tier-card:hover {
  border-color: #7c3aed !important;
  background: #faf9ff !important;
  box-shadow: 0 6px 18px -6px rgba(124,58,237,.22) !important;
  transform: translateY(-1px) !important;
}
.member-holistic .grade-card.active,
.member-holistic .card-row .stat-card.active {
  border-color: #7c3aed !important;
  background: #f5f3ff !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,.16), 0 6px 18px -8px rgba(124,58,237,.28) !important;
}
/* 卡片顶部那条彩条：静态不出彩色，靠内容区分；hover/选中才用主色 */
.member-holistic .grade-card-top-bar,
.member-holistic .card-top-bar { height: 2px !important; opacity: .5 !important; }
.member-holistic .grade-card:hover .grade-card-top-bar,
.member-holistic .grade-card.active .grade-card-top-bar,
.member-holistic .card-row .stat-card:hover .card-top-bar,
.member-holistic .card-row .stat-card.active .card-top-bar { opacity: 1 !important; }

/* ═══════════ 五、胶囊标签统一 999px 药丸 ═══════════ */
.member-holistic .fb-pill,
.member-holistic .fb-toggle,
.member-holistic .chart-sec-toggle,
.member-holistic .tier-pill {
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  font-size: 12px !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease !important;
}
.member-holistic .fb-pill:hover,
.member-holistic .fb-toggle:hover,
.member-holistic .chart-sec-toggle:hover { border-color: #7c3aed !important; color: #7c3aed !important; }
.member-holistic .fb-pill.on { border-color: #7c3aed !important; background: #f5f3ff !important; color: #6d28d9 !important; font-weight: 600 !important; }

/* ═══════════ 六、响应式：窄屏自动收列，绝不留半行空位 ═══════════ */
@media (max-width: 1400px) {
  .member-holistic .stats-grid > .stat-card { flex-basis: 180px !important; }
}
@media (max-width: 1100px) {
  .member-holistic .stats-grid > .stat-card { flex-basis: 168px !important; }
  .member-holistic .mini-row   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
  .member-holistic .chart-row-3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
}
@media (max-width: 760px) {
  .member-holistic .stats-grid > .stat-card { flex-basis: 150px !important; }
  .member-holistic .activity-row > * { flex-basis: 140px !important; }
  .member-holistic .service-row  > * { flex-basis: 140px !important; }
  .member-holistic .grade-row    > * { flex-basis: 140px !important; }
  .member-holistic .mini-row,
  .member-holistic .chart-row-3,
  .member-holistic .chart-row { grid-template-columns: 1fr !important; }
}

/* ═══════════ 七、动效底座（与 motion-all-0930 同源）═══════════ */
/* 按压回弹：所有可点元素缩到 0.96，松手带弹性回弹 */
.member-holistic .stat-card,
.member-holistic .grade-card,
.member-holistic .tier-card,
.member-holistic .fb-pill,
.member-holistic .fb-toggle,
.member-holistic .chart-sec-toggle,
.member-holistic .mini-card,
.member-holistic .op-btn,
.member-holistic .el-button { will-change: transform; }

/* 交错入场：卡片从下往上一张接一张冒出来（间隔 50ms，只动前 12 张） */
@keyframes mhEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.member-holistic.mh-in .stats-grid .stat-card,
.member-holistic.mh-in .card-row > *,
.member-holistic.mh-in .mini-card,
.member-holistic.mh-in .tier-card {
  animation: mhEnter .32s cubic-bezier(.34,1.56,.64,1) both;
}
.member-holistic.mh-in .stats-grid .stat-card:nth-child(n+13),
.member-holistic.mh-in .card-row > *:nth-child(n+13),
.member-holistic.mh-in .mini-card:nth-child(n+13),
.member-holistic.mh-in .tier-card:nth-child(n+13) { animation-delay: .25s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(1),
.member-holistic.mh-in .card-row > *:nth-child(1),
.member-holistic.mh-in .mini-card:nth-child(1),
.member-holistic.mh-in .tier-card:nth-child(1) { animation-delay: 0s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(2),
.member-holistic.mh-in .card-row > *:nth-child(2),
.member-holistic.mh-in .mini-card:nth-child(2),
.member-holistic.mh-in .tier-card:nth-child(2) { animation-delay: .05s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(3),
.member-holistic.mh-in .card-row > *:nth-child(3),
.member-holistic.mh-in .mini-card:nth-child(3),
.member-holistic.mh-in .tier-card:nth-child(3) { animation-delay: .10s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(4),
.member-holistic.mh-in .card-row > *:nth-child(4),
.member-holistic.mh-in .mini-card:nth-child(4),
.member-holistic.mh-in .tier-card:nth-child(4) { animation-delay: .15s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(5),
.member-holistic.mh-in .card-row > *:nth-child(5),
.member-holistic.mh-in .mini-card:nth-child(5),
.member-holistic.mh-in .tier-card:nth-child(5) { animation-delay: .20s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(6),
.member-holistic.mh-in .card-row > *:nth-child(6),
.member-holistic.mh-in .mini-card:nth-child(6),
.member-holistic.mh-in .tier-card:nth-child(6) { animation-delay: .25s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(7),
.member-holistic.mh-in .card-row > *:nth-child(7),
.member-holistic.mh-in .mini-card:nth-child(7),
.member-holistic.mh-in .tier-card:nth-child(7) { animation-delay: .30s; }
.member-holistic.mh-in .stats-grid .stat-card:nth-child(8),
.member-holistic.mh-in .card-row > *:nth-child(8),
.member-holistic.mh-in .mini-card:nth-child(8),
.member-holistic.mh-in .tier-card:nth-child(8) { animation-delay: .35s; }

/* 进度/占比条：进页时从左往右铺开 */
@keyframes mhBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.member-holistic.mh-in .mini-seg { transform-origin: left center; animation: mhBarGrow .5s cubic-bezier(.2,.8,.2,1) both; }

/* 面板/弹窗：从下往上 320ms 推上来（会员页里的 el-dialog） */
.member-holistic + .el-overlay .el-dialog,
.el-overlay .el-dialog.mh-panel { animation: mhPanelIn .32s cubic-bezier(.32,.72,0,1) both; }
@keyframes mhPanelIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* 系统「减弱动态效果」：全部关掉，页面直接出现 */
@media (prefers-reduced-motion: reduce) {
  .member-holistic,
  .member-holistic * { animation: none !important; transition: none !important; }
}