:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#1f2329;
  --muted:#6b7280;
  --accent:#2f6fed;
  --accent-soft:#eaf1ff;
  --border:#e5e7eb;
  --radius:14px;
  --sidebar-w:240px;
  --maxw:1080px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}

/* 顶部导航 */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:0 16px;height:56px;
  display:flex;align-items:center;gap:12px;position:relative;
}
.brand{font-weight:700;font-size:17px;color:var(--text);display:flex;align-items:center;gap:8px;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);}
.menu-btn{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--text);padding:4px 8px;}

/* 布局：左栏 + 内容 */
.layout{max-width:var(--maxw);margin:0 auto;display:flex;align-items:flex-start;}

/* 左侧导航 */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  position:sticky;top:56px;align-self:flex-start;
  height:calc(100vh - 56px);overflow-y:auto;
  padding:16px 10px;border-right:1px solid var(--border);background:#fff;
}
.sidebar .cat{margin-bottom:6px;}
.sidebar .cat-title{font-weight:600;font-size:13.5px;color:var(--text);margin:12px 0 4px;padding:0 10px;}
.sidebar .sub a{
  display:block;padding:5px 12px;font-size:13px;color:var(--muted);
  border-radius:8px;margin:1px 0;border-left:3px solid transparent;
}
.sidebar .sub a:hover{background:var(--accent-soft);color:var(--accent);}
.sidebar .sub a.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:600;}

/* 内容区 */
.content{flex:1;min-width:0;padding:20px 26px 44px;}

/* 头图 */
.hero{background:linear-gradient(135deg,#2f6fed,#5b8def);color:#fff;border-radius:var(--radius);padding:26px 22px;margin-bottom:20px;}
.hero h1{margin:0 0 8px;font-size:22px;}
.hero p{margin:0;opacity:.92;font-size:14px;}

/* 分类导览 */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:6px;}
.cat-block{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.cat-block h3{margin:0 0 8px;font-size:15px;color:var(--text);}
.cat-list{margin:0;padding-left:0;list-style:none;}
.cat-list li{margin:4px 0;}
.cat-list a{font-size:13.5px;color:var(--muted);}
.cat-list a:hover{color:var(--accent);}

/* 文章 */
.article{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px;}
.article h1{font-size:22px;margin:0 0 6px;}
.article .meta{color:var(--muted);font-size:13px;margin-bottom:18px;}
.article h2{font-size:18px;margin:26px 0 10px;border-left:4px solid var(--accent);padding-left:10px;}
.article p{margin:10px 0;font-size:15px;}
.article ul,.article ol{margin:10px 0;padding-left:22px;font-size:15px;}
.article li{margin:6px 0;}
.article code{background:var(--accent-soft);color:#1d4ed8;padding:1px 6px;border-radius:5px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.article pre{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:10px;overflow:auto;font-size:13px;line-height:1.6;}
.article pre code{background:none;color:inherit;padding:0;}
.note{background:#fffbe6;border:1px solid #ffe58f;border-radius:10px;padding:12px 14px;font-size:14px;margin:14px 0;}

/* 页脚（含备案号） */
.site-footer{background:#fff;border-top:1px solid var(--border);padding:22px 16px;text-align:center;color:var(--muted);font-size:13px;margin-top:10px;}
.site-footer a{color:var(--muted);}
.site-footer .beian{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;}
.site-footer .beian a{display:inline-flex;align-items:center;gap:5px;transition:color .2s ease;}
.site-footer .beian a:hover{color:var(--accent);}
/* height:auto 保证按原始宽高比缩放，不拉伸官方备案图标 */
.site-footer .beian img{width:20px;height:auto;display:block;flex:0 0 auto;}

@media (max-width:860px){
  .menu-btn{display:block;}
  .layout{display:block;}
  .sidebar{
    position:fixed;top:56px;left:0;bottom:0;z-index:35;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.12);
  }
  .sidebar.open{transform:translateX(0);}
  .content{padding:16px;}
  .cat-grid{grid-template-columns:1fr;}
}