/* 懒人办公文章通用样式（article/ 目录下所有文章共用）
   由 article/*.html 通过相对路径引用：<link rel="stylesheet" href="assets/article.css">
   配色对齐站点主样式：主色 #2563EB / 背景 #F9FAFB / 正文 #111827 / 边框 #E5E7EB / 次要文字 #9CA3AF */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:#F9FAFB;color:#111827;
  font:16px/1.85 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"Segoe UI",Arial,
  "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
.page{max-width:1200px;margin:0 auto;padding-top:24px;display:flex;gap:24px;align-items:flex-start}
.main{flex:1;min-width:0;max-width:860px}
aside.side{flex:0 0 280px;width:280px;position:sticky;top:85px}
.side .box{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:16px 18px;margin-bottom:16px}
.side h2{font-size:15px;margin:0 0 10px;color:#6B7280;font-weight:600}
.side ol,.side ul{margin:0;padding-left:18px;font-size:14px;list-style:auto;}
.side li{margin:4px 0;line-height:1.6}
.side a{color:#111827;text-decoration:none}
.side a:hover{color:#2563EB}
.side a.active{color:#2563EB;font-weight:600}
header.hero{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:30px 28px;margin-bottom:20px}
.crumbs{font-size:13px;color:#9CA3AF;margin-bottom:12px}
.crumbs a{color:#9CA3AF;text-decoration:none}
.crumbs a:hover{color:#2563EB}
h1{font-size:26px;line-height:1.45;margin:0 0 14px;font-weight:600}
.lede{font-size:16px;color:#374151;margin:0 0 18px;padding:14px 16px;background:#EFF6FF;
  border-left:4px solid #2563EB;border-radius:0 8px 8px 0}
.meta{font-size:13px;color:#9CA3AF;display:flex;flex-wrap:wrap;gap:6px 18px}
.meta b{color:#6B7280;font-weight:500}
.meta .ok{color:#10B981}
section.step{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:26px 28px;margin-bottom:18px}
section.step h2{display:flex;align-items:center;gap:12px;font-size:20px;margin:0 0 14px;font-weight:600}
.num{flex:0 0 30px;height:30px;width:30px;border-radius:50%;background:#2563EB;color:#fff;
  font-size:15px;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
section.step p{margin:0 0 12px}
section.step a{color:#2563EB}
figure{margin:18px 0 0}
figure img{display:block;width:100%;height:auto;border:1px solid #E5E7EB;border-radius:10px;background:#fff}
figcaption{font-size:13px;color:#9CA3AF;text-align:center;margin-top:8px}
table{width:100%;border-collapse:separate;background:#fff;border:1px solid #E5E7EB;
  border-radius:14px;overflow:hidden;margin-bottom:20px;font-size:15px}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid #F3F4F6;vertical-align:top}
th{background:#EFF6FF;font-weight:600;color:#6B7280;width:34%}
tr:last-child td{border-bottom:0}
td a{color:#2563EB;word-break:break-all}
.faq{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:10px 24px;margin-bottom:20px}
.faq h2{font-size:20px;margin:14px 0 4px;font-weight:600}
.faq details{border-bottom:1px solid #F3F4F6;padding:13px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-size:16px;font-weight:500;color:#111827}
.faq .ans p{margin:10px 0 0;color:#374151}
/* 锚点跳转时避免被顶部遮挡 */
section.step,.faq{scroll-margin-top:16px}
@media(max-width:960px){
  .page{display:block;padding:16px 12px 48px}
  aside.side{position:static;width:auto;flex:none;margin-top:20px}
  header.hero{padding:22px 18px}
  h1{font-size:21px}
  section.step{padding:18px 16px}
  section.step h2{font-size:18px}
  th,td{padding:9px 10px}
}