@charset "UTF-8";
/* MuMu模拟器 常见问题 / 文章页样式
 *
 * 复用主站设计语言：
 *   主色 #3485ff（hover #01a4ff / active #066be0）
 *   标题色 #09090a  正文色 rgba(47,47,48,.75)
 *   页面底色 #eef5ff  卡片白底  圆角 .05333rem
 *   栅格与 index.html 一致：max-width 17.06667rem，1rem = 75px
 */

:root {
  --c-brand: #3485ff;
  --c-brand-h: #01a4ff;
  --c-brand-a: #066be0;
  --c-title: #09090a;
  --c-text: rgba(47, 47, 48, .75);
  --c-sub: rgba(47, 47, 48, .5);
  --c-faint: rgba(47, 47, 48, .34);
  --c-line: rgba(47, 47, 48, .1);
  --c-bg: #eef5ff;
  --c-card: #fff;
  --r-sm: .05333rem;
  --r-md: .10667rem;
  --r-lg: .16rem;
  --shadow: 0 .02667rem .10667rem rgba(9, 9, 10, .04);
  --shadow-h: 0 .08rem .26667rem rgba(52, 133, 255, .14);
}

/* ── 基础 ─────────────────────────────────────── */

.faq-page {
  background: var(--c-bg);
  min-height: 100%;
}

.faq-page a {
  color: inherit;
}

/* 顶栏是 fixed，内容整体下移一个栏高 */
.faq-main {
  padding-top: .85333rem;
}

.faq-wrap {
  max-width: 17.06667rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 .53333rem;
  position: relative;
}

/* ── 页头 ─────────────────────────────────────── */

.faq-hero {
  background: linear-gradient(180deg, #dfeaff 0%, var(--c-bg) 100%);
  padding: .64rem 0 .48rem;
}

.faq-hero h1 {
  font-size: .42667rem;
  color: var(--c-title);
  font-weight: 500;
  letter-spacing: .01333rem;
}

.faq-hero .sub {
  font-size: .18667rem;
  color: var(--c-sub);
  margin-top: .13333rem;
}

/* ── 搜索框 ───────────────────────────────────── */

.faq-search {
  margin-top: .32rem;
  max-width: 6.4rem;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0 .16rem;
  height: .53333rem;
  box-sizing: border-box;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.faq-search:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 .04rem rgba(52, 133, 255, .1);
}

.faq-search .s-icon {
  width: .21333rem;
  height: .21333rem;
  flex: none;
  opacity: .4;
}

.faq-search input {
  flex: 1;
  border: 0;
  height: 100%;
  background: none;
  font-size: .18667rem;
  color: var(--c-title);
  padding: 0 .13333rem;
  min-width: 0;
}

.faq-search input::placeholder {
  color: var(--c-faint);
}

.faq-search .s-clear {
  flex: none;
  display: none;
  width: .26667rem;
  height: .26667rem;
  border-radius: 50%;
  border: 0;
  font-size: .21333rem;
  line-height: 1;
  color: var(--c-sub);
  background: rgba(47, 47, 48, .06);
  cursor: pointer;
}

.faq-search .s-clear:hover {
  background: rgba(47, 47, 48, .12);
  color: var(--c-title);
}

/* ── 分类筛选胶囊 ─────────────────────────────── */

.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .13333rem;
  padding: .32rem 0 .05333rem;
}

.faq-filters button {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-text);
  font-size: .17333rem;
  padding: .10667rem .22667rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
}

.faq-filters button:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.faq-filters button.active {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}

.faq-filters button .n {
  opacity: .6;
  margin-left: .04rem;
  font-size: .16rem;
}

/* ── 列表分组 ─────────────────────────────────── */

.faq-body {
  padding: .21333rem 0 .8rem;
}

.faq-group {
  margin-bottom: .48rem;
}

.faq-group-head {
  display: flex;
  align-items: baseline;
  gap: .16rem;
  padding: .16rem 0 .21333rem;
  flex-wrap: wrap;
}

.faq-group-head h2 {
  font-size: .26667rem;
  color: var(--c-title);
  font-weight: 500;
  position: relative;
  padding-left: .16rem;
}

.faq-group-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .04rem;
  bottom: .04rem;
  width: .05333rem;
  border-radius: .02667rem;
  background: var(--c-brand);
}

