/* ============================================================
   BBS 社区前台样式 —— 对齐 Flarum
   结构：白色顶栏（头像下拉菜单）+ 品牌色 Hero / 全页白底无卡片 /
   列表：单行标题 + 分类 chip + 作者时间行 + 右列（状态圆徽标紧挨评论数）/
   帖子页：Hero 承载徽标+分类+标题，楼主为第一楼，评论组件区融入同一流 /
   页脚：声明 + © 站点名 + Powered by。
   ============================================================ */

:root {
  /* --b-accent 由模板在站长设了主题色时写入；清空则不设 */
  --b-bg: #ffffff;
  --b-line: #e8ecf1;
  --b-hover: #f0f2f5;
  /* 比 --b-hover 淡一档的「陷入」底色，目前用于只读评论的楼中楼块。
     刻意另起一档而不复用 --b-hover：行内代码底（.prose :not(pre) > code）
     就是 --b-hover，同色会把回复里的代码整块吃掉；且锁定说明条
     (.bbs-cmts__closed) 也是 --b-hover 圆角块，同款灰块会撞成同一种语义 */
  --b-sunken: #f7f8fa;
  --b-text: #111111;
  --b-text-2: #667380;
  --b-text-3: #9aa4ae;
  /* 状态徽标语义色（固定语义色，不暴露为设置项）：
     公告=琥珀 / 置顶=主题色 / 问答=蓝 / 已解决=绿 / 锁定=中性灰 */
  --b-amber: #d97706;
  --b-blue: #2563eb;
  --b-green: #16a34a;
  --b-lock: #6b7280;
  --b-tr: all 0.15s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --b-bg: #17191d;
    --b-line: #2a2e35;
    --b-hover: #22262c;
    --b-sunken: #1c2025;
    --b-text: #eceef1;
    --b-text-2: #a8b0ba;
    --b-text-3: #666e79;
    --b-amber: #d9a52a;
  }
}

* {
  box-sizing: border-box;
}

.bbs-body {
  margin: 0;
  background: var(--b-bg);
  color: var(--b-text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

/* ---------------- 顶栏（白底 + 阴影，Flarum Header） ---------------- */

.bbs-hd {
  position: sticky;
  top: 0;
  /* 低于全屏灯箱（z-100），灯箱打开时仍盖住顶栏。
     hip-user-card 已走 popover top layer，不再跟顶栏抢层叠 */
  z-index: 90;
  background: var(--b-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bbs-hd__in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bbs-lg {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
}

.bbs-lg__mark {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--b-accent);
  display: grid;
  place-items: center;
}

.bbs-lg__mark svg {
  width: 24px;
  height: 24px;
}

.bbs-lg__img {
  flex: none;
  height: 28px;
  width: auto;
  max-width: 140px;
  border-radius: 6px;
  display: block;
  object-fit: contain;
}

.bbs-hd__spacer {
  flex: 1;
}

/* 顶栏站点菜单（Halo 菜单组，支持多级） */
/* 不能加 overflow：下拉面板在容器内，任何方向的 overflow 都会把它裁掉，
   桌面二级菜单就「永远打不开」。项太多放不下时宁可横向溢出（窄屏有汉堡兜底） */
.bbs-hm {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

/* 父项（有子项）：胶囊底色挂在容器上，文字与箭头同底一体（观感对齐窄屏的行）。
   hover / 打开只换底色；展开仍只靠点击——带链接父项点箭头，无链接父项整项即开关 */
.bbs-hm__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  border-radius: 6px;
  transition: var(--b-tr);
}

.bbs-hm__item:hover,
.bbs-hm__item.open {
  background: var(--b-hover);
}

.bbs-hm__item:hover > .bbs-hm__link,
.bbs-hm__item.open > .bbs-hm__link {
  color: var(--b-text);
}

/* 桌面：带链接父项的展开箭头——文字跳转、箭头开合 */
.bbs-hm__caret {
  display: inline-flex;
  align-items: center;
  margin-left: -8px;
  padding: 6px 8px 6px 2px;
  cursor: pointer;
  color: var(--b-text-3);
}

.bbs-hm__caret:hover {
  color: var(--b-text);
}

.bbs-hm__caret svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

.bbs-hm__item.open > .bbs-hm__caret svg {
  transform: rotate(180deg);
}

.bbs-hm__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--b-text-2);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--b-tr);
}

/* 无子项的顶层项：胶囊挂自身；父项内的链接/按钮不背包袱，底色与圆角由容器统一给 */
.bbs-hm > .bbs-hm__link:hover {
  color: var(--b-text);
  background: var(--b-hover);
}

.bbs-hm__item > .bbs-hm__link {
  border-radius: 0;
}

.bbs-hm__link--plain {
  cursor: default;
  font-weight: 500;
}

.bbs-hm__link svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.bbs-hm__panel {
  left: 0;
  right: auto;
}

/* 面板内拍平的多级项：缩进由模板按 depth 内联，层级靠留白表达 */
.bbs-hm__panel a {
  white-space: nowrap;
}

.bbs-hm__plain {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--b-text-3);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: default;
}

/* 窄屏汉堡：默认隐藏，≤800px 显示 */
.bbs-hm-m {
  display: none;
  flex: none;
}

.bbs-hm-m__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: var(--b-text-2);
}

.bbs-hm-m__btn:hover,
.bbs-hm-m.open .bbs-hm-m__btn {
  color: var(--b-text);
  background: var(--b-hover);
}

.bbs-hm-m__btn svg {
  width: 18px;
  height: 18px;
}

.bbs-hm-m__panel {
  left: 0;
  right: auto;
  min-width: min(230px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow-y: auto;
}

.bbs-hm-m__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--b-text-2);
  font-size: 13.5px;
  text-align: left;
}

.bbs-hm-m__row:hover {
  background: var(--b-hover);
  color: var(--b-text);
}

.bbs-hm-m__row--plain {
  cursor: default;
  color: var(--b-text-3);
}

/* 手风琴：子行默认收起，祖先全部展开时才可见（is-shown 由 bbs.js 维护） */
.bbs-hm-m__row[data-bbs-depth] {
  display: none;
}

.bbs-hm-m__row[data-bbs-depth].is-shown {
  display: flex;
}

/* 窄屏：父行箭头——箭头开合；带链接的行文字仍可点跳转（bbs.js 挂载） */
.bbs-hm-m__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: -8px;
  cursor: pointer;
  color: var(--b-text-3);
}

