/* ============================================================
   问答社区样式。
   依赖 /assets/site.css 的设计令牌与基础组件。
   ============================================================ */

/* ---------- 头部横幅 ---------- */
/* 社区列表页的页头直接用应用商店那套：site.css 的 .hero.compact + .hero-inner
   （居中标题 + 一体化搜索栏、不留描述文字）。这里只把标题字重放轻——
   halo 的页头也是 normal 字重，层级交给字号，不做加粗。
   site.css 里 .hero.compact h1.site-page-title（0,0,3,1）给的是加粗，
   这里必须写到同层特异性以上才盖得住。 */
.hero.compact.qa-hero-compact h1.site-page-title {
  font-weight: var(--fw-text);
}

/* 子页面（提问 / 编辑）的页头：仍是左对齐的窄页头，只留标题和返回链接。 */
.qa-hero {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(720px 240px at 85% -60%, rgba(0, 212, 164, .14), transparent 70%),
    var(--surface);
}
.qa-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 44px 0 32px;
}
.qa-hero h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--heading-weight);
  letter-spacing: -.01em;
}

/* 主操作按钮（我要提问 / 进入问答社区）：从页头挪到工具栏右侧，
   页头才能和商店保持同款。 */
.qa-ask-btn {
  flex-shrink: 0;
  font-size: 14px;
  white-space: nowrap;
}
.qa-ask-btn .bi {
  font-size: 14px;
}
.qa-toolbar-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* 「搜索结果」提示行 */
.qa-search-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}
.qa-search-note a {
  color: var(--green-deep);
}

/* ---------- 布局 ---------- */
.qa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  padding: 28px 0 64px;
}
/* 没有侧栏的社区页（编辑页）：主列宽度 = 站点外壳 1180 − 侧栏 300 − 间距 36，
   这样它的左边缘跟顶部 hero 对齐，正文宽度也和列表、详情页的主列一致。 */
.qa-layout-noside {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(1180px - 300px - 36px);
}

/* ---------- 工具栏：状态筛选 + 排序 ---------- */
.qa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.qa-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qa-tabs::-webkit-scrollbar {
  display: none;
}
.qa-tabs a {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 0;
  font-size: 15px;
  color: var(--muted);
  transition: color .15s ease;
}
.qa-tabs a:hover {
  color: var(--text);
}
.qa-tabs a.active {
  color: var(--text);
  font-weight: var(--fw-text);
}
.qa-tabs a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--green-deep);
}
.qa-tabs em {
  font-style: normal;
  font-size: 12px;
  color: var(--subtle);
  margin-left: 4px;
  font-weight: var(--fw-text);
}
.qa-tabs a.bounty {
  color: #a07d1c;
}
.qa-tabs a.bounty .bi {
  font-size: 13px;
  margin-right: 3px;
}
.qa-tabs a.bounty.active {
  color: #a07d1c;
}
.qa-tabs a.bounty.active::after {
  background: #c9a23f;
}
.qa-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  color: var(--subtle);
}
.qa-sort a {
  padding: 4px 10px;
  border-radius: 7px;
  color: var(--muted);
}
.qa-sort a:hover {
  color: var(--text);
}
.qa-sort a.active {
  color: var(--text);
  font-weight: var(--fw-text);
  background: var(--soft);
}

/* ---------- 问题列表 ---------- */
/* 行结构对齐 iotheme 问答列表：左侧 40px 头像锚定整行，右侧标题 + 元信息，
   浏览/回答两个数字收在行尾右对齐（reply-count 画法）。
   摘要收成单行省略，整行比旧版两行摘要矮一截，一屏能多扫几条。 */
.qa-list {
  border-top: 1px solid var(--line);
}
.qa-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 12px;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.qa-item:hover {
  background: var(--soft);
}
.qa-item:hover .qa-item-title a {
  color: var(--green-deep);
}
.qa-item > .qa-avatar {
  margin-top: 3px; /* 16px 标题首行（行高约 23px）与 40px 头像的光学对齐 */
}
.qa-item-body {
  flex: 1;
  min-width: 0;
}
.qa-item-title {
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.45;
  /* 列表行用常规档：一屏十几条标题连着加粗会糊成一片，
     层级交给字号（16px 标题 / 13px 摘要 / 12px 元信息）和颜色。 */
  font-weight: var(--fw-text);
}
.qa-item-title a {
  color: var(--text);
  transition: color .15s ease;
}
.qa-item-excerpt {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-item-meta {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--subtle);
}
.qa-item-meta .qa-by {
  font-size: 12px;
}
.qa-item-stats {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.qa-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--subtle);
  font-size: 12px;
}
.qa-views .bi {
  font-size: 12px;
}
/* 回答数从胶囊底改成 iotheme 的纯图标+数字：解决态绿字、零回答淡灰。 */
.qa-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.qa-count .bi {
  font-size: 12px;
}
.qa-count b {
  font-size: 12.5px;
  font-weight: var(--fw-strong);
  color: var(--text);
}
.qa-count.solved b {
  color: var(--green-deep);
}
.qa-count.zero {
  color: var(--subtle);
}
.qa-count.zero b {
  color: var(--subtle);
  font-weight: var(--fw-text);
}

/* ---------- 徽章：问题状态 ---------- */
.qa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: var(--fw-text);
  line-height: 1.6;
  white-space: nowrap;
}
.qa-badge.solved {
  background: rgba(0, 180, 138, .12);
  color: #008f6e;
}
.qa-badge.solved::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-deep);
}
.qa-badge.pending {
  background: #fff4e0;
  color: #b45309;
}
.qa-badge.pending::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e08c1a;
}

