/* doc.css —— 内容页（教程 / FAQ）专用样式，配合 style.css 一起用 */

/* 页头在内容页里收紧一点，避免 4 个导航项挤在一起 */
.header nav{gap:22px}
.doc{max-width:840px;margin:0 auto;padding:130px 24px 0}
.doc-crumb{display:flex;gap:8px;align-items:center;font-size:11px;color:#7d858a;margin-bottom:26px}
.doc-crumb a{color:#a8afb3}
.doc-crumb a:hover{color:#fff}
.doc-tag{display:inline-block;font-size:11px;color:#b9c98f;border:1px solid #ffffff24;border-radius:999px;padding:5px 13px;margin-bottom:20px}
.doc h1{font-size:40px;line-height:1.34;font-weight:600;margin:0 0 20px;display:block}
.doc-lead{font-size:15px;line-height:2;color:#b6bbbd;margin:0 0 30px}
.doc-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:#7d858a;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:38px}

.doc-body{font-size:15px;line-height:2.05;color:#d5d9d7}
.doc-body h2{font-size:25px;line-height:1.5;font-weight:600;color:#f3f4f3;margin:52px 0 18px;padding-left:14px;border-left:3px solid var(--accent)}
.doc-body h3{font-size:18px;line-height:1.6;font-weight:600;color:#eaeeea;margin:34px 0 14px}
.doc-body p{margin:0 0 18px}
.doc-body ul,.doc-body ol{margin:0 0 20px;padding-left:22px}
.doc-body li{margin-bottom:10px}
.doc-body strong{color:#f3f4f3;font-weight:600}
.doc-body a{color:var(--accent);border-bottom:1px solid #d6f18b55}
.doc-body a:hover{border-bottom-color:var(--accent)}
.doc-body code{font-family:Consolas,"Courier New",monospace;font-size:13px;background:#ffffff14;padding:2px 6px;border-radius:3px}

.doc-steps{counter-reset:s;list-style:none;padding:0;margin:0 0 26px}
.doc-steps>li{counter-increment:s;position:relative;padding:0 0 0 48px;margin-bottom:24px}
.doc-steps>li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;width:31px;height:31px;border-radius:50%;background:#ffffff12;border:1px solid #ffffff1f;color:var(--accent);font-size:12px;display:flex;align-items:center;justify-content:center}
.doc-steps h3{margin-top:0}

.doc-note{background:#ffffff0a;border:1px solid var(--line);border-left:3px solid #8fa06a;border-radius:4px;padding:18px 20px;margin:0 0 26px;font-size:14px;line-height:1.95;color:#c3c8c6}
.doc-note b{color:#f3f4f3}
.doc-note p:last-child{margin-bottom:0}

.doc-qa{border-top:1px solid var(--line);padding-top:26px;margin-top:34px}
.doc-qa h3{margin-top:0}

.doc-cta{margin:56px 0 0;background:#edf0ed;color:#1b211c;border-radius:6px;padding:34px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.doc-cta h2{font-size:22px;line-height:1.5;font-weight:600;margin:0 0 8px;color:#1b211c}
.doc-cta p{margin:0;font-size:13px;line-height:1.8;color:#5f6a61}
.doc-cta .button{background:#17221b;color:#edf0ed;border-color:#17221b}
.doc-cta .button:hover{background:#000;box-shadow:none}

.doc-related{margin:64px 0 0;border-top:1px solid var(--line);padding-top:32px}
.doc-related h2{font-size:16px;font-weight:600;color:#f3f4f3;margin:0 0 18px;border:0;padding:0}
.doc-related ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.doc-related a{display:block;background:#ffffff0a;border:1px solid var(--line);border-radius:5px;padding:16px 18px;font-size:14px;color:#dfe3e0}
.doc-related a:hover{background:#ffffff14;border-color:#ffffff2e}
.doc-related em{display:block;font-style:normal;font-size:12px;color:#868e92;margin-top:6px;line-height:1.7}
.doc-end{padding-bottom:70px}

@media(max-width:1000px){.header nav{gap:16px}}
@media(max-width:760px){
  .doc{padding:100px 20px 0}
  .doc h1{font-size:27px;line-height:1.4}
  .doc-lead{font-size:14px;line-height:1.9}
  .doc-meta{gap:12px;font-size:10px}
  .doc-body{font-size:14px;line-height:1.95}
  .doc-body h2{font-size:20px;margin:40px 0 14px;padding-left:11px}
  .doc-body h3{font-size:16px}
  .doc-steps>li{padding-left:40px;margin-bottom:20px}
  .doc-steps>li:before{width:27px;height:27px;font-size:11px}
  .doc-cta{padding:26px 22px}
  .doc-cta h2{font-size:19px}
}