.bbs-hm-m__caret svg {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.15s ease;
}

.bbs-hm-m__caret.is-open svg {
  transform: rotate(180deg);
}

.bbs-hm-m__row--plain.bbs-hm-m__row--parent {
  cursor: pointer;
}

/* 搜索：灰底胶囊，聚焦展开描边 */
.bbs-hs {
  position: relative;
  flex: 0 1 240px;
}

.bbs-hs input[type="search"] {
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 17px;
  background: var(--b-hover);
  color: var(--b-text);
  padding: 0 14px 0 32px;
  font-size: 13px;
  outline: none;
  transition: var(--b-tr);
}

.bbs-hs input[type="search"]::placeholder {
  color: var(--b-text-3);
}

.bbs-hs input[type="search"]:focus {
  background: var(--b-bg);
  box-shadow: 0 0 0 2px var(--b-accent);
}

.bbs-hs svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--b-text-3);
  pointer-events: none;
}

/* ---------------- 通用下拉（用户菜单 / 排序 / 移动端分类） ---------------- */

.bbs-drop {
  position: relative;
}

.bbs-drop__panel {
  position: absolute;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--b-bg);
  border: 1px solid var(--b-line);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 55;
}

.bbs-drop.open .bbs-drop__panel {
  display: block;
}

.bbs-drop__panel a,
.bbs-drop__panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--b-text-2);
  font-size: 13.5px;
  text-align: left;
  transition: var(--b-tr);
}

.bbs-drop__panel a:hover,
.bbs-drop__panel button:hover {
  background: var(--b-hover);
  color: var(--b-text);
}

.bbs-drop__panel a.is-on {
  color: var(--b-accent);
  font-weight: 700;
}

.bbs-drop__panel svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* 用户菜单（右上角头像触发） */

.bbs-me {
  flex: none;
}

.bbs-me__btn {
  display: block;
  border-radius: 50%;
}

.bbs-me__ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.bbs-me__ava--letter {
  display: grid;
  place-items: center;
  /* 默认匿名灰；有用户时由行内 background（显示名哈希）盖掉 */
  background: #94a3b8;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.bbs-me.open .bbs-me__ava {
  box-shadow: 0 0 0 2px var(--b-bg), 0 0 0 4px var(--b-accent);
}

.bbs-me .bbs-drop__panel {
  right: 0;
}

.bbs-menu__name {
  padding: 8px 12px 6px;
  font-weight: 700;
  border-bottom: 1px solid var(--b-line);
  margin-bottom: 6px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bbs-me__login {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 18px;
  border-radius: 17px;
  background: var(--b-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex: none;
  transition: var(--b-tr);
}

.bbs-me__login:hover {
  background: color-mix(in srgb, var(--b-accent) 82%, #000);
}

/* ---------------- Hero（品牌色 / 图片 Banner） ---------------- */

.bbs-hero {
  background: var(--b-accent);
  color: #fff;
  text-align: center;
  padding: 38px 20px 42px;
}

.bbs-hero h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
}

.bbs-hero p {
  margin: 8px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.bbs-hero--img {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-top: 48px;
  padding-bottom: 54px;
}

.bbs-hero--img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 24, 32, 0.5);
}

.bbs-hero--img > * {
  position: relative;
}

/* ---------------- 列表页两栏 ---------------- */

.bbs-cols {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.bbs-aside {
  width: 200px;
  flex: none;
  position: sticky;
  top: 76px;
  /* 分类多时侧栏会高过视口，sticky 随之失效（滚出屏幕后回不来）。
     限高到视口剩余空间并自行滚动；92px = top 76px + 底部留白 16px */
  max-height: calc(100vh - 92px);
  overflow-y: auto;
}

.bbs-main {
  flex: 1;
  min-width: 0;
}

/* 主按钮（发帖 / 回复帖子）：实底主题色、44px 高、8px 方角 */
.bbs-start {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  text-align: center;
  background: var(--b-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: var(--b-tr);
}

.bbs-start:hover {
  background: color-mix(in srgb, var(--b-accent) 82%, #000);
}

.bbs-nav {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bbs-nav__label {
  margin: 14px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--b-text-3);
}

.bbs-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--b-text-2);
  transition: var(--b-tr);
}

.bbs-nav__item:hover {
  background: var(--b-hover);
}

.bbs-nav__item.is-active {
  background: var(--b-hover);
  color: var(--b-text);
  font-weight: 700;
}

.bbs-nav__dot {
  width: 10px;
  height: 10px;
  margin: 0 2.5px;
  border-radius: 3px;
  flex: none;
}

.bbs-nav__icon {
  width: 15px;
  height: 15px;
  flex: none;
  display: inline-flex;
}

.bbs-nav__icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.bbs-nav__count {
  margin-left: auto;
  font-size: 12px;
  color: var(--b-text-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 工具行：移动端分类下拉 + 排序 + 计数 ---------------- */

.bbs-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* 移动端「当前分类 ▾」触发按钮（桌面隐藏） */
.bbs-navbtn {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
}

.bbs-navbtn:hover {
  background: var(--b-hover);
}

.bbs-navbtn svg {
  width: 12px;
  height: 12px;
  color: var(--b-text-3);
}

.bbs-mnav .bbs-drop__panel {
  left: 0;
  min-width: 230px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow-y: auto;
}

.bbs-mnav .bbs-nav {
  margin-top: 0;
}

/* 移动下拉面板的子分类：与桌面左栏同样的 22px 净缩进，不用树线。
   树线是 IDE 文件树语言，Flarum / Discourse 侧栏均不用；撤掉色条后
   12px 撑不住层级（子分类色点继承父色、同组同色，不提供层级信息），
   故缩进补到与桌面一致的 22px。
   缩进走 padding 而非 margin：margin 缩短容器会让右对齐的
   .bbs-nav__count 比一级项左移、数字列参差。
   面板项左内边距是 12px（.bbs-drop__panel a），故子项 34px */
.bbs-mnav .bbs-nav__item--child {
  padding-left: 34px;
  /* 面板的 .bbs-drop__panel a(13.5px) 特异性高于基础 --child(13px)，在此恢复 */
  font-size: 13px;
}

/* 「分类」小标题与项的左内边距对齐（面板项为 12px，基础样式是 10px） */
.bbs-mnav .bbs-nav__label {
  margin-left: 12px;
}

/* 排序下拉 */
.bbs-sort__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--b-text-2);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

.bbs-sort__btn:hover {
  background: var(--b-hover);
}

.bbs-sort__btn svg {
  width: 12px;
  height: 12px;
}

.bbs-sort .bbs-drop__panel {
  left: 0;
  min-width: 120px;
}

.bbs-toolbar__count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--b-text-3);
}

.bbs-toolbar__count a {
  color: var(--b-accent);
  font-weight: 600;
}

/* ---------------- 帖子列表（Flarum DiscussionList） ---------------- */

.bbs-list {
  display: flex;
  flex-direction: column;
}

.bbs-it {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 8px;
  transition: var(--b-tr);
  /* hip 注册后头像走 Shadow DOM，.bbs-ava 盖不住；按 scene 内置档
     list=32 / post=40 / comment=36，跟本页兜底尺寸对不上。
     --hip-avatar-size 只覆盖我们种下的实例（interaction-plus 主题指南） */
  --hip-avatar-size: 44px;
}

.bbs-it:hover {
  background: var(--b-hover);
}

.bbs-it + .bbs-it {
  border-top: 1px solid var(--b-line);
}

.bbs-it:hover + .bbs-it,
.bbs-it + .bbs-it:hover {
  border-top-color: transparent;
}

.bbs-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.bbs-ava--letter {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  /* 默认匿名灰；有用户时由行内 background（显示名哈希，对齐 Flarum）盖掉 */
  background: #94a3b8;
}

.bbs-it__main {
  flex: 1;
  min-width: 0;
}

.bbs-it__title-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin: 2px 0 6px;
}

