/* ── Reddit 情报仪表盘 ──
   前缀: ri-
   主题色: Reddit 橙 (#FF4500)
   参考: Reddit_Business_Idea_Validator HTML report 视觉模式
   ── */

/* ── 顶栏 ── */
.ri-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; margin-bottom: 16px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ri-back-btn {
  padding: 4px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: transparent;
  color: var(--text-secondary); font-size: 12px; cursor: pointer;
}
.ri-back-btn:hover { background: var(--bg-gray); color: var(--text); }
.ri-topbar h2 { flex: 1; font-size: 16px; font-weight: 700; margin: 0; }
.ri-project-select {
  font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); cursor: pointer;
}
.ri-run-btn {
  padding: 6px 16px; border: none; border-radius: var(--radius);
  background: #FF4500; color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
}
.ri-run-btn:hover { opacity: 0.85; }
.ri-run-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 两列布局 ── */
.ri-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ri-layout { grid-template-columns: 1fr; } }

/* ── 左列 ── */
.ri-left-col { display: flex; flex-direction: column; gap: 12px; }

/* ── 统计网格 ── */
.ri-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ri-stat-card {
  padding: 14px; border-radius: var(--radius-lg);
  text-align: center; color: #fff;
  box-shadow: var(--shadow);
}
.ri-stat-value { font-size: 22px; font-weight: 800; line-height: 1.2; }
.ri-stat-label { font-size: 10px; opacity: 0.85; margin-top: 2px; }
.ri-stat-card:nth-child(1) { background: linear-gradient(135deg, #FF4500, #FF6B35); }
.ri-stat-card:nth-child(2) { background: linear-gradient(135deg, #07C160, #34D97A); }
.ri-stat-card:nth-child(3) { background: linear-gradient(135deg, #1DA1F2, #5DB9FF); }
.ri-stat-card:nth-child(4) { background: linear-gradient(135deg, #FFA000, #FFC107); }

/* ── 分类面板 ── */
.ri-section {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ri-section-header {
  padding: 10px 14px; font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.ri-section-body { padding: 8px; }

/* ── 话题分类列表 ── */
.ri-topic-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; font-size: 12px;
  border-bottom: 1px solid var(--bg-gray);
}
.ri-topic-item:last-child { border-bottom: none; }
.ri-topic-name { color: var(--text); }
.ri-topic-count { color: var(--text-secondary); font-size: 11px; }

/* ── 情感分布 ── */
.ri-sentiment-section { padding: 10px; }
.ri-sentiment-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; font-size: 11px;
}
.ri-sentiment-label { width: 50px; color: var(--text-secondary); text-align: right; }
.ri-sentiment-bar {
  flex: 1; height: 18px; border-radius: 9px; overflow: hidden;
  background: var(--bg-gray);
}
.ri-sentiment-fill {
  height: 100%; border-radius: 9px;
  transition: width 0.4s ease;
}
.ri-sentiment-positive .ri-sentiment-fill { background: #07C160; }
.ri-sentiment-negative .ri-sentiment-fill { background: #E53935; }
.ri-sentiment-neutral .ri-sentiment-fill { background: #BBBBBB; }
.ri-sentiment-mixed .ri-sentiment-fill { background: #FFA000; }
.ri-sentiment-pct { width: 30px; font-size: 11px; color: var(--text-secondary); }

/* ── 右列：帖子列表 ── */
.ri-right-col { display: flex; flex-direction: column; gap: 12px; }

/* ── 帖子卡片 ── */
.ri-post-card {
  display: flex; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: background 0.1s;
}
.ri-post-card:hover { background: var(--bg-gray); }

/* ── 排名圆标 ── */
.ri-post-rank {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.ri-rank-1 { background: #FF4500; }
.ri-rank-2 { background: #FF6B35; }
.ri-rank-3 { background: #FF8C5A; }
.ri-rank-other { background: var(--text-light); }

/* ── 帖子内容 ── */
.ri-post-body { flex: 1; min-width: 0; }
.ri-post-title {
  font-size: 13px; font-weight: 600; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ri-post-meta { font-size: 10px; color: var(--text-secondary); display: flex; gap: 8px; margin-bottom: 3px; }
.ri-post-stats { font-size: 10px; color: var(--text-secondary); display: flex; gap: 8px; }
.ri-post-stats span { display: flex; align-items: center; gap: 2px; }
.ri-post-snippet { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin-top: 3px; max-height: 32px; overflow: hidden; }

/* ── 分数圆标 ── */
.ri-score-badge {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.ri-score-high { background: #E8F8EE; color: #07C160; }
.ri-score-mid { background: #FFF8E1; color: #FFA000; }
.ri-score-low { background: #FFF0F0; color: #E53935; }

/* ── 情感标签 ── */
.ri-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 4px; font-weight: 600;
}
.ri-badge-positive { background: #E8F8EE; color: #07C160; }
.ri-badge-negative { background: #FFF0F0; color: #E53935; }
.ri-badge-neutral { background: var(--bg-gray); color: var(--text-secondary); }
.ri-badge-mixed { background: #FFF8E1; color: #FFA000; }

/* ── 运行历史 ── */
.ri-history { max-height: 200px; overflow-y: auto; }
.ri-history-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; font-size: 11px;
  border-bottom: 1px solid var(--bg-gray);
}
.ri-history-time { color: var(--text-light); }
.ri-history-status { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.ri-history-ok { background: #E8F8EE; color: #07C160; }
.ri-history-running { background: #E8F4FD; color: #1DA1F2; }
.ri-history-failed { background: #FFF0F0; color: #E53935; }

/* ── 加载/空/错误 ── */
.ri-loading, .ri-empty, .ri-error {
  padding: 40px; text-align: center;
  color: var(--text-secondary); font-size: 13px;
}
.ri-error { color: var(--danger); }

/* ── 入场动画 ── */
@keyframes riFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ri-post-card { animation: riFadeIn 0.2s ease; }