.main {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 允许flex/grid子元素收缩，防止溢出 */
  max-width: 100%; /* 防止超出容器 */
  overflow-x: auto; /* 如果内容太宽，允许横向滚动 */
}

.last-update-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* 居中显示 */
  gap: 20px;
  margin-bottom: 12px;
  padding: 8px 0;
  font-size: clamp(12px, 1.2vw, 14px); /* 响应式字体大小 */
  color: #6b7280;
  flex-wrap: wrap;
}

.filters {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.last-update-info > div {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* 防止换行 */
}

.update-label {
  font-weight: 500;
  color: #374151;
}

.update-time {
  color: #6b7280;
  font-family: monospace;
}

.update-stats {
  color: #6b7280;
  font-size: clamp(12px, 1.2vw, 14px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 最小 280px 避免金额/数字被挤成两行 */
  gap: clamp(12px, 1.5vw, 16px); /* 响应式间距 */
  overflow: visible;
  flex-shrink: 0; /* 防止被压缩 */
  padding-top: 4px; /* 为第一行卡片的上移留出空间 */
  margin-top: -4px; /* 抵消padding-top，保持视觉位置不变 */
  min-width: 0; /* 允许grid容器收缩，防止溢出 */
  max-width: 100%; /* 防止超出容器 */
  min-height: 900px; /* 保持白色区域最小高度，确保卡片不足时也能保持填满时的大小 */
  align-content: start; /* 让卡片从顶部开始排列，避免在容器中垂直居中 */
  position: relative; /* 为绝对定位的空状态元素提供定位上下文 */
}

/* 空状态样式 - 水平垂直居中 */
.empty-state {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666;
  font-size: 16px;
}

/* 响应式网格布局 - 根据屏幕宽度调整列数 */
@media (min-width: 1600px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
    min-height: 900px; /* 3行 × 280px + 2间距 × 16px ≈ 872px，设置为900px */
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    min-height: 1200px; /* 4行 × 280px + 3间距 × 16px ≈ 1168px，设置为1200px */
  }
}

@media (min-width: 800px) and (max-width: 1199px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    min-height: 1500px; /* 5行 × 280px + 4间距 × 16px ≈ 1464px，设置为1500px */
  }
}

@media (min-width: 500px) and (max-width: 799px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    min-height: 2400px; /* 8行 × 280px + 7间距 × 16px ≈ 2352px，设置为2400px */
  }
}

@media (max-width: 499px) {
  .grid {
    grid-template-columns: 1fr;
    min-height: 4500px; /* 15行 × 280px + 14间距 × 16px ≈ 4424px，设置为4500px */
  }
  
  .last-update-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .last-update-info > div {
    width: 100%;
  }
}


.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  flex-wrap: wrap;
  min-height: 36px; /* 保持最小高度，与分页按钮高度一致 */
}

.pagination-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
}

.pagination-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.pagination-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  cursor: default;
}

.pagination-btn.active:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.pagination-btn.prev,
.pagination-btn.next,
.pagination-btn.first,
.pagination-btn.last {
  font-size: 18px;
  font-weight: bold;
  padding: 0 8px;
}

.pagination-ellipsis {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  padding: 0 4px;
}



/* 配方列表卡片 - 高度随内容自适应，保证最佳/最差收益等全部可见 */
.card {
  position: relative;
  width: 100%; /* 使用100%宽度适应grid布局 */
  min-height: 280px; /* 最小高度，内容多时自动增高 */
  height: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
}

/* 品质标签 */
.quality-badge {
  position: absolute;
  top: 12px;
  left: 0px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: bold;
  color: white;
  background-color: gray;

  /* 实现：左侧直角，右侧圆角 */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;

  /* 或者简写（但需注意顺序） */
  /* border-radius: 0 6px 6px 0; */

  /* 防止文字被截断 */
  white-space: nowrap;
  z-index: 2; /* 确保在图片上方 */
}

/* StatTrak 标签 */
.stattrak-badge {
  position: absolute;
  top: 12px;
  right: 0px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: bold;
  color: white;
  background-color: #166534; /* 深绿色 */

  /* 实现：右侧直角，左侧圆角 */
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  /* 防止文字被截断 */
  white-space: nowrap;
  z-index: 2; /* 确保在图片上方 */
}

.card:hover {
  transform: translateY(-4px);
}

.card-image {
  flex: 2.3;
  min-height: clamp(120px, 15vw, 140px); /* 响应式最小高度 */
  max-height: clamp(120px, 15vw, 140px); /* 响应式最大高度 */
  height: clamp(120px, 15vw, 140px); /* 响应式高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3f2fd;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.card-image img {
  max-width: 75%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain; /* 关键！保持比例并完整显示 */
  /* 如果你想裁剪填满，用 object-fit: cover; */
}