.bbs-it__title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--b-text);
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: var(--b-tr);
}

.bbs-it__title:hover {
  color: var(--b-accent);
}

/* 列表摘要（设置 listShowExcerpt 开启时渲染）：桌面两行，移动端一行 */
.bbs-it__excerpt {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--b-text-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 关闭 Hero 时主栏与顶栏间距略收紧 */
.bbs-cols--no-hero {
  padding-top: 8px;
}

/* 信息行：分类 chip + 作者 + 时间，单行截断（Flarum 行高均匀） */
.bbs-it__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--b-text-3);
}

.bbs-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.bbs-by__name {
  color: var(--b-text-2);
  font-weight: 600;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  transition: var(--b-tr);
}

a.bbs-by__name:hover {
  color: var(--b-accent);
}

/* 列表昵称（自接昵称样式，不用身份行组件）：颜色/渐变由 bbs-hip.js 应用 */
.bbs-uname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 列表身份标识：仅最高优先级一枚，最小形态（图标或小描边文字） */
.bbs-uname__mark {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.bbs-uname__mark img {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
  display: block;
}

.bbs-uname__mark-text {
  font-size: 11px;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1.5px 4px;
  font-weight: 600;
}

.bbs-by__time {
  flex: none;
}

/* 列表「已编辑」标记（元信息行末尾，纯文字）：字号与相邻时间一致——
   两字号并存时字形度量差会在视觉上错出水平线 */
.bbs-meta-edited {
  flex: none;
  font-size: 12.5px;
  color: var(--b-text-3);
}

/* 分类紧贴拼接 Tag（stag）：父子无间隙、中间无圆角、只外轮廓圆角。
   分类色空则 .is-plain 中性底 */
.bbs-stag {
  display: inline-flex;
  align-items: stretch;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  flex: none;
}

.bbs-stag__p,
.bbs-stag__c {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}

.bbs-stag__p {
  background: var(--c1);
}

.bbs-stag__c {
  background: var(--c2);
}

.bbs-stag__p.is-plain,
.bbs-stag__c.is-plain {
  background: var(--b-hover);
  color: var(--b-text);
}

a.bbs-stag:hover {
  filter: brightness(1.06);
}

/* 状态圆标（bic）：公告=琥珀喇叭 / 置顶=主题色图钉 / 未解决问答=蓝问号；右列紧挨评论数 */
.bbs-bic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bbs-bic svg {
  width: 12px;
  height: 12px;
}

/* 徽标语义色固定：公告琥珀 / 置顶主题色 / 问答蓝 */
.bbs-bic--ann {
  background: var(--b-amber);
}

.bbs-bic--pin {
  background: var(--b-accent);
}

.bbs-bic--qa {
  background: var(--b-blue);
}

/* 问号笔画在 12px 下偏细，略放大保持辨识 */
.bbs-bic--qa svg {
  width: 14px;
  height: 14px;
}

/* 已解决线框勾（sic）：无底粗线框，与锁同一视觉语言（终态 / 限制） */
.bbs-sic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  background: none !important;
  box-shadow: none !important;
  border: 0;
}

.bbs-sic svg {
  width: 17px;
  height: 17px;
  display: block;
}

.bbs-sic--ok {
  color: var(--b-green);
}

/* 行内锁（线框，贴标题）：列表贴标题右、详情贴标题左；
   [hidden] 强制隐藏，防 inline-flex 让 hidden 失效 */
.bbs-lock-inline {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--b-lock);
  font-size: inherit;
  width: auto;
  height: auto;
  margin: 0 0 0 0.18em;
  line-height: 0;
}

.bbs-lock-inline[hidden] {
  display: none !important;
}

.bbs-lock-inline svg {
  width: 17px;
  height: 17px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 右列：圆标 + 评论数，整行垂直居中（圆标 0~4 浮动时标题不抖） */
.bbs-it__side {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  align-self: center;
  min-height: 22px;
  padding-left: 8px;
}

.bbs-rc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--b-text-3);
  min-width: 40px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  transition: var(--b-tr);
}

.bbs-rc:hover {
  color: var(--b-accent);
}

.bbs-rc svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---------------- 空态 / 分页 / 页脚 / FAB ---------------- */

.bbs-empty {
  padding: 64px 0;
  text-align: center;
  color: var(--b-text-3);
}

.bbs-empty svg {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  opacity: 0.6;
}

.bbs-empty p {
  margin: 0;
  font-size: 13.5px;
}

.bbs-pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.bbs-pg__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--b-line);
  color: var(--b-text-2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: var(--b-tr);
}

.bbs-pg__btn:hover {
  background: var(--b-hover);
  color: var(--b-text);
}

.bbs-pg__btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.bbs-pg__info {
  font-size: 12.5px;
  color: var(--b-text-3);
  font-variant-numeric: tabular-nums;
}