/* ---------- 头衔徽章 ---------- */
.u-title {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: var(--fw-text);
  line-height: 1.55;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: 1px;
}
.u-title .bi {
  font-size: 10px;
  transform: translateY(.5px);
}
.u-title.t-owner {
  color: #fff;
  background: #b08d2e;
  border-color: #b08d2e;
}
.u-title.t-dev {
  color: #fff;
  background: #00b48a;
  border-color: #00b48a;
}
.u-title.t-verified {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}
.u-title.t-active {
  color: #fff;
  background: #6b7280;
  border-color: #6b7280;
}

/* ---------- 头像 ---------- */
.qa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden; /* 头像图裁到圆形里，底下的随机配色只有图没加载好时才露出来 */
  font-size: 11px;
  font-weight: var(--fw-strong);
  color: #fff;
}
.qa-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 外圈已有 overflow: hidden，这里再兜一层，避免个别渲染下露出方角 */
  object-fit: cover;
}
/* 未登录时评论框左侧的占位：不是某个人，用图标而不是「你」字 */
.qa-avatar.is-guest {
  font-size: 13px;
}
.qa-avatar.lg {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.qa-avatar.md {
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.a1 { background: #0a0a0a; }
.a2 { background: #00b48a; }
.a3 { background: #2563eb; }
.a4 { background: #d97706; }
.a5 { background: #7c3aed; }
.a6 { background: #e11d48; }
.a7 { background: #0e7490; }

/* ---------- 标签 ---------- */
.qa-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--soft);
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
a.qa-tag:hover {
  background: rgba(0, 180, 138, .10);
  color: var(--green-deep);
}

/* ---------- 发帖人 ---------- */
.qa-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--subtle);
  font-size: 13px;
}
/* 姓名是普通名字，不是标题：不声明的话 <b> 会吃浏览器默认的 bolder，在 13px 灰色
   元信息行里独自变粗，和旁边的「x 分钟前发布」割裂。 */
.qa-by b {
  font-weight: var(--fw-text);
}

/* ---------- 分页 ---------- */
/* 数字做成方块 chip（iotheme 的 q-pagination 画法）：soft 底、当前页实心主题绿。 */
.qa-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 14px;
}
.qa-pager a,
.qa-pager span {
  min-width: 32px;
  padding: 6px 10px;
  text-align: center;
  color: var(--muted);
  background: var(--soft);
  border-radius: 6px;
}
.qa-pager a:hover {
  color: var(--green-deep);
  background: var(--soft-blue);
}
.qa-pager .current {
  color: #fff;
  font-weight: var(--fw-strong);
  background: var(--green-deep);
}
.qa-pager .gap {
  color: var(--subtle);
  background: none;
}

/* ---------- 侧栏卡片 ---------- */
/* 侧栏卡片：圆角/内边距/发丝线这组数值参考 vpslt.com 的侧栏卡片（16px 圆角、20px 内边距、
   1px 淡边框、无阴影），圆角按站内卡片的口径收到 12px，保持和应用商店的卡片一致。 */
.qa-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 20px;
  margin-bottom: 20px;
}
/* 侧栏卡片标题对齐 halo.run 侧栏的 text-sm font-semibold：14px + 加粗档。
   标题下加一条发丝线，卡片读成「标题带 + 内容」两段——参考站的排行卡就是这个结构。 */
.qa-card h3 {
  margin: 0 0 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: var(--fw-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 页签卡片：页签本身就是卡片的标题带（参考站排行卡的 4 列页签带）——
   整幅宽度、两列等分、46px 高，选中项一条 3px 圆角下划线压在带子的下缘；
   内边距交给内容区，标题带才能通到卡片两侧。
   类名带 side 前缀：列表页头部的分类页签已经占了 .qa-tabs，别再撞上。 */
.qa-card-tabs {
  padding: 0 20px 18px;
}
.qa-side-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 -20px 12px;
  border-bottom: 1px solid var(--line);
}
.qa-side-tab {
  position: relative;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: var(--fw-strong);
  text-align: center;
  cursor: pointer;
  transition: color .15s ease;
}
.qa-side-tab:hover { color: var(--text); }
.qa-side-tab.is-active { color: var(--text); }
.qa-side-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--green-deep);
}
.qa-side-tab:focus-visible {
  outline: 2px solid rgba(13, 148, 136, .35);
  outline-offset: 2px;
}
.qa-side-panel[hidden] { display: none; }
/* 排行列（今日签到排行）：序号做成 16px 圆形数字章，前三名换成实心主题绿，与参考站一致。 */
.qa-rank-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--subtle);
  font-size: 10px;
  font-weight: var(--fw-strong);
  line-height: 1;
}
.qa-rank-no.top {
  background: var(--green-deep);
  color: #fff;
}
.qa-card h3 a,
.qa-card h3 .more {
  font-size: 13px;
  font-weight: var(--fw-text);
  color: var(--subtle);
}
.qa-card-cta {
  background:
    radial-gradient(360px 160px at 100% 0%, rgba(0, 212, 164, .14), transparent 70%),
    var(--soft-blue);
  border-color: rgba(0, 180, 138, .22);
}
.qa-card-cta p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}
/* 侧栏卡片按钮自然宽度：通栏长按钮视觉太重，卡片本身已经框住了行动点。 */
.qa-card-cta .btn {
  font-size: 14px;
}

/* 社区数据 */
.qa-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
}
.qa-metrics div b {
  display: block;
  font-size: 20px;
  font-weight: var(--fw-strong);
  line-height: 1.3;
}
.qa-metrics div span {
  font-size: 12px;
  color: var(--subtle);
}
.qa-solve-rate {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.qa-solve-rate .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.qa-solve-rate .row b {
  color: var(--green-deep);
}
.qa-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}
.qa-progress i {
  display: block;
  height: 100%;
  width: 78%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--green-deep));
}

