/* 前台样式：浅灰底 + 白卡片，色值集中在 :root / html.dark 两块变量，换色只改这两块；
   零外部依赖（系统字体栈 + 内嵌字体），随二进制发布。 */

:root {
  --bg: #f8fafc;            /* slate-50 */
  --card: #ffffff;
  --card-border: #e2e8f0;   /* slate-200 */
  --text: #1e293b;          /* slate-800 */
  --muted: #64748b;         /* slate-500 */
  --faint: #94a3b8;         /* slate-400 */
  --hover: #f1f5f9;         /* slate-100 */
  --primary: #2563eb;       /* blue-600 */
  --primary-deep: #1d4ed8;  /* blue-700 */
  --primary-soft: rgba(37, 99, 235, 0.08); /* 角标/选中态的主色淡底 */
}

html.dark {
  --bg: #0f172a;            /* slate-900 */
  --card: #1e293b;          /* slate-800 */
  --card-border: #334155;   /* slate-700 */
  --text: #e2e8f0;          /* slate-200 */
  --muted: #94a3b8;         /* slate-400 */
  --faint: #64748b;         /* slate-500 */
  --hover: #334155;         /* slate-700 */
  --primary: #3b82f6;       /* blue-500（暗底提亮一档） */
  --primary-deep: #2563eb;  /* blue-600 */
  --primary-soft: rgba(59, 130, 246, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: light; }
html.dark { color-scheme: dark; }

/* 滚动条：5px 细条、无上下箭头，颜色随色板。
   Chrome/Edge/Safari 走 ::-webkit-*；Firefox 走标准属性，必须用 @supports 隔离，
   否则 Chrome 会忽略整套 webkit 样式、回落到带箭头的原生滚动条。 */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* 仅不支持 ::-webkit-scrollbar 的浏览器（如 Firefox）收标准属性：
   thin 档位不带箭头按钮，颜色与 webkit 版一致 */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
  html.dark { scrollbar-color: #334155 transparent; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* 粘性页脚：内容短的页面（如关于页）主区撑满剩余高度，页脚贴底，
     侧边菜单的上下留白在任何页面都保持一致 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar,
.footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }

/* ---------- 顶栏 ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--card-border);
}

.topbar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
}

.topbar-r { display: flex; align-items: center; gap: 4px; }

/* 统一交互形态（全站仅两类）：
   ① 按钮/菜单项（topnav/theme-btn/hd-btn/sm-chip/side-board）——统一为左侧菜单风格：
      无边框透明底、muted 字色、hover 浅底变深、选中/激活主色淡底；
   ② 内容链接（条目标题/榜单名/页脚正文链接）——hover 一律主色。 */
.topnav { display: inline-block; padding: 4px 8px; border-radius: 6px; color: var(--muted); font-size: 13px; }
.topnav:hover { background: var(--hover); color: var(--text); }
.topnav.active { background: var(--primary-soft); color: var(--primary-deep); }

/* 顶栏只保留站点级入口（API/关于/主题）；分类导航只存在于左侧菜单，避免重复导航与双重高亮 */
@media (max-width: 900px) {
  .topnav-api { display: none; }   /* 手机端 API/关于 移入下方菜单 */
  .topnav-about { display: none; }
}

.theme-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
}
.theme-btn:hover { background: var(--hover); color: var(--text); }

/* ---------- 主体：左侧菜单 + 右侧内容 ---------- */

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px; /* 上下左右同为 16px：主区距顶栏与页脚的距离相等 */
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  /* 栅格默认会在容器变高时均分行高，手机端两行（菜单/内容）会被平摊空余高度、
     内容看起来像垂直居中；固定为 start，短页面内容保持顶部对齐 */
  align-content: start;
  flex: 1 0 auto; /* 主区撑满剩余高度，短页面也把页脚推到底部 */
  width: 100%;
}

.main { padding: 0; min-width: 0; }

/* 侧边菜单：分类分组 + 组内榜单，当前榜单高亮 */
.sidebar {
  position: sticky;
  top: 60px; /* 顶栏 44px + 主区上边距 16px */
  align-self: start;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 8px;
}

.side-nav { display: flex; flex-direction: column; gap: 12px; } /* 分组与分组：12px */
.side-group { display: flex; flex-direction: column; gap: 2px; } /* 榜单与榜单：2px */

/* 分类项与主页/榜单项同一套菜单行样式（尺寸/色彩/hover/激活一致） */
.side-cat {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  margin-bottom: 4px; /* 分类与首个榜单：2+4=6px，层级比榜单间（2px）更明显 */
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}
.side-cat:hover { background: var(--hover); color: var(--text); }
.side-cat.active { background: var(--primary-soft); color: var(--primary-deep); }