/* 页脚：声明 + © {年} {站点名}（链博客首页）+ Powered by（链 GitHub） */
.bbs-foot {
  border-top: 1px solid var(--b-line);
  margin-top: 8px;
  padding: 22px 16px 28px;
  text-align: center;
  font-size: 12.5px;
  color: var(--b-text-3);
}

/* 行内混排文本 + 图标链接：flex 居中对齐，窄屏允许折行，各元素保持同一水平线 */
.bbs-foot p {
  margin: 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.bbs-foot a {
  color: var(--b-text-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--b-tr);
}

.bbs-foot a:hover {
  color: var(--b-accent);
}

.bbs-foot svg {
  width: 13px;
  height: 13px;
}

.bbs-fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--b-accent);
  color: #fff;
  display: none;
  place-items: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--b-accent) 45%, transparent);
}

.bbs-fab svg {
  width: 21px;
  height: 21px;
}

/* ---------------- 帖子页 ---------------- */

/* 详情 Hero（多行）：面包屑 / 标记行 / 标题（锁在左） */
.bbs-phero {
  background: var(--b-accent);
  color: #fff;
  text-align: left;
  padding: 28px 20px 32px;
}

/* Hero 内容居中容器（背景全宽、内容限宽对齐主栏） */
.bbs-phero__in {
  max-width: 1080px;
  margin: 0 auto;
}

/* 标记行：分类 Tag + 圆标（无锁） */
.bbs-phero__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.bbs-phero__marks:empty {
  display: none;
}

/* 详情分类 Tag：白底半透 */
.bbs-phero .bbs-stag {
  height: 22px;
  font-size: 12.5px;
}

.bbs-phero .bbs-stag__p,
.bbs-phero .bbs-stag__c {
  padding: 0 9px;
}

.bbs-phero .bbs-bic {
  width: 24px;
  height: 24px;
}

.bbs-phero .bbs-bic svg {
  width: 13px;
  height: 13px;
}

.bbs-phero .bbs-bic--qa svg {
  width: 15px;
  height: 15px;
}

/* 标题：锁在左，vertical-align:middle 贴第一行 */
.bbs-phero__title {
  margin: 0;
  max-width: 900px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

.bbs-phero__title .bbs-lock-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.28em 0 0;
  color: rgba(255, 255, 255, 0.95);
  line-height: 0;
}

.bbs-phero__title .bbs-lock-inline[hidden] {
  display: none !important;
}

.bbs-phero__title .bbs-lock-inline svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.35;
}

.bbs-pcols {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.bbs-stream {
  flex: 1;
  min-width: 0;
  max-width: 780px;
}

/* 楼主楼层：帖子流第一楼
   align-items:flex-start 必设——默认 stretch 会把左侧 hip-user-card 拉成整楼高度 */
.bbs-post {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  --hip-avatar-size: 48px;
}

.bbs-ava--lg {
  width: 48px;
  height: 48px;
}

.bbs-ava--lg.bbs-ava--letter {
  font-size: 18px;
}

.bbs-post__main {
  flex: 1;
  min-width: 0;
}

/* 身份行：与 .bbs-flr__head / .bbs-rep__head 同一套 flex 居中语言。
   不能退回 inline + vertical-align:middle——那是把子盒中线对齐到「父级基线 +
   半个 x-height」这个字体度量参照点，只在兄弟盒高相近时才碰巧居中。装扮开启后
   hip-user-identity 渲染出的身份行（昵称 + 身份标识）比纯文本高、且标识自基线向上长，
   视觉中线被顶起而「楼主」标签仍钉在原参照点，标签就偏低了。
   两行堆叠（昵称行 / 时间行）改由 flex-wrap + 时间行 flex-basis:100% 实现，
   长装扮昵称照样换行 */
.bbs-post__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* 行间距留 0：两行的距离由 .bbs-post__time 的 margin-top 单独管 */
  gap: 0 8px;
  margin-bottom: 10px;
}

.bbs-post__head .bbs-post__time {
  display: flex;
  /* 独占第二行（原先靠「块级 flex 自然换行」达成） */
  flex-basis: 100%;
  margin-top: 3px;
}

/* 昵称容器：inline-flex 而非行内——里面装的是 hip-user-identity（身份行），
   走行内布局时它坐在基线上，比文字高就只把行盒顶部撑高，盒心随之高于文字视觉
   中心，外层 align-items:center 对齐的是这个被抬高的盒心，「楼主」标签就偏上。
   改成 flex 容器后本元素高度 == 身份行高度，没有半行距也没有基线降部空白。
   .bbs-flr__name / .bbs-rep__name 同理（三处同款结构） */
.bbs-post__name {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 14.5px;
  transition: var(--b-tr);
}

a.bbs-post__name:hover {
  color: var(--b-accent);
}

/* 「楼主」描边小标签（楼主楼 / 评论楼 / 回复三处复用）。
   自居中的定高盒：高度用整数 px 定死，文字位置交给内部 flex——不再让
   line-height 一个变量同时管「盒子多高」和「文字在盒子里的哪」。
   原来 11 × 1.6 + 2 边框 = 19.6px 是分数盒高，外层 flex 算
   (容器高 − 项高)/2 会落在半像素上，取整后能显示成整整 1px 的偏移。
   20px ≈ 原来的 19.6px，观感不变。flex:none 防行内挤压时被压扁 */
.bbs-op {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--b-accent);
  border: 1px solid currentColor;
  border-radius: 4px;
}

.bbs-post__time {
  font-size: 12.5px;
  color: var(--b-text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bbs-edited {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--b-text-3);
  cursor: help;
}

.bbs-edited svg {
  width: 12px;
  height: 12px;
}

.bbs-post__foot {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}

.bbs-post__foot button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--b-text-3);
  transition: var(--b-tr);
}

.bbs-post__foot button:hover {
  color: var(--b-accent);
}

.bbs-post__foot svg {
  width: 14px;
  height: 14px;
}

/* 评论区：Halo 评论组件渲染，透明融入帖子流（无卡片，仅一条分隔线） */
.bbs-cmts {
  border-top: 1px solid var(--b-line);
  margin-top: 4px;
  padding-top: 16px;
  scroll-margin-top: 70px;
}

.bbs-cmts__head {
  font-size: 13px;
  font-weight: 700;
  color: var(--b-text-2);
  margin-bottom: 14px;
}

.bbs-cmts__head b {
  color: var(--b-text);
  font-variant-numeric: tabular-nums;
}

/* 相关推荐：轻量行列表 */
.bbs-related {
  margin-top: 40px;
}

