/* ============================================================
 * 热点热榜 · 前端样式（rd- 前缀，避免与宿主样式冲突）
 * 挂载场景：
 *   A. LifeSOSO 搜索结果页右侧栏（替换原热榜 / 历史上的今天）
 *   B. Life System 导航首页搜索框下方
 *   C. 热榜总览页 bang.php
 * ============================================================ */

.rd-scope,
.rd-mask {
  --rd-brand: #f97316;
  --rd-fg: #1f2937;
  --rd-mut: #9aa1ad;
  --rd-line: #eef1f6;
  --rd-bg: #ffffff;
  --rd-hover: #f7f8fb;
  --rd-radius: 12px;
  --rd-row: 36px; /* 列表单行高度（与 li 固定高度一致，保证显示条数精确） */
  --rd-sel: #fff7ed;     /* 选中态底色 */
  --rd-optline: #e5e8ef; /* 选项 / 按钮描边 */
  --rd-cbline: #cbd2dc;  /* 复选框描边 */
  --rd-year-bg: #eef2ff; /* 年份徽标 */
  --rd-year-fg: #4e6ef2;
}
/* 面板挂载在 body 下、不在 .rd-scope 内，必须单独定义变量，否则主色取不到值 */
.rd-mask, .rd-mask * { box-sizing: border-box; }
.rd-scope {
  font-size: 14px;
  color: var(--rd-fg);
  box-sizing: border-box;
}
.rd-scope * { box-sizing: border-box; }
.rd-scope a { color: inherit; text-decoration: none; }
.rd-scope a:hover { color: var(--rd-brand); }

/* 暗黑模式：直接跟随宿主主题标记（lifesoso → html.dark；lifesystem → body.theme-dark；其它 → [data-theme="dark"]），
 * 纯 CSS 响应，宿主运行时切换主题即时生效，无需 JS 监听。 */
html.dark .rd-scope, body.dark .rd-scope, body.theme-dark .rd-scope, [data-theme="dark"] .rd-scope, .rd-scope.dark,
html.dark .rd-mask, body.dark .rd-mask, body.theme-dark .rd-mask, [data-theme="dark"] .rd-mask, .rd-mask.dark {
  --rd-fg: #d7dae0;
  --rd-mut: #7c828d;
  --rd-line: #2a2f3a;
  --rd-bg: #1d2129;
  --rd-hover: #232833;
  --rd-sel: rgba(249, 115, 22, .16);
  --rd-optline: #333947;
  --rd-cbline: #4a5262;
  --rd-year-bg: #2a3040;
  --rd-year-fg: #9db1ff;
}

/* ---------------- 通用小组件 ---------------- */

/* 图标按钮（设置齿轮 / 外链） */
.rd-ibtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; border-radius: 8px;
  background: transparent; color: var(--rd-mut); cursor: pointer;
  transition: all .15s; flex-shrink: 0; padding: 0;
}
.rd-ibtn:hover { background: var(--rd-hover); color: var(--rd-brand); }
.rd-ibtn svg { width: 15px; height: 15px; }

/* 标题行 */
.rd-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--rd-fg);
}
.rd-head .rd-spacer { flex: 1; }
.rd-head .rd-more {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 400; color: var(--rd-mut); cursor: pointer;
  background: none; border: none; padding: 4px 8px; border-radius: 8px;
  transition: all .15s;
}
.rd-head .rd-more:hover { color: var(--rd-brand); background: var(--rd-hover); }
.rd-head .rd-more svg { width: 12px; height: 12px; }

/* 火焰图标 */
.rd-flame { color: var(--rd-brand); display: inline-flex; }
.rd-flame svg { width: 16px; height: 16px; }

/* ---------------- 榜单列表（通用） ---------------- */