.faq-group-head .count {
  font-size: .16rem;
  color: var(--c-faint);
}

/* ── 问答卡片 ─────────────────────────────────── */

.faq-list {
  display: grid;
  gap: .21333rem;
}

.faq-item {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: .32rem .34667rem;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.faq-item:hover {
  transform: translateY(-.02667rem);
  border-color: rgba(52, 133, 255, .4);
  box-shadow: var(--shadow-h);
}

.faq-item h3 {
  display: flex;
  align-items: flex-start;
  gap: .13333rem;
  font-size: .24rem;
  line-height: 1.5;
  color: var(--c-title);
  font-weight: 500;
}

.faq-item h3 .q-mark {
  flex: none;
  width: .32rem;
  height: .32rem;
  border-radius: var(--r-sm);
  background: rgba(52, 133, 255, .1);
  color: var(--c-brand);
  font-size: .18667rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .04rem;
}

.faq-item h3 a:hover {
  color: var(--c-brand);
}

/* 列表页只放摘要，完整正文在文章页 */
.faq-summary {
  font-size: .18667rem;
  line-height: 1.78;
  color: var(--c-text);
  margin-top: .16rem;
  padding-left: .45333rem;
}

/* ── 卡片脚：发布时间 / 访问量 / 入口 ─────────── */

.faq-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .21333rem;
  margin-top: .24rem;
  padding-left: .45333rem;
}

.faq-more {
  display: inline-flex;
  align-items: center;
  gap: .06667rem;
  font-size: .17333rem;
  color: var(--c-brand);
  transition: gap .25s ease;
}

.faq-more:hover {
  color: var(--c-brand-h);
  gap: .12rem;
}

.faq-tag {
  font-size: .16rem;
  color: var(--c-sub);
  background: rgba(47, 47, 48, .05);
  border-radius: 1rem;
  padding: .04rem .13333rem;
}

/* 发布时间 / 访问量 —— 与站内文章页保持同一种写法 */
.faq-meta {
  display: inline-flex;
  align-items: center;
  gap: .16rem;
  font-size: .16rem;
  color: var(--c-faint);
  margin-left: auto;
}

.faq-meta span {
  white-space: nowrap;
}

.faq-empty {
  text-align: center;
  padding: 1.06667rem .26667rem;
  color: var(--c-sub);
  font-size: .18667rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.faq-empty .big {
  display: block;
  font-size: .53333rem;
  margin-bottom: .16rem;
  opacity: .5;
}

.faq-empty .tip {
  display: block;
  margin-top: .10667rem;
  font-size: .16rem;
  color: var(--c-faint);
}

/* ── 文章页 ───────────────────────────────────── */

.article-wrap {
  max-width: 12.8rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: .42667rem .53333rem 1.06667rem;
}

.breadcrumb {
  font-size: .16rem;
  color: var(--c-sub);
  padding: .10667rem 0 .32rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .08rem;
}

.breadcrumb a:hover {
  color: var(--c-brand);
}

.breadcrumb .sep {
  opacity: .4;
}

.breadcrumb .cur {
  color: var(--c-title);
}

.article-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: .53333rem .64rem .64rem;
  box-shadow: var(--shadow);
}

.article-head {
  border-bottom: 1px solid var(--c-line);
  padding-bottom: .32rem;
}

.article-head .kicker {
  display: inline-block;
  font-size: .16rem;
  color: var(--c-brand);
  background: rgba(52, 133, 255, .1);
  border-radius: 1rem;
  padding: .05333rem .16rem;
}

.article-head h1 {
  font-size: .42667rem;
  line-height: 1.4;
  color: var(--c-title);
  font-weight: 500;
  margin-top: .21333rem;
}

.article-head .lede {
  font-size: .2rem;
  line-height: 1.8;
  color: var(--c-text);
  margin-top: .21333rem;
}

/* 文章页的发布时间 / 访问量 */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .26667rem;
  margin-top: .26667rem;
  font-size: .17333rem;
  color: var(--c-faint);
}

/* ── 目录 ─────────────────────────────────────── */

.toc {
  background: #f7faff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: .26667rem .32rem;
  margin: .42667rem 0 0;
}