/* 热门问题：行与「相关问题」同一套（单行省略、发丝线），序号升级成参考站那种
   16px 圆形数字章（前三名实心主题绿），和「今日签到排行」的序号章是同一个语言。
   序号仍然由 CSS 计数器生成，不用改模板。 */
.qa-hot-list {
  margin: 0;
  padding: 0;
  counter-reset: hot;
}
.qa-hot-list li {
  list-style: none;
  counter-increment: hot;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.5;
}
.qa-hot-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.qa-hot-list li::before {
  content: counter(hot);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--subtle);
  font-size: 10px;
  font-weight: var(--fw-strong);
  line-height: 1;
}
.qa-hot-list li:nth-child(-n+3)::before {
  background: var(--green-deep);
  color: #fff;
}
.qa-hot-list a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-hot-list a:hover {
  color: var(--green-deep);
}

/* 标签云 */
.qa-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- 面包屑 ---------- */
.qa-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0 0;
  font-size: 13px;
  color: var(--subtle);
}
.qa-crumb a {
  color: var(--subtle);
}
.qa-crumb a:hover {
  color: var(--green-deep);
}
.qa-crumb .bi {
  font-size: 11px;
}
.qa-crumb strong {
  color: var(--muted);
  font-weight: var(--fw-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 问题详情 ---------- */
.qa-question {
  margin-top: 16px;
}
/* 标题行：徽标（官方公告／悬赏／已解决）排在标题「左侧」，标题跟在后面。
   标题给 flex: 1 1 240px：徽标占完还有 240px 以上时标题与徽标同行、在自己那一栏里折行，
   窄屏剩不下 240px 就整块落到徽标下面一行（徽标那行仍从左边起）。 */
.qa-question-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
}
/* 徽标按标题首行（30px / 行高 40.5px）做光学对齐：徽标高 25px，下移 8px 让文字中心线对齐。 */
.qa-question-head > .qa-badge,
.qa-question-head > .qa-bounty-tag,
.qa-question-head > .qa-official-tag {
  flex: 0 0 auto;
  margin-top: 8px;
}
/* 详情标题对齐 halo.run 文章页（<h1 class="text-3xl font-medium"> = 30px/500）：
   字号提上去、字重掉回常规档。500 在站内的两档字面里没有对应，按 site.css 的口径落到常规，
   层级由字号（30 vs 正文 16）承担，和列表标题、页头标题同一个方向。 */
.qa-question-head h1 {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  font-size: 30px;
  line-height: 1.35;
  font-weight: var(--fw-text);
  letter-spacing: -.01em;
}
.qa-question-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  /* 详情页元信息对齐 halo.run 文章页的 text-sm（14px），比列表行的 12px 大一档——
     列表要密，详情要舒服。 */
  font-size: 14px;
  color: var(--subtle);
}
.qa-question-meta .dot::before {
  content: "·";
  color: var(--line);
}
/* 正文对齐 halo.run 的 prose-base：16px / 行高 1.75（原来是 15.5px / 1.8，
   中文长段落行距略收、字号回正，与行内代码、标题的 em 换算也都落在 16px 基准上）。 */
.qa-question-body {
  padding: 18px 0 4px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  overflow-wrap: break-word;
}
.qa-question-body p {
  margin: 0 0 14px;
}
.qa-question-body img {
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  margin: 6px 0 14px;
  max-width: min(640px, 100%);
  transition: box-shadow .15s ease;
}
.qa-question-body img:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

/* 正文里的 Markdown 链接：qa.css 之前没给 a 任何样式，链接只能是浏览器默认的蓝色下划线，
   跟站点主题色对不上。这里与 .app-rich-content / .docs-prose 一套口径：主题绿 + 细下划线，
   悬停加深一档。回答正文同一份规则，两个容器类名都要带上。 */
.qa-question-body a,
.qa-answer-body .qa-answer-content a {
  color: var(--green-deep);
  font-weight: var(--fw-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.qa-question-body a:hover,
.qa-answer-body .qa-answer-content a:hover {
  color: #006f59;
}

/* 正文里的 Markdown 标题、列表、引用：qa.css 之前只给了 p 和 img，
   标题于是落进 site.css 落地页那一套大字号（h2 = clamp(28px, 8vw, 42px)，
   375px 下正好 30px），公告正文的「## 更新内容」比页面标题（21px）还大还粗，
   层级直接倒过来。这里按正文尺度收回，做法与 .app-rich-content / .docs-prose 一致。 */
.qa-question-body h1,
.qa-question-body h2,
.qa-answer-body .qa-answer-content h1,
.qa-answer-body .qa-answer-content h2 {
  margin: 20px 0 10px;
  font-size: 1.15em;
  line-height: 1.45;
  font-weight: var(--fw-strong);
}
.qa-question-body h3,
.qa-question-body h4,
.qa-question-body h5,
.qa-question-body h6,
.qa-answer-body .qa-answer-content h3,
.qa-answer-body .qa-answer-content h4,
.qa-answer-body .qa-answer-content h5,
.qa-answer-body .qa-answer-content h6 {
  margin: 16px 0 8px;
  font-size: 1em;
  line-height: 1.5;
  font-weight: var(--fw-strong);
}
.qa-question-body ul,
.qa-question-body ol,
.qa-answer-body .qa-answer-content ul,
.qa-answer-body .qa-answer-content ol {
  margin: 0 0 14px;
  padding-left: 1.4em;
}
.qa-question-body li + li,
.qa-answer-body .qa-answer-content li + li {
  margin-top: 4px;
}
.qa-question-body blockquote,
.qa-answer-body .qa-answer-content blockquote {
  margin: 0 0 14px;
  padding: 6px 0 6px 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.qa-question-body blockquote p,
.qa-answer-body .qa-answer-content blockquote p {
  margin: 0;
}
/* 行内代码：site.css 里只有 .docs-prose / .app-rich-content 这类作用域管过 code，
   问答正文的 `xxx` 一直是用正文字体渲染的，看起来跟普通文字一样。
   pre.qa-code 自己有等宽字体，这里用 :not(pre) 把行内的挑出来。 */
.qa-question-body :not(pre) > code,
.qa-answer-body .qa-answer-content :not(pre) > code {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--soft);
  padding: 1px 5px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* halo.run 的 prose 口径：code 为 .875em / 走加粗档，和正文的对比照它来。 */
  font-size: .875em;
  font-weight: var(--fw-strong);
}
.qa-code {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--code);
  color: #e8e8ea;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: auto;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
}
.qa-code code {
  background: none;
  padding: 0;
  color: inherit;
}
/* 表格：窄屏横向滚动，观感与后台富文本正文（.app-rich-content table）保持一致 */
.qa-question-body table,
.qa-answer-body .qa-answer-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 14px;
  -webkit-overflow-scrolling: touch;
}
.qa-question-body th,
.qa-question-body td,
.qa-answer-body .qa-answer-content th,
.qa-answer-body .qa-answer-content td {
  min-width: 92px;
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  line-height: 1.6;
}
.qa-question-body th,
.qa-answer-body .qa-answer-content th {
  background: var(--soft);
  font-weight: var(--fw-text);
}
.qa-question-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0 16px;
}
.qa-question-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.qa-question-actions .push {
  margin-left: auto;
}

/* ---------- 回答区 ---------- */
.qa-answers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding: 18px 0 14px;
}
.qa-answers-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: var(--fw-strong);
}
/* 回答/讨论编辑器上方的标题（原来是写在标签里的内联样式，字重也走变量） */
.qa-reply-head {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: var(--fw-strong);
}
.qa-answer {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.qa-foot-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 操作按钮改 ghost（iotheme 的 as-action 画法）：无边框纯文字，悬停浮出 soft 底，
   一排按钮不再是一排描边盒子；「有用」是主操作，单独给浅绿底。 */
.qa-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: none; /* 同一个类也用在「编辑」这类 <a> 上，别带下划线 */
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.qa-act-btn:hover {
  background: var(--soft);
  color: var(--green-deep);
}
.qa-act-btn .bi {
  font-size: 12.5px;
}
.qa-act-btn b {
  font-weight: var(--fw-text);
}
.qa-act-btn.sm {
  padding: 3px 10px;
  font-size: 12px;
}
.qa-act-btn.sm .bi {
  font-size: 12px;
}
/* 有用（投票）按钮：对齐 iotheme btn-vote 的浅底 pill，liked 转实心。 */
.qa-like-btn {
  background: rgba(0, 180, 138, .10);
  color: #008f6e;
}
.qa-like-btn:hover {
  background: rgba(0, 180, 138, .18);
  color: var(--green-deep);
}
.qa-like-btn.liked {
  background: var(--green-deep);
  color: #fff;
}
.qa-like-btn.liked:hover {
  background: var(--green-deep);
  color: #fff;
}
.qa-answer-body {
  min-width: 0;
  flex: 1;
}
/* 被采纳的回答：整条浅绿底 + 「最佳答案」徽标，不再画左侧竖色条。 */
.qa-answer.is-accepted {
  padding: 18px 16px;
  border-radius: 10px;
  background: var(--soft-blue);
}
.qa-best-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 180, 138, .14);
  color: #008f6e;
  font-size: 12px;
  font-weight: var(--fw-text);
}
.qa-answer-body .qa-answer-content {
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.qa-answer-body .qa-answer-content p {
  margin: 0 0 12px;
}
.qa-answer-body .qa-answer-content img {
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  max-width: min(560px, 100%);
  margin: 6px 0 12px;
}
.qa-answer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--subtle);
}
/* 回答头部（iotheme as-head 画法）：40px 头像 + 「名字+头衔 / 时间」两行块；
   时间跟着作者走，行尾的操作条只留操作。 */
.qa-answer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.qa-answer-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.qa-answer-user-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.qa-answer-head .qa-answer-user {
  font-weight: var(--fw-text);
  font-size: 14.5px;
  color: var(--text);
}
.qa-answer-when {
  font-size: 12px;
  color: var(--subtle);
}
.qa-answer-foot .adopt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green-deep);
  font-weight: var(--fw-text);
}

/* 评论 */
.qa-comments {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.qa-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.qa-comments-head b {
  font-size: 14px;
  font-weight: var(--fw-text);
  color: var(--text);
}
.qa-comments-sort {
  display: flex;
  align-items: center;
  gap: 2px;
}
.qa-comments-sort a {
  padding: 3px 9px;
  border-radius: 6px;
  color: var(--subtle);
  font-size: 12.5px;
  transition: color .15s ease, background .15s ease;
}
.qa-comments-sort a:hover {
  background: var(--soft);
  color: var(--text);
}
.qa-comments-sort a.active {
  background: var(--soft-blue);
  color: var(--green-deep);
  font-weight: var(--fw-text);
}
.qa-comments-sort span {
  width: 1px;
  height: 10px;
  background: var(--line);
}
.qa-comment {
  display: flex;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.qa-comments .qa-comment:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}
.qa-comment > .qa-avatar {
  margin-top: 2px;
}
.qa-comment-replies {
  margin-top: 2px;
}
.qa-comment-replies .qa-comment {
  margin: 0;
  padding: 8px 0;
  gap: 8px;
  border-bottom: 0;
}
.qa-comment-replies .qa-comment:last-child {
  padding-bottom: 0;
}
.qa-comment-replies .qa-avatar {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.qa-replies-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .15s ease;
}
.qa-replies-more:hover {
  color: var(--green-deep);
}
.qa-replies-more .bi {
  font-size: 12px;
}
.qa-comment-main {
  min-width: 0;
  flex: 1;
}
.qa-comment-main p {
  margin: 3px 0 0;
}
.qa-comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  line-height: 1.5;
}
.qa-comment-user {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.qa-comment-head b {
  font-weight: var(--fw-text);
  color: var(--text);
}
.qa-comment-head .u-title {
  align-self: center;
}
.qa-comment-time {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  gap: 8px;
  color: var(--subtle);
  font-size: 12px;
}
.qa-comment-head time {
  color: var(--subtle);
  font-size: 12px;
}
.qa-comment-text {
  color: var(--text);
  line-height: 1.65;
}
.qa-comment-text .at {
  color: var(--green-deep);
}
.qa-comment-ops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
}
.qa-comment-ops button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--subtle);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .15s ease;
}
.qa-comment-ops button:hover {
  color: var(--green-deep);
  background: none;
}
.qa-comment-ops button .bi {
  font-size: 13.5px;
}
.qa-comment-ops button b {
  font-weight: var(--fw-text);
}
.qa-comment-ops button.liked {
  color: var(--green-deep);
}
.qa-comment-ops button.liked:hover {
  color: var(--green-deep);
  background: none;
}
.qa-comment-head .reply-to {
  color: var(--subtle);
  font-size: 12.5px;
}
.qa-comment-post {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.qa-comment-post > .qa-avatar {
  margin-top: 2px;
}
.qa-comment-editor {
  flex: 1;
  min-width: 0;
}
.qa-comment-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--subtle);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.qa-comment-trigger:hover {
  border-color: var(--green-deep);
  background: var(--surface);
  color: var(--muted);
}
.qa-comment-trigger .bi {
  font-size: 13.5px;
}
.qa-comment-post .qa-comment-input {
  display: none;
}
.qa-comment-post.open .qa-comment-trigger {
  display: none;
}
.qa-comment-post.open .qa-comment-input {
  display: flex;
}
.qa-comment-input {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qa-comment-input input {
  flex: 1;
  min-width: 0;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease;
}
.qa-comment-input input:focus {
  border-color: var(--green-deep);
}
.qa-comment-input button {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.qa-comment-input button:hover {
  border-color: var(--green-deep);
  color: var(--green-deep);
}
.qa-comment-input button.cancel,
.qa-comment-input button.cancel:hover {
  border-color: transparent;
  background: none;
  color: var(--subtle);
}
.qa-comment-input button.cancel:hover {
  color: var(--text);
}

/* 盒内评论行去掉发丝线（iotheme 的 as-comments-item 靠间距分行的画法）。 */
.qa-comments.is-answer .qa-comment {
  padding: 10px 0;
  border-bottom: 0;
}
.qa-comments.is-answer .qa-comment-replies .qa-comment {
  padding: 8px 0;
}

/* ---------- 编辑器 ---------- */
.qa-editor {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.qa-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  flex-wrap: wrap;
}
.qa-editor-toolbar button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.qa-editor-toolbar button:hover {
  background: var(--surface);
  color: var(--text);
}
/* 上传中：按钮禁用，光标给个「忙」的暗示 */
.qa-editor-toolbar button[disabled] {
  opacity: .45;
  cursor: progress;
}
.qa-editor-toolbar .sep {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--line);
}
.qa-editor-toolbar .hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--subtle);
}
.qa-editor textarea {
  display: block;
  width: 100%;
  min-height: 150px;
  border: 0;
  resize: vertical;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  outline: none;
}
.qa-editor textarea::placeholder {
  color: var(--subtle);
}
.qa-editor-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  font-size: 12.5px;
  color: var(--subtle);
}
.qa-editor-foot .btn {
  margin-left: auto;
  font-size: 14px;
}
.qa-editor-foot .bi {
  margin-right: 3px;
}

/* ---------- 提问页 ---------- */
.qa-ask-main {
  min-width: 0;
}
.qa-ask-title-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qa-ask-title-input:focus {
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(0, 180, 138, .12);
}
.qa-field-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--subtle);
}
.qa-field-hint .bi {
  color: var(--green-deep);
}
.qa-form-label {
  display: block;
  margin: 22px 0 10px;
  font-size: 14.5px;
  font-weight: var(--fw-text);
}
.qa-form-label small {
  margin-left: 8px;
  font-weight: var(--fw-text);
  color: var(--subtle);
  font-size: 12.5px;
}
.qa-select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none;
}
/* 提问页的下拉被 site-controls.js 包成 .site-select-control，而该控件在 site.css
   里是 width:auto，会把整行的分类框缩成文字宽度。这里补回满宽，并让触发器
   的排版与原生 .qa-select 一致，避免增强前后视觉跳变。 */
.qa-ask-main .site-select-control {
  width: 100%;
}
.qa-ask-main .site-select-control .site-select-trigger {
  min-height: 45px;
  padding: 11px 32px 11px 14px;
  border-radius: 8px;
  font-size: 15px;
}
.qa-chip-input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
/* 标签输入框是容器内的裸输入：site.css 的全局 input 描边带三个 :not()，
   特异性 (0,3,1)，必须用同样带属性的选择器才盖得住，否则会在 chip 容器里
   多画出一个带圆角的输入框。 */
.qa-ask-main .qa-chip-input input[type="text"]:not([type="hidden"]) {
  flex: 1;
  min-width: 140px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: none;
}
.qa-chip-input .qa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--soft-blue);
  color: var(--green-deep);
  font-size: 13px;
}
.qa-chip-input .qa-chip button {
  border: 0;
  background: none;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.qa-suggest-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--subtle);
}
.qa-ask-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.qa-ask-actions .btn {
  font-size: 15px;
}
.qa-ask-actions .agree {
  font-size: 12.5px;
  color: var(--subtle);
}
.qa-ask-actions .agree a {
  color: var(--green-deep);
}

/* 提问须知卡 */
.qa-guide-list {
  margin: 0;
  padding: 0;
}
.qa-guide-list li {
  list-style: none;
  display: flex;
  gap: 9px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}
.qa-guide-list .bi {
  color: var(--green-deep);
  font-size: 13px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* 详情侧栏 · 问题状态 */
.qa-status-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}
.qa-status-rows .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}
.qa-status-rows .row b {
  color: var(--text);
  font-weight: var(--fw-strong);
}
.qa-participants {
  display: flex;
  margin-top: 4px;
}
.qa-participants .qa-avatar {
  border: 2px solid var(--surface);
  margin-left: -6px;
}
.qa-participants .qa-avatar:first-child {
  margin-left: 0;
}
.qa-related-list {
  margin: 0;
  padding: 0;
}
/* 侧栏列表行：参考站的排行列是「单行省略标题 + 紧排 + 发丝线」，一条只占 26px 左右；
   原来标题能折两行，六条就把卡片撑得很长。答复数固定在行尾。 */
.qa-related-list li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.5;
}
.qa-related-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.qa-related-list a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-related-list a:hover {
  color: var(--green-deep);
}
.qa-related-list em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  color: var(--subtle);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  .qa-layout,
  .qa-layout-noside {
    grid-template-columns: minmax(0, 1fr);
  }
  .qa-side {
    display: none;
  }
}
@media (max-width: 680px) {
  .qa-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 0 24px;
  }
  .qa-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .qa-item {
    gap: 10px;
    padding: 14px 4px;
  }
  /* 头像收到 32px（iotheme 移动端同款），元信息行让给标题和数字。 */
  .qa-item > .qa-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
    margin-top: 2px;
  }
  /* 移动端分页只留上一页/下一页（iotheme 的做法）：数字 chip 和省略号全部收起。 */
  .qa-pager a.num,
  .qa-pager span.num,
  .qa-pager .gap {
    display: none;
  }
  .qa-question-head {
    gap: 6px 10px;
  }
  .qa-question-head > .qa-badge,
  .qa-question-head > .qa-bounty-tag,
  .qa-question-head > .qa-official-tag {
    margin-top: 4px; /* 23px 标题首行（行高 31px）的光学对齐 */
  }
  .qa-question-head h1 {
    /* 桌面标题提到 30px 后，移动端同步上抬一点；375px 下仍然一屏内能读完两行。 */
    font-size: 23px;
  }
  .qa-question-meta {
    gap: 8px 12px;
  }
  .qa-question-actions {
    flex-wrap: wrap;
  }
  .qa-answer {
    gap: 12px;
  }
  .qa-answer-foot {
    gap: 8px 12px;
  }
  .qa-answer-foot .qa-foot-actions {
    margin-left: 0;
    flex: 0 0 100%;
  }
  .qa-vote {
    padding: 14px 14px 16px;
  }
}

/* 积分与悬赏 */
.qa-bounty {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.qa-bounty-opt {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.qa-bounty-opt:hover {
  border-color: var(--green-deep);
  color: var(--green-deep);
}
.qa-bounty-opt.active {
  border-color: var(--green-deep);
  color: var(--green-deep);
  background: var(--soft-blue);
  font-weight: var(--fw-text);
}
.qa-bounty-hint {
  margin: 10px 0 0;
  color: var(--subtle);
  font-size: 12.5px;
  line-height: 1.6;
}
.qa-bounty-hint .bi {
  margin-right: 4px;
}
.qa-bounty-hint b {
  color: var(--green-deep);
  font-weight: var(--fw-strong);
}
.qa-bounty-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid rgba(176, 141, 46, .30);
  background: rgba(176, 141, 46, .07);
  color: #a07d1c;
  font-size: 11px;
  font-weight: var(--fw-text);
  line-height: 1.55;
  white-space: nowrap;
  vertical-align: 2px;
}
.qa-bounty-tag .bi {
  font-size: 10px;
}
.qa-bounty-tag.lg {
  font-size: 12px;
  padding: 3px 9px;
}
.qa-bounty-tag.lg .bi {
  font-size: 11.5px;
}
.qa-rewarded {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a07d1c;
  font-size: 12px;
}
.qa-signin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.qa-signin-head h3 {
  margin: 0;
}
.qa-signin-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--subtle);
  font-size: 12px;
  font-weight: var(--fw-text);
  white-space: nowrap;
}
.qa-signin-state .bi {
  font-size: 11.5px;
}
.qa-signin-state.on {
  border-color: rgba(0, 180, 138, .30);
  background: rgba(0, 180, 138, .08);
  color: #008f6e;
}
.qa-signin-tip {
  margin: 10px 0 12px;
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.6;
}
.qa-signin-done {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 180, 138, .25);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0, 180, 138, .10), rgba(13, 148, 136, .05));
  color: #008f6e;
  font-size: 12.5px;
  font-weight: var(--fw-text);
}
.qa-signin-done[hidden] {
  display: none;
}
.qa-signin-done .bi {
  color: var(--green-deep);
  font-size: 15px;
}
.qa-signin-action .btn {
  font-size: 14px;
}
.qa-signin-rank {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.qa-signin-rank > b {
  font-size: 13px;
  font-weight: var(--fw-strong);
  color: var(--text);
}
.qa-signin-rank ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.qa-signin-rank li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .15s ease;
}
.qa-signin-rank li:hover {
  background: var(--soft);
}
.qa-signin-rank .qa-avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.qa-signin-rank .who {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.qa-signin-rank .who b {
  font-size: 13px;
  font-weight: var(--fw-text);
  color: var(--text);
}
.qa-signin-rank .who em {
  font-style: normal;
  font-size: 11px;
  color: var(--subtle);
}
.qa-signin-rank .streak {
  flex-shrink: 0;
  font-size: 11.5px;
  color: #a07d1c;
}

/* 投票 */
.qa-vote {
  margin-top: 18px;
  padding: 16px 18px 18px;
  border-radius: 10px;
  background: var(--soft-blue);
}
.qa-vote-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.qa-vote-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 9px;
  border-radius: 6px;
  background: var(--green-deep);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-text);
}
.qa-vote-tag .bi {
  font-size: 12.5px;
}
.qa-vote-head b {
  font-size: 14.5px;
  font-weight: var(--fw-strong);
  color: var(--text);
}
.qa-vote-meta {
  font-size: 12px;
  color: var(--subtle);
}
.qa-vote-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.qa-vote-option {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 470px;
  padding: 9px 12px;
  border: 1px solid var(--surface);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.qa-vote-option .fill {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: calc(var(--p, 0) * 1%);
  background: rgba(0, 180, 138, .13);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
.qa-vote:not(.voted) .qa-vote-option .fill {
  width: 0;
}
.qa-vote-option .label,
.qa-vote-option .num {
  position: relative;
  z-index: 1;
}
.qa-vote-option .num {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: var(--fw-strong);
  color: var(--text);
  opacity: 0;
  transition: opacity .3s ease .15s;
}
.qa-vote.voted .qa-vote-option .num {
  opacity: 1;
}
.qa-vote:not(.voted) .qa-vote-option:hover,
.qa-vote:not(.voted) .qa-vote-option.selected {
  border-color: var(--green-deep);
  color: var(--green-deep);
}
.qa-vote.voted .qa-vote-option {
  cursor: default;
}
.qa-vote.voted .qa-vote-option.is-pick {
  color: var(--green-deep);
  font-weight: var(--fw-text);
}
.qa-vote.voted .qa-vote-option.is-pick .fill {
  background: rgba(0, 180, 138, .30);
}
.qa-vote.voted .qa-vote-option.is-pick .num {
  color: var(--green-deep);
}
.qa-vote-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--subtle);
}
.qa-vote-foot b {
  color: var(--text);
}
.qa-vote-submit {
  margin-top: 14px;
  min-width: 188px;
}
.qa-vote.voted .qa-vote-submit {
  opacity: .55;
  pointer-events: none;
}
.qa-vote-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(0, 180, 138, .10);
  color: #008f6e;
  font-size: 11px;
  font-weight: var(--fw-text);
  line-height: 1.55;
  white-space: nowrap;
  vertical-align: 2px;
}
.qa-vote-pill .bi {
  font-size: 10px;
}

/* 管理员置顶的问题：只用标题前的琥珀旗标（iotheme 的 put-top 同位），不再画左侧色条。 */
.qa-pin-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(160, 125, 28, .12);
  color: #a07d1c;
  font-size: 11px;
  font-weight: var(--fw-text);
  line-height: 1.55;
  white-space: nowrap;
  vertical-align: 2px;
}
.qa-pin-tag .bi {
  font-size: 10px;
}

/* 空状态卡片 */
.qa-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--subtle);
  font-size: 13.5px;
}
.qa-empty .bi {
  display: block;
  margin: 0 auto 8px;
  font-size: 24px;
  color: var(--line);
}

/* 最后一条回答去掉底部分隔线 */
.qa-answer.qa-answer-last {
  border-bottom: 0;
}

/* 楼中楼回复目标提示（编辑器内的「回复 @某某」） */
.qa-reply-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: 3px;
  background: rgba(0, 180, 138, .10);
  color: #008f6e;
  font-size: 12px;
}
.qa-reply-target b {
  font-weight: var(--fw-text);
}
.qa-reply-clear {
  border: 0;
  background: none;
  padding: 0 1px;
  cursor: pointer;
  color: inherit;
  font-size: 12px;
  line-height: 1;
}

/* 提问表单：错误横幅 + 投票表单 */
.qa-form-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
  font-size: 13px;
}
.qa-poll-form {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
}
.qa-poll-form .qa-select {
  width: 100%;
}
.qa-poll-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.qa-poll-deadline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--subtle);
}

/* ---------- 后台 · 问答社区（用户管理 / 积分规则 / 积分明细） ----------
   .au-filter 样式统一在 site.css 定义（含移动端横向滑动），这里不再重复。 */
.au-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.au-user small {
  display: block;
  color: var(--subtle);
  font-size: 12px;
  font-weight: var(--fw-text);
}
.au-points b {
  font-weight: var(--fw-strong);
  color: var(--text);
}
.au-points em {
  font-style: normal;
  color: #a07d1c;
  font-size: 12px;
  margin-left: 4px;
}
.au-act {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.au-act:hover {
  color: var(--green-deep);
}
/* 已置顶的问题：按钮保持高亮，方便一眼看出哪些还在顶上。 */
.au-act.is-active {
  color: var(--green-deep);
  font-weight: var(--fw-text);
}
.au-act.danger:hover {
  color: #e11d48;
}
.au-act + .au-act {
  margin-left: 10px;
}
/* 问题标题后的「置顶」小旗。 */
.au-pinned-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  color: var(--green-deep);
}
.au-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px 18px;
  padding: 16px 18px;
}
.au-rule label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.au-rule label small {
  color: var(--subtle);
}
.au-rule .au-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.au-rule input {
  width: 90px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface);
}
.au-rule .unit {
  color: var(--subtle);
  font-size: 12.5px;
}
.au-admin-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--subtle);
}
@media (max-width: 860px) {
  .au-table-wrap {
    overflow-x: auto;
  }
}
/* 行内删除表单：嵌入按钮组时不改变布局。 */
.qa-inline-form {
  display: inline-flex;
  margin: 0;
}
.qa-inline-form .qa-act-btn.is-danger {
  color: #c0392b;
}
.qa-inline-form .qa-act-btn.is-danger:hover {
  background: #fdf0ee;
}

