/* 销售业绩榜大屏样式 */
:root {
  --primary-color: #c1121f;
  --secondary-color: #f5f3f4;
  --highlight-color: #ffeb3b;
  --text-color: #ffffff;
  --dark-text: #333333;
  --card-bg: #ffffff;
  --border-color: #e63946;
  --item-bg: #f8f9fa;
  --item-hover: #f1f1f1;
  --item-active: #e2e3e5;
  --avatar-border: #ffd700;
  --badge-bg: #c1121f;
  --badge-text: #ffffff;
  --amount-color: #c1121f;
}

body.leaderboard-page {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background-color: #000000;
  color: var(--text-color);
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leaderboard-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #f8f9fa;
  position: relative;
  overflow: hidden;
}

/* 头部样式 */
.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #483e97;
  color: var(--text-color);
  padding: 0.7rem 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  height: 8vh; /* 减少顶部高度 */
}

.title-area {
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 3.5rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
  color: var(--text-color);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.sub-title {
  font-size: 1.8rem;
  font-weight: normal;
  margin: 0;
  color: var(--text-color);
  opacity: 0.9;
}

.info-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 1.5rem;
  font-weight: normal;
}

.date-time, .exchange-rate {
  font-size: 1.8rem;
  margin: 0.3rem 0;
}

.exchange-rate {
  display: none; /* 隐藏汇率显示 */
}

/* 主体内容区域 */
.leaderboard-main {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 修改为左右各占50% */
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  height: 80vh;
  background-color: #f0f2f5;
  overflow: hidden;
}

/* 左侧数据统计面板 */
.stats-panel {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 0.2rem; /* 大幅减少间距，让最近动态紧跟上半部分 */
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem; /* 减少面板内边距 */
  overflow-y: auto;
  height: 100%; /* 确保占满整个高度 */
}

/* 创建一个新的容器来包装询盘总数和成交金额 */
.stats-upper-section {
  display: flex;
  flex-direction: column;
  /* 使用固定高度而不是百分比，确保不会与最近动态重叠 */
  min-height: 320px; /* 设置最小高度，确保有足够空间显示目标信息 */
  flex-shrink: 0; /* 防止被压缩 */
  overflow: visible; /* 允许目标信息显示在外部 */
  margin-bottom: 0.8rem; /* 增加底部边距，确保与最近动态有安全距离 */
  gap: 0.5rem;
}

.stats-card {
  background-color: var(--card-bg);
  border-radius: 0.5rem;
  padding: 0rem; /* 进一步减少内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
  margin-bottom: 0.5rem; /* 减少卡片间距 */
  position: relative;
  flex: 1; /* 让两个卡片平分空间 */
  display: flex;
  flex-direction: column;
  /* 移除 justify-content: space-between，使用默认的 flex-start */
}

.stats-card:last-child {
  margin-bottom: 0; /* 最后一个卡片不需要底部边距 */
}

.stats-card h3 {
  font-size: 1.4rem; /* 进一步减小标题字体 */
  color: var(--dark-text);
  margin-top: 0;
  margin-bottom: 0.2rem; /* 减少标题下边距 */
}

.stats-panel .counter {
  font-size: 3rem; /* 进一步减小计数器字体 */
  font-weight: bold;
  color: var(--primary-color);
  margin: 0 0 0rem 0; /* 减少上下边距 */
  position: relative;
  line-height: 1.1; /* 减少行高 */
}

.stats-panel .deal-amount {
  font-size: 2.4rem; /* 进一步减小字体 */
  font-weight: bold;
  color: var(--primary-color);
  margin: 0 0 0rem 0; /* 与询盘计数器保持一致的边距 */
  line-height: 1.1;
}

.stats-panel .deal-amount::before {
  content: '¥';
  font-size: 1.3rem; /* 减小货币符号 */
  margin-right: 0.1rem;
}

/* 进度条相关样式调整 */
.progress-container {
  
  margin-bottom: 1.5rem; /* 增加底部空间，确保目标信息显示 */
  position: relative;
 
  display: block; /* 确保显示为块级元素 */
  visibility: visible; /* 确保可见性 */
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.1rem; /* 减少间距 */
}

