.cards {
  /* 移除 Flex 布局，依赖 Bootstrap 栅格 */
}

.cards .red {
  background-color: var(--brand-900);
}

.cards .blue {
  background-color: var(--brand-700);
}

.cards .green {
  background-color: #1f7a3b;
}

.cards .card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100px;
  width: 100%; /* 适配栅格宽度 */
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  transition: 400ms;
}

.stat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: 400ms;
}

.cards .card p.tip {
  font-size: 1em;
  font-weight: 700;
}

.cards .card p.second-text {
  font-size: .7em;
}

.cards .card:hover {
  transform: scale(1.05); /* 略微减小缩放比例以适应布局 */
  z-index: 10;
}

.stat-card:hover {
  transform: scale(1.03, 1.03);
  z-index: 10;
}

/* 适配 Bootstrap 结构的模糊选择器：选择 .cards 下所有直接子元素的 .card 子元素 */
.cards:hover .col-md-3:not(:hover) .card {
  filter: blur(5px); /* 降低模糊度以提升视觉体验 */
  transform: scale(0.95);
  opacity: 0.7;
}

/* 如果鼠标直接悬浮在某个 col 上，确保该 col 内的 card 不模糊 */
.cards .col-md-3:hover .card {
  filter: none;
  transform: scale(1.05);
  opacity: 1;
}