/* recommend.css — 洛谷题单 + B站视频 推荐页样式（自包含，不依赖其它文件） */
.rec-wrap { max-width: 920px; margin: 0 auto; padding: 20px 16px 60px; }
.rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.rec-h2 { font-size: 1.4rem; margin: 0 0 4px; font-weight: 700; }
.rec-sub { margin: 0; color: var(--text-light, #6b7280); font-size: .9rem; }
.rec-refresh { white-space: nowrap; }

.rec-loading, .rec-empty, .rec-note {
  padding: 40px 16px; text-align: center; color: var(--text-light, #6b7280);
}
.rec-empty a, .rec-note a, .rec-listlink { color: var(--brand, #4A72FF); text-decoration: none; }
.rec-empty a:hover, .rec-listlink:hover { text-decoration: underline; }

/* 情况卡 */
.rec-situation {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.rec-sit-title { font-weight: 700; margin-bottom: 12px; font-size: 1rem; }
.rec-sit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; }
.rec-sit-cell { display: flex; flex-direction: column; gap: 2px; }
.rec-sit-k { font-size: .78rem; color: var(--text-light, #6b7280); }
.rec-sit-v { font-size: .98rem; font-weight: 600; color: var(--text, #111827); }

/* 分区标题 */
.rec-sec { font-size: 1.12rem; margin: 26px 0 12px; font-weight: 700; }

/* 专题块 */
.rec-topic { border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; background: var(--card, #fff); }
.rec-weak { border-color: #f5c2c2; background: #fff8f8; }
.rec-topic-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rec-topic-name { font-weight: 700; font-size: 1.02rem; }
.rec-topic-meta { font-size: .82rem; color: var(--text-light, #6b7280); }
.rec-listlink { margin-left: auto; font-size: .85rem; }

/* 洛谷题列表 */
.rec-problems { display: flex; flex-direction: column; gap: 6px; }
.rec-problem {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--border, #eef0f3); border-radius: 10px;
  text-decoration: none; color: var(--text, #111827); background: var(--bg-soft, #fafbfc);
  transition: border-color .15s, transform .05s;
}
.rec-problem:hover { border-color: var(--brand, #4A72FF); }
.rec-problem:active { transform: scale(.995); }
.rec-pid { font-weight: 700; color: var(--brand, #4A72FF); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.rec-ptitle { flex: 1; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 难度徽章 */
.rec-diff { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rec-diff.easy { background: #e7f6ec; color: #1a7f43; }
.rec-diff.med { background: #fff3e0; color: #b8720a; }
.rec-diff.hard { background: #fdeaea; color: #c0392b; }

/* B站视频 */
.rec-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.rec-videos-empty { display: block; grid-template-columns: none; font-size: .82rem; color: var(--text-light, #9aa0a8); padding: 8px 0 0; }
.rec-video {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text, #111827);
  border: 1px solid var(--border, #eef0f3); border-radius: 12px; overflow: hidden; background: var(--card, #fff);
  transition: transform .08s, box-shadow .15s; position: relative;
}
.rec-video:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.rec-vcover { width: 100%; height: 124px; object-fit: cover; background: #f0f1f3; display: block; }
.rec-vcover-ph { display: flex; align-items: center; justify-content: center; color: #b9bdc4; font-size: .8rem; }
.rec-vmeta { padding: 8px 10px 28px; }
.rec-vtitle { font-size: .88rem; font-weight: 600; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
.rec-vsub { font-size: .74rem; color: var(--text-light, #6b7280); margin-top: 4px; }
.rec-vgo {
  position: absolute; right: 10px; bottom: 8px; font-size: .74rem; font-weight: 700;
  color: #fff; background: #fb7299; padding: 3px 9px; border-radius: 999px;
}
.rec-video:hover .rec-vgo { background: #fc8bab; }

@media (max-width: 600px) {
  .rec-videos { grid-template-columns: 1fr 1fr; }
  .rec-sit-grid { grid-template-columns: 1fr 1fr; }
}