/* ===== 评论区改版：收起态、本人删除 ===== */

/* 删除等操作回跳后的结果提示（复用 site.css 的 .admin-alert 外观）。 */
.qa-flash {
  margin: 18px 0 0;
}

/* 回答下的评论区：收起时完全不占位（[hidden] 已在 site.css 兜底）。
   展开后归进一块浅灰圆角盒（iotheme as-comments-box 的画法），
   评论和输入框读成一组，不再只是正文下面接着的一串。 */
.qa-comments.is-answer {
  margin-top: 14px;
  padding: 14px 16px;
  border-top: 0;
  border-radius: 10px;
  background: var(--soft);
}
/* 盒内的评论入口不能再是 soft 底（和盒子糊在一起），换成白底浮出来。 */
.qa-comments.is-answer .qa-comment-trigger {
  background: var(--surface);
}
.qa-comments.is-answer .qa-comment-trigger:hover {
  background: var(--surface);
}
/* 展开后的输入行对齐 iotheme 的 as-comments-input：白底圆角字段 + 实心发送键。
   选择器带 [type="text"] 抬特异性，压过 site.css 的全局 input 描边（(0,3,1)）。 */
.qa-comments.is-answer .qa-comment-input input[type="text"] {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.qa-comments.is-answer .qa-comment-input input[type="text"]:focus {
  border-color: var(--green-deep);
}
.qa-comments.is-answer .qa-comment-input button.send {
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--green-deep);
  color: #fff;
}
.qa-comments.is-answer .qa-comment-input button.send:hover {
  background: #006f59;
  color: #fff;
}

/* 未登录时的评论入口。 */
.qa-comment-trigger.is-login {
  text-decoration: none;
  color: var(--muted);
}

/* 本人评论的删除：与赞/回复同一视觉层级，悬停才转红。 */
.qa-comment-del {
  display: inline-flex;
  margin: 0;
}
.qa-comment-del button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--subtle);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .15s ease;
}
.qa-comment-del button .bi {
  font-size: 13.5px;
}
.qa-comment-del button:hover {
  color: #e11d48;
}

@media (max-width: 680px) {
  .qa-comments-head {
    flex-wrap: wrap;
  }
}

/* ============================================================
   字重：全文件只用 --fw-text / --fw-strong 两个值（定义在 site.css 的 :root）。
   中文正文挑不到带 Medium 的字面时，450/500 一律落 Regular、550/600/650/700 一律落
   Bold，中间值是假层级——实测同一段文字 400=450=500 渲染宽度完全一致，
   550=600=650=700 也完全一致。层级靠字号和配色区分，不靠字重堆档位。
   --fw-text：正文、元信息、列表标题、页签、徽标、按钮文字、表单标签、作者名。
   --fw-strong：页面/区块标题、独立统计数字、头像缩写。
   ============================================================ */

/* ---------- 官方公告 ----------
   公告是 qa_questions 里 category = '公告' 的一类内容：列表有独立页签，
   详情页去掉「待解决 / 悬赏 / 投票」这些问答语义，官网首页再取最新几条。
   配色沿用 .qa-badge.solved 的绿色系，与置顶的琥珀色区分开。 */
.qa-official-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(0, 180, 138, .13);
  color: #008f6e;
  font-size: 11px;
  font-weight: var(--fw-strong);
  line-height: 1.55;
  white-space: nowrap;
  vertical-align: 2px;
}
.qa-official-tag .bi { font-size: 10px; }
.qa-official-tag.lg {
  margin-right: 0;
  padding: 3px 10px;
  font-size: 12.5px;
}
.qa-official-tag.lg .bi { font-size: 12px; }
.qa-official-ink { color: #008f6e; }

/* 公告条：列表行唯一的背景强调（浅绿渐变），置顶不再画色条所以互不干扰。 */
.qa-item.is-official {
  background: linear-gradient(90deg, rgba(0, 180, 138, .05), rgba(0, 180, 138, 0) 60%);
}
.qa-tabs a.official {
  color: #008f6e;
}
.qa-tabs a.official .bi {
  font-size: 13px;
  margin-right: 3px;
}
.qa-tabs a.official.active {
  color: #008f6e;
}
.qa-tabs a.official.active::after {
  background: #00b48a;
}

/* 公告列表用与「相关问题」同一套行（单行省略 + 时间靠右），两张卡片读起来是一家的。 */
.qa-announce-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.qa-announce-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.qa-announce-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.qa-announce-list a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-announce-list a:hover { color: #008f6e; }
.qa-announce-list em {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 12px;
  font-style: normal;
}

/* 面包屑末级标题在窄屏收起：它与下方 h1 一字不差，挤成省略号只剩噪音；
   路径两级（社区 › 分类）都是完整可点的，宽度也放得下。 */
@media (max-width: 680px) {
  .qa-crumb .qa-crumb-tail,
  .qa-crumb strong {
    display: none;
  }
}