.progress-label {
  font-size: 1.1rem; /* 减小标签字体 */
  color: #333;
  font-weight: bold;
}

.progress-percentage {
  font-size: 1.1rem; /* 减小百分比字体 */
  color: var(--primary-color);
  font-weight: bold;
}

.progress-bar-container {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  overflow: visible; /* 确保内容溢出时可见 */
  margin-bottom: 10px; /* 增加底部边距 */
  display: block;
}

.progress-bar-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.progress-bar-fill {
  position: relative;
  height: 100%;
  transition: width 1s ease-in-out;
  border-radius: 6px;
  background: linear-gradient(90deg, #8e44ad, #9b59b6);
  box-shadow: 0 0 10px rgba(142, 68, 173, 0.5);
}

#inquiryProgressBar {
  background: linear-gradient(90deg, #3498db, #2980b9);
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
}

#dealProgressBar {
  background: linear-gradient(90deg, #16a085, #1abc9c);
  box-shadow: 0 0 8px rgba(22, 160, 133, 0.4);
}

.progress-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.target-info {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: right;
  /* 使用相对定位，确保紧跟进度条，同时保持右对齐 */
  position: relative;
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1px 3px;
  border-radius: 3px;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* 为询盘和成交进度条的目标信息添加特定样式 */
#inquiryTargetInfo {
  color: #3498db; /* 使用与询盘进度条相同的颜色 */
}

#dealTargetInfo {
  color: #16a085; /* 使用与成交进度条相同的颜色 */
}

/* 最近动态区域使用剩余空间，确保不与上半部分重叠 */
.recent-activity-section {
  background-color: var(--card-bg);
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem; /* 减少顶部内边距，让标题更靠近上方 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  /* 使用flex-grow占据剩余空间，而不是固定百分比 */
  flex-grow: 1; /* 允许增长填满剩余空间 */
  min-height: 200px; /* 设置最小高度，确保有足够显示空间 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem; /* 确保与右侧容器底部对齐 */
}

/* 区域头部样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.recent-activity-section h3 {
  font-size: 1.3rem; /* 进一步减小标题字体 */
  color: var(--dark-text);
  margin: 0;
  font-weight: bold;
}

/* 指示器样式 */
.section-indicator {
  display: flex;
  gap: 0.3rem;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.indicator-dot.active {
  background-color: var(--primary-color);
}

/* 平台目标样式 - 全新设计 */
.platform-targets {
  height: 100%;
  overflow-y: auto;
  padding: 0.5rem;
}

/* 卡片布局（少于3个平台） */
.platform-targets.card-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* 列表布局（3个或以上平台） */
.platform-targets.list-layout {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* 确保不会产生滚动，所有内容都在可视区域内 */
  height: 100%;
  max-height: 100%;
  justify-content: space-evenly;
  overflow: hidden;
}

/* 6个以上平台的特殊优化 */
.platform-targets.list-layout.many-platforms {
  gap: 0.25rem;
  justify-content: space-between;
}

.platform-targets.many-platforms .platform-item.list-item {
  min-height: 45px;
  max-height: 48px;
  padding: 0.4rem 0.75rem;
}

.platform-targets.many-platforms .list-item .platform-name {
  font-size: 0.8rem;
}

.platform-targets.many-platforms .list-item .platform-status {
  font-size: 0.6rem;
  padding: 0.075rem 0.35rem;
}

.platform-targets.many-platforms .list-item .progress-label {
  font-size: 0.7rem;
}

.platform-targets.many-platforms .list-item .progress-percentage {
  font-size: 0.75rem;
}

.platform-targets.many-platforms .current-amount {
  font-size: 0.8rem;
}

.platform-targets.many-platforms .target-amount {
  font-size: 0.65rem;
}

.platform-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.platform-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), #06b6d4);
  border-radius: 0.75rem 0.75rem 0 0;
}

.platform-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--primary-color);
}

.platform-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.platform-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-text);
  margin: 0;
  letter-spacing: -0.025em;
}