.bbs-related__head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--b-text-3);
  margin-bottom: 4px;
}

.bbs-related__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 2px;
  border-top: 1px solid var(--b-line);
  font-size: 13.5px;
  color: var(--b-text-2);
  transition: var(--b-tr);
}

.bbs-related__row:hover {
  color: var(--b-accent);
}

.bbs-related__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bbs-related__time {
  flex: none;
  font-size: 12px;
  color: var(--b-text-3);
  font-variant-numeric: tabular-nums;
}

/* 右栏：回复按钮 + 目录（正文 h2/h3 ≥ 3 时由脚本填充显示） */
.bbs-pside {
  width: 190px;
  flex: none;
  position: sticky;
  top: 76px;
}

.bbs-side-toc {
  display: none;
  margin-top: 22px;
  font-size: 13px;
}

.bbs-side-toc.has-toc {
  display: block;
}

.bbs-side-toc__head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--b-text-3);
  margin: 0 0 8px 12px;
}

.bbs-side-toc__list {
  display: flex;
  flex-direction: column;
}

.bbs-toc__item {
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--b-line);
  color: var(--b-text-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: var(--b-tr);
}

.bbs-toc__item:hover {
  color: var(--b-text);
}

.bbs-toc__item--sub {
  padding-left: 24px;
  font-size: 12.5px;
}

.bbs-toc__item.is-active {
  color: var(--b-accent);
  border-left-color: var(--b-accent);
  font-weight: 600;
}

/* 移动端底部固定回复栏（点击跳评论区） */
.bbs-mreply {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--b-bg);
  border-top: 1px solid var(--b-line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}

/* 回复主按钮：实底主题色、方角 8px、44px 高（移动底栏，flex:1） */
.bbs-mreply__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background: var(--b-accent);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.bbs-mreply__in svg {
  width: 15px;
  height: 15px;
}

/* ---------------- 图片灯箱 ---------------- */

.bbs-zoomable {
  cursor: zoom-in;
}

.bbs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 16, 0.88);
  cursor: zoom-out;
}

.bbs-lightbox.on {
  display: flex;
}