.rd-list { list-style: none; margin: 0; padding: 0; }
.rd-list li {
  display: flex; align-items: center; gap: 8px;
  height: var(--rd-row, 36px); padding: 0 6px; border-radius: 8px;
  transition: background .12s;
}
.rd-list li:hover { background: var(--rd-hover); }
.rd-rank {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-style: normal;
  background: var(--rd-hover); color: var(--rd-mut);
}
/* 历史上的今天：年份徽标宽度自适应，避免「1889年」被固定宽度截断 */
.rd-rank.rd-year {
  width: auto; min-width: 20px; padding: 0 5px;
  white-space: nowrap; font-size: 10.5px; font-weight: 600;
  background: var(--rd-year-bg); color: var(--rd-year-fg); border-radius: 6px;
}
.rd-rank.r1 { background: #ffe9e0; color: #ea580c; }
.rd-rank.r2 { background: #fff1df; color: #d97706; }
.rd-rank.r3 { background: #fdf3d8; color: #b45309; }
/* 暗黑下名次徽标改为半透明品牌色，避免在深色底上过亮 */
:is(html.dark, body.dark, body.theme-dark, [data-theme="dark"], .rd-scope.dark) .rd-rank.r1 { background: rgba(249, 115, 22, .22); color: #fb923c; }
:is(html.dark, body.dark, body.theme-dark, [data-theme="dark"], .rd-scope.dark) .rd-rank.r2 { background: rgba(245, 158, 11, .20); color: #fbbf24; }
:is(html.dark, body.dark, body.theme-dark, [data-theme="dark"], .rd-scope.dark) .rd-rank.r3 { background: rgba(217, 119, 6, .20); color: #fcd34d; }
.rd-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; line-height: 1.5;
}
.rd-hot {
  flex-shrink: 0; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--rd-mut); font-variant-numeric: tabular-nums;
}
.rd-loading, .rd-error {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; height: auto; padding: 12px 4px;
  font-size: 13px;
}
.rd-loading { color: var(--rd-mut); }
.rd-error { color: #d93026; }
:is(html.dark, body.dark, body.theme-dark, [data-theme="dark"], .rd-scope.dark) .rd-error { color: #f87171; }
.rd-stale-tip {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--rd-mut);
}

/* 榜单容器：默认显示 --rd-show 行，其余滚动查看 */
.rd-scroll {
  overflow-y: auto; overscroll-behavior: contain;
  max-height: calc(var(--rd-row, 33px) * var(--rd-show, 10));
  scrollbar-width: thin;
}
.rd-scroll::-webkit-scrollbar { width: 5px; }
.rd-scroll::-webkit-scrollbar-thumb { background: #d5d9e0; border-radius: 3px; }
.rd-scroll::-webkit-scrollbar-thumb:hover { background: #b8bec8; }
:is(html.dark, body.dark, body.theme-dark, [data-theme="dark"], .rd-scope.dark) .rd-scroll::-webkit-scrollbar-thumb { background: #3a4150; }

/* ---------------- 场景 A：LifeSOSO 右侧栏 ---------------- */

.rd-soso-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.rd-soso-tab {
  border: 1px solid var(--rd-line); background: var(--rd-bg); color: var(--rd-mut);
  font-size: 12.5px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  transition: all .15s; font-family: inherit; line-height: 1.5;
}
.rd-soso-tab:hover { color: var(--rd-brand); border-color: #fdba74; }
.rd-soso-tab.active {
  background: var(--rd-brand); border-color: var(--rd-brand); color: #fff; font-weight: 500;
}
.rd-soso-foot {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--rd-line); font-size: 11.5px; color: var(--rd-mut);
}
.rd-soso-foot .rd-spacer { flex: 1; }
.rd-soso-foot .rd-link { color: var(--rd-mut); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; background: none; border: none; font-size: 11.5px; padding: 2px 4px; border-radius: 6px; }
.rd-soso-foot .rd-link:hover { color: var(--rd-brand); }
.rd-soso-foot .rd-link svg { width: 11px; height: 11px; }

/* ---------------- 场景 B：Life System 导航首页 ---------------- */

.rd-landing { margin: -14px auto 34px; }
.rd-landing .rd-head { margin-bottom: 12px; }
.rd-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 一行最多 4 个 */
}
@media (max-width: 1000px) { .rd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rd-card {
  background: var(--rd-bg); border: 1px solid var(--rd-line); border-radius: var(--rd-radius);
  padding: 12px 12px 8px; min-width: 0;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.rd-card:hover {
  border-color: #fdd7b8;
  box-shadow: 0 8px 22px rgba(249, 115, 22, .10);
  transform: translateY(-2px);
}
:is(html.dark, body.dark, body.theme-dark, [data-theme="dark"], .rd-scope.dark) .rd-card:hover {
  border-color: rgba(249, 115, 22, .45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.rd-card .rd-chead {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 6px; padding: 0 2px;
}
.rd-card .rd-chead .rd-cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-card .rd-chead .rd-spacer { flex: 1; }
.rd-card .rd-chot { color: var(--rd-brand); display: inline-flex; }
.rd-card .rd-chot svg { width: 14px; height: 14px; }

/* ---------------- 场景 C：热榜总览页 ---------------- */

.rd-page {
  max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
.rd-page .rd-phead {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 20px; font-weight: 700; color: var(--rd-fg);
}
.rd-page .rd-psub { font-size: 13px; color: var(--rd-mut); margin: 0 0 18px; }
/* 总览页：2 列大卡片（上下换行），布局参考宿主「新闻热榜」页 */
.rd-page .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .rd-page .rd-grid { grid-template-columns: 1fr; } }
.rd-page .rd-card { padding: 0; overflow: hidden; }
.rd-page .rd-card .rd-chead {
  margin: 0; padding: 11px 16px 10px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 14.5px;
}
.rd-page .rd-list li { padding: 0 16px; }

.rd-page .rd-foot {
  margin-top: 28px; padding: 14px 16px; border-radius: 12px;
  background: var(--rd-hover); border: 1px solid var(--rd-line);
  font-size: 12.5px; color: var(--rd-mut); line-height: 1.8;
}
.rd-page .rd-foot b { color: var(--rd-fg); }

/* ---------------- 勾选面板（三场景共用） ---------------- */

.rd-mask {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: rdFadeIn .16s ease;
}
@keyframes rdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rd-panel {
  width: 100%; max-width: 580px; max-height: 82vh;
  background: var(--rd-bg); border-radius: 16px; padding: 20px 20px 16px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
  animation: rdPop .18s ease;
  color: var(--rd-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px; line-height: 1.5;
}
@keyframes rdPop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.rd-panel .rd-ptitle { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.rd-panel .rd-ptitle .rd-ptext { flex-shrink: 0; }
.rd-panel .rd-ptitle .rd-spacer { flex: 1; }
/* 标题火焰徽标：class 在 svg 自身，尺寸直接约束（旧选择器 .rd-flame svg 匹配不到导致图标撑满整行） */
.rd-pbadge {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c;
}
.rd-pbadge svg { width: 17px; height: 17px; }
:is(html.dark, body.dark, body.theme-dark, [data-theme="dark"], .rd-mask.dark) .rd-pbadge {
  background: rgba(249, 115, 22, .18); color: #fb923c;
}
.rd-panel .rd-psub { font-size: 12.5px; color: var(--rd-mut); margin: 8px 0 14px; }
.rd-panel .rd-opts { overflow-y: auto; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 2px; }
@media (max-width: 560px) { .rd-panel .rd-opts { grid-template-columns: repeat(2, 1fr); } }

.rd-opt {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--rd-optline); border-radius: 10px; padding: 9px 11px;
  cursor: pointer; transition: all .13s; user-select: none; background: var(--rd-bg);
}
.rd-opt:hover { border-color: #fdba74; }
.rd-opt.on { border-color: var(--rd-brand); background: var(--rd-sel); }
.rd-opt .rd-cb {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--rd-cbline);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff; background: var(--rd-bg); transition: all .13s;
}
.rd-opt.on .rd-cb { background: var(--rd-brand); border-color: var(--rd-brand); }
.rd-opt .rd-cb svg { width: 11px; height: 11px; opacity: 0; }
.rd-opt.on .rd-cb svg { opacity: 1; }
.rd-opt .rd-oname { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-opt .rd-oname svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; color: var(--rd-mut); }

.rd-panel .rd-pfoot {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--rd-line); flex-wrap: wrap;
}
.rd-panel .rd-pfoot .rd-spacer { flex: 1; }
.rd-btn {
  border: 1px solid var(--rd-optline); background: var(--rd-bg); color: var(--rd-fg);
  font-size: 13px; padding: 7px 16px; border-radius: 9px; cursor: pointer;
  transition: all .14s; font-family: inherit;
}
.rd-btn:hover { border-color: var(--rd-mut); background: var(--rd-hover); }
.rd-btn.primary {
  background: var(--rd-brand); border-color: var(--rd-brand); color: #fff; font-weight: 500;
  box-shadow: 0 4px 12px rgba(249, 115, 22, .28);
}
.rd-btn.primary:hover { background: #ea6a09; }
.rd-btn:disabled { opacity: .55; cursor: not-allowed; }

/* toast 提示 */
.rd-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: 100000; background: #111827; color: #fff;
  font-size: 13px; padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  animation: rdToastIn .2s ease; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
@keyframes rdToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }