/**
 * 网站统计模块样式 - 异形卡片设计
 * 
 * 特点：
 * - 顶部斜边切角效果
 * - 3D图标破界显示
 * - 渐变背景色
 */

/* ============================================
   容器样式
   ============================================ */

.qimeng-stats-wrapper {
  background: transparent;
  border-bottom: 1px solid var(--qm-border-gray-200, #e5e7eb);
}

.dark .qimeng-stats-wrapper,

html.dark .qimeng-stats-wrapper {
  background: transparent !important;
  border-bottom-color: rgba(148, 163, 184, 0.35);
}

.dark .qm-stats-layout,

html.dark .qm-stats-layout,

.dark .qm-stats-cards-section,

html.dark .qm-stats-cards-section {
  background: transparent !important;
}

/* 雷达+卡片布局 */
.qm-stats-layout {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.qm-stats-radar-section {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.qm-stats-cards-section {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
}

.qm-stats-cards-section .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.qm-stats-cards-section .col-6,
.qm-stats-cards-section .col-md-4,
.qm-stats-cards-section .col-lg-3,
.qm-stats-cards-section .col-xl-2 {
  /* 一行4个 */
  flex: 0 0 auto;
  width: 25%;
}

@media (max-width: 1199px) {
  .qm-stats-cards-section .col-6,
  .qm-stats-cards-section .col-md-4,
  .qm-stats-cards-section .col-lg-3,
  .qm-stats-cards-section .col-xl-2 {
    /* 一行3个 */
    width: 33.333%;
  }
}

@media (max-width: 991px) {
  .qm-stats-layout {
    flex-direction: column;
    align-items: center;
  }
  
  .qm-stats-cards-section .col-6,
  .qm-stats-cards-section .col-md-4,
  .qm-stats-cards-section .col-lg-3,
  .qm-stats-cards-section .col-xl-2 {
    /* 一行2个 */
    width: 50%;
  }
}

@media (max-width: 767px) {
  .qm-stats-cards-section .col-6,
  .qm-stats-cards-section .col-md-4,
  .qm-stats-cards-section .col-lg-3,
  .qm-stats-cards-section .col-xl-2 {
    /* 一行2个 */
    width: 50%;
  }
}

/* ============================================
   统计项卡片样式 - 异形卡片设计
   ============================================ */

.qm-stats-item {
  position: relative;
  padding: 4.25rem 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  overflow: visible;
  min-height: 140px;
  isolation: isolate;
  max-width: 120px;
  margin: 0 auto;
}

/* 使用SVG创建带圆角的异形背景 - 顶部斜边（左低右高），极大圆角 */
.qm-stats-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 35%, transparent 35%),
    linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
  z-index: 0;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 140" preserveAspectRatio="none"><path d="M 0 70 Q 0 35 30 28 L 130 8 Q 152 4 160 26 L 160 105 Q 160 140 125 140 L 35 140 Q 0 140 0 105 Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 140" preserveAspectRatio="none"><path d="M 0 70 Q 0 35 30 28 L 130 8 Q 152 4 160 26 L 160 105 Q 160 140 125 140 L 35 140 Q 0 140 0 105 Z" fill="black"/></svg>');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 添加装饰星星 */
.qm-stats-item::after {
  content: '✦';
  position: absolute;
  top: 15%;
  right: 15%;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.3);
  z-index: 2;
  animation: qm-star-twinkle 3s ease-in-out infinite;
}

/* 额外的星星装饰 */
.qm-stats-star {
  position: absolute;
  color: rgba(255, 255, 255, 0.25);
  z-index: 2;
  pointer-events: none;
}

.qm-stats-star-1 {
  top: 25%;
  left: 10%;
  font-size: 1rem;
  animation: qm-star-twinkle 2.5s ease-in-out infinite 0.5s;
}

.qm-stats-star-2 {
  bottom: 20%;
  left: 15%;
  font-size: 0.8rem;
  animation: qm-star-twinkle 3.5s ease-in-out infinite 1s;
}

.qm-stats-star-3 {
  top: 35%;
  right: 20%;
  font-size: 1.2rem;
  animation: qm-star-twinkle 2.8s ease-in-out infinite 1.5s;
}

.qm-stats-item:hover::before {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.qm-stats-item:hover {
  transform: translateY(-4px);
}

/* ============================================
   图标样式 - 3D破界效果，SVG图标
   ============================================ */

.qm-stats-icon-wrapper {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  z-index: 10;
  transition: all 0.3s ease;
}

.qm-stats-item:hover .qm-stats-icon-wrapper {
  transform: translateX(-50%) scale(1.1);
}

.qm-stats-icon {
  width: 100px;
  height: 100px;
  display: block;
}

/* ============================================
   不同统计项的渐变背景色 - 应用到伪元素
   ============================================ */

/* 蓝色渐变 - 访问相关（带光感）*/
.qm-stats-item[data-stat="total_visits"]::before {
  background: linear-gradient(135deg, #667eea 0%, #5a8ef5 70%, #7da5ff 85%, #4facfe 100%);
}

/* 绿色渐变 - 注册用户（带光感）*/
.qm-stats-item[data-stat="registered_users"]::before {
  background: linear-gradient(135deg, #84fab0 0%, #88f5c0 70%, #a0ffd0 85%, #8fd3f4 100%);
}

/* 橙黄渐变 - VIP用户（带光感）*/
.qm-stats-item[data-stat="vip_users"]::before {
  background: linear-gradient(135deg, #ffc837 0%, #ffb840 70%, #ffd060 85%, #ff8008 100%);
}

/* 青绿渐变 - 今日新增（带光感）*/
.qm-stats-item[data-stat="new_users_today"]::before {
  background: linear-gradient(135deg, #30cfd0 0%, #3ad8a0 70%, #60f0b8 85%, #43e97b 100%);
}

/* 粉色渐变 - 本周新增（带光感）*/
.qm-stats-item[data-stat="new_users_week"]::before {
  background: linear-gradient(135deg, #ffecd2 0%, #ffe0c0 70%, #fff2d8 85%, #fcb69f 100%);
}

/* 天蓝渐变 - 本月新增（带光感）*/
.qm-stats-item[data-stat="new_users_month"]::before {
  background: linear-gradient(135deg, #4facfe 0%, #50c0ff 70%, #80d8ff 85%, #00f2fe 100%);
}

/* 橙红渐变 - 最高在线（带光感）*/
.qm-stats-item[data-stat="peak_online"]::before {
  background: linear-gradient(135deg, #ff9a56 0%, #ff8870 70%, #ffb090 85%, #ff6a88 100%);
}

/* 浅蓝渐变 - 文章总数（带光感）*/
.qm-stats-item[data-stat="post_count"]::before {
  background: linear-gradient(135deg, #a1c4fd 0%, #b0d0ff 70%, #d0e5ff 85%, #c2e9fb 100%);
}

/* 粉紫渐变 - 评论总数（带光感）*/
.qm-stats-item[data-stat="comment_count"]::before {
  background: linear-gradient(135deg, #ff9a9e 0%, #ffa8b0 70%, #ffc0c8 85%, #fecfef 100%);
}

/* 蓝灰渐变 - 运营天数（带光感）*/
.qm-stats-item[data-stat="operating_days"]::before {
  background: linear-gradient(135deg, #89f7fe 0%, #80e0ff 70%, #a8f5ff 85%, #66a6ff 100%);
}

/* ============================================
   内容样式
   ============================================ */

.qm-stats-content {
  flex: 1;
  min-width: 0;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
}

.qm-stats-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  order: 1;
}

.qm-stats-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  animation: qm-stats-fade-in 0.5s ease-out;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qm-stats-value i {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   动画效果
   ============================================ */

@keyframes qm-stats-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes qm-star-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* ============================================
   响应式布局
   ============================================ */

/* 移动端 (< 768px) - 2列布局 */
@media (max-width: 767px) {
  .qm-stats-item {
    padding: 3.5rem 0.75rem 0.875rem;
    min-height: 120px;
    max-width: 105px;
  }
  
  .qm-stats-icon-wrapper {
    width: 80px;
    height: 80px;
    top: -22px;
  }
  
  .qm-stats-icon {
    width: 80px;
    height: 80px;
  }
  
  .qm-stats-value {
    font-size: 1.375rem;
  }
  
  .qm-stats-label {
    font-size: 0.7rem;
  }
}

/* 平板 (768px - 1024px) - 3列布局 */
@media (min-width: 768px) and (max-width: 1023px) {
  .qm-stats-item {
    padding: 3.75rem 0.875rem 1rem;
    min-height: 130px;
    max-width: 115px;
  }
  
  .qm-stats-icon-wrapper {
    width: 90px;
    height: 90px;
    top: -25px;
  }
  
  .qm-stats-icon {
    width: 90px;
    height: 90px;
  }
}

/* 桌面 (> 1024px) - 4-6列布局 */
@media (min-width: 1024px) {
  .qm-stats-item {
    padding: 4.25rem 1rem 1.25rem;
    min-height: 150px;
    max-width: 130px;
  }
  
  .qm-stats-icon-wrapper {
    width: 100px;
    height: 100px;
    top: -28px;
  }
  
  .qm-stats-icon {
    width: 100px;
    height: 100px;
  }
  
  .qm-stats-value {
    font-size: 1.75rem;
  }
}

/* ============================================
   深色模式支持
   ============================================ */

.dark .qimeng-stats-wrapper {
  background: var(--qm-bg-dark-700, #1f2937);
  border-bottom-color: var(--qm-border-dark-600, #374151);
}

.dark .qm-stats-item:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.dark .qm-stats-icon-wrapper {
  background: transparent;
}

.dark .qm-stats-value {
  color: #ffffff;
}

.dark .qm-stats-label {
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================
   过渡效果
   ============================================ */

.qm-stats-item,
.qm-stats-icon-wrapper,
.qm-stats-value,
.qm-stats-label {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              transform 0.3s ease,
              box-shadow 0.3s ease;
}