/* ============================================================
   navdock · 页面级样式
   首页 / 吧目录 / 吧主页 / 新闻流 / 帖子 / 站点 / 用户
   ============================================================ */

/* ---------- 首页 · 河图开篇 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1100px 300px at 50% -140px, var(--bg-sunken), transparent 72%),
    var(--bg-card);
}

/* 底部一线渐隐，收住整个开篇 */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.hero__inner {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: var(--s11) var(--s5) var(--s9);
  text-align: center;
  position: relative;
}

@media (max-width: 640px) {
  .hero__inner { padding: var(--s8) var(--s4) var(--s7); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 28px;
  padding: 0 var(--s4);
  margin-bottom: var(--s5);
  border-radius: var(--r-full);
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
}

.hero__title {
  /* 宋体大字：开篇即立"经籍"气象，与工具站的现代无衬线拉开距离 */
  font-family: var(--font-serif);
  font-size: clamp(34px, 6.2vw, var(--t-5xl));
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: var(--s4);
  line-height: 1.32;
}

/* 朱批：以朱红浅染标示主名，不用彩虹渐变 */
.hero__title em {
  font-style: normal;
  color: var(--fg);
  background: linear-gradient(180deg, transparent 66%, var(--wx-huo-soft) 66%, var(--wx-huo-soft) 94%, transparent 94%);
  padding: 0 .12em;
}

.hero__desc {
  max-width: 60ch;
  margin: 0 auto var(--s7);
  color: var(--fg-muted);
  font-size: var(--t-base);
  line-height: var(--lh-loose);
}

.hero__search {
  max-width: 580px;
  margin: 0 auto var(--s4);
}
.hero__search .input {
  height: 48px;
  font-size: var(--t-md);
  border-radius: var(--r-full);
  padding-left: 44px;
  box-shadow: var(--sh2);
}
.hero__search .search__icon { left: var(--s5); }

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

.hero__stats {
  display: flex;
  justify-content: center;
  gap: var(--s9);
  margin-top: var(--s8);
  flex-wrap: wrap;
}

.hero__stat { text-align: center; }
.hero__stat b {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--t-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.2;
}
.hero__stat span {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: .08em;
}

/* 五行轮盘（河图生成数：一六水、二七火、三八木、四九金、五十土） */
.wx-ring {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s8);
  flex-wrap: wrap;
}

.wx-ring__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 78px;
  padding: var(--s3) var(--s2);
  border-radius: var(--r-md);
  background: var(--wx-s);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wx-ring__item:hover {
  transform: translateY(-3px);
  border-color: var(--wx);
  text-decoration: none;
  box-shadow: var(--sh2);
}
.wx-ring__glyph {
  font-size: 24px;
  line-height: 1.2;
}
.wx-ring__name {
  font-size: var(--t-xs);
  color: var(--wx-d);
  font-weight: 600;
  letter-spacing: .02em;
}
.wx-ring__num {
  font-size: 11px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 域入口（首页开篇的功能性导航） ---------- */
.sec-entries {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s6);
  flex-wrap: wrap;
}

.sec-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 88px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.sec-entry:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh2);
  transform: translateY(-2px);
  text-decoration: none;
}
.sec-entry__name {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  font-weight: 650;
  color: var(--fg);
  letter-spacing: .04em;
}
.sec-entry__sub {
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: .02em;
}

/* ---------- 区块标题 ---------- */
.sect { padding: var(--s8) 0 0; }

.sect__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}

.sect__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-serif);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: .03em;
  margin: 0;
}

.sect__sub { font-size: var(--t-sm); color: var(--fg-muted); margin-top: var(--s1); }

.sect__more { font-size: var(--t-sm); color: var(--fg-muted); }
.sect__more:hover { color: var(--brand); }

/* ---------- 吧卡片 ---------- */
.board-card {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.board-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--wx, var(--line));
  opacity: .8;
}
.board-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh3);
  transform: translateY(-1px);
  text-decoration: none;
}

.board-card__emoji {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--wx-s, var(--bg-sunken));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: none;
}

.board-card__body { flex: 1 1 auto; min-width: 0; }

.board-card__name {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-base);
  font-weight: 650;
  color: var(--fg);
  margin-bottom: 2px;
}
.board-card:hover .board-card__name { color: var(--brand); }

.board-card__desc {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.5;
  margin-bottom: var(--s2);
}

.board-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* 紧凑吧行：目录页 */
.board-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover { background: var(--bg-hover); text-decoration: none; }

.board-row__name {
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}

.board-row__desc {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 吧主页头 ---------- */












/* ---------- 新闻流 ---------- */
.news-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.news-item:last-child { border-bottom: 0; }
.news-item:hover { background: var(--bg-hover); }

.news-item__rank {
  width: 22px;
  flex: none;
  font-size: var(--t-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  text-align: center;
  padding-top: 1px;
}
.news-item__rank--top { color: var(--danger); }

.news-item__body { flex: 1 1 auto; min-width: 0; }

.news-item__title {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.45;
  margin-bottom: var(--s1);
}
.news-item__title:hover { color: var(--brand); text-decoration: none; }

.news-item__summary {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.6;
  margin-bottom: var(--s2);
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  flex-wrap: wrap;
}

.news-item__pin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 11px;
  font-weight: 650;
  flex: none;
}

@media (max-width: 640px) {
  .news-item { padding: var(--s3) var(--s4); }
  .news-item__rank { width: 18px; font-size: var(--t-base); }
}

/* 今日要闻（按圈子分组） */
.news-group { margin-bottom: var(--s5); }
.news-group__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--bg-sunken);
  border-radius: var(--r-md);
  margin-bottom: var(--s2);
  font-weight: 650;
  font-size: var(--t-sm);
}
.news-group__head:hover { text-decoration: none; }

/* ---------- 帖子列表 ---------- */

.post-item:last-child { border-bottom: 0; }


.post-item__avatar { flex: none; }

.post-item__body { flex: 1 1 auto; min-width: 0; }


.post-item__title:hover { color: var(--brand); text-decoration: none; }



.post-item__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  flex-wrap: wrap;
}

@media (max-width: 640px) {

}

/* 帖子正文 */
.post-head { margin-bottom: var(--s5); }
.post-head__title {
  font-size: var(--t-2xl);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: var(--s3);
}



/* Markdown 正文 */
.prose {
  font-size: var(--t-md);
  line-height: var(--lh-loose);
  color: var(--fg);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.prose > *:first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.6em 0 .6em; }
.prose h1 { font-size: var(--t-xl); }
.prose h2 { font-size: var(--t-lg); }
.prose h3 { font-size: var(--t-md); }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.6em; }
.prose li { margin-bottom: .35em; }
.prose blockquote {
  margin: 0 0 1.1em;
  padding: var(--s2) var(--s4);
  border-left: 3px solid var(--wx, var(--line-strong));
  background: var(--bg-sunken);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--fg-muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  padding: 2px 5px;
  border-radius: var(--r-xs);
  background: var(--bg-sunken);
  color: var(--danger);
  font-size: .9em;
}
.prose pre {
  margin: 0 0 1.1em;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  overflow-x: auto;
  line-height: 1.6;
}
.prose pre code { padding: 0; background: none; color: var(--fg); font-size: var(--t-sm); }
.prose img { border-radius: var(--r-md); margin: var(--s4) 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose table {
  width: 100%;
  margin: 0 0 1.1em;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.prose th, .prose td {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  text-align: left;
}
.prose th { background: var(--bg-sunken); font-weight: 650; }
.prose hr { margin: 1.6em 0; }

/* ---------- 评论 ---------- */

.comment:last-child { border-bottom: 0; }
.comment--reply { margin-left: var(--s7); }


.comment__author { font-weight: 600; color: var(--fg); }
.comment__time { color: var(--fg-muted); font-size: var(--t-xs); }
.comment__text { font-size: var(--t-base); line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; }
.comment__acts { display: flex; gap: var(--s3); margin-top: var(--s2); font-size: var(--t-xs); }

@media (max-width: 640px) {
  .comment--reply { margin-left: var(--s5); }
}

/* ---------- 站点条目 ---------- */
.site-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.site-item:last-child { border-bottom: 0; }
.site-item:hover { background: var(--bg-hover); }

.site-item__favicon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--fg-muted);
}

.site-item__name {
  font-weight: 600;
  color: var(--fg);
  font-size: var(--t-base);
}
.site-item__name:hover { color: var(--brand); text-decoration: none; }
.site-item__host { font-size: var(--t-xs); color: var(--fg-muted); font-family: var(--font-mono); }
.site-item__desc { font-size: var(--t-sm); color: var(--fg-muted); margin-top: 2px; line-height: 1.5; }

/* 资源卡片样式已移入 parts/_sites.css，此处不再重复定义。
   此前同名规则在主体与分片各有一份，后者才是想生效的那份，
   但主体这份因为先声明而"看起来"仍在起作用，改分片不生效就是这么来的。 */

/* ---------- 排行榜 ---------- */
.rank-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.rank-row:last-child { border-bottom: 0; }

.rank-row__no {
  width: 24px;
  flex: none;
  text-align: center;
  font-size: var(--t-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}
.rank-row__no--1 { color: #d69e2e; }
.rank-row__no--2 { color: #9aa4b2; }
.rank-row__no--3 { color: #b7791f; }

.rank-row__body { flex: 1 1 auto; min-width: 0; }

.rank-row__bar {
  height: 4px;
  margin-top: var(--s2);
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  overflow: hidden;
}
.rank-row__bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--wx, var(--brand));
  transition: width 400ms var(--ease);
}

/* ---------- 用户页 ---------- */
.profile-head {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
  padding: var(--s5);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: var(--s5);
}

@media (max-width: 640px) {
  .profile-head { flex-direction: column; align-items: center; text-align: center; }
}

.profile-stats {
  display: flex;
  gap: var(--s5);
  margin-top: var(--s3);
  flex-wrap: wrap;
}

.profile-stat b {
  display: block;
  font-size: var(--t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.profile-stat span { font-size: var(--t-xs); color: var(--fg-muted); }

/* ---------- 侧栏块 ---------- */





.side-block__body--flush { padding: 0; }

/* ---------- 首页快速入口 ---------- */
.quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
}

.quick__item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--dur) var(--ease);
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--fg);
}
.quick__item:hover {
  border-color: var(--wx, var(--brand));
  background: var(--wx-s, var(--brand-soft));
  color: var(--wx-d, var(--brand));
  text-decoration: none;
}

.quick__glyph {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--wx-s, var(--bg-sunken));
  color: var(--wx-d, var(--fg-muted));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  flex: none;
}

/* ---------- 体用双视图切换 ---------- */
.view-switch {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  gap: 2px;
}
.view-switch__btn {
  height: 26px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--fg-muted);
  font-size: var(--t-xs);
  font-weight: 550;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.view-switch__btn[aria-pressed="true"] {
  background: var(--bg-card);
  color: var(--fg);
  box-shadow: var(--sh1);
}

/* ---------- 认证页 ---------- */

.auth-card {
  padding: var(--s7) var(--s6);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh2);
}
@media (max-width: 640px) {
  .auth-card { padding: var(--s5) var(--s4); }
}

/* ==== PARTS-BEGIN ==== */

/* ---- parts/_board-hero.css ---- */
/* ============================================================
   圈子详情 · 页头

   此前 page-board.js 产出的是 .board-hero__bg / __inner / __ico /
   __name / __xiang / __side，而样式表里写的是 .board-hero__emoji /
   __title / __meta —— 两套类名对不上，等于这个页头从来没有样式：
   背景层高度 0，正文溢出卡片，标题落在底色上。

   现在按 JS 实际产出的结构重写，类名与 DOM 一一对应。
   ============================================================ */

.board-hero {
  position: relative;
  padding: var(--s6) var(--s6) var(--s5);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  margin-bottom: var(--s5);
}

.board-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  min-width: 0;
}

.board-hero__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--brand);
}

.board-hero__body {
  min-width: 0;
  flex: 1 1 auto;
}

.board-hero__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}

.board-hero__name {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--fg);
}

.board-hero__desc {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--fg-muted);
}

/* 大象传引文：左侧一道细线，字号略小，行距放宽 */
.board-hero__xiang {
  margin: var(--s3) 0 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--line-strong);
  max-width: 62ch;
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--fg-muted);
}

.board-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s3);
}

/* 右上的统计：数字大、单位小，竖排两组 */
.board-hero__side {
  flex: none;
  display: flex;
  gap: var(--s5);
  padding-left: var(--s5);
  border-left: 1px solid var(--line);
  /* 竖线只到内容高度。此前 align-self: stretch 让它拉满整个页头，
     而统计往往只有一两组，竖线就孤零零吊在那里，显得空。 */
  align-self: flex-start;
  padding-top: var(--s1);
}

.board-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 44px;
}
.board-stat b {
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.board-stat span {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: .08em;
}

/* 操作条：关注 / 发帖 与页头分开一段，不要贴着 tab */
.board-actions {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

@media (max-width: 860px) {
  .board-hero { padding: var(--s5) var(--s4); }
  .board-hero__inner { flex-wrap: wrap; }
  .board-hero__side {
    width: 100%;
    padding-left: 0;
    padding-top: var(--s3);
    border-left: 0;
    border-top: 1px solid var(--line);
    justify-content: flex-start;
  }
  .board-stat { align-items: flex-start; }
}

/* ---- parts/_board-rank.css ---- */
/* ============================================================
   圈子 · 热度视图

   旧版：单列 94 行，每行「灰序号 + 图标 + 名称 + 简介 + 8帖·0人」，
   行高 60px，无分隔无分组，页面高 9000px；
   「0 人」重复九十多次，整列变成一排 0；名次与名称同字号同灰度，
   看不出排名。整体只有一处朱红，显得单调而廉价。

   现在：
     两列网格，一屏十余条；
     名次做成固定宽度的徽标，前三名朱红；
     统计只显示非零值，数字加粗、单位弱化。
   ============================================================ */

.rank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

@media (max-width: 900px) {
  .rank-grid { grid-template-columns: minmax(0, 1fr); }
}

.brow {
  display: flex;
  /* start 而不是 center：两列简介长短不一时，
     center 会让同一行的两个名称基线错开。 */
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-decoration: none;
  min-width: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brow:hover {
  background: var(--bg-card);
  border-color: var(--line);
}

/* 名次徽标：固定 24px 宽，等宽数字 */
.brow__no {
  flex: 0 0 24px;
  width: 24px;
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  color: var(--fg-muted);
  border-radius: var(--r-xs);
}

/* 前三名：朱红字，不加底色块——
   底色块会让前三行比其余行更重，榜单看起来像被打了补丁。
   只改颜色与字重，克制而明确。 */
.brow__no--top {
  color: var(--brand);
  font-weight: 750;
  font-size: var(--t-sm);
}

.brow .bcard__body { gap: 2px; }

.brow .bcard__name {
  font-size: var(--t-base);
  font-weight: 650;
}

.brow .bcard__desc {
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 统计：数字加粗、单位弱化，右对齐成一列 */
.brow__meta {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding-left: var(--s2);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  white-space: nowrap;
}
.brow__meta b {
  font-weight: 650;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.brow__meta i {
  font-style: normal;
  color: var(--fg-faint);
  margin: 0 1px;
}

@media (max-width: 640px) {
  .brow__meta { display: none; }
}

/* ---- parts/_boards.css ---- */
/* ============================================================
   圈子目录 /boards 样式
   结构：页头 → 工具条 → 域 → 组 → 圈子卡片网格
   以及全站页脚（各页共用）
   ============================================================ */

/* ---------- 页脚 ----------
   不做成"一块版"，也不放印章。
   印章是纯装饰，与页面其余部分没有关系，所以看着像贴上去的。
   只留一行：左边站名与一句话，右边法务入口。与正文同一版心，
   位置由上方 96px 的空白给出，不需要线来划界。 */
.footer {
  margin-top: var(--s11);
  padding-bottom: var(--s8);
}

.footer__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  min-width: 0;
  flex-wrap: wrap;
}

.footer__name {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--fg);
  line-height: 1.2;
}

.footer__note {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  letter-spacing: .06em;
  line-height: 1.4;
}

.footer__side {
  display: flex;
  align-items: baseline;
  gap: var(--s5);
}

.footer__nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.footer__link {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__link:hover { color: var(--brand); text-decoration: none; }

.footer__copy {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .footer { margin-top: var(--s9); padding-bottom: var(--s7); }
  .footer__inner { gap: var(--s4); align-items: flex-start; flex-direction: column; }
  .footer__side { gap: var(--s4); }
}
/* ---------- 通用页头（多个页面共用） ---------- */
.pg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.pg-head__main { min-width: 0; }

.pg-head__title {
  font-family: var(--font-serif);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: .03em;
  margin: 0 0 var(--s2);
  line-height: 1.25;
}

.pg-head__sub {
  margin: 0;
  max-width: 68ch;
  color: var(--fg-muted);
  font-size: var(--t-base);
  line-height: var(--lh-snug);
}
.pg-head__sub b {
  color: var(--fg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.pg-tools {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  /* 页头副标题删掉后，标题与工具条之间只剩这一点距离会挤在一起。
     给一段上边距，让「标题—工具—内容」三段有呼吸。 */
  margin: var(--s5) 0 var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

/* ---------- 筛选药丸行 ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 32px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-card);
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--fg); }
/* 选中态：中性底 + 墨色字。
   原来是「冷粉底 + 朱红字 + 朱红描边」三重上色，
   在暖纸底上既发灰又吵——这是「圈子页热度配色丑」的直接原因。
   选中与否靠底色与字重就够，颜色留给内容。 */
.chip.is-on {
  background: var(--bg-sunken);
  border-color: var(--line-strong);
  color: var(--fg);
  font-weight: 650;
}

/* ---------- 域 ----------
   域与域之间是"区块级"分隔，必须明显大于组与组之间，否则层级读不出来。
   头部用「朱线 + 双细线」：朱线是朱批的意象，双细线是传统书籍的版口收边。
   两者都不增加元素，只让一条线变得更讲究。 */
.sec { margin-top: var(--s8); }
.sec:first-child { margin-top: 0; }

/* 域标题：只有字，没有线。
   原先压一条主线 + 一段朱线 + 一条淡线共三条线，
   是全页最"用力"的地方，反而显出刻意。字号本身已经足够分级。 */
.sec__head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  /* 域是最大一级，需要一条线收住它下面所有的组。
     组只靠留白分行，不画线——两级才有区别。 */
  border-bottom: 1px solid var(--line);
}

.sec__name {
  font-family: var(--font-serif);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: .16em;
  margin: 0;
  line-height: 1.15;
}

.sec__sub {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  letter-spacing: .1em;
}

.sec__n {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

/* ---------- 组 ----------
   组与组之间只隔一层留白（32px）。
   此前是 40px 留白 + 域标题 96px 上边距，一页排下来五域十六组，
   光空隙就占去近千像素，整页被拉长到 5800px。 */
.grp { margin-bottom: var(--s6); }
.grp:last-child { margin-bottom: 0; }

.grp__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.grp__ico {
  display: inline-flex;
  align-items: center;
  color: var(--fg-muted);
}

.grp__name {
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: .04em;
}

.grp__desc {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grp__n {
  margin-left: auto;
  flex: none;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .grp__desc { display: none; }
}

/* ---------- 圈子网格 ----------
   列数不写死。
   此前固定 3 列：只有 1–2 个圈子的组（如「命」）也占满 3 列，
   右侧空出三分之二屏宽，全页 5738px 高、出现十几处空洞。
   改用 auto-fill 让列数跟着容器宽度走，同一行始终排满。 */
.bgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s2);
}

@media (max-width: 640px) {
  .bgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 圈子卡片（目录视图）----------
   默认透明，hover 时出浅底。边框只在 hover 时出现。
   这是你原来喜欢的样式：目录页用白色卡片，
   热度页用紧凑行——两类分开。 */
.bcard {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2) var(--s2);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-decoration: none;
  min-width: 0;
}
.bcard:hover {
  background: var(--bg-card);
  border-color: var(--line);
  text-decoration: none;
}

.bcard__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bcard:hover .bcard__ico {
  background: var(--brand-soft, #F6EAE4);
  color: var(--brand);
}

.bcard__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.bcard__name {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bcard__desc {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
  /* 目录页的简介是有用信息，单行截断会切掉半句，允许折两行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 标签行：数据里每个圈子都有 tags，此前界面上完全没有用到，
   卡片只剩「名字 + 一句简介」，撑不起 402px 的格子，看着空。 */
.bcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: 2px;
}

.bcard__tag {
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: .02em;
}
.bcard:hover .bcard__tag { background: var(--bg); }

.bcard__meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 1px;
}

/* 计数的单位另行弱化，数值本身留出重量 */
.bcard__meta b {
  font-weight: 650;
  color: var(--fg);
}

/* 没有任何成员时不写「0 人」——
   满屏的 0 既不是信息，也让人觉得站里没人。 */
.bcard__meta .is-zero { display: none; }

/* 窄屏隐藏计数，优先保住名称 */
@media (max-width: 900px) {
  .bcard__meta { display: none; }
}

/* 热度视图的样式在 parts/_board-rank.css（两列网格 + 名次徽标）。 */

/* ---- parts/_home.css ---- */
/* ============================================================
   首页 · 内容流 + 窄栏索引

   一、版面骨架
      主栏（宽）放内容，窄栏（右）放索引与榜单。
      不做"目录式首页"：目录是查的工具，不该占首页主位。

   二、为什么这里几乎没有线
      分组由【留白】与【色阶】承担：
        纸底（暖） / 面板（白）两层色阶
        区块 64px / 段 40px / 行内 16px 三级留白
      线只在确实需要分界处出现，不作装饰。

   三、节奏
      三段内容用三种密度：
        要闻 —— 单行标题 + 来源，最紧
        社区 —— 单行标题 + 元信息，略松
        资源 —— 两列卡片带图标，最松
      这样一路读下来有起伏，不是四个同样大小的抽屉。
   ============================================================ */

/* ---------- 报头日期 ----------
   旧学（干支节气）在左，今学（公历）在右。
   小字、疏排、极淡——它是报头，不是标题。 */
.dateline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: .16em;
}

.dateline__l { font-family: var(--font-serif); }
.dateline__r { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .dateline { margin-bottom: var(--s5); letter-spacing: .1em; }
  .dateline__r { display: none; }
}

/* ---------- 两栏骨架 ---------- */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: var(--s8);
  align-items: start;
}

@media (max-width: 980px) {
  .home-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
}

.home-main {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
  min-width: 0;
}

.home-side {
  display: flex;
  flex-direction: column;
  /* 与主栏同一步调：两栏的段落间距必须一致，
     否则左右并排时显得一边紧凑一边松散。 */
  gap: var(--s7);
  min-width: 0;
  /* 窄栏压一层极淡的底，与主栏分开。
     不用边框、不用投影——同一张纸上两块纸，靠色阶区分。 */
  background: var(--bg-sunken);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s5) var(--s6);
  margin-top: 2px;
  /* 左栏 1700px、右栏 660px，滚动时右边会空出上千像素。
     让窄栏跟随滚动并停靠在顶栏之下，空档即刻消失。
     容器必须放行：flex/grid 子项的 align-self:start 才让 sticky 生效。 */
  position: sticky;
  top: calc(var(--h-header) + var(--s4));
  max-height: calc(100vh - var(--h-header) - var(--s6));
  overflow: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

/* 窄栏内容比视口高时才需要滚动条，平时不占宽度 */
.home-side::-webkit-scrollbar { width: 6px; }
.home-side::-webkit-scrollbar-thumb {
  border-radius: var(--r-full);
  background: var(--line-strong);
}

@media (max-width: 980px) {
  .home-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ---------- 主栏的一段 ---------- */
.feed {
  min-width: 0;
}

/* 段头：段名在左，入口靠右。
   此前这里挂过段号（一、二、三），去掉了——
   段落本来就有先后，数字只是把顺序又念了一遍，没给读者新信息。 */
.feed__head {
  display: flex;
  align-items: baseline;
  /* 入口紧跟标题，不用 space-between 把它推到最远端。
     榜单栏宽 908px，一旦两端对齐，「圈子榜」与「更多 →」
     就相隔 850px，读的时候根本联系不起来。 */
  justify-content: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

/* 首页的段头：入口靠右端。
   紧贴段名会读成「今日要闻 全部要闻 →」一个短语，
   那是把两个不同层级的东西并成了一行。 */
.feed__head--split {
  justify-content: space-between;
}

.feed__head--split .feed__more {
  flex: none;
}

.feed__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: .12em;
  color: var(--fg);
}

.feed__more {
  flex: none;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  text-decoration: none;
  letter-spacing: .04em;
}
.feed__more:hover { color: var(--brand); text-decoration: none; }

.feed__body {
  display: flex;
  flex-direction: column;
}

/* ---------- 主条 ----------
   每段第一条：标题大一号、独占、摘要露出。
   一段之内有了轻重，读者知道先看哪一条。 */
/* 主条与简讯用同一套左右边距，文字必须严格对齐在同一竖线上。
   之前主条只有 padding、没有负外边距，它的文字比下面的简讯
   多缩进 12px——这就是"左右不对称"的来源。 */
.lead {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2) var(--s3) var(--s5);
  margin: 0 calc(var(--s3) * -1);
  border-radius: var(--r-md);
  text-decoration: none;
  min-width: 0;
  transition: background var(--dur) var(--ease);
}
.lead:hover { background: var(--bg-card); text-decoration: none; }

/* 主条标题 24px，是正文的 1.6 倍。
   字体用无衬线，不用衬线：
     Windows 上的中文衬线只有宋体一家（SimSun / STSong），
     24px 加粗时笔画发毛、横细竖粗失衡，是最难看的组合之一。
     无衬线（雅黑 / 苹方）在这个字号下笔画均匀、界面感强。
   层级靠字号与字重拉开，不靠字族。 */
.lead__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur) var(--ease);
}
.lead:hover .lead__title { color: var(--brand); }

.lead__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 0;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: .04em;
}

/* 主条里的来源与时间之间用细点分开，不占字的宽度 */
.lead__meta > span + span::before {
  content: '·';
  margin-right: var(--s2);
  color: var(--fg-faint);
}

/* 主条与后续紧凑行之间留一段空白，让"一条主条 + 一串简讯"读得开 */
.lead + .row { margin-top: var(--s4); }

/* 资源段用两列卡片，与上面两段的单行列表拉开密度 */
.feed__body--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s3);
}

@media (max-width: 720px) {
  .feed__body--grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 内容行 ----------
   行与行之间不画线。悬停给出底色，读者自己知道读到哪。
   左右各 -12px 外边距 + 12px 内边距：文字靠齐版心，
   悬停底色却可以向外扩，不必把整列往里缩。 */
.row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: 8px var(--s3);
  margin: 0 calc(var(--s3) * -1);
  border-radius: var(--r-sm);
  text-decoration: none;
  min-width: 0;
  transition: background var(--dur) var(--ease);
}
.row:hover { background: var(--bg-card); text-decoration: none; }

.row__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.row:hover .row__title { color: var(--brand); }

.row__meta {
  flex: none;
  /* 定宽右对齐，来源名长短不一才不会形成锯齿。
     此前靠 flex 分配，左边随标题长度浮动（实测同一列左边界相差 30px）。 */
  width: 112px;
  text-align: right;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .row__meta { width: auto; max-width: 38%; }
}

/* ---------- 榜单行 ----------
   名次 · 名目 ···· 数值（古籍目录的形制）。
   名次用中文数字，与榜单的旧学气质一致。 */
.row--rank { align-items: baseline; }

/* 榜单项的标题按内容宽度，不抢占剩余空间。 */
.row--rank .row__title {
  flex: 0 1 auto;
  max-width: 62%;
}

/* 引线要真的把视线牵到数值上。
   之前三种尝试都不对：
     ① flex:1 —— 引线拉满 700px，读者横穿整屏
     ② 固定 56px —— 引线断在半路，到数值之间全是空白
     ③ 标题不抢宽 —— 引线反而更长
   正解：引线吃满「名目到数值之间」的剩余空间，但加一个上限；
   超出上限的部分用数值前的 padding-left 吸收，数值仍然靠右。 */
.row--rank .row__dots {
  flex: 1 1 auto;
  min-width: 16px;
  max-width: 240px;
}

/* 名次与名目之间只留一点缝，别让它们像两栏 */
.row--rank .row__no {
  /* 固定 26px：中文数字「十」「十一」「十二」宽度不一，
     只给 min-width 会让第十名以后的名目整体右移，名次列出现错位。 */
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  margin-right: 2px;
}

.row--rank .row__value {
  margin-left: auto;
  padding-left: var(--s4);
}

/* 三甲：只加字重与墨色，不加底色、不加徽章。
   此前前三名与第十名长得一模一样，榜单没有「名次感」。 */
.row--rank:nth-child(1) .row__no,
.row--rank:nth-child(2) .row__no,
.row--rank:nth-child(3) .row__no {
  color: var(--brand);
  font-weight: 700;
}
.row--rank:nth-child(1) .row__title,
.row--rank:nth-child(2) .row__title,
.row--rank:nth-child(3) .row__title {
  font-weight: 650;
}

.row__no {
  flex: none;
  /* 汉字名次「十」比「一」宽，统一按两字宽留位，十行才能齐。 */
  min-width: 22px;
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

.row__dots {
  flex: 1 1 auto;
  min-width: 10px;
  height: 1px;
  align-self: center;
  transform: translateY(3px);
  background-image: radial-gradient(circle, var(--n4) 1px, transparent 1px);
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.row__value {
  flex: none;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 说明性页面（体系 / 关于 / 条款） ----------
   这类页面以读为主，故放宽行宽与行高，段落之间给足空隙。 */
.basis {
  gap: var(--s6);
}

.basis__item {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.basis__head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.basis__title {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--fg);
}

.basis__note {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  letter-spacing: .08em;
}

.basis__body {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-base);
  line-height: 1.85;
  color: var(--fg-muted);
}

.basis__foot {
  margin: var(--s4) 0 0;
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--fg-muted);
}

/* ---------- 用户主页 ---------- */
.user-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s8);
  flex-wrap: wrap;
}

.user-head__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.user-head__main {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
  flex: 1 1 auto;
}

.user-head__name {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg);
  line-height: 1.2;
}

.user-head__id {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

.user-head__bio {
  margin: var(--s1) 0 0;
  max-width: 62ch;
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--fg-muted);
}

.user-head__stats {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s2);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}

/* ---------- 搜索 ---------- */
.search-bar { margin-bottom: var(--s4); }

.search-input {
  width: 100%;
  max-width: 520px;
}

.search-stat {
  margin: 0 0 var(--s6);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* ---------- 帖子详情 ---------- */
.post { max-width: 76ch; }

.post__board {
  display: inline-block;
  margin-bottom: var(--s2);
  font-size: var(--t-xs);
  color: var(--brand);
  text-decoration: none;
  letter-spacing: .06em;
}
.post__board:hover { text-decoration: underline; }

.post__title {
  margin: 0 0 var(--s3);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--fg);
}

.post__meta {
  margin-bottom: var(--s6);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

.post__views { font-variant-numeric: tabular-nums; }

.post__body {
  font-size: var(--t-md);
  line-height: 1.9;
  color: var(--fg);
}

.post__body p { margin: 0 0 var(--s4); }
.post__body h2 { font-size: var(--t-xl); margin: var(--s6) 0 var(--s3); }
.post__body h3 { font-size: var(--t-lg); margin: var(--s5) 0 var(--s2); }
.post__body h4 { font-size: var(--t-md); margin: var(--s4) 0 var(--s2); }
.post__body ul { margin: 0 0 var(--s4); padding-left: 1.4em; }
.post__body li { margin-bottom: var(--s1); }

.post__body code {
  font-family: var(--font-mono);
  font-size: .92em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--bg-sunken);
}

.post__body pre {
  margin: 0 0 var(--s4);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  overflow-x: auto;
  line-height: 1.7;
}
.post__body pre code { padding: 0; background: none; }

.post__body blockquote {
  margin: 0 0 var(--s4);
  padding-left: var(--s4);
  border-left: 2px solid var(--line);
  color: var(--fg-muted);
}

.post__actions {
  display: flex;
  gap: var(--s3);
  margin: var(--s7) 0 var(--s8);
}

.post__comments { max-width: 76ch; }

.comments {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin: var(--s4) 0 var(--s6);
}

.comment {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--bg-card);
}

.comment__head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

.comment__who { font-weight: 650; color: var(--fg); }

.comment__body {
  font-size: var(--t-base);
  line-height: 1.8;
  color: var(--fg);
}
.comment__body p { margin: 0 0 var(--s2); }
.comment__body p:last-child { margin-bottom: 0; }

.comment-form { display: flex; flex-direction: column; gap: var(--s3); }
.comment-form__foot { display: flex; justify-content: flex-end; }

/* ---------- 登录 / 注册 ----------
   单栏、窄版心。表单页不需要花哨，读得清、填得顺即可。 */
.auth-wrap {
  max-width: 380px;
  margin: var(--s9) 0 var(--s10);
}

.auth-title {
  margin: 0 0 var(--s2);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--fg);
}

.auth-sub {
  margin: 0 0 var(--s6);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
.auth-sub a { color: var(--brand); text-decoration: none; }
.auth-sub a:hover { text-decoration: underline; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.field__label {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: .08em;
}

.auth-err {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--t-sm);
  color: var(--brand);
}

.auth-submit { width: 100%; }

.auth-note {
  margin: var(--s5) 0 0;
  font-size: var(--t-xs);
  line-height: 1.8;
  color: var(--fg-muted);
}

/* ---------- 发帖表单 ---------- */
.post-form {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  max-width: 76ch;
}

.post-form__foot {
  display: flex;
  justify-content: flex-end;
}

/* ---------- 通知 ---------- */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 76ch;
}

.notif {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--bg-card);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.notif:hover { background: var(--bg-hover); text-decoration: none; }

/* 未读用一点朱红标出；已读则留空占位，保持左边对齐不跳 */
.notif__dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: var(--r-full);
  background: transparent;
}
.notif.is-unread .notif__dot { background: var(--brand); }

.notif__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif__text {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg);
}

.notif__when {
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

/* ---------- 管理台 ---------- */
.admin-seg {
  margin-bottom: var(--s6);
  flex-wrap: wrap;
}

.admin-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}

@media (max-width: 760px) {
  .admin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  text-align: left;
  border: 0;
  font: inherit;
  cursor: default;
}

button.admin-card { cursor: pointer; transition: background var(--dur) var(--ease); }
button.admin-card:hover { background: var(--bg-hover); }

.admin-card__n {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.admin-card__label {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: .08em;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--bg-card);
  flex-wrap: wrap;
}

.admin-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.admin-row__title {
  font-size: var(--t-base);
  font-weight: 650;
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.admin-row__title:hover { color: var(--brand); }

.admin-row__meta {
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

/* 窄屏：元信息落到标题下方，避免压成半截 */
@media (max-width: 640px) {
  .row { flex-wrap: wrap; }
  .row__title { flex: 1 1 100%; white-space: normal; }
  .row__meta { flex: 1 1 100%; max-width: 100%; padding-left: 0; }
}

/* ---------- 资源卡片 ---------- */
.res-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  /* 与简讯、主条同一套左右边距，第三段的左边缘才能和前两段对齐 */
  padding: var(--s3) var(--s3);
  margin: 0 calc(var(--s3) * -1);
  border-radius: var(--r-md);
  text-decoration: none;
  min-width: 0;
  transition: background var(--dur) var(--ease);
}
.res-card:hover { background: var(--bg-card); text-decoration: none; }

.res-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

.favicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--r-xs);
  overflow: hidden;
}
.favicon__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.favicon__fb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1;
  color: var(--fg-muted);
  user-select: none;
}

.res-card__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.res-card__name {
  font-size: var(--t-base);
  font-weight: 650;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 域名只作辨识用的角标，不该和描述争同一层的注意力。
   字号再小一档、颜色降到装饰色，读者扫视时先看到名字与一句话说明。 */
.res-card__host {
  font-family: var(--font-mono);
  font-size: 11px;
  /* 域名是文字，不是装饰，必须过 4.5:1。
     先前用 --fg-faint（装饰色）掉到 3.29，被回归当场拦下。 */
  color: var(--fg-muted);
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-card__desc {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 窄栏 ---------- */
.side {
  min-width: 0;
}

.side__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: .14em;
  color: var(--fg-muted);
}

.side__more {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--fg-muted);
  text-decoration: none;
}
.side__more:hover { color: var(--brand); text-decoration: none; }

.side__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* 索引行：名目 ···· 数字。
   引线取古籍目录「篇名……卷次」的形制，把视线牵到数字上。 */
.side__row {
  display: flex;
  align-items: baseline;
  padding: 5px 0;
  text-decoration: none;
  min-width: 0;
}
.side__row:hover { text-decoration: none; }

.side__no {
  /* 固定 24px：名次最多到「十二」，「十一」「十二」要两个字宽。 */
  flex: 0 0 24px;
  width: 24px;
  /* 汉字名次「十」比「一」宽，固定留位，十行才能齐。 */
  min-width: 24px;
  font-family: var(--font-serif);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

.side__name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.side__row:hover .side__name { color: var(--brand); }

.side__dots {
  flex: 1 1 auto;
  min-width: 10px;
  margin: 0 5px;
  height: 1px;
  align-self: center;
  transform: translateY(3px);
  background-image: radial-gradient(circle, var(--n4) 1px, transparent 1px);
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.side__n {
  flex: none;
  font-size: 11px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.side__empty {
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

/* ---- parts/_icons.css ---- */
/* ============================================================
   图标基础样式
   图标按 currentColor 取色，粗细统一由 icons.js 的 stroke-width 决定。
   ============================================================ */

.ico-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}

.ico {
  display: block;
  flex: none;
}

/* 与文字同行时的基线微调 */
.ico-wrap + span,
span + .ico-wrap {
  vertical-align: middle;
}

/* 图标按钮：把图标包成可点区域 */
.ico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 34px;
  min-width: 34px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.ico-btn:hover {
  border-color: var(--line-strong);
  color: var(--fg);
  background: var(--bg-hover);
}
.ico-btn.is-on {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.ico-btn--bare {
  border-color: transparent;
  background: transparent;
}
.ico-btn--bare:hover { border-color: transparent; background: var(--bg-hover); }

/* 圆形字头 / 图形块：用于分组与圈子标识 */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--fg-muted);
}
.mark--sm { width: 26px; height: 26px; border-radius: var(--r-sm); }
.mark--lg { width: 44px; height: 44px; font-size: 22px; }
.mark--xl { width: 56px; height: 56px; border-radius: var(--r-lg); }

/* 字的字头（圈子无图标时用） */
.mark__ch {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.mark--lg .mark__ch { font-size: 22px; }
.mark--xl .mark__ch { font-size: 28px; }

/* ---------- 各处的图标容器 ---------- */
/* 卡片标题前的图标 */
.card__ico {
  display: inline-flex;
  align-items: center;
  color: var(--fg-muted);
}

/* 圈子图标块：静态下就带淡底，让图标读起来像"标识"而不是装饰 */
.board-card__ico,
.bcard__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bcard:hover .bcard__ico,
a:hover > .board-card__ico {
  background: var(--brand-soft);
  color: var(--brand);
}

/* 圈子页大图标 */
.board-hero__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  color: var(--fg-muted);
}

/* 导航项内的小图标 */
.nav__ico {
  display: inline-flex;
  align-items: center;
  opacity: .72;
}
.nav__link:hover .nav__ico { opacity: 1; }
.nav__link[aria-current="page"] .nav__ico { opacity: 1; color: var(--brand); }

/* 空态图标 */
.empty__icon .ico { color: var(--fg-faint); }

/* ---- parts/_news-filter.css ---- */
/* ============================================================
   要闻 · 圈子筛选

   排序控件左侧加一个筛选按钮：下拉列出「有要闻的圈子」及条数，
   点一个即筛。已选条件用一枚可关闭的 chip 回显——
   读者刷新后要知道自己为什么只看到几十条。
   ============================================================ */

.news-tools-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.news-filter {
  position: relative;
}

.news-filter__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 32px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-card);
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.news-filter__btn:hover { border-color: var(--line-strong); color: var(--fg); }

/* 已筛过东西时，按钮本身也变朱红，一眼能看出筛选生效 */
.news-filter__btn[aria-expanded="true"],
.news-filter__btn.is-active {
  border-color: var(--brand);
  color: var(--brand);
}

.news-filter__ico {
  display: inline-flex;
  align-items: center;
  color: currentColor;
}

.news-filter__caret {
  font-size: 11px;
  /* 下拉箭头不能太淡：淡到看不见，读者就不知道这里能点开。 */
  color: var(--fg-muted);
  margin-left: -2px;
}

.news-filter__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  padding: var(--s1);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--sh3);
  overflow: auto;
}

.news-filter__opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 6px var(--s2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.news-filter__opt:hover { background: var(--bg-sunken); }

.news-filter__opt.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 650;
}

.news-filter__opt-name {
  flex: 1 1 auto;
  min-width: 0;
}

.news-filter__opt-n {
  flex: none;
  font-size: var(--t-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.news-filter__opt.is-on .news-filter__opt-n { color: var(--brand); }

/* ---------- 已选条件回显 ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  /* 回显条归页头：与列表之间给出比「条目之间」更大的间隔，
     否则读者分不清它是页头的一部分还是列表的第一行。 */
  margin: var(--s2) 0 var(--s5);
}
.filter-bar:empty { display: none; }

.filter-bar__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 28px;
  padding: 0 var(--s2) 0 var(--s3);
  border: 1px solid var(--brand);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
}

.filter-bar__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--bg-card);
  font-size: 11px;
  line-height: 1;
}
.filter-bar__chip:hover .filter-bar__x { background: var(--brand-hover); }

/* ---- parts/_news-fresh.css ---- */
/* ============================================================
   要闻 · 新鲜度标注

   原先页头只有「要闻」两个字。读者看到 10 月的日期，
   既不知道站点是停了，也不知道这几天是不是真的没有新闻。
   标题下方补一行：内容日期 + 抓取时间，配一枚状态点。
   ============================================================ */

.news-fresh {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: .02em;
}

.news-fresh__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-faint);
}

/* 今天或昨天有内容：朱红实心点 + 一圈淡晕，表示「在更新」 */
.news-fresh__dot.is-live {
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.news-fresh__sep { color: var(--fg-faint); }

/* ---- parts/_panel.css ---- */
/* ============================================================
   内容面板与侧栏
   首页、圈子页等共用的"内容优先"骨架：
     .panel      主内容面板
     .side-block 侧栏分区
   ============================================================ */

/* ---------- 页头 ----------
   只留标题。原先标题下压一道朱线、再叠一条界线，
   是为"显得有设计"而加的装饰；去掉后反而更稳。 */
.pg-head--tight {
  align-items: flex-end;
  margin-bottom: var(--s7);
}

.pg-head--tight .pg-head__title {
  font-family: var(--font-serif);
  font-size: var(--t-4xl);
  font-weight: 700;
  margin-bottom: var(--s3);
  letter-spacing: .06em;
  line-height: 1.15;
}

.pg-head__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.pg-head__meta b {
  color: var(--fg);
  font-weight: 650;
}
.pg-head__dot { color: var(--line-strong); margin: 0 var(--s2); }

/* ---------- 主内容面板 ---------- */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: .1em;
}

.panel__ico {
  display: inline-flex;
  align-items: center;
  color: var(--fg-muted);
}

.panel__more {
  flex: none;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  text-decoration: none;
}
.panel__more:hover { color: var(--brand); text-decoration: none; }

.panel__foot {
  display: flex;
  justify-content: center;
  padding: var(--s5);
  background: var(--bg-sunken);
}
.panel__foot:empty { display: none; }

/* 面板内的列表嵌在面板里，不再另加外框 */
.panel .news-list { border-radius: 0; }

/* ---------- 侧栏分区 ---------- */
.side-block {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border-radius: var(--r-lg);
  margin-bottom: var(--s5);
  overflow: hidden;
}

.side-block:last-child { margin-bottom: 0; }

.side-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s5) var(--s5) var(--s3);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: .1em;
}
.side-block__head a {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--fg-muted);
  text-decoration: none;
}
.side-block__head a:hover { color: var(--brand); text-decoration: none; }

.side-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3);
}

/* ---------- 侧栏：域导航 ---------- */
.sec-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  text-decoration: none;
  min-width: 0;
  transition: background var(--dur) var(--ease);
}
.sec-link:hover { background: var(--bg-hover); text-decoration: none; }

.sec-link__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  background: var(--bg-sunken);
  color: var(--fg-muted);
}
.sec-link:hover .sec-link__ico { color: var(--brand); }

.sec-link__name {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg);
}

.sec-link__sub {
  margin-left: auto;
  flex: none;
  font-size: var(--t-xs);
  color: var(--fg-muted);
}

/* ---------- 侧栏条目 ---------- */
.side-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  text-decoration: none;
  min-width: 0;
  transition: background var(--dur) var(--ease);
}
.side-link:hover { background: var(--bg-hover); text-decoration: none; }

.side-link__no {
  flex: none;
  min-width: 16px;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.side-link__name {
  font-size: var(--t-base);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-link:hover .side-link__name { color: var(--brand); }

.side-user {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  text-decoration: none;
  min-width: 0;
}
.side-user:hover { background: var(--bg-hover); text-decoration: none; }
.side-user__name {
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
.side-user:hover .side-user__name { color: var(--brand); }

/* 侧栏在窄屏铺成两列 */
@media (max-width: 960px) {
  .split aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
  }
  .split aside .side-block { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .split aside { grid-template-columns: minmax(0, 1fr); }
}

/* ---- parts/_search-preview.css ---- */
/* ============================================================
   顶栏搜索 · 实时预览

   输入时在搜索框下方给出分组结果（圈子 / 帖子 / 资源 / 用户），
   可点、可键盘选择。此前只是一个表单，回车才知道有没有结果。
   ============================================================ */

.header__search {
  position: relative;
}

.sp {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  min-width: 320px;
  padding: var(--s2);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--sh3);
  max-height: 60vh;
  overflow: auto;
}

.sp__head {
  padding: var(--s1) var(--s2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  color: var(--fg-muted);
}

.sp__item {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 6px var(--s2);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--fg);
  font-size: var(--t-sm);
  min-width: 0;
}
.sp__item:hover,
.sp__item.is-active {
  background: var(--bg-sunken);
  text-decoration: none;
}

.sp__label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp__sub {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}

.sp__empty {
  padding: var(--s3) var(--s2);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

.sp__all {
  display: block;
  margin-top: var(--s1);
  padding: var(--s2);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--brand);
  text-decoration: none;
}
.sp__all:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .sp { min-width: 0; left: auto; right: 0; width: 78vw; }
}

/* ---- parts/_section.css ---- */
/* ============================================================
   观澜 · 版面区块：圈子详情 / 要闻
   ============================================================ */

/* ---------------- 要闻页 ---------------- */

.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s5) 0 var(--s4);
}
.news-head__title {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s2);
}
.news-head__sub {
  margin: 0;
  color: var(--fg-mute);
  font-size: 14px;
  line-height: 1.7;
}
.news-head__stat {
  font-size: 13px;
  color: var(--fg-mute);
  white-space: nowrap;
}
.news-head__stat b {
  font-size: 20px;
  color: var(--fg);
  font-weight: 700;
  margin-right: 2px;
}

.news-tools {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}

/* 五行分布条 */
.el-bar {
  display: flex;
  gap: 6px;
  margin-bottom: var(--s4);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}
.el-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg-mute);
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-md, 8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  transition: border-color .15s, background .15s;
}
.el-chip:hover { border-color: var(--wx-color, var(--line-strong, var(--line))); }
.el-chip__g {
  font-weight: 700;
  font-size: 13px;
  color: var(--wx-color, var(--fg));
}
.el-chip__n { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; }
.el-chip__p { font-variant-numeric: tabular-nums; opacity: .65; }
.el-chip.is-on {
  background: color-mix(in srgb, var(--wx-color, #888) 12%, transparent);
  border-color: var(--wx-color, var(--line));
  color: var(--fg);
}
.el-chip[data-wx="木"] { --wx-color: var(--wx-mu); }
.el-chip[data-wx="火"] { --wx-color: var(--wx-huo); }
.el-chip[data-wx="土"] { --wx-color: var(--wx-tu); }
.el-chip[data-wx="金"] { --wx-color: var(--wx-jin); }
.el-chip[data-wx="水"] { --wx-color: var(--wx-shui); }

/* 日期分隔（长卷上的横线）
   早先是把十几个日期做成一行药丸当筛选条，等于把「归档」做成了「分类」——
   读者要的是一路读下去，不是先做一次选择。
   现在日期落在卷内的分隔上：左日期、右条数，中间一条细线。 */
.date-rule {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s2);
  padding-top: var(--s2);
}
.date-rule:first-child { margin-top: 0; }

.date-rule__label {
  flex: none;
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fg);
}

.date-rule__line {
  flex: 1 1 auto;
  height: 1px;
  background-image: radial-gradient(circle, var(--n4) 1px, transparent 1px);
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.date-rule__n {
  flex: none;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* 要闻页标题栏：标题在左，排序在右 */
.news-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* 排序容器 */
.news-sort { flex: none; }

/* 要闻列表：行与行只用一条分隔线，不用每行都画框 */
.news-list {
  display: flex;
  flex-direction: column;
}
.news-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  /* 内边距 24px + 等量负外边距：文字与页头对齐，
     悬停底色却能向外扩到版心之外，不必把整列往里缩。 */
  padding: var(--s5) var(--s5) var(--s4);
  margin: 0 calc(var(--s5) * -1);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}
.news-row:last-child { border-bottom: 0; }
.news-row:hover { background: var(--bg-hover); }

.news-row__idx {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  padding-top: 3px;
  flex: 0 0 auto;
  width: 20px;
}
.news-row__main { flex: 1 1 auto; min-width: 0; }

.news-row__title {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.5;
  color: var(--fg);
  margin-bottom: var(--s1);
}
.news-row:hover .news-row__title { color: var(--brand); }

.news-row__sum {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  margin-bottom: var(--s2);
}

.news-row__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  /* 无摘要的条目（部分英文源不提供 description）标题后直接接 meta，
     给一点上距，免得标题与来源贴在一起。 */
  margin-top: var(--s1);
}
.news-row__meta .tag { border: 0; background: var(--bg-sunken); }

.news-row__go {
  flex: 0 0 auto;
  color: var(--fg-muted);
  font-size: var(--t-sm);
  padding-top: 2px;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.news-row:hover .news-row__go { color: var(--brand); transform: translateX(2px); }

@media (max-width: 640px) {
  .news-row { padding: var(--s3) 0; }
  .news-row__idx { display: none; }
  .el-bar { flex-wrap: wrap; }
  .el-chip { flex: 1 1 auto !important; }
}

/* ---------------- 圈子详情 ---------------- */

.board-hero {
  position: relative;
  padding: var(--s6) 0 var(--s5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.board-hero__top {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  min-width: 0;
}
.board-hero__emoji {
  font-size: 40px;
  line-height: 1;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 12px);
}
.board-hero__info { flex: 1 1 auto; min-width: 0; }
.board-hero__name {
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 700;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  letter-spacing: -0.015em;
}
.board-hero__desc {
  margin: 0 0 var(--s3);
  color: var(--fg-mute);
  font-size: 14px;
  line-height: 1.75;
  max-width: 62ch;
}
.board-hero__xiang {
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--wx-color, var(--line));
  background: var(--bg-sunk);
  border-radius: 0 var(--r-md, 8px) var(--r-md, 8px) 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--fg-mute);
}
.board-hero__xiang cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.board-hero__tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.board-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.board-stat b {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.board-stats {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

.board-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}

/* 帖子列表行 */
.post-item {
  display: block;
  padding: var(--s4) var(--s2);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.post-item:hover { background: var(--bg-sunk); }
.post-item__main { min-width: 0; }
.post-item__title {
  font-size: 15px;
  font-weight: 550;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.post-item:hover .post-item__title { color: var(--accent, var(--wx, var(--brand))); }
.post-item__excerpt {
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fg-muted);
}

/* 侧栏小块 */
.side-block {
  padding: var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 12px);
  margin-bottom: var(--s4);
}
.side-block__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-mute);
  margin: 0 0 var(--s3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.side-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px var(--s2);
  border-radius: var(--r-sm, 6px);
  text-decoration: none;
  color: var(--fg-mute);
  font-size: 13px;
  transition: background .12s, color .12s;
}
.side-link:hover { background: var(--bg-sunk); color: var(--fg); }
.side-link__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-link__rel {
  font-size: 11px;
  color: var(--fg-muted);
  flex: 0 0 auto;
}

.side-dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px var(--s4);
  margin: 0;
  font-size: 13px;
}
.side-dl dt { color: var(--fg-muted); white-space: nowrap; }
.side-dl dd { margin: 0; color: var(--fg-mute); min-width: 0; }

@media (max-width: 640px) {
  .board-hero__emoji { width: 52px; height: 52px; font-size: 30px; }
  .board-hero__top { gap: var(--s3); }
}

/* ---- parts/_sites.css ---- */
/* ============================================================
   资源导航 · 版式重做

   旧版：标题独占一行、搜索吊在右下，左上 780×120 空白；
        分类是两行不对齐的 chip，不能跳转；
        卡片 3 列、397×142，无边框无底色，靠留白分隔，一屏只 6 张；
        票数是孤立的浅灰数字，无单位无说明。

   现在：标题与工具同一行；左侧竖排分类目录（停靠）；
        右侧 4 列密集卡片；票数改为有语义的「推荐」并移到描述之下。
   ============================================================ */

/* ---------- 页头：标题与工具同行 ---------- */
.pg-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.pg-head__tools {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.sites-tools {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* ---------- 左目录 + 右网格 ---------- */
.cat-layout {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}

.cat-side {
  position: sticky;
  top: calc(var(--h-header) + var(--s4));
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  /* 与右侧网格的起始线对齐：
     「分类」标题的字号与行高要和卡片第一行的上内边距抵消，
     否则目录比网格高出十几像素，两条起始线错开。 */
  padding-top: 2px;
}

.cat-side__head {
  margin-bottom: var(--s2);
  padding-left: var(--s3);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: .14em;
  color: var(--fg-muted);
  /* 与卡片首行顶部对齐（卡片 padding-top 为 12px，此处补 8px + 行高差） */
  line-height: 18px;
}

/* 目录项：名称在左，计数靠右 */
.cat-link {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: 6px var(--s3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-link:hover { background: var(--bg-sunken); color: var(--fg); }

.cat-link__ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--fg-faint);
}

.cat-link__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-link__n {
  flex: none;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}

/* 选中态：朱红字 + 浅朱底，不画框 */
.cat-link.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 650;
}
.cat-link.is-on .cat-link__ico,
.cat-link.is-on .cat-link__n { color: var(--brand); }

@media (max-width: 900px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  .cat-side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s1);
  }
  .cat-side__head { display: none; }
  .cat-link { width: auto; }
}

/* ---------- 卡片网格：4 列紧凑 ---------- */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s2);
}

@media (max-width: 1280px) {
  .site-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 700px) {
  .site-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* 卡片：给一层极淡底，边界立刻清楚，不必靠留白硬撑 */
.site-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--bg-card);
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh2);
  text-decoration: none;
}

.site-card__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.site-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
}

.site-card__name {
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--fg);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-card__host {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-card__desc {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s2);
}

/* 推荐数：不再是孤立的右上角数字。
   放在标签之后，冠以「荐」字，读者一眼知道它是什么。 */
.vote-pill {
  flex: none;
  /* 与卡片首行文字基线对齐：align-self:center 会让它浮在名称与域名之间 */
  align-self: center;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: 10px;
  line-height: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vote-pill::before {
  content: '荐 ';
  color: var(--fg-faint);
}
.site-card:hover .vote-pill {
  background: var(--brand-soft);
  color: var(--brand);
}

/* 窄卡里，图标小一档，给文字留出宽度 */
@media (max-width: 1100px) {
  .site-mark { width: 32px !important; height: 32px !important; }
}

/* ---- parts/_util.css ---- */
/* ============================================================
   观澜 · 布局工具类
   这些是壳层与各页面共用的最小原语，不承载任何视觉主题。
   ============================================================ */

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--top { align-items: flex-start; }

.col {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
.col--gap-lg { gap: var(--s5); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s6);
  align-items: start;
}
@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex: 0 0 auto; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.clamp-1,
.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* 字号辅助 */
.small { font-size: 13px; }
.xs { font-size: 12px; }
.muted { color: var(--fg-mute); }
.dim { color: var(--fg-muted); }
.strong { font-weight: 600; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* 点分隔 */
.dot-sep {
  color: var(--fg-muted);
  user-select: none;
  padding: 0 2px;
}

/* 面包屑 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  color: var(--fg-mute);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.breadcrumb a {
  color: var(--fg-mute);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb__sep { color: var(--fg-dim); }

/* 五行色点 */
.wx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--wx-color, var(--fg-dim));
}
.wx-dot[data-wx="木"] { --wx-color: var(--wx-mu); }
.wx-dot[data-wx="火"] { --wx-color: var(--wx-huo); }
.wx-dot[data-wx="土"] { --wx-color: var(--wx-tu); }
.wx-dot[data-wx="金"] { --wx-color: var(--wx-jin); }
.wx-dot[data-wx="水"] { --wx-color: var(--wx-shui); }

/* 分段控件 */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
}
.seg__item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-mute);
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: calc(var(--r-md, 8px) - 2px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg__item:hover { color: var(--fg); }
.seg__item.is-on {
  background: var(--bg-card);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--sh1);
}

/* 分页 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s6) 0 var(--s2);
}
.pager__btn {
  appearance: none;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg-mute);
  border-radius: var(--r-md, 8px);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pager__btn:hover:not(:disabled) {
  border-color: var(--line-strong, var(--line));
  color: var(--fg);
}
.pager__btn:disabled {
  opacity: .4;
  cursor: default;
}
/* 当前页：中性底 + 墨色字。
   原先用品牌朱红作实心底 —— 一页里突然出现一块正红按钮，
   在一整片暖灰纸面上非常刺眼。页码只表示位置，不需要强调色。 */
.pager__btn.is-on {
  background: var(--bg-sunken);
  border-color: var(--line-strong, var(--line));
  color: var(--fg);
  font-weight: 650;
}
.pager__gap {
  color: var(--fg-dim);
  padding: 0 2px;
}

/* 空状态补充（core.emptyNode 产物可能带 .empty__icon） */
.empty__icon {
  font-size: 30px;
  line-height: 1;
  opacity: .5;
  margin-bottom: var(--s3);
}
/* ==== PARTS-END ==== */