.bbs-lightbox img {
  max-width: 94vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ---------------- 正文排版 ---------------- */

.prose {
  font-size: 15px;
  color: var(--b-text);
  word-break: break-word;
  line-height: 1.75;
}

.prose p {
  margin: 0 0 1em;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

/* 列表：Jsoup relaxed 白名单放行 ul/ol/li，官方评论组件的 content.css 也带列表样式，
   这里给出本站版本——同一条评论在锁定前后（组件渲染 / 自建楼层流）排版不该长得不一样。
   缩进刻意比官方的 2em 收一档：评论正文左边已有头像列的缩进，楼中楼还要再陷一层，
   累积下来 2em 会把内容挤得太靠右；1.75em 在 15px 正文下约 26px，两位数编号也放得下 */
.prose ul,
.prose ol {
  margin: 0 0 1em;
  padding-left: 1.75em;
}

/* 嵌套层贴着父项走，不另起段落间距 */
.prose li > ul,
.prose li > ol {
  margin: 0.25em 0 0;
}

/* ul 的 disc → circle → square 用浏览器默认即可；ol 嵌套默认逐层都是数字，
   按中文技术文档惯例改成 数字 → 小写字母 → 罗马数字 */
.prose ol ol {
  list-style-type: lower-alpha;
}

.prose ol ol ol {
  list-style-type: lower-roman;
}

.prose li + li {
  margin-top: 0.25em;
}

/* 多段落列表项：项内段落收紧，末元素不留尾距（否则 .prose p 的 1em 会把列表撑散） */
.prose li p {
  margin-bottom: 0.5em;
}

.prose li > :last-child {
  margin-bottom: 0;
}

/* 标号弱于正文：ul 的圆点纯装饰，压到最淡；ol 的编号要读，只降一档 */
.prose ul > li::marker {
  color: var(--b-text-3);
}

.prose ol > li::marker {
  color: var(--b-text-2);
}

.prose img,
.prose video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.prose a {
  color: var(--b-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin: 1.5em 0 0.6em;
  line-height: 1.35;
  scroll-margin-top: 70px;
}

.prose h2 {
  font-size: 19px;
}

.prose h3 {
  font-size: 16.5px;
}

.prose blockquote {
  margin: 1em 0;
  padding: 2px 16px;
  border-left: 3px solid var(--b-line);
  color: var(--b-text-2);
}

.prose pre {
  padding: 14px 16px;
  border-radius: 8px;
  background: #14161b;
  color: #e2e8f0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.prose :not(pre) > code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--b-hover);
  color: var(--b-accent);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 13.5px;
}

.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid var(--b-line);
  text-align: left;
}

.prose th {
  background: var(--b-hover);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--b-line);
  margin: 1.8em 0;
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 800px) {
  .bbs-hd__in {
    height: 52px;
    gap: 8px;
  }

  .bbs-lg {
    font-size: 15px;
  }

  /* 搜索收缩为图标胶囊，聚焦时展开 */
  .bbs-hs {
    flex: 0 1 38px;
  }

  .bbs-hs:focus-within {
    flex: 1 1 auto;
  }

  .bbs-hm {
    display: none;
  }

  .bbs-hm-m {
    display: block;
  }

  .bbs-hero {
    padding: 24px 16px 28px;
  }

  .bbs-hero h1 {
    font-size: 21px;
  }

  .bbs-cols,
  .bbs-pcols {
    display: block;
    padding: 14px 12px 40px;
  }

  .bbs-aside {
    display: none;
  }

  /* 侧栏收进「当前分类 ▾」下拉；发帖由悬浮按钮承担 */
  .bbs-navbtn {
    display: flex;
  }

  .bbs-fab {
    display: grid;
  }

  /* 列表条目改网格：
     第 1 行=标题；第 2 行=摘要（开启时独占，2 行截断）；
     第 3 行=分类 chip + 右侧徽标/评论数；第 4 行=作者+时间。
     头像只对标题行。摘要未渲染时后续行自动上移。 */
  .bbs-it {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    padding: 12px 6px;
    --hip-avatar-size: 40px;
  }

  .bbs-it__main,
  .bbs-it__meta {
    display: contents;
  }

  /* 头像只对标题行；hip 已注册时网格项是 hip-user-avatar 本身，
     未注册（display:contents）或匿名时是 .bbs-ava，两者都声明 */
  .bbs-it hip-user-avatar,
  .bbs-it .bbs-ava {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .bbs-ava {
    width: 40px;
    height: 40px;
  }

  .bbs-ava--letter {
    font-size: 15px;
  }

  .bbs-it__title-row {
    grid-column: 2 / -1;
    grid-row: 1;
    margin: 0;
  }

  /* 摘要独占整行，插在标题与分类之间。display:contents 拆开父级后
     摘要自己是网格项，-webkit-box + line-clamp 仍可用。
     无摘要时不占第 2 轨，避免空行 gap */
  .bbs-it__excerpt {
    grid-column: 2 / -1;
    grid-row: 2;
    margin: 0;
    align-self: start;
  }

  .bbs-it__meta .bbs-stag {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .bbs-it:has(.bbs-it__excerpt) .bbs-it__meta .bbs-stag {
    grid-row: 3;
  }

  .bbs-it__side {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    margin: 0;
    padding-left: 0;
  }

  .bbs-it:has(.bbs-it__excerpt) .bbs-it__side {
    grid-row: 3;
  }

  /* 作者装扮 + 时间，与标题/分类左对齐；换行仅作兜底
     （极端长度时时间折行而非裁切装扮） */
  .bbs-by {
    grid-column: 2 / -1;
    grid-row: 3;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
  }

  .bbs-it:has(.bbs-it__excerpt) .bbs-by {
    grid-row: 4;
  }

  .bbs-bic {
    width: 20px;
    height: 20px;
  }

  .bbs-bic svg {
    width: 11px;
    height: 11px;
  }

  .bbs-bic--qa svg {
    width: 12px;
    height: 12px;
  }

  .bbs-sic {
    width: 18px;
    height: 18px;
  }

  /* 帖子页 */
  .bbs-phero {
    padding: 20px 16px 24px;
    text-align: left;
  }

  .bbs-phero__marks {
    justify-content: flex-start;
  }

  .bbs-phero__title {
    font-size: 19.5px;
  }

  .bbs-pside {
    display: none;
  }

  .bbs-stream {
    max-width: none;
  }

  .bbs-post {
    gap: 12px;
    padding: 16px 0;
    --hip-avatar-size: 40px;
  }

  .bbs-ava--lg {
    width: 40px;
    height: 40px;
  }

  .bbs-ava--lg.bbs-ava--letter {
    font-size: 15px;
  }

  /* 页脚让出底部固定栏 / FAB */
  .bbs-foot {
    padding-bottom: 84px;
  }
}

/* 列表页没有底部回复栏：仅帖子页 body 挂 has-mreply 时显示 */
.bbs-mreply {
  display: none;
}

@media (max-width: 800px) {
  body.has-mreply .bbs-mreply {
    display: block;
  }
}

/* ---------------- 互动装扮（interaction-plus hip-* 组件） ---------------- */

/* 未注册（interaction-plus 未装 / 停用 / 开关关闭）时布局透明化：
   包装元素不参与布局，light DOM 里的原生兜底内容直接顶上（注册后组件
   Shadow DOM 无 slot，兜底内容自动不渲染，无需额外处理） */
hip-user-avatar:not(:defined),
hip-user-identity:not(:defined),
hip-user-card:not(:defined) {
  display: contents;
}

/* 注册后作为列表格 / flex 子项时不被压缩 */
hip-user-avatar,
hip-user-card {
  flex: none;
}

/* 悬浮名片已走 popover top layer，宿主不再做定位基准 / 层叠。
   align-self:flex-start 仍要：防父级 flex stretch 把宿主拉成整楼高 */
hip-user-card {
  align-self: flex-start;
}

/* ============================================================
   两级分类 / 分类 Hero / 类型徽章 / 问答与锁定
   （对齐 Flarum：TagHero 分类色铺底、并排双 TagLabel、
   solved 徽章语言；全部复用既有设计 token）
   ============================================================ */

/* ---------------- 分类 Hero（Flarum TagHero） ----------------
   无封面时以分类色（--b-cat，模板内联传入）铺底，叠加同向暗化渐变；
   有封面时复用 .bbs-hero--img 的背景图 + 遮罩 */
.bbs-hero--cat {
  background: var(--b-cat);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* 分类色清空：中性底 + 深字 */
.bbs-hero--cat.is-plain {
  background: var(--b-hover);
  background-image: none;
  color: var(--b-text);
  text-shadow: none;
}

.bbs-hero--cat.is-plain p {
  color: var(--b-text-2);
}

.bbs-hero--cat.bbs-hero--img {
  background-image: none;
}

/* ---------------- 左栏分类树：子分类缩进项 ---------------- */

/* 净缩进 22px（= 改动前的 margin-left），视觉不变，但缩进改走 padding：
   margin 会缩短容器，令右对齐的 .bbs-nav__count 比一级项左移、数字列参差 */
.bbs-nav__item--child {
  padding-left: 32px;
  font-size: 13px;
  font-weight: 400;
}

/* ---------------- 工具行：类型筛选 chips + 换行 ---------------- */

.bbs-toolbar {
  flex-wrap: wrap;
}

.bbs-toolbar__count {
  margin-left: auto;
}

.bbs-typebar {
  display: flex;
  gap: 6px;
}

.bbs-typebar a {
  flex: none;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--b-text-2);
  transition: var(--b-tr);
}

.bbs-typebar a:hover {
  background: var(--b-hover);
}

.bbs-typebar a.is-on {
  background: var(--b-accent);
  color: #fff;
}

/* ---------------- 详情页：面包屑 / 右栏分享 / 锁定 ---------------- */

.bbs-phero__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}

.bbs-phero__crumb a {
  color: #fff;
}

.bbs-phero__crumb a:hover {
  text-decoration: underline;
}

/* 右栏分享按钮：与回复按钮同款 44px 8px 方角，描边中性色 */
.bbs-side-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  height: 44px;
  border: 1px solid var(--b-line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--b-text-2);
  background: var(--b-bg);
  transition: var(--b-tr);
}

.bbs-side-share:hover {
  background: var(--b-hover);
  color: var(--b-text);
}

.bbs-side-share svg {
  width: 15px;
  height: 15px;
}

/* 回复按钮灰态（已锁定 / 评论已关闭） */
.bbs-start.is-disabled {
  background: var(--b-hover);
  color: var(--b-text-3);
  cursor: default;
  box-shadow: none;
  text-align: center;
}

/* 状态说明条：已解决绿 tip + 锁定灰条，单行无边框 */
.bbs-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 16px auto 0;
  max-width: 1080px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.bbs-notice svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.bbs-notice--ok {
  background: rgba(22, 163, 74, 0.1);
  color: var(--b-green);
}

/* 头像下拉菜单分隔线（后台管理 / 退出与其他项之间） */
.bbs-menu__div {
  height: 1px;
  margin: 4px 8px;
  background: var(--b-line);
}

/* 锁定说明条（restyle 自 .bbs-cmts__closed：灰底无边框） */
.bbs-cmts__closed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--b-hover);
  color: var(--b-text-2);
  font-size: 13.5px;
  font-weight: 500;
}

.bbs-cmts__closed svg {
  width: 16px;
  height: 16px;
  flex: none;
}

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

/* 底部固定栏容器化：回复主按钮 + 分享图标按钮 */
.bbs-mreply__in {
  flex: 1;
}

/* 底部栏禁用态（已锁定 / 评论已关闭）：灰底并屏蔽点击 */
.bbs-mreply__in.is-disabled {
  background: var(--b-hover);
  color: var(--b-text-3);
  box-shadow: none;
  pointer-events: none;
}

.bbs-mreply__share {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--b-line);
  color: var(--b-text-2);
}

.bbs-mreply__share svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 800px) {
  /* 底部固定栏改 flex（覆盖既有 display 值），分享入口并排 */
  body.has-mreply .bbs-mreply {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* 类型 chips 独占一行横向滚动，不挤压排序控件 */
  .bbs-typebar {
    flex: 1 1 100%;
    order: 5;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .bbs-typebar::-webkit-scrollbar {
    display: none;
  }

  /* 窄屏条目徽章行允许换行（徽章行 + 作者时间自然分行） */
  .bbs-it__meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* 分类 hero 收紧留白 */
  .bbs-hero--cat {
    padding-top: 26px;
    padding-bottom: 30px;
  }
}

/* ---------------- 只读评论楼层流（锁定帖） ----------------
   官方评论组件不渲染时（其 shadow DOM 输入框藏不掉）由 bbs.js 按 BBS 自建端点拼装。
   不做成「评论列表」而是**帖子流的续楼**：楼主是 1 楼，评论顺延 2 楼、3 楼——
   头像左缘 / 正文左缘与 .bbs-post 贯通，楼层之间 1px 细线定节奏（Flarum PostStream）。
   照抄官方评论组件形态（34px 头像 + 紧凑行）会让 1 楼→2 楼断层，读起来像页面里
   嵌了个评论插件，故刻意不与 <halo:comment> 那条路径对齐，而与本页帖子流对齐。
   身份行：昵称 +「楼主」靠左、置顶钉靠右；「回复 @」是正文引导语；
   动作栏时间左、赞 / 回复数 / 楼层号右（Bilibili / 知乎楼中楼，桌面窄屏同一套）。 */

.bbs-flr {
  display: flex;
  /* 同 .bbs-post：必设，否则 stretch 会把 hip-user-card 拉成整楼高 */
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--b-line);
  /* #c-{name} 锚点跳转时不被顶栏遮住 */
  scroll-margin-top: 70px;
  --hip-avatar-size: 40px;
}

/* 首楼紧接「N 条评论」标题，不叠第三条线 */
.bbs-flr:first-child {
  border-top: 0;
  padding-top: 2px;
}

/* 头像复用列表 / 楼主的 .bbs-ava 语言（圆形、字母态哈希色底白字），只压尺寸：
   楼主 48 → 楼层 40 → 回复 26，三级层级 */
.bbs-ava--flr {
  width: 40px;
  height: 40px;
}

.bbs-ava--flr.bbs-ava--letter {
  font-size: 15px;
}

.bbs-ava--rep {
  width: 26px;
  height: 26px;
}

.bbs-ava--rep.bbs-ava--letter {
  font-size: 11px;
}

.bbs-flr__main {
  flex: 1;
  min-width: 0;
}

/* 身份行：昵称 +「楼主」靠左，置顶钉靠右（margin-left:auto）。
   nowrap 防装扮把钉挤到下一行；昵称 min-width:0 让长装扮收缩而不是顶掉钉。
   时间不进这一行——沉到动作栏，桌面 / 窄屏同一套 */
.bbs-flr__head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
}

/* 同 .bbs-post__name：flex 容器收掉行内基线层，高度即身份行高度 */
/* overflow 裁在「楼主」左侧，避免长装扮盖住标签 / 钉。
   装扮若从身份组件盒外探出（少见）会被竖向裁一截——换不裁就会叠到钉上 */
.bbs-flr__name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 14.5px;
  transition: var(--b-tr);
}

a.bbs-flr__name:hover {
  color: var(--b-accent);
}

/* 楼层号：锁定帖是归档讨论，「看 5 楼」的引用需求真实存在，故给可点锚点；
   压到最弱（12px / .7 透明度 / hover 才上色）不跟时间抢 */
.bbs-flr__no {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  transition: var(--b-tr);
}

a.bbs-flr__no:hover {
  opacity: 1;
  color: var(--b-accent);
}

/* 置顶圆标沿用 §2.1 bic 语言（实底主题色圆 + 图钉），比列表小一号。
   钉挂身份行右上：楼层状态，不是用户徽章，不贴「楼主」。
   置顶楼不占楼层号：号表达「第几个发的」，而置顶楼被提到最前，两者会打架 */
.bbs-flr .bbs-bic {
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex: none;
  /* 长装扮从昵称盒溢出时压在钉下面，钉始终可见 */
  position: relative;
  z-index: 1;
}

.bbs-flr .bbs-bic svg {
  width: 10px;
  height: 10px;
}

/* 正文直接挂 .prose：引用 / 代码块 / 图片 / 表格与帖子正文同一套排版，只压一档字号。
   内容按 HTML 渲染（Halo Comment.spec.content 写入时已净化，详见 bbs.js roItem） */
.bbs-flr__body {
  font-size: 14.5px;
}

/* 动作栏：时间左，赞 / 回复数 / 楼号右（锁定＝只看不赞：不提供点赞按钮）。
   窄屏 wrap 时时间仍先、右侧一组不拆散（actions nowrap + margin-left:auto） */
.bbs-flr__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--b-text-3);
}

.bbs-flr__actions {
  display: inline-flex;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  gap: 14px;
  margin-left: auto;
}

.bbs-flr__foot > time {
  flex: none;
  white-space: nowrap;
}

.bbs-flr__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.bbs-flr__foot svg {
  width: 13px;
  height: 13px;
}

/* 楼中楼：陷入一层的浅底块。底色用 --b-sunken 而非 --b-hover——
   行内代码底就是 --b-hover，同色会把回复里的代码整块吃掉；
   且锁定说明条也是 --b-hover 圆角块，会撞成同一种语义（圆角对齐说明条的 8px） */
.bbs-flr__replies {
  margin-top: 12px;
  padding: 4px 14px;
  background: var(--b-sunken);
  border-radius: 8px;
}

.bbs-rep {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  /* 盖掉从 .bbs-flr 继承的 40，以及 scene="comment reply" 对不上
     内置精确选择器 :host([scene="comment"]) 时回落的 40 */
  --hip-avatar-size: 26px;
}

/* 楼中楼条目之间：浅底块管层级，细线管块内节奏（B 站楼中楼）。
   相邻两条才画，1 条回复时块里仍干净；「展开剩余」是 button 不是 .bbs-rep，不会误伤 */
.bbs-rep + .bbs-rep {
  border-top: 1px solid var(--b-line);
}

.bbs-rep__main {
  flex: 1;
  min-width: 0;
}

.bbs-rep__head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin-bottom: 2px;
}

/* 同 .bbs-post__name：flex 容器收掉行内基线层 */
.bbs-rep__name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 13px;
}

/* 「回复 @昵称」：正文引导语，插在第一段开头跟正文同一行。
   弱化灰字且不做链接——它是指向关系而非身份入口，上色会跟昵称抢注意力 */
.bbs-rep__to {
  display: inline;
  margin-right: 0.4em;
  font-size: 12.5px;
  color: var(--b-text-3);
}

/* 楼中楼动作栏：时间左、赞右，与楼层同一套左右拆分 */
.bbs-rep__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--b-text-3);
}

.bbs-rep__actions {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  margin-left: auto;
}

.bbs-rep__foot > time {
  flex: none;
  white-space: nowrap;
}

.bbs-rep__up {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.bbs-rep__up svg {
  width: 12px;
  height: 12px;
}

.bbs-rep__body {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.7;
}

/* 「展开剩余 N 条回复」（灰块内）/「加载更多评论」（楼层流末尾居中） */
.bbs-more {
  font-size: 12.5px;
  color: var(--b-accent);
  transition: var(--b-tr);
}

.bbs-more:hover {
  text-decoration: underline;
}

.bbs-more:disabled {
  color: var(--b-text-3);
  text-decoration: none;
}

.bbs-flr__replies .bbs-more {
  margin: 2px 0 8px;
}

#bbsRoComments > .bbs-more {
  display: block;
  margin: 18px auto 0;
}

/* 楼层流收尾：锁定帖是归档，滚到底要有个收口。
   刻意不重复「已锁定」文案——那句由评论区上方的说明条独占 */
.bbs-cmts__end {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--b-line);
  text-align: center;
  font-size: 12px;
  color: var(--b-text-3);
}

.bbs-cmts__empty {
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: var(--b-text-3);
}

@media (max-width: 800px) {
  .bbs-flr {
    gap: 12px;
    padding: 16px 0;
    --hip-avatar-size: 36px;
  }

  .bbs-ava--flr {
    width: 36px;
    height: 36px;
  }

  .bbs-ava--flr.bbs-ava--letter {
    font-size: 14px;
  }

  .bbs-flr__replies {
    padding: 2px 10px;
  }
}

/* ============================================================
   无主题色（.is-unthemed）
   主题色清空时模板不写 --b-accent；实底 + 白字控件在此改为
   中性底 / 深字，保证可读。全透明主题色仍写入 --b-accent，不走本块。
   分类 Hero 与 Banner 图不依赖主题色。
   ============================================================ */

.bbs-body.is-unthemed .bbs-lg__mark {
  color: var(--b-text);
}

.bbs-body.is-unthemed .bbs-hs input[type="search"]:focus {
  box-shadow: 0 0 0 2px var(--b-text-3);
}

.bbs-body.is-unthemed .bbs-me.open .bbs-me__ava {
  box-shadow: 0 0 0 2px var(--b-bg), 0 0 0 4px var(--b-line);
}

.bbs-body.is-unthemed .bbs-me__login,
.bbs-body.is-unthemed .bbs-start:not(.is-disabled),
.bbs-body.is-unthemed .bbs-mreply__in,
.bbs-body.is-unthemed .bbs-fab {
  background: var(--b-hover);
  color: var(--b-text);
  box-shadow: none;
}

.bbs-body.is-unthemed .bbs-me__login:hover,
.bbs-body.is-unthemed .bbs-start:not(.is-disabled):hover {
  background: var(--b-line);
}

.bbs-body.is-unthemed .bbs-hero:not(.bbs-hero--img):not(.bbs-hero--cat) {
  background: var(--b-hover);
  color: var(--b-text);
}

.bbs-body.is-unthemed .bbs-hero:not(.bbs-hero--img):not(.bbs-hero--cat) p {
  color: var(--b-text-2);
}

.bbs-body.is-unthemed .bbs-phero {
  background: var(--b-hover);
  color: var(--b-text);
}

.bbs-body.is-unthemed .bbs-phero__title {
  color: var(--b-text);
}

.bbs-body.is-unthemed .bbs-phero__title .bbs-lock-inline {
  color: var(--b-text-2);
}

.bbs-body.is-unthemed .bbs-phero__crumb {
  color: var(--b-text-2);
}

.bbs-body.is-unthemed .bbs-phero__crumb a {
  color: var(--b-text);
}

.bbs-body.is-unthemed .bbs-bic--pin {
  background: var(--b-lock);
}

.bbs-body.is-unthemed .bbs-typebar a.is-on {
  background: var(--b-line);
  color: var(--b-text);
}

/* 正文链接：其余纯 color 的主题色用法（hover 态 / 强调字）失效后继承父色即可，
   唯独这里不行——.prose 的父色就是正文黑，链接会与正文同色、只剩下划线可辨。
   蓝色是链接的默认语义色，不跟主题色。
   暗底下 --b-blue(#2563eb) 只有 3.41:1，够不上 WCAG AA，故单独提亮 */
.bbs-body.is-unthemed .prose a {
  color: var(--b-blue);
}

@media (prefers-color-scheme: dark) {
  .bbs-body.is-unthemed .prose a {
    color: #60a5fa;
  }
}