/**
 * 站点统计小工具组件样式 (AeroCore Component)
 *
 * 极简卡片 + 高饱和双端圆角胶囊 + 虚线分隔线 + 四款视觉外观风格 (Default / Glass / Gradient Border / Dark)
 *
 * @version 1.1.0
 */

/* ============================================================
   卡片外层基础容器
   ============================================================ */
.wifilu-com-site-stats-wrapper {
  margin-bottom: 16px;
  padding: 20px 22px;
  border-radius: var(--border-radius, 16px);
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wifilu-com-site-stats-wrapper:last-child {
  margin-bottom: 0;
}

/* ── 风格预设 1: 纯白经典 (Default) ── */
.wifilu-com-site-stats-wrapper--default {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
  box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, 0.03));
}

/* ── 风格预设 2: 毛玻璃微透 (Glassmorphism) ── */
.wifilu-com-site-stats-wrapper--glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.06);
}

/* ── 风格预设 3: 炫彩渐变微边框 (Gradient Border) ── */
.wifilu-com-site-stats-wrapper--gradient_border {
  background: #ffffff;
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.08);
  position: relative;
}

.wifilu-com-site-stats-wrapper--gradient_border::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  background: linear-gradient(135deg, #a855f7, #6366f1, #3b82f6, #06b6d4);
  border-radius: calc(var(--border-radius, 16px) + 1px);
  z-index: -1;
  opacity: 0.65;
}

/* ── 风格预设 4: 暗夜极夜风格 (Dark Mode) ── */
.wifilu-com-site-stats-wrapper--dark {
  background: #18181b;
  border: 1px solid #27272a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.wifilu-com-site-stats-wrapper--dark .wifilu-com-site-stats__title-text {
  color: #f4f4f5;
}

.wifilu-com-site-stats-wrapper--dark .wifilu-com-site-stats__label {
  color: #a1a1aa;
}

.wifilu-com-site-stats-wrapper--dark .wifilu-com-site-stats__item {
  border-bottom-color: #27272a;
}

/* ============================================================
   组件标题
   ============================================================ */
.wifilu-com-site-stats__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}

.wifilu-com-site-stats__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--theme-color, #47C858);
}

.wifilu-com-site-stats__title-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  line-height: 1.3;
  letter-spacing: -0.2px;
}

/* ============================================================
   统计项目列表
   ============================================================ */
.wifilu-com-site-stats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.wifilu-com-site-stats__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px dashed var(--border-color, #e2e8f0);
}

.wifilu-com-site-stats__item:first-child {
  padding-top: 4px;
}

.wifilu-com-site-stats__item:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

/* ============================================================
   左侧标签文案
   ============================================================ */
.wifilu-com-site-stats__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

/* ============================================================
   右侧圆角胶囊 Badge
   ============================================================ */
.wifilu-com-site-stats__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wifilu-com-site-stats__value:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 暗黑模式自适应 */
@media (prefers-color-scheme: dark) {
  .wifilu-com-site-stats-wrapper--default {
    background: var(--bg-card, #18181b);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .wifilu-com-site-stats-wrapper--default .wifilu-com-site-stats__title-text {
    color: #f4f4f5;
  }
  .wifilu-com-site-stats-wrapper--default .wifilu-com-site-stats__label {
    color: #a1a1aa;
  }
  .wifilu-com-site-stats-wrapper--default .wifilu-com-site-stats__item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}