/* ── 内容页（教程 / 科普 / 关于 / 隐私）共享样式 ──
   复用 style.css 的 :root 变量与 .topbar / body 背景，这里只补文章排版与导航。 */

/* 站点导航条 */
.sitenav{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
}
.sitenav-inner{
  max-width:1080px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.sitenav .brand{font-weight:800; color:var(--brand); margin-right:10px; white-space:nowrap; text-decoration:none; font-size:15px;}
.sitenav a.navlink{
  color:var(--sub); text-decoration:none; font-size:14px; padding:6px 12px; border-radius:9px; transition:.15s;
}
.sitenav a.navlink:hover{background:var(--line); color:var(--ink);}
.sitenav a.navlink.active{background:var(--brand-grad); color:#fff;}

/* 面包屑 */
.breadcrumb{max-width:1080px; margin:18px auto 0; padding:0 20px; font-size:13px; color:var(--sub);}
.breadcrumb a{color:var(--brand); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb span{margin:0 7px; opacity:.6;}

/* 文章主体 */
.article{max-width:820px; margin:18px auto 40px; padding:26px 28px 34px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.article .doc-h1{font-size:27px; line-height:1.3; margin:4px 0 6px; font-weight:800; letter-spacing:.3px;}
.article .doc-meta{font-size:13px; color:var(--sub); margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed var(--line);}
.article .lead{font-size:16px; color:#33415c; background:linear-gradient(135deg,rgba(47,107,255,.06),rgba(47,107,255,.02));
  border-left:4px solid var(--brand); padding:14px 16px; border-radius:0 10px 10px 0; margin:0 0 22px;}
.article h2{font-size:20px; margin:30px 0 12px; padding-top:8px; font-weight:800; display:flex; align-items:center; gap:9px;}
.article h2::before{content:""; width:5px; height:18px; border-radius:4px; background:var(--brand-grad); display:inline-block;}
.article h3{font-size:16.5px; margin:22px 0 8px; font-weight:700; color:var(--ink);}
.article p{margin:12px 0; color:#2a3650;}
.article ul,.article ol{margin:12px 0; padding-left:22px; color:#2a3650;}
.article li{margin:7px 0;}
.article a{color:var(--brand); text-decoration:none; border-bottom:1px solid rgba(47,107,255,.3);}
.article a:hover{border-bottom-color:var(--brand);}
.article strong{color:var(--ink); font-weight:700;}
.article code{background:var(--line); padding:2px 6px; border-radius:6px; font-size:13px; color:#c0264a; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.article pre.code-block{background:#0f1521; color:#e6edf6; padding:14px 16px; border-radius:11px; overflow:auto; font-size:13px; line-height:1.55;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin:14px 0; border:1px solid rgba(255,255,255,.08);}
.article pre.code-block code{background:none; color:inherit; padding:0; font-size:inherit;}
.article hr{border:none; border-top:1px dashed var(--line); margin:26px 0;}

/* 提示框 */
.callout{border-radius:12px; padding:14px 16px; margin:18px 0; font-size:14px; line-height:1.65;}
.callout.tip{background:rgba(8,169,106,.08); border:1px solid rgba(8,169,106,.3); color:#0a6b46;}
.callout.warn{background:rgba(232,84,60,.08); border:1px solid rgba(232,84,60,.3); color:#b5371f;}
.callout.info{background:rgba(47,107,255,.07); border:1px solid rgba(47,107,255,.28); color:#1f54e0;}

/* 步骤 */
.steps{counter-reset:step; list-style:none; padding:0; margin:14px 0;}
.steps li{position:relative; padding:10px 10px 10px 46px; margin:10px 0; background:var(--bg);
  border:1px solid var(--line); border-radius:11px;}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--brand-grad); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:13px;}

/* 表格 */
.article table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; overflow:hidden; border-radius:11px; box-shadow:var(--shadow);}
.article th,.article td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top;}
.article thead th{background:var(--brand-grad); color:#fff; font-weight:700;}
.article tbody tr:nth-child(even){background:var(--bg);}

/* 特性卡片网格 */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:18px 0;}
.fcard{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:16px; box-shadow:var(--shadow);}
.fcard .ico{font-size:22px;}
.fcard h4{margin:8px 0 6px; font-size:15px;}
.fcard p{margin:0; font-size:13px; color:var(--sub);}

/* 广告位占位（上线后替换为你的 AdSense 代码） */
.ad-slot{margin:26px 0; padding:18px; border:1px dashed var(--brand); border-radius:12px;
  background:rgba(47,107,255,.04); text-align:center; color:var(--sub); font-size:13px; min-height:90px;
  display:flex; align-items:center; justify-content:center;}
.ad-slot .ph{opacity:.8;}

/* 内容页页脚 */
.content-foot{max-width:1080px; margin:0 auto; padding:26px 20px 40px; color:var(--sub); font-size:13px; text-align:center; line-height:1.9;}
.content-foot a{color:var(--brand); text-decoration:none; margin:0 8px;}
.content-foot a:hover{text-decoration:underline;}
.content-foot .sep{opacity:.4;}

/* 返回工具按钮 */
.backtool{display:inline-flex; align-items:center; gap:6px; margin:6px 0 0; padding:9px 16px; border-radius:10px;
  background:var(--brand-grad); color:#fff; text-decoration:none; font-size:14px; font-weight:600; box-shadow:var(--shadow);}
.backtool:hover{transform:translateY(-1px); box-shadow:var(--shadow-hov);}

@media (max-width:560px){
  .article{padding:20px 16px 26px;}
  .article .doc-h1{font-size:22px;}
  .sitenav-inner{padding:8px 14px; gap:2px;}
  .sitenav a.navlink{padding:5px 9px; font-size:13px;}
}