.toc h4 {
  font-size: .18667rem;
  color: var(--c-title);
  font-weight: 500;
  margin-bottom: .13333rem;
}

.toc ol {
  counter-reset: toc;
  display: grid;
  gap: .08rem;
}

.toc li {
  counter-increment: toc;
  font-size: .17333rem;
  line-height: 1.7;
  color: var(--c-text);
  padding-left: .32rem;
  position: relative;
}

.toc li::before {
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  color: var(--c-brand);
  opacity: .7;
}

.toc a:hover {
  color: var(--c-brand);
}

/* ── 正文排版 ─────────────────────────────────── */

.article-content {
  padding-top: .32rem;
  font-size: .18667rem;
  line-height: 1.9;
  color: var(--c-text);
}

.article-content h2 {
  font-size: .29333rem;
  color: var(--c-title);
  font-weight: 500;
  margin: .53333rem 0 .21333rem;
  padding-left: .18667rem;
  position: relative;
  scroll-margin-top: 1.06667rem;
}

.article-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .06667rem;
  bottom: .06667rem;
  width: .05333rem;
  border-radius: .02667rem;
  background: var(--c-brand);
}

.article-content h3 {
  font-size: .22667rem;
  color: var(--c-title);
  font-weight: 500;
  margin: .37333rem 0 .16rem;
}

.article-content h4 {
  font-size: .2rem;
  color: var(--c-title);
  font-weight: 500;
  margin: .26667rem 0 .10667rem;
}

.article-content p {
  margin: .16rem 0;
}

.article-content ul,
.article-content ol {
  margin: .16rem 0;
  padding-left: .34667rem;
}

.article-content ul li {
  list-style: disc;
  margin: .08rem 0;
}

.article-content ol li {
  list-style: decimal;
  margin: .08rem 0;
}

.article-content li::marker {
  color: var(--c-brand);
}

.article-content strong {
  color: var(--c-title);
  font-weight: 500;
}

.article-content a {
  color: var(--c-brand);
  border-bottom: 1px solid rgba(52, 133, 255, .3);
}

.article-content a:hover {
  color: var(--c-brand-h);
}

.article-content code {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: .90em;
  background: rgba(52, 133, 255, .08);
  color: #1d5fc4;
  border-radius: .04rem;
  padding: .02667rem .08rem;
  word-break: break-all;
}

.article-content pre {
  background: #0f1420;
  color: #d7e3f4;
  border-radius: var(--r-md);
  padding: .26667rem .32rem;
  overflow-x: auto;
  margin: .21333rem 0;
  font-size: .17333rem;
  line-height: 1.8;
}

.article-content pre code {
  background: none;
  color: inherit;
  padding: 0;
  white-space: pre;
}

/* ── 提示块 ───────────────────────────────────── */

.callout {
  border-radius: var(--r-md);
  padding: .21333rem .26667rem;
  margin: .26667rem 0;
  font-size: .17333rem;
  line-height: 1.8;
  border-left: .04rem solid var(--c-brand);
  background: rgba(52, 133, 255, .06);
}

.callout .ct {
  display: block;
  color: var(--c-title);
  font-weight: 500;
  margin-bottom: .05333rem;
}

.callout.warn {
  border-left-color: #f0883e;
  background: rgba(240, 136, 62, .08);
}

.callout.danger {
  border-left-color: #e5534b;
  background: rgba(229, 83, 75, .08);
}

.callout.ok {
  border-left-color: #2da44e;
  background: rgba(45, 164, 78, .08);
}

/* ── 表格 ─────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  margin: .26667rem 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .17333rem;
  min-width: 5.33333rem;
}

.article-content th,
.article-content td {
  padding: .16rem .21333rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.7;
}

.article-content th {
  background: #f7faff;
  color: var(--c-title);
  font-weight: 500;
  white-space: nowrap;
}

.article-content tr:last-child td {
  border-bottom: 0;
}

/* ── 图片 ─────────────────────────────────────── */

.figure {
  margin: .32rem 0;
}

.figure img,
.figure svg {
  width: 100%;
  display: block;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
}

.figure figcaption {
  font-size: .16rem;
  color: var(--c-faint);
  text-align: center;
  margin-top: .13333rem;
  line-height: 1.7;
}

/* ── 资料来源 ─────────────────────────────────── */