.platform-status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background-color: #ecfdf5;
  color: #065f46;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.platform-status.warning {
  background-color: #fef3c7;
  color: #92400e;
}

.platform-status.danger {
  background-color: #fee2e2;
  color: #991b1b;
}

.platform-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-card {
  text-align: center;
}

.metric-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.metric-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.platform-progress-section {
  margin-top: 1rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.progress-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark-text);
}

.progress-percentage {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
}

.progress-bar-wrapper {
  position: relative;
  background-color: #e5e7eb;
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #06b6d4);
  border-radius: 9999px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, 
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.platform-item.single-column {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.platform-item.single-column::before {
  display: none;
}

/* 列表模式的平台项目样式 - 优化电视显示 */
.platform-item.list-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 50px;
  max-height: 55px;
  /* 确保每个项目占据相等的空间 */
  flex: 1;
}

.platform-item.list-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color);
}

.platform-item.list-item::before {
  width: 3px;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}

.list-item .platform-header {
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 100px;
  margin-right: 0.75rem;
}

.list-item .platform-name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
  line-height: 1.2;
}

.list-item .platform-status {
  padding: 0.1rem 0.4rem;
  font-size: 0.625rem;
  border-radius: 0.375rem;
}

.list-item .platform-metrics {
  display: none;
}

.list-item .platform-progress-section {
  flex: 1;
  margin-top: 0;
  margin-left: 0.75rem;
}

.list-item .progress-header {
  margin-bottom: 0.25rem;
}

.list-item .progress-label {
  font-size: 0.75rem;
  color: #6b7280;
}

.list-item .progress-percentage {
  font-size: 0.8rem;
  font-weight: 600;
}

.list-item .progress-bar-wrapper {
  height: 6px;
  background-color: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.list-item .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #06b6d4);
  border-radius: 3px;
  position: relative;
}