/* 榜单作为分类的下级：左侧缩进一级，保留层级差别 */
.side-group .side-board { padding-left: 20px; }

.side-board {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}
.side-board:hover { background: var(--hover); color: var(--text); }
.side-board.active { background: var(--primary-soft); color: var(--primary-deep); } /* 选中态不加粗：靠底色+主色区分 */

.side-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.side-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 预览模式下菜单里的隐藏榜单：名称后跟一枚小 VIP 角标（复用 .tag 底色，仅收紧尺寸） */
.side-vip {
  flex-shrink: 0;
  margin-left: 4px;
  padding: 0 3px;
  font-size: 9px;
  line-height: 14px;
}

.side-empty { font-size: 12px; color: var(--faint); padding: 2px 8px; }

/* 手机端菜单（≤900px 启用，替代 side-nav）：两行 chips——分类行 + 榜单行，各自横向滚动 */
.side-mobile { display: none; }
/* 两行 chips 各自横滚；不再隐藏滚动条：移动端为滑动时出现的 overlay 指示条，
   桌面窄窗为全局同款 5px 细条——可发现性优先（与卡片内滚区同一取舍） */
.sm-row { display: flex; gap: 6px; overflow-x: auto; padding: 1px 2px 4px; }
.sm-row + .sm-row { margin-top: 6px; }
.sm-row[hidden] { display: none; } /* 无分类语境（主页/关于页）时榜单行整行收起 */
.sm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.sm-chip:hover { background: var(--hover); color: var(--text); }
.sm-chip.active { background: var(--primary-soft); color: var(--primary-deep); } /* 选中不加粗，与桌面侧栏一致 */
.sm-chip[hidden] { display: none; } /* 分类筛选时隐藏不匹配的榜单 chip */

/* 多列卡片：最多 2 列；间距与 .shell 的主栅格间距同为 20px（窄屏同为 10px），全局节奏一致 */
.boards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 700px) {
  .boards { grid-template-columns: repeat(2, 1fr); }
}

.board {
  --pad-x: 20px; /* 卡片左右留白；内容（标题/序号/阅读量）统一缩进此值 */
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  /* 上 12px、下 5px：末行自身的 7px 下内边距计入后，上下均等于 12px */
  padding: 12px var(--pad-x) 5px;
}

.board-single { max-width: none; margin: 0; }

.board-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  /* 头部横线通栏（直接连到卡片左右边框）；列表内部横线才是内缩 12px */
  margin: 0 calc(-1 * var(--pad-x));
  padding: 0 var(--pad-x) 8px;
  border-bottom: 1px solid var(--card-border);
}

/* 单榜单页头部区块：标题行 + 历史面板共用下方一条分隔线（同样通栏） */
.board-top {
  margin: 0 calc(-1 * var(--pad-x));
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--card-border);
}
.board-top .board-hd { margin: 0; padding: 0 0 6px; border-bottom: none; }
.board-top .board-hd-hero { padding-bottom: 10px; } /* 大图标头部底部多留一点气 */

.board-name { font-weight: 600; font-size: 14px; }

/* 单榜单页头部（宽版）：大图标 + 两行标题（上：榜单名 / 下：更新时间），右侧动作组 */
.board-hd-hero { gap: 10px; }
/* 双类名提高优先级：.board-logo 基类（16px）在本规则之后定义，单类名会被它盖回去 */
.board-logo.board-logo-lg { width: 32px; height: 32px; }
.board-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.board-titles .board-name { font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-titles .board-upd { margin-left: 0; }
.board-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* 排名变化：上升绿 / 下降红，紧跟排名的独立固定宽占位列（无变化也留空）。
   箭头字符宽度随 ↑1/↑12 变化，内联进序号会把右对齐序号挤得逐行错位（与后台数据页同款口径）。 */
.delta { width: 20px; flex-shrink: 0; font-style: normal; font-size: 10px; letter-spacing: -0.02em; align-self: center; }
.delta.up { color: #16a34a; }
.delta.down { color: #dc2626; }
html.dark .delta.up { color: #4ade80; }
html.dark .delta.down { color: #f87171; }
a.board-name:hover { color: var(--primary-deep); }

/* 标题内语义色：绿涨红跌（与 .delta 同一套升降色），通用类名供任何富文本片段复用 */
.txt-green { color: #16a34a; }
.txt-red { color: #dc2626; }
html.dark .txt-green { color: #4ade80; }
html.dark .txt-red { color: #f87171; }

/* 源图标（后台上传，无则不显示）；直角展示，不切圆角 */
.board-logo {
  width: 16px;
  height: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

/* 更新时间：作为右侧组的第一个元素，靠 margin-left:auto 把「时间 + 按钮组」整体推右；
   后面三个按钮因此始终钉在右侧，时间文字变宽也不会推挤它们（无需固定宽度） */
.board-upd {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 内部横线统一规则：左右各内缩 12px——比内容（--pad-x）长、又不与卡片边框相连；
   列表整体向外撑、行内容缩回，避免在内滚容器里被裁切。 */
.list { list-style: none; margin: 0 calc(12px - var(--pad-x)); overflow-anchor: none; }

.row {
  display: flex;
  align-items: center; /* 整行垂直居中：序号/标题/角标/行尾指标同一中轴 */
  gap: 6px;
  padding: 7px calc(var(--pad-x) - 12px); /* 上下对等 7px，横线落在两行文字正中 */
  border-bottom: 1px solid var(--card-border);
}

/* 历史回放的位移动画由 site.js 的 Web Animations API 直接驱动（FLIP），
   不依赖 CSS 类，也不做 .row 上的全局 transition。 */
.row:last-child { border-bottom: none; }

.rank {
  width: 22px;
  text-align: left; /* 左对齐：单位数与三位数的左边距都与行尾阅读量的右边距一致（均等于卡片内边距） */
  font-size: 13px;
  color: var(--faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  align-self: center; /* 标题两行时序号垂直居中，不贴首行 */
}
.rank.top { color: var(--primary); }

/* 角标标签（微博热/新/爆等，来源可扩展）：主色淡底，与站内链接同一强调体系 */
.tag {
  flex-shrink: 0;
  align-self: center;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--primary-soft);
  color: var(--primary-deep);
}
/* 站名旁的角标：复用行内角标样式，紧贴站名 */
.logo .tag { margin-left: -4px; letter-spacing: .02em; }

.title {
  flex: 1;
  min-width: 0;
  /* 标题允许两行，超长才截断（单行截断会把热点标题吃掉后半句） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.45;
}

/* 标题 + 附加指标两行区（单榜单页）：标题占满宽度，指标行贴在其下方 */
.row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.row-main .title { flex: none; width: 100%; }
.meta-line {
  font-size: 11px;
  line-height: 1.35;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.title:hover { color: var(--primary-deep); }

.metric {
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.empty { padding: 20px 0; text-align: center; color: var(--faint); font-size: 13px; }
.boards-empty { grid-column: 1 / -1; text-align: center; color: var(--faint); padding: 60px 0; }

/* ---------- 单源页 ---------- */

/* ---------- 头部动作按钮与历史面板 ---------- */

.hd-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  /* button 默认不继承字体，历史(button)与官网(a)会用不同字体导致文字基线错位；
     统一继承 + 固定行高，两者才能严格同线 */
  font-family: inherit;
  font-weight: inherit;
  line-height: 1;
  height: 26px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  gap: 4px; /* 图标与文字 */
  -webkit-appearance: none;
  appearance: none;
}
.hd-btn svg { flex-shrink: 0; display: block; }
.hd-btn:hover { background: var(--hover); color: var(--text); }
.hd-btn.on { color: var(--primary-deep); background: var(--primary-soft); }

.hist-panel {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--hover);
}
.hist-panel[hidden] { display: none; }

.hist-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

/* 时间范围 chips（1h/6h/24h/3d）：与菜单项同一交互语言 */
.hist-ranges { display: flex; align-items: center; gap: 2px; }
.hist-chip {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.4;
}
.hist-chip:hover { background: var(--hover); color: var(--text); }
.hist-chip.active { background: var(--primary-soft); color: var(--primary-deep); }

/* 日期选择：跨 7 天回看（选中后显示该日 24 小时）；与 chips 同高同色板 */
.hist-day {
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  border-radius: 6px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-family: inherit;
  color-scheme: inherit;
}
html.dark .hist-day { color-scheme: dark; } /* 深色下日历图标可见 */

/* 逐条步进 / 播放按钮 */
.hist-step {
  border: none;
  background: transparent;
  color: var(--muted);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.hist-step:hover { background: var(--hover); color: var(--text); }
.hist-step:disabled { opacity: .35; cursor: default; background: transparent; }
.hist-step.on { color: var(--primary-deep); background: var(--primary-soft); }

/* 时间轴：气泡 + 滑杆（两侧步进）+ 标记带 + 刻度
   气泡/标记/刻度全部放进 .hist-axis（与滑杆同宽），否则它们会占满含两侧箭头的整行，
   导致刻度向右偏出一个按钮宽、显示在箭头下面。 */
.hist-track { position: relative; margin: 4px 0 2px; }
.hist-axis { position: relative; flex: 1; min-width: 0; padding-top: 24px; --hist-thumb: 14px; }

/* 时间气泡：跟随拇指水平位置（按百分比定位），拖动时实时变值 */
.hist-bubble {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--card);
  font-size: 10px;
  line-height: 1.6;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.hist-slider-row { display: flex; align-items: center; gap: 4px; }

.hist-slider {
  display: block;
  width: 100%; /* 包进 .hist-axis 后不再是 flex 子项，需显式撑满轴宽 */
  flex: 1;
  min-width: 0;
  margin: 0;
  height: var(--hist-thumb);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
/* 自绘滑杆：固定 14px 圆钮，使「钮心 = 刻度位置」可精确对齐（原生样式各浏览器宽度不一） */
.hist-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--card-border);
}
.hist-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--hist-thumb);
  height: var(--hist-thumb);
  margin-top: calc((4px - var(--hist-thumb)) / 2);
  border: none;
  border-radius: 50%;
  background: var(--primary);
}
.hist-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--card-border);
}
.hist-slider::-moz-range-thumb {
  width: var(--hist-thumb);
  height: var(--hist-thumb);
  border: none;
  border-radius: 50%;
  background: var(--primary);
}
.hist-slider:disabled { opacity: .4; }

/* 记录点标记带：每一条历史记录一个 1px 竖线，密集时自然成带，空档一眼可见。
   两侧内缩半个钮宽：range 的钮心活动范围是 [thumb/2, width - thumb/2]，
   不内缩就会让首末记录点/刻度与钮心错位。 */
.hist-marks {
  position: relative;
  height: 6px;
  margin: 3px calc(var(--hist-thumb) / 2) 0;
}
.hist-marks i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--faint);
  opacity: .55;
}

/* 时间刻度：四档标签，统一 10px 淡灰，两端对齐 */
.hist-ticks {
  position: relative;
  height: 14px;
  margin: 2px calc(var(--hist-thumb) / 2) 0;
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.hist-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hist-ticks span:first-child { transform: none; }
.hist-ticks span:last-child { transform: translateX(-100%); }

/* ---------- 404 ---------- */

.nf { text-align: center; padding: 64px 20px 48px; }
.nf-code { font-size: 64px; line-height: 1; color: var(--faint); font-variant-numeric: tabular-nums; }
.nf-title { font-size: 15px; color: var(--muted); margin: 14px 0 24px; }
.nf-actions { display: flex; align-items: center; justify-content: center; }
.nf-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--primary-soft);
  color: var(--primary-deep);
}
.nf-btn:hover { color: var(--primary); }

/* ---------- 页脚 ---------- */

/* 与顶栏同高节奏：顶栏 44px + 1px 边框，页脚同步控制在 ~44px，
   自定义 HTML 多行时按行自然增高。 */
.footer {
  background: var(--card); /* 页脚与顶栏同为卡片底色，与主区分层 */
  border-top: 1px solid var(--card-border);
  text-align: center;
  padding: 12px 16px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}
/* 页脚自定义 HTML（后台可设）：段落零间距、链接与顶栏导航同色系 */
.footer-html p { margin: 0; }
.footer-html a { color: var(--muted); }
.footer-html a:hover { color: var(--primary); }

/* 关于页正文：与普通榜单页同宽（不再限宽居中） */
.about-body { padding: 14px 2px 6px; font-size: 13px; line-height: 1.9; color: var(--text); word-break: break-word; }
.about-body p { margin: 0 0 8px; }
.about-body a { color: var(--primary); }
.about-body a:hover { color: var(--primary-deep); }

/* 关于页正文：纯文本、保留换行 */
.about-text { padding: 14px 2px 6px; font-size: 13px; line-height: 1.9; color: var(--text); white-space: pre-line; word-break: break-word; }

/* API 文档页（/api）：说明文字 + 接口代码 + 榜单入口卡片 */
.api-doc { padding: 12px 2px 6px; font-size: 13px; line-height: 1.8; color: var(--text); }
.api-doc p { margin: 0 0 8px; }
.api-doc h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.api-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--hover);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-all;
}
/* 接口文档：参数/返回字段小标题与字段表格 */
.api-doc .api-k {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 14px 0 6px;
}
.api-doc ul, .api-doc ol { margin: 4px 0 10px; padding-left: 20px; }
.api-doc li { font-size: 12px; line-height: 1.8; color: var(--muted); }
.api-doc li strong { color: var(--text); font-weight: 600; }

/* 字段表：外框圆角 + 表头浅底，行线与卡片边框同色 */
.api-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 4px 0 14px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
}
.api-tbl th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  padding: 7px 12px;
  background: var(--hover);
  border-bottom: 1px solid var(--card-border);
}
.api-tbl td {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  padding: 7px 12px;
  border-bottom: 1px solid var(--card-border);
  vertical-align: top;
}
.api-tbl tr:last-child td { border-bottom: none; }
.api-tbl td:first-child { white-space: nowrap; }
/* 字段名用正文色，与描述区分开 */
.api-tbl td:first-child code { color: var(--text); background: none; padding: 0; font-size: 12px; }

/* 榜单内搜索：上方一行时间段（与历史「指定日期」同形态）+ 下方搜索框 */
.search-form { display: block; margin: 0; }
.search-form .search-box { margin-top: 8px; }
.search-box { position: relative; min-width: 0; }
.search-range-sep { font-size: 11px; color: var(--faint); }
/* 命中被截断时的提示（total > limit 才显示） */
.search-note { margin-top: 6px; font-size: 11px; color: var(--faint); }
.search-note[hidden] { display: none; }
.search-submit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
.search-submit:hover { background: var(--hover); color: var(--text); }

/* 清空按钮：有输入时才出现，位于放大镜左侧（自绘，代替被隐藏的原生清除叉） */
.search-clear {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.search-clear:hover { background: var(--hover); color: var(--text); }
.search-clear[hidden] { display: none; }
/* 搜索面板：结果写进榜单列表；下边距继承 .hist-panel（8/10px），与历史到首行的距离一致 */
.search-input {
  width: 100%;
  min-width: 0;
  padding: 7px 60px 7px 10px; /* 右侧留出清空叉 + 放大镜的位置 */
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.search-input::placeholder { color: var(--faint); }
/* 隐藏浏览器自带的搜索清除叉，避免与内嵌放大镜相叠 */
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-time {
  width: 250px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* 状态与最高排名用固定列宽 + 右对齐，跨行严格对齐（标题列 flex 吸收剩余宽度） */
.search-state { width: 48px; flex-shrink: 0; text-align: right; font-size: 11px; color: var(--muted); }
.search-meta { width: 74px; flex-shrink: 0; text-align: right; font-size: 11px; color: var(--faint); white-space: nowrap; }
.search-dur { width: 80px; flex-shrink: 0; text-align: right; font-size: 11px; color: var(--muted); white-space: nowrap; }
/* 搜索结果页头：与结果行同列宽，只为标明列含义，非可点内容 */
.search-head { color: var(--faint); font-size: 10px; }
.search-head .title { display: block; -webkit-line-clamp: 1; font-size: 10px; color: var(--faint); }

/* 分类/首页：榜单卡片定高、列表内部滚动（显示与全局一致的 5px 细条，无箭头） */
.boards-fixed .list {
  max-height: 349px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- 移动端 ---------- */

@media (max-width: 900px) {
  /* 窄屏：内容单列，菜单换成两行 chips（分类行 + 榜单行），两级菜单收起 */
  .shell {
    /* minmax(0,1fr)：列宽不被内容撑破——chips 行是横向滚动区，
       用 1fr（最小值为 auto）会按内容宽度把整列推到屏幕外 */
    grid-template-columns: minmax(0, 1fr);
    padding: 10px; /* 窄屏同样上下左右对称，距顶栏与页脚均 10px */
    gap: 10px;
  }
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 8px;
    min-width: 0;
  }
  .side-mobile { min-width: 0; }
  .sm-row { width: 100%; max-width: 100%; }
  .boards { gap: 10px; } /* 窄屏卡片间距与 .shell 间距同步 */
  .side-nav { display: none; }
  .side-mobile { display: block; }
}

@media (max-width: 640px) {
  .board { --pad-x: 14px; padding: 10px var(--pad-x) 3px; } /* 下 3px + 末行 7px = 上 10px */
  .board-logo.board-logo-lg { width: 28px; height: 28px; } /* 小屏图标略收，给标题与按钮腾地方 */
  .search-time { width: auto; font-size: 10px; line-height: 1.35; } /* 小屏时间段自适应，过长可换行 */
  .search-state, .search-meta, .search-dur { font-size: 10px; } /* 小屏三列一起收窄字号 */
  .search-state { width: 38px; }
  .search-meta { width: 58px; }
  .search-dur { width: 62px; }
  .meta-line { font-size: 10px; } /* 小屏指标行同步收窄 */
  .nf { padding: 44px 8px 32px; }
  .nf-code { font-size: 52px; }
  .metric { display: none; } /* 小屏藏热度，保标题可读 */
}