/* ===== 双图模式 ===== */
.card-image-double {
  position: relative;
  flex: 2.3;
  min-height: clamp(120px, 15vw, 140px); /* 响应式最小高度 */
  max-height: clamp(120px, 15vw, 140px); /* 响应式最大高度 */
  height: clamp(120px, 15vw, 140px); /* 响应式高度 */
  background-color: #e3f2fd;
  width: 100%; /* 显式占满宽度 */
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.card-image-double img {
  position: absolute;
  top: 50%;
  max-width: 37.5%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.card-image-double .image-left {
  left: 25%;
  transform: translate(-50%, -50%);
}

.card-image-double .image-right {
  left: 75%; /* 👈 关键：从右侧区域中心开始 */
  transform: translate(-50%, -50%);
}

/* 斜向右上的分隔线：从左下 → 右上 */
.divider-diagonal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 130%;

  transform: translate(-50%, -50%) rotate(20deg);
  transform-origin: center;

  background: linear-gradient(
    to right,
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.9) 50%,
    rgba(0,0,0,0.25)
  );

  box-shadow:
    0 0 6px rgba(0,0,0,0.25);

  z-index: 5;
}

/* 可选：让斜线更柔和 */
.divider-diagonal {
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.card-text {
  flex: 1 1 auto; /* 可伸缩，内容多时自动增高 */
  min-height: 0;
  padding: clamp(8px, 1vw, 10px); /* 减少内边距以节省空间 */
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px; /* 增加标题和信息项之间的间距 */
  overflow: visible; /* 不裁剪，保证最佳/最差收益等全部显示 */
  box-sizing: border-box;
  width: 100%; /* 确保占满卡片宽度 */
}

.card-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  min-width: 0; /* 允许flex子元素收缩 */
  width: 100%; /* 确保占满容器宽度 */
  flex-shrink: 0; /* 标题区域不收缩 */
  max-height: 40px; /* 限制标题区域最大高度 */
}

.card-text .card-title {
  font-size: clamp(13px, 1.1vw, 16px); /* 稍微减小字体大小 */
  font-weight: 600;
  margin: 0;
  color: #111827;
  line-height: 1.3; /* 减少行高 */
  letter-spacing: -0.01em;
  padding: 0;
  border: none;
  transition: color 0.2s ease;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行显示，超出部分用省略号 */
  word-break: break-word; /* 处理长单词 */
}

.card:hover .card-title {
  color: #1f2937;
}

.card-label {
  flex-shrink: 0;
  padding: clamp(3px, 0.4vw, 5px) clamp(6px, 0.8vw, 8px); /* 减少内边距 */
  font-size: clamp(9px, 0.9vw, 11px); /* 稍微减小字体大小 */
  font-weight: 600;
  /* 文字颜色由内联样式动态设置 */
  background-color: #e5e7eb;
  border-radius: 12px;
  white-space: nowrap;
  line-height: 1.3; /* 减少行高 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* 确保不超出容器 */
  display: inline-flex; /* 使用flex布局确保垂直居中 */
  align-items: center; /* 垂直居中对齐 */
  box-sizing: border-box; /* 确保padding计算正确 */
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 第一排与第二排指标之间留出更大空隙 */
  flex: 1 1 auto; /* 可伸缩，内容多时自动增高 */
  min-height: 0;
  overflow: visible; /* 确保内容可见，不裁剪 */
  justify-content: flex-start;
  width: 100%; /* 确保占满宽度 */
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  gap: 12px; /* 增加间距，让内容更均匀分布 */
  flex-shrink: 0; /* 防止行被压缩 */
  width: 100%; /* 确保占满宽度 */
}

.info-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0; /* 允许收缩 */
  align-items: flex-start; /* 左对齐 */
}

.info-label {
  font-size: clamp(10px, 0.9vw, 12px); /* 稍微减小字体大小 */
  color: #6b7280;
  font-weight: 400;
  line-height: 1.2; /* 减少行高 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
  text-align: left; /* 文字左对齐 */
  width: 100%; /* 确保占满宽度 */
}

.info-value {
  font-size: clamp(13px, 1.2vw, 15px); /* 稍微减小字体大小 */
  color: #111827;
  font-weight: 600;
  line-height: 1.2; /* 减少行高 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* 金额/数字不换行，避免 ¥10762. 和 0 拆两行 */
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left; /* 文字左对齐 */
  min-width: 0; /* 配合 flex 子项才能正确收缩与省略 */
}

/* .info-value.negative {
  color: #dc2626;
}

.info-value.positive {
  color: #059669;
} */

/* Header 用户菜单和登录链接样式 */
.user-menu {
  position: relative;
  margin-left: 20px;
}

.user-menu-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #FF9000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #000;
  transition: background 0.2s;
}

.user-menu-button:hover {
  background: #ea580c;
}

.user-menu-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.user-menu.active .user-menu-arrow {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 240px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  display: none;
  z-index: 1000;
}

.user-menu.active .user-menu-dropdown {
  display: block;
}

.user-menu-item {
  margin-bottom: 8px;
}

.user-menu-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.user-menu-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.user-menu-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 12px 0;
}

.user-menu-action {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  text-align: left;
  transition: background 0.2s;
  margin-bottom: 4px;
}

.user-menu-action:hover {
  background: #f3f4f6;
}

.user-menu-action:last-child {
  margin-bottom: 0;
}

/* 续费订阅按钮 - 绿色 */
#renewButton.user-menu-action {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

#renewButton.user-menu-action:hover {
  background: #059669;
  border-color: #059669;
}

/* 退出登录按钮 - 红色 */
#logoutButton.user-menu-action {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

#logoutButton.user-menu-action:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.login-link {
  margin-left: 20px;
}

.login-link a {
  padding: 8px 12px;
  background: #3b82f6;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.login-link a:hover {
  background: #2563eb;
}