/* 根据状态调整进度条颜色 */
.list-item:has(.platform-status.danger) .progress-bar-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.list-item:has(.platform-status.warning) .progress-bar-fill {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.list-item:has(.platform-status:not(.warning):not(.danger)) .progress-bar-fill {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.list-item .progress-bar-fill::after {
  animation: shimmer 2.5s infinite;
}

.list-item-info {
  display: flex;
  align-items: center;
  margin-left: 0.75rem;
  min-width: 140px;
  justify-content: space-between;
}

.list-item-amount {
  text-align: right;
}

.current-amount {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-color);
  display: block;
  line-height: 1.2;
}

.target-amount {
  font-size: 0.6875rem;
  color: #6b7280;
  display: block;
  line-height: 1.2;
}

/* 单个平台特殊样式 */
.platform-item.single-platform {
  grid-column: 1 / -1;
  max-width: none;
}

.platform-metrics.single-platform-metrics {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .platform-targets.card-layout {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.25rem;
  }
  
  .platform-targets.list-layout {
    gap: 0.5rem;
    padding: 0.25rem;
  }
  
  .platform-item {
    padding: 1rem;
  }
  
  .platform-item.list-item {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 0.875rem 1rem;
  }
  
  .list-item .platform-header {
    margin-right: 0;
    margin-bottom: 0.75rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: auto;
  }
  
  .list-item .platform-progress-section {
    margin-left: 0;
    margin-bottom: 0.5rem;
  }
  
  .list-item-info {
    margin-left: 0;
    min-width: auto;
    justify-content: center;
  }
  
  .platform-metrics.single-platform-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .metric-value {
    font-size: 1.1rem;
  }
  
  .platform-name {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .platform-targets.card-layout,
  .platform-targets.list-layout {
    padding: 0;
  }
  
  .platform-item {
    padding: 0.75rem;
    margin: 0.25rem;
  }
  
  .platform-item.list-item {
    padding: 0.75rem;
    margin: 0.25rem 0;
  }
  
  .list-item .platform-name {
    font-size: 0.9rem;
  }
  
  .list-item .platform-status {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
  }
  
  .list-item .progress-percentage {
    font-size: 0.8rem;
  }
  
  .current-amount {
    font-size: 0.9rem;
  }
  
  .target-amount {
    font-size: 0.7rem;
  }
  
  .platform-metrics {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .platform-metrics.single-platform-metrics {
    grid-template-columns: 1fr;
  }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  grid-column: 1 / -1;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-text);
  margin: 0 0 0.5rem 0;
}

.empty-state p {
  color: #6b7280;
  margin: 0;
  font-size: 0.875rem;
}

.stats-panel .activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem; /* 减少活动项之间的间距 */
  flex: 1; /* 占满剩余空间 */
  overflow-y: auto;
}

.stats-panel .activity-item {
  display: flex;
  padding: 0.4rem; /* 减少内边距 */
  background-color: #f9f9f9;
  border-left: 3px solid var(--primary-color);
  border-radius: 0.3rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  font-size: 0.95rem; /* 稍微减小字体 */
  align-items: center;
  min-height: 2.2rem; /* 设定固定高度 */
  height: 2.2rem; /* 固定高度 */
  margin-bottom: 0.3rem; /* 项目间距 */
  overflow: hidden; /* 防止内容溢出 */
}

.stats-panel .activity-time {
  flex: 0 0 50px; /* 减少时间宽度 */
  font-size: 1.1rem; /* 减小时间字体 */
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.stats-panel .activity-icon {
  flex: 0 0 30px; /* 减少图标宽度 */
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #c1121f, #e63946);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin-right: 0.5rem;
  box-shadow: 0 3px 8px rgba(193, 18, 31, 0.24);
}

.stats-panel .activity-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stats-panel .activity-icon--deal {
  background: linear-gradient(135deg, #c1121f, #e63946);
  box-shadow: 0 3px 8px rgba(193, 18, 31, 0.24);
}

.stats-panel .activity-icon--inquiry-add {
  background: linear-gradient(135deg, #1f9d57, #2dbf6b);
  box-shadow: 0 3px 8px rgba(45, 191, 107, 0.28);
}

.stats-panel .activity-icon--inquiry-reduce {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.28);
}

.stats-panel .activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  color: var(--dark-text);
  font-size: 1.1rem; /* 减小内容字体 */
}

.stats-panel .activity-amount {
  flex: 0 0 80px; /* 减少金额宽度 */
  font-size: 1.3rem; /* 减小金额字体 */
  font-weight: bold;
  color: var(--amount-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 自动滚动相关样式 - 已禁用 */
.auto-scroll {
  /* 禁用自动滚动动画 */
  animation: none;
}

@keyframes scrollAnimation {
  /* 保留动画定义，但不会被使用 */
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* 当有新消息时闪烁高亮 */
@keyframes newActivity {
  0% { background-color: rgba(255, 248, 225, 1); }
  100% { background-color: rgba(255, 255, 255, 0.8); }
}

.new-activity {
  animation: newActivity 2s ease-out;
}

/* 团队成员展示区样式 - 占据右侧全部区域 */
.team-members {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background-color: var(--card-bg);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.team-members h3 {
  font-size: 1.8rem; /* 减小团队成员标题 */
  color: var(--dark-text);
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: center;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.5rem;
}

.team-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  justify-content: center;
  align-content: center;
  flex: 1;
  overflow: hidden;
  padding: 1rem;
  height: calc(100% - 5rem);
  max-height: calc(100vh - 15rem);
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  transition: transform 0.3s ease;
  
  justify-content: space-between;
  max-height: 300px;
}

.team-member.placeholder {
  opacity: 0;
  pointer-events: none;
}

.team-photo {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid var(--avatar-border);
  margin: 0 auto;
}

.team-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MVP皇冠样式 - 主页面团队成员 */
.team-mvp-crown {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
  border: 1px solid #FFA500;
  z-index: 10;
  animation: crownGlow 2s ease-in-out infinite alternate;
}

.team-mvp-text {
  font-size: 10px;
  font-weight: 700;
  color: #8B4513;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

@keyframes crownGlow {
  from {
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
  }
  to {
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.8);
  }
}

/* MVP成员特殊效果 */
.mvp-member {
  position: relative;
}

.mvp-member::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700, #FFA500);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.3;
  animation: mvpBorder 3s linear infinite;
}

@keyframes mvpBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.team-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--dark-text);
  
  text-align: center;
}

.team-position {
  font-size: 1rem;
  color: #666;
  margin: 0;
  text-align: center;
}

/* 原最近动态面板样式保留但不使用 */
.recent-activity {
  display: none;
}

/* 动画效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes highlight {
  0% { background-color: rgba(255, 235, 59, 0.2); }
  100% { background-color: transparent; }
}

.highlight {
  animation: highlight 2s ease-out;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .leaderboard-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .stats-panel {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  
  .leaderboard-panel {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .recent-activity {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
}

@media (max-width: 768px) {
  .leaderboard-header {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  
  .main-title {
    font-size: 2.5rem;
  }
  
  .sub-title {
    font-size: 1.5rem;
  }
  
  .info-area {
    align-items: flex-start;
    margin-top: 1rem;
  }
  
  .date-time, .exchange-rate {
    font-size: 1.2rem;
  }
  
  .dealer-list {
    grid-template-columns: 1fr;
  }
}

/* 目标进度条样式 */
.progress-container {
  
  margin-bottom: 1.5rem; /* 增加下边距，为目标信息文本提供更多空间 */
  position: relative; /* 添加定位上下文 */
}

.progress-info {
  display: flex;
  justify-content: space-between;
  
}

.progress-label {
  font-size: 1.8rem;
  color: #333;
  font-weight: bold;
}

.progress-percentage {
  font-size: 1.8rem;
  color: var(--primary-color);
  font-weight: bold;
}

.progress-bar-container {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.progress-bar-fill {
  position: relative;
  height: 100%;
  transition: width 1s ease-in-out;
  border-radius: 6px;
  background: linear-gradient(90deg, #8e44ad, #9b59b6);
  box-shadow: 0 0 10px rgba(142, 68, 173, 0.5);
}

#inquiryProgressBar {
  background: linear-gradient(90deg, #3498db, #2980b9);
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
}

#dealProgressBar {
  background: linear-gradient(90deg, #16a085, #1abc9c);
  box-shadow: 0 0 8px rgba(22, 160, 133, 0.4);
}

.progress-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* 重复样式已移除，使用上面的统一定义 */

/* 为询盘和成交进度条的目标信息添加特定样式 */
#inquiryTargetInfo {
  color: #3498db; /* 使用与询盘进度条相同的颜色 */
}

#dealTargetInfo {
  color: #16a085; /* 使用与成交进度条相同的颜色 */
}

/* 适配小屏幕 */
@media (max-width: 1200px) {
  .progress-container {
    margin-top: 10px;
    margin-bottom: 25px; /* 在小屏幕上提供更多空间 */
  }
  
  .progress-bar-container {
    height: 10px;
  }
  
  .progress-label, .progress-percentage {
    font-size: 12px;
  }
  
  .target-info {
    font-size: 0.8rem;
    /* 移除bottom定位，使用相对定位 */
  }
}

/* 超出目标时的特效 */
.progress-bar-fill.exceed {
  background: linear-gradient(90deg, #f39c12, #f1c40f);
  box-shadow: 0 0 20px rgba(243, 156, 18, 0.7);
  animation: pulsate 2s infinite;
}

/* 目标达成时的百分比显示强调 */
.percentage-exceed {
  color: #f39c12 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 2px rgba(243, 156, 18, 0.3);
}

@keyframes pulsate {
  0% {
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgba(243, 156, 18, 0.9);
  }
  100% {
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
  }
}

/* 给成交金额区域更多空间 */
.stats-card:nth-child(2) {
  flex: 1.3; /* 给成交金额卡片更多空间 */
}

/* 确保成交金额进度条在卡片内可见 */
.stats-card:nth-child(2) .progress-container {
  margin-top: 0.2rem;
  margin-bottom: 1.5rem; /* 与基础样式保持一致，确保目标信息有足够空间 */
  position: relative;
  display: block; /* 确保显示为块级元素 */
  visibility: visible; /* 确保可见性 */
}

/* 成交金额目标信息使用基础样式，不需要特殊覆盖 */

/* 调整询盘总数卡片 */
.stats-card:nth-child(1) {
  flex: 0.7;
}

/* 确保最后一项没有底部边距 */
.stats-panel .activity-item:last-child {
  margin-bottom: 0;
}

/* 进一步优化针对小屏幕的适配 */
@media screen and (max-width: 960px) {
  /* 小屏幕下确保布局不重叠 */
  .stats-upper-section {
    min-height: 280px; /* 小屏幕下减少高度，但仍确保足够空间 */
    margin-bottom: 0.6rem; /* 保持安全距离 */
  }
  
  .stats-card:nth-child(2) .progress-container {
    margin-bottom: 1.5rem; /* 保持与基础样式一致，确保目标信息有足够空间 */
  }
  
  .target-info {
    font-size: 0.7rem; /* 更小的字体 */
    /* 移除bottom定位，使用相对定位 */
    padding: 0 2px; /* 减少内边距 */
  }
  
  /* 优化最近动态区域 */
  .recent-activity-section {
    max-height: 62%; /* 增加最近动态区域的高度占比 */
    height: 62%; /* 设置固定高度 */
    padding: 0.3rem; /* 减少内边距 */
  }
  
  /* 调整最近动态区域的标题 */
  .recent-activity-section h3 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
    padding-bottom: 0.1rem;
  }
  
  /* 调整活动项目的大小 */
  .stats-panel .activity-item {
    min-height: 1.6rem; /* 减小最小高度 */
    height: 1.6rem; /* 减小固定高度 */
    padding: 0.25rem; /* 减少内边距 */
    margin-bottom: 0.15rem; /* 减少项目间距 */
  }
  
  /* 调整活动时间宽度和字体 */
  .stats-panel .activity-time {
    flex: 0 0 35px; /* 减少时间宽度 */
    font-size: 0.85rem; /* 减小时间字体 */
  }
  
  /* 调整活动图标大小 */
  .stats-panel .activity-icon {
    flex: 0 0 22px; /* 减少图标宽度 */
    width: 22px;
    height: 22px;
    margin-right: 0.2rem; /* 减少右边距 */
  }

  .stats-panel .activity-icon svg {
    width: 12px;
    height: 12px;
  }
  
  /* 减小活动内容文字大小 */
  .stats-panel .activity-content {
    font-size: 0.85rem;
  }
  
  /* 减小金额文字大小 */
  .stats-panel .activity-amount {
    flex: 0 0 65px;
    font-size: 1rem;
  }
  
  /* 确保最近动态区域中的内容可见 */
  .stats-panel .activity-list {
    max-height: calc(100% - 25px); /* 确保列表不会溢出容器 */
    gap: 0.15rem; /* 减少列表项之间的间距 */
  }
}

/* 特别针对Android设备的优化 */
@media screen and (max-width: 960px) and (max-height: 540px) {
  /* 进一步优化上半部分区域 */
  .stats-upper-section {
    min-height: 250px; /* 极小屏幕下的最小高度 */
    margin-bottom: 0.5rem; /* 保持安全距离 */
  }
  
  /* 调整卡片内部间距 */
  .stats-card {
    padding: 0;
    margin-bottom: 0.2rem;
  }
  
  /* 缩小标题文字 */
  .stats-card h3 {
    font-size: 1.2rem;
    margin: 0 0 0.1rem 0;
  }
  
  /* 缩小计数器文字 */
  .stats-panel .counter {
    font-size: 2.5rem;
    margin: 0;
    line-height: 1;
  }
  
  /* 缩小金额文字 */
  .stats-panel .deal-amount {
    font-size: 2rem;
    margin: 0; /* 与询盘计数器保持一致 */
    line-height: 1;
  }
  
  /* 缩小进度条标签 */
  .progress-label, .progress-percentage {
    font-size: 0.9rem;
  }
  
  /* 进一步优化最近动态区域 */
  .recent-activity-section {
    max-height: 64%; /* 给最近动态更多空间 */
    height: 64%;
    padding: 0.2rem;
  }
  
  /* 确保最近动态区域中的内容可见 */
  .stats-panel .activity-list {
    max-height: calc(100% - 20px);
  }
}