.sources {
  margin-top: .53333rem;
  padding-top: .32rem;
  border-top: 1px solid var(--c-line);
}

.sources h4 {
  font-size: .18667rem;
  color: var(--c-title);
  font-weight: 500;
  margin-bottom: .13333rem;
}

.sources ol {
  padding-left: .32rem;
}

.sources li {
  list-style: decimal;
  font-size: .16rem;
  line-height: 1.9;
  color: var(--c-sub);
  word-break: break-all;
}

.sources a {
  color: var(--c-brand);
}

.article-end {
  text-align: center;
  color: var(--c-faint);
  font-size: .16rem;
  padding: .42667rem 0 0;
}

.article-end::before,
.article-end::after {
  content: "—";
  margin: 0 .10667rem;
  opacity: .6;
}

.keywords {
  margin-top: .32rem;
  padding-top: .26667rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: .10667rem;
  align-items: center;
}

.keywords .kw-label {
  font-size: .16rem;
  color: var(--c-faint);
}

.keywords .kw {
  font-size: .16rem;
  color: var(--c-sub);
  background: rgba(47, 47, 48, .05);
  border-radius: var(--r-sm);
  padding: .04rem .13333rem;
}

/* ── 相关阅读 ─────────────────────────────────── */

.related {
  margin-top: .53333rem;
}

.related h3 {
  font-size: .26667rem;
  color: var(--c-title);
  font-weight: 500;
  margin-bottom: .26667rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .21333rem;
}

.related-card {
  display: block;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: .26667rem;
  transition: all .25s ease;
}

.related-card:hover {
  border-color: rgba(52, 133, 255, .4);
  box-shadow: var(--shadow-h);
  transform: translateY(-.02667rem);
}

.related-card .rc-cat {
  display: block;
  font-size: .16rem;
  color: var(--c-brand);
  margin-bottom: .08rem;
}

.related-card .rc-q {
  display: block;
  font-size: .18667rem;
  line-height: 1.6;
  color: var(--c-title);
}

.related-card .rc-meta {
  display: block;
  font-size: .14667rem;
  color: var(--c-faint);
  margin-top: .10667rem;
}

/* ── 上下篇 ───────────────────────────────────── */

.prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .21333rem;
  margin-top: .42667rem;
}

.prevnext a {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: .21333rem .26667rem;
  transition: all .25s ease;
  min-width: 0;
}

.prevnext a:not(.disabled):hover {
  border-color: rgba(52, 133, 255, .4);
  box-shadow: var(--shadow-h);
}

.prevnext .dir {
  display: block;
  font-size: .16rem;
  color: var(--c-faint);
  margin-bottom: .06667rem;
}

