/* ==========================================================================
   mj168bot.com — MJBotApp 内页（使用说明书风）
   独立骨架：编号章节 + 参数栏 + 等宽标注
   ========================================================================== */

.mn-page { background: #fdfdfb; }

/* ---------- Hero ---------- */
.mn-hero {
  background: #fdfdfb;
  border-bottom: 1px solid rgba(10, 18, 32, .12);
  padding: 26px 0 54px;
}

.mn-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 18, 32, .12);
}

.mn-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 46px;
  align-items: center;
}

.mn-hero-grid > * { min-width: 0; }

.mn-manual {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 2.4px;
  color: #b45309;
}

.mn-hero h1 {
  margin-top: 16px;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.6px;
  color: #101418;
}

.mn-hero h1 span { color: #b45309; }

.mn-hero .lead {
  margin-top: 18px;
  max-width: 540px;
  font-size: 15.5px;
  line-height: 1.95;
  color: #4b535c;
}

.mn-hero .lead strong { color: #101418; }

.mn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mn-hero .btn-room { color: #101418; border-color: rgba(180, 83, 9, .5); background: #fff; }
.mn-hero .btn-room b { color: #b45309; }

.mn-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #7b838c;
}
.mn-hero-meta b { color: #101418; }

.mn-visual {
  border: 1px solid rgba(10, 18, 32, .12);
  padding: 8px;
  background: #fff;
}

.mn-visual img { width: 100%; }

/* ---------- 参数摘要 ---------- */
.mn-specs {
  border-bottom: 1px solid rgba(10, 18, 32, .12);
}

.mn-specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); }

.mn-spec {
  padding: 20px 22px;
  border-left: 1px solid rgba(10, 18, 32, .1);
}

.mn-spec:first-child { border-left: 0; }
.mn-spec span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; color: #7b838c; }
.mn-spec b { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; color: #101418; }
.mn-spec b.amber { color: #b45309; }

/* ---------- 通用 ---------- */
.mn-sec { padding: 64px 0; }
.mn-sec.tint { background: #f7f6f1; border-block: 1px solid rgba(10, 18, 32, .08); }

.mn-head { max-width: 720px; margin-bottom: 28px; }
.mn-head .num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, .3);
  padding: 3px 8px;
}
.mn-head h2 { margin-top: 12px; font-size: clamp(23px, 2.9vw, 33px); font-weight: 900; line-height: 1.32; color: #101418; letter-spacing: -.3px; }
.mn-head p { margin-top: 9px; font-size: 14.5px; color: #5b636c; line-height: 1.85; }
.mn-head a { color: #b45309; font-weight: 700; }

/* ---------- 界面 ---------- */
.mn-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(10, 18, 32, .12); }

.mn-screen {
  padding: 26px 24px;
  border-left: 1px solid rgba(10, 18, 32, .1);
}

.mn-screen:first-child { border-left: 0; }
.mn-screen .fig { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; color: #b45309; }
.mn-screen h3 { margin-top: 8px; font-size: 16px; font-weight: 800; color: #101418; }
.mn-screen p { margin-top: 6px; font-size: 13px; color: #5b636c; line-height: 1.8; }

/* ---------- 功能表 ---------- */
.mn-table-wrap { overflow-x: auto; border: 1px solid rgba(10, 18, 32, .12); background: #fff; }

.mn-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }

.mn-table th {
  text-align: left;
  padding: 12px 16px;
  background: #f7f6f1;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #7b838c;
  border-bottom: 1px solid rgba(10, 18, 32, .12);
}

.mn-table td { padding: 13px 16px; border-bottom: 1px solid rgba(10, 18, 32, .07); color: #4b535c; }
.mn-table tr:last-child td { border-bottom: 0; }
.mn-table td:first-child { color: #101418; font-weight: 700; }
.mn-table .yes { color: #15803d; font-weight: 700; }
.mn-table .opt { color: #b45309; font-weight: 700; }

/* ---------- 安装 ---------- */
.mn-install { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: i; }

.mn-install div {
  position: relative;
  padding: 0 22px;
  border-left: 1px solid rgba(10, 18, 32, .12);
}

.mn-install div:first-child { border-left: 0; padding-left: 0; }

.mn-install div::before {
  counter-increment: i;
  content: "STEP " counter(i);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #b45309;
}

.mn-install h3 { margin-top: 8px; font-size: 15px; font-weight: 800; color: #101418; }
.mn-install p { margin-top: 6px; font-size: 13px; color: #5b636c; line-height: 1.8; }

/* ---------- 要求 ---------- */
.mn-req { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.mn-req > div {
  border: 1px solid rgba(10, 18, 32, .12);
  padding: 24px;
  background: #fff;
}

.mn-req h3 { font-size: 15px; font-weight: 800; color: #101418; padding-bottom: 10px; border-bottom: 1px solid rgba(10, 18, 32, .08); }
.mn-req dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin-top: 12px; font-size: 13px; }
.mn-req dt { color: #7b838c; }
.mn-req dd { margin: 0; text-align: right; font-weight: 700; color: #101418; }
.mn-req dd.green { color: #15803d; }

/* ---------- 版本 ---------- */
.mn-vers { display: grid; gap: 0; border: 1px solid rgba(10, 18, 32, .12); background: #fff; }

.mn-ver {
  display: grid;
  grid-template-columns: 110px 1fr 120px;
  gap: 22px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(10, 18, 32, .07);
}

.mn-ver:last-child { border-bottom: 0; }
.mn-ver.cur { background: #fffdf5; }

.mn-ver .v { font-family: Georgia, serif; font-size: 21px; font-weight: 700; color: #101418; }
.mn-ver .v small { display: block; font-family: var(--mono); font-size: 10px; font-weight: 400; color: #7b838c; margin-top: 2px; }
.mn-ver p { font-size: 13px; color: #4b535c; line-height: 1.75; }
.mn-ver .st { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; color: #b45309; text-align: right; }
.mn-ver .st.ok { color: #15803d; }

/* ---------- 更新 ---------- */
.mn-update { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.mn-update div {
  padding: 22px;
  border: 1px solid rgba(10, 18, 32, .12);
  background: #fff;
}

.mn-update h3 { font-size: 14.5px; font-weight: 800; color: #101418; }
.mn-update p { margin-top: 6px; font-size: 13px; color: #5b636c; line-height: 1.8; }

/* ---------- 权限 ---------- */
.mn-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mn-perms li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(10, 18, 32, .1);
  background: #fff;
  font-size: 13px;
  color: #4b535c;
  line-height: 1.75;
}

.mn-perms b { color: #101418; }
.mn-perms li::before { content: "·"; color: #b45309; font-weight: 900; }

/* ---------- 性能 ---------- */
.mn-perf { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mn-perf > * { min-width: 0; }

.mn-bars { display: grid; gap: 12px; }
.mn-bar-row { display: grid; grid-template-columns: 100px 1fr 60px; align-items: center; gap: 12px; font-size: 12.5px; color: #4b535c; }
.mn-bar { height: 6px; background: #eeece4; overflow: hidden; }
.mn-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d97706, #b45309); }
.mn-bar-row b { text-align: right; font-family: var(--mono); font-size: 11px; color: #b45309; }

.mn-notes { display: grid; gap: 10px; }
.mn-notes div { padding: 15px 17px; border: 1px solid rgba(10, 18, 32, .1); background: #fff; }
.mn-notes b { display: block; font-size: 13.5px; color: #101418; }
.mn-notes span { display: block; margin-top: 3px; font-size: 12.5px; color: #5b636c; }

/* ---------- 对比 ---------- */
.mn-compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(10, 18, 32, .12); background: #fff; }
.mn-compare > div { padding: 24px 26px; }
.mn-compare > div + div { border-left: 1px solid rgba(10, 18, 32, .1); }
.mn-compare h3 { font-size: 15.5px; font-weight: 800; color: #101418; padding-bottom: 10px; border-bottom: 1px solid rgba(10, 18, 32, .08); }
.mn-compare ul { margin-top: 12px; display: grid; gap: 8px; font-size: 13px; color: #4b535c; }
.mn-compare li { display: flex; gap: 9px; line-height: 1.75; }
.mn-compare li::before { content: "—"; color: #b45309; }

/* ---------- 安全 ---------- */
.mn-safe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mn-safe li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(10, 18, 32, .1);
  background: #fff;
  font-size: 13px;
  color: #4b535c;
  line-height: 1.75;
}

.mn-safe li::before { content: "✓"; color: #15803d; font-weight: 900; flex: none; }

/* ---------- FAQ ---------- */
.mn-faq { display: grid; gap: 8px; max-width: 860px; }

.mn-acc { border: 1px solid rgba(10, 18, 32, .12); background: #fff; }

.mn-acc .acc-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #101418;
}

.mn-acc .acc-trigger::after { content: "＋"; color: #b45309; font-size: 15px; transition: transform .25s; }
.mn-acc.is-open .acc-trigger::after { transform: rotate(45deg); }

.mn-acc .acc-body { display: none; padding: 0 18px 15px; font-size: 13px; color: #5b636c; line-height: 1.85; }
.mn-acc.is-open .acc-body { display: block; }
.mn-acc .acc-body a { color: #b45309; font-weight: 700; }

/* ---------- 相关 ---------- */
.mn-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.mn-rel a {
  padding: 16px 18px;
  border: 1px solid rgba(10, 18, 32, .12);
  background: #fff;
  transition: border-color .2s, transform .2s;
}

.mn-rel a:hover { border-color: rgba(180, 83, 9, .45); transform: translateY(-2px); }
.mn-rel b { display: block; font-size: 13.5px; color: #101418; }
.mn-rel span { display: block; margin-top: 3px; font-size: 12px; color: #7b838c; }

/* ---------- CTA ---------- */
.mn-cta {
  padding: 34px 32px;
  background: #101418;
  color: #e7e3d8;
  border-top: 3px solid #b45309;
}

.mn-cta h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; color: #fff; }
.mn-cta p { margin-top: 9px; font-size: 14px; color: #a9a49a; }
.mn-cta .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.mn-cta .tg-link { border-color: rgba(245, 158, 11, .35); color: #e7e3d8; }
.mn-cta .tg-link:hover { background: rgba(245, 158, 11, .12); }
.mn-cta .btn-room { color: #e7e3d8; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .mn-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .mn-specs-grid { grid-template-columns: 1fr 1fr; }
  .mn-spec:nth-child(3) { border-left: 0; }
  .mn-screens { grid-template-columns: 1fr; }
  .mn-screen { border-left: 0; border-top: 1px solid rgba(10, 18, 32, .1); }
  .mn-screen:first-child { border-top: 0; }
  .mn-install { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .mn-install div:nth-child(3) { border-left: 0; padding-left: 0; }
  .mn-req { grid-template-columns: 1fr; }
  .mn-update { grid-template-columns: 1fr; }
  .mn-perms { grid-template-columns: 1fr; }
  .mn-perf { grid-template-columns: 1fr; }
  .mn-compare { grid-template-columns: 1fr; }
  .mn-compare > div + div { border-left: 0; border-top: 1px solid rgba(10, 18, 32, .1); }
  .mn-safe { grid-template-columns: 1fr; }
  .mn-rel { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .mn-sec { padding: 50px 0; }
  .mn-specs-grid { grid-template-columns: 1fr; }
  .mn-spec { border-left: 0; border-top: 1px solid rgba(10, 18, 32, .1); }
  .mn-spec:first-child { border-top: 0; }
  .mn-install { grid-template-columns: 1fr; }
  .mn-install div { border-left: 0; padding-left: 0; }
  .mn-ver { grid-template-columns: 1fr; gap: 8px; }
  .mn-ver .st { text-align: left; }
  .mn-rel { grid-template-columns: 1fr; }
  .mn-actions .btn { width: 100%; }
}