/* ===== 易歪歪 FAQ · 极简线框风（v2）=====
   设计语言：大留白、细描边(1px #e5e7eb)、无阴影、无圆角块、单色近黑文字、
   等宽字体做元信息/标签。整体黑白灰，仅用描边与间距分层。 */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#fff; color:#1a1a1a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{ color:#1a1a1a; text-decoration:none; }
mark{ background:transparent; color:#000; border-bottom:2px solid #1a1a1a; padding:0; }

/* 等宽字体：元信息、标签、序号 */
.mono,.faq-item .m,.art-meta,.faq-count,.faq-cat,.art-kicker,.faq-pager{
  font-family:"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}

/* ===== 顶栏：极细下边线，无背景色块 ===== */
.nav{
  border-bottom:1px solid #1a1a1a; position:sticky; top:0; background:#fff; z-index:20;
}
.nav .in{ max-width:900px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; gap:26px; }
.nav .brand{ font-size:16px; font-weight:700; letter-spacing:.02em; }
.nav .brand b{ font-weight:700; }
.nav a.link{ font-size:13.5px; color:#6b7280; }
.nav a.link:hover,.nav a.link.on{ color:#1a1a1a; border-bottom:1px solid #1a1a1a; padding-bottom:2px; }
.nav .sp{ flex:1; }

/* ===== 头部：标题 + 说明 + 线框搜索框 ===== */
.hero{ max-width:900px; margin:0 auto; padding:56px 24px 30px; }
.hero .kick{ font-family:Menlo,monospace; font-size:12px; color:#9ca3af; letter-spacing:.14em; text-transform:uppercase; }
.hero h1{ font-size:34px; font-weight:700; letter-spacing:-.01em; margin:10px 0 8px; }
.hero .sub{ color:#6b7280; font-size:14px; margin:0 0 26px; }
.faq-search{ display:flex; border:1px solid #1a1a1a; max-width:600px; }
.faq-search input{
  flex:1; border:0; outline:none; padding:13px 16px; font-size:15px; background:transparent; color:#1a1a1a;
}
.faq-search input::placeholder{ color:#b0b6be; }
.faq-search button{
  border:0; border-left:1px solid #1a1a1a; background:#1a1a1a; color:#fff;
  padding:0 22px; font-size:14px; cursor:pointer; letter-spacing:.08em;
}
.faq-search button:hover{ background:#fff; color:#1a1a1a; }

/* ===== 主体 ===== */
.wrap{ max-width:900px; margin:0 auto; padding:0 24px; }

/* 分类：文字 + 下划线切换，无胶囊背景 */
.faq-cats{ display:flex; flex-wrap:wrap; gap:20px; padding:22px 0 6px; border-top:1px solid #eceef0; }
.faq-cat{ font-size:12.5px; color:#9ca3af; cursor:pointer; letter-spacing:.04em; user-select:none; padding-bottom:3px; }
.faq-cat:hover{ color:#1a1a1a; }
.faq-cat.on{ color:#1a1a1a; border-bottom:1.5px solid #1a1a1a; }

.faq-count{ font-size:12px; color:#9ca3af; margin:16px 0 4px; letter-spacing:.02em; }

/* 列表项：仅靠细分隔线区分，hover 时左移一点 */
.faq-list{ margin-top:6px; }
.faq-item{
  display:block; padding:22px 0; border-bottom:1px solid #eceef0; transition:padding-left .18s ease;
}
.faq-item:hover{ padding-left:10px; }
.faq-item .q{ font-size:16px; font-weight:600; line-height:1.5; color:#1a1a1a; }
.faq-item .a{
  font-size:13.5px; color:#8a9099; line-height:1.7; margin-top:7px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.faq-item .m{ font-size:11.5px; color:#b0b6be; margin-top:10px; letter-spacing:.02em; }
.faq-item .m .tag{ color:#1a1a1a; border:1px solid #d7dae0; padding:1px 7px; margin-right:10px; }
.faq-item .m .sp{ margin:0 6px; }

/* 分页：方块线框按钮 */
.faq-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:34px 0 60px; }
.faq-pager button,.faq-pager span.pg{
  min-width:38px; height:38px; padding:0 12px; border:1px solid #d7dae0; background:#fff;
  color:#1a1a1a; font-size:13px; cursor:pointer; font-family:Menlo,monospace;
}
.faq-pager button:hover{ border-color:#1a1a1a; }
.faq-pager button.on{ background:#1a1a1a; color:#fff; border-color:#1a1a1a; cursor:default; }
.faq-pager button:disabled{ color:#cfd3d8; border-color:#eceef0; cursor:not-allowed; }
.faq-pager .jump{ margin-left:12px; font-size:12px; color:#9ca3af; }
.faq-pager .jump input{ width:54px; height:34px; border:1px solid #d7dae0; text-align:center; margin:0 5px; font-family:Menlo,monospace; }
.faq-empty{ text-align:center; color:#9ca3af; padding:70px 0; font-size:14px; }

/* ===== 文章页 ===== */
.art-head{ max-width:820px; margin:0 auto; padding:44px 24px 8px; }
.art-crumb{ font-family:Menlo,monospace; font-size:12px; color:#9ca3af; margin-bottom:18px; }
.art-crumb a{ color:#9ca3af; } .art-crumb a:hover{ color:#1a1a1a; }
.art-crumb .sep{ margin:0 8px; color:#d0d4d9; }
.art-kicker{ display:inline-block; font-size:11px; color:#9ca3af; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; }
.art-head h1{ font-size:27px; font-weight:700; line-height:1.4; margin:0; letter-spacing:-.01em; }
.art-meta{ font-family:Menlo,monospace; font-size:12px; color:#b0b6be; margin-top:14px; }
.art-meta .sp{ margin:0 6px; }

.art-wrap{ max-width:820px; margin:0 auto; padding:0 24px; }
.art-card{ padding:30px 0 10px; }
.art-lead{
  font-size:16px; color:#3a3f47; line-height:1.9; padding:20px 22px; margin:20px 0 30px;
  border-left:2px solid #1a1a1a; background:#fafafa;
}
/* 目录：无背景，仅上下细线 */
.art-toc{ border-top:1px solid #eceef0; border-bottom:1px solid #eceef0; padding:16px 0; margin-bottom:30px; }
.art-toc .t{ font-family:Menlo,monospace; font-size:11px; color:#9ca3af; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.art-toc ol{ margin:0; padding-left:20px; }
.art-toc li{ font-size:14px; line-height:1.9; }
.art-toc a{ color:#6b7280; } .art-toc a:hover{ color:#1a1a1a; border-bottom:1px solid #1a1a1a; }

.art-card h2{
  font-size:19px; font-weight:700; color:#1a1a1a; margin:36px 0 14px; padding-bottom:8px;
  border-bottom:1px solid #eceef0;
}
.art-card h3{ font-size:16px; font-weight:700; margin:24px 0 8px; }
.art-card p{ font-size:15px; color:#3a3f47; line-height:1.95; margin:0 0 15px; }
.art-card ul,.art-card ol{ margin:0 0 16px; padding-left:22px; }
.art-card li{ font-size:15px; color:#3a3f47; line-height:1.85; margin-bottom:6px; }
.art-card a{ color:#1a1a1a; border-bottom:1px solid #d7dae0; }
.art-card a:hover{ border-color:#1a1a1a; }
.k,.kbd{ font-family:Menlo,monospace; font-size:13px; border:1px solid #d7dae0; padding:1px 6px; color:#1a1a1a; }

/* 配图：细框 + 居中 */
.art-fig{ margin:28px 0; text-align:center; }
.art-fig svg,.art-fig img{ max-width:100%; height:auto; border:1px solid #eceef0; background:#fff; }
.art-fig .cap{ font-family:Menlo,monospace; font-size:12px; color:#9ca3af; margin-top:12px; line-height:1.7; }

/* 提示框：仅左细线，无底色（tip/warn 用不同粗细/虚实区分，保持黑白） */
.art-note{ border-left:2px solid #1a1a1a; padding:6px 0 6px 18px; margin:22px 0; font-size:14px; line-height:1.85; color:#3a3f47; }
.art-note .h{ display:block; font-family:Menlo,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af; margin-bottom:4px; }
.art-note.warn{ border-left-style:dashed; }

/* 步骤：等宽序号，无圆圈填色 */
.art-steps{ list-style:none; counter-reset:s; padding:0; margin:20px 0 24px; }
.art-steps li{ position:relative; padding-left:42px; margin-bottom:14px; font-size:15px; color:#3a3f47; line-height:1.9; }
.art-steps li:before{
  counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-family:Menlo,monospace; font-size:12px; color:#1a1a1a; border:1px solid #1a1a1a; width:26px; height:22px;
  line-height:22px; text-align:center;
}

/* 表格：仅横线 */
.art-table{ width:100%; border-collapse:collapse; margin:20px 0 24px; font-size:14px; }
.art-table th{ text-align:left; padding:10px 12px; border-bottom:1.5px solid #1a1a1a; font-family:Menlo,monospace; font-size:12px; letter-spacing:.04em; }
.art-table td{ padding:10px 12px; border-bottom:1px solid #eceef0; color:#3a3f47; }

/* 相关问题 + 返回 */
.art-foot{ margin-top:40px; padding-top:24px; border-top:1px solid #1a1a1a; }
.art-foot .t{ font-family:Menlo,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9ca3af; margin-bottom:14px; }
.art-rel{ display:block; font-size:14.5px; color:#1a1a1a; padding:13px 0; border-bottom:1px solid #eceef0; transition:padding-left .18s ease; }
.art-rel:hover{ padding-left:8px; }
.art-back{ display:inline-block; font-family:Menlo,monospace; font-size:13px; color:#6b7280; margin:28px 0 50px; }
.art-back:hover{ color:#1a1a1a; }
.art-src{ margin-top:28px; padding:14px 0 0; border-top:1px solid #eceef0; font-size:12.5px; color:#9ca3af; line-height:1.85; }
.art-src .h{ display:block; font-family:Menlo,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.art-src a{ color:#6b7280; border-bottom:1px solid #d7dae0; }

/* 页脚 */
.foot{ border-top:1px solid #1a1a1a; margin-top:20px; }
.foot .in{ max-width:900px; margin:0 auto; padding:26px 24px; font-family:Menlo,monospace; font-size:11.5px; color:#b0b6be; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.foot a{ color:#b0b6be; } .foot a:hover{ color:#1a1a1a; }

@media (max-width:640px){
  .hero h1{ font-size:26px; } .art-head h1{ font-size:21px; }
  .nav .in{ gap:16px; padding:14px 18px; } .nav a.link{ font-size:12.5px; }
  .hero,.wrap,.art-wrap,.art-head{ padding-left:18px; padding-right:18px; }
}