/*
 * 菜谱推荐列表
 */

.recipe-list-page {
  padding: var(--space-md) var(--space-lg);
  min-height: 100vh;
}

/* ── 页头 ── */
.list-header {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* ── 卡片 ── */
.recipe-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.recipe-card {
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}

.recipe-card:active {
  transform: scale(0.985);
}

/* ── 内容 ── */
.recipe-name {
  font-size: var(--text-subtitle);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4rpx;
}

.recipe-meta {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* ── 匹配度条 ── */
.match-rate {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text);
}

.rate-bar {
  flex: 1;
  height: 6rpx;
  background: #F0EDE8;
  border-radius: 3rpx;
  overflow: hidden;
  margin-right: 12rpx;
}

.rate-fill {
  height: 100%;
  background: var(--color-green);
  border-radius: 3rpx;
  transition: width 0.5s ease;
}

/* ── 缺少食材 ── */
.missing {
  font-size: var(--text-caption);
  color: #E8A040;
  margin-top: 8rpx;
}

/* ── 空态 ── */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

/* ── 换一批 ── */
.btn-retry {
  text-align: center;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-primary);
  padding: var(--space-md);
}

.btn-retry:active {
  opacity: 0.6;
}

/* ── 动效内预览 ── */
.animation-result-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
}

.preview-emoji {
  font-size: 64rpx;
  margin-bottom: 12rpx;
}

.preview-text {
  font-size: var(--text-subtitle);
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
}

.preview-sub {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-top: 8rpx;
}