/* =========================================================
   前台 · 推荐功能专属样式
   基础弹窗样式复用 assets/report.css（.report-mask / .report-dialog / ...）
   此处只补充"推荐"场景独有的元素。
   ========================================================= */

/* 顶部提示条 */
.rec-hint {
  font-size: 12px;
  color: #8e8e93;
  line-height: 1.6;
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(96, 165, 250, .10);
  border: 1px solid rgba(96, 165, 250, .22);
}

/* 验证码区样式已统一迁移到 assets/report.css（举报与推荐共用） */

/* 配额提示条（单篇模式显示"该来源还剩几篇可推荐"） */
.rec-quota {
  font-size: 12px;
  color: #a1a1a6;
  line-height: 1.6;
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .10);
  border: 1px solid rgba(245, 158, 11, .22);
}
.rec-quota b { color: #fbbf24; font-weight: 600; }
/* 额度已用完 */
.rec-quota-full {
  color: #f0a3a3;
  background: rgba(220, 80, 80, .12);
  border-color: rgba(220, 80, 80, .28);
}

/* 单篇模式：目标文章卡片 */
.rec-single-box { margin-bottom: 14px; }
.rec-single-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .22);
}
.rec-single-item i.fas { color: #fbbf24; font-size: 14px; flex: 0 0 auto; }
.rec-single-item .t {
  flex: 1; min-width: 0; color: #f5f5f7; font-size: 14px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-single-item .d { color: #636366; font-size: 12px; flex: 0 0 auto; }

/* 大拇指推荐按钮（订阅源卡片右上角 / 列表行内） */
.btn-recommend {
  width: 28px; height: 28px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: #8f8f8f; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.btn-recommend .fas { font-size: 14px; line-height: 1; }
.btn-recommend:hover,
.btn-recommend:active { color: #f59e0b; background: rgba(245, 158, 11, .14); }
/* 已推荐过：置灰并禁止再次点击 */
.btn-recommend.done {
  color: #4a4a4f; cursor: not-allowed;
  background: transparent;
}
.btn-recommend.done:hover,
.btn-recommend.done:active { color: #4a4a4f; background: transparent; }

/* 精选推荐页 —— 文章卡片 */
.featured-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  transition: background .15s, border-color .15s;
}
.featured-item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.featured-item .thumb {
  width: 120px; height: 78px; flex: 0 0 auto; border-radius: 10px;
  object-fit: cover; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.featured-item .thumb-fallback {
  width: 120px; height: 78px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: #636366; font-size: 20px;
}
.featured-item .main { flex: 1; min-width: 0; }
.featured-item a.title {
  display: block; color: #f5f5f7; text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 6px;
}
.featured-item a.title:hover { color: var(--primary); }
.featured-item .desc {
  color: #98989d; font-size: 13px; line-height: 1.6; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-item .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: #636366; }
.featured-item .meta .tag {
  padding: 2px 9px; border-radius: 999px;
  background: rgba(96,165,250,.12); color: #60a5fa; font-size: 11px;
}
/* 精选徽标（前台列表通用：全部文章页 / 历史文章页 / 精选页） */
.badge-featured {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px;
  background: rgba(245,158,11,.14); color: #fbbf24;
  white-space: nowrap;
}
.badge-featured .fas { font-size: 10px; }

.featured-item .meta .feed { color: #8e8e93; }

@media (max-width: 640px) {
  .featured-item .thumb, .featured-item .thumb-fallback { width: 84px; height: 60px; }
}