.prevnext .t {
  display: block;
  font-size: .17333rem;
  color: var(--c-title);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prevnext a:not(.disabled):hover .t {
  color: var(--c-brand);
}

.prevnext .next {
  text-align: right;
}

.prevnext .disabled {
  opacity: .5;
  cursor: default;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: .08rem;
  margin-top: .42667rem;
  background: var(--c-brand);
  color: #fff;
  font-size: .18667rem;
  padding: .16rem .34667rem;
  border-radius: var(--r-sm);
  transition: background .25s ease;
}

.back-btn:hover {
  background: var(--c-brand-h);
}

.state-box {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 1.06667rem .53333rem;
  text-align: center;
}

.state-box h2 {
  font-size: .32rem;
  color: var(--c-title);
  font-weight: 500;
  margin-bottom: .16rem;
}

.state-box p {
  font-size: .18667rem;
  color: var(--c-sub);
  line-height: 1.8;
}

/* ── 响应式：断点沿用主站 ─────────────────────── */

@media only screen and (max-width:1280px) {
  .faq-wrap {
    padding: 0 .42667rem;
  }

  .article-wrap {
    padding: .42667rem .42667rem 1.06667rem;
  }
}

@media only screen and (max-width:992px) {
  .article-card {
    padding: .42667rem .42667rem .53333rem;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width:768px) {
  .faq-wrap {
    padding: 0 .32rem;
  }

  .article-wrap {
    padding: .32rem .32rem .8rem;
  }

  .faq-hero {
    padding: .48rem 0 .37333rem;
  }

  .faq-hero h1 {
    font-size: .37333rem;
  }

  .article-head h1 {
    font-size: .34667rem;
  }

  .article-content h2 {
    font-size: .26667rem;
  }
}

@media only screen and (max-width:640px) {
  .faq-wrap {
    padding: 0 .21333rem;
  }

  .article-wrap {
    padding: .26667rem .21333rem .64rem;
  }

  .article-card {
    padding: .32rem .26667rem .42667rem;
  }

  .faq-item {
    padding: .26667rem .24rem;
  }

  /* 窄屏取消缩进，避免正文被挤成细条 */
  .faq-summary,
  .faq-foot {
    padding-left: 0;
  }

  .faq-summary {
    margin-top: .13333rem;
  }

  .faq-meta {
    margin-left: 0;
    width: 100%;
    gap: .13333rem;
  }

  .faq-hero h1 {
    font-size: .32rem;
  }

  .faq-hero .sub {
    font-size: .17333rem;
  }

  .article-head h1 {
    font-size: .29333rem;
  }

  .prevnext {
    grid-template-columns: 1fr;
  }

  .prevnext .next {
    text-align: left;
  }

  .article-content pre {
    padding: .21333rem;
    font-size: .16rem;
  }
}

/* ══ 2万条级重构新增：分页 / 变体快答 / hub链接 / 表格 / 未证实标记 ══ */
.faq-tag.hub { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

.pager {
  display: flex; align-items: center; flex-wrap: wrap; gap: .08rem;
  margin: .32rem 0 .05rem; justify-content: center;
}
.pager .pg {
  min-width: .48rem; height: .48rem; padding: 0 .13333rem;
  border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-text);
  border-radius: var(--r-sm); font-size: .18667rem; cursor: pointer;
  transition: all .15s;
}
.pager .pg:hover:not(:disabled) { border-color: var(--c-brand); color: var(--c-brand); }
.pager .pg.active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.pager .pg:disabled { opacity: .4; cursor: default; }
.pager .pg-gap { color: var(--c-faint); padding: 0 .04rem; }
.pager .pg-info { color: var(--c-sub); font-size: .17333rem; margin-left: .13333rem; }

.quick-ans {
  background: linear-gradient(180deg, #f2f8ff, #fff);
  border: 1px solid var(--c-line); border-left: .05333rem solid var(--c-brand);
  border-radius: var(--r-md); padding: .24rem .28rem; margin: 0 0 .28rem;
}
.quick-ans .qa-label {
  display: inline-block; font-size: .16rem; font-weight: 600; color: var(--c-brand);
  background: #e8f1ff; padding: .04rem .13333rem; border-radius: var(--r-sm); margin-bottom: .13333rem;
}
.quick-ans p { margin: 0; font-size: .21333rem; line-height: 1.8; color: var(--c-title); }

.hub-link {
  display: inline-block; margin-top: .10667rem; font-weight: 600; color: var(--c-brand);
  font-size: .2rem; text-decoration: none;
}
.hub-link:hover { color: var(--c-brand-h); }

.table-wrap { overflow-x: auto; margin: .21333rem 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .18667rem; }
.table-wrap th, .table-wrap td {
  border: 1px solid var(--c-line); padding: .13333rem .16rem; text-align: left; vertical-align: top;
}
.table-wrap thead th { background: #f2f5fa; color: var(--c-title); font-weight: 600; }

.unverified {
  border: 1px dashed var(--c-faint); border-radius: var(--r-md);
  padding: .18667rem .21333rem; margin: .21333rem 0;
  background: #fbfbfc; color: var(--c-sub); font-size: .18667rem; line-height: 1.75;
}
.unverified .flag {
  display: inline-block; font-size: .14667rem; font-weight: 600; color: #b26a1b;
  background: #fdf1e0; padding: .026rem .10667rem; border-radius: var(--r-sm); margin-right: .10667rem;
}

/* 变体页同页展开的完整深度图文 */
.deep-sec {
  margin-top: .4rem;
  padding-top: .32rem;
  border-top: 2px dashed var(--c-line);
}
.deep-title {
  font-size: .28rem;
  margin: 0 0 .24rem;
}
.deep-sec .toc {
  margin-bottom: .32rem;
}
.deep-origin {
  margin-top: .4rem;
  font-size: .16rem;
  color: var(--c-faint);
}