:root{
  --bg:#fff; --sidebar-bg:#f7f8fa; --border:#e6e8eb; --text:#1f2328;
  --muted:#57606a; --accent:#4c8bf5; --accent-dark:#2f6fda;
  --code-bg:#f6f8fa; --warn-bg:#fff7e6; --warn-border:#ffd591; --warn-text:#874d00;
  --note-bg:#e6f4ff; --note-border:#91caff; --tip-bg:#f6ffed; --tip-border:#b7eb8f;
  --done:#2e9e4b;
  --sidebar-w:264px; --header-h:56px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);line-height:1.75;font-size:16px;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:Consolas,"Courier New",monospace;background:var(--code-bg);padding:2px 5px;border-radius:4px;font-size:14px;color:#c7254e;}
pre{background:var(--code-bg);border:1px solid var(--border);border-radius:6px;padding:14px;overflow-x:auto;}
pre code{background:none;padding:0;color:#1f2328;}

/* 顶栏 */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;z-index:20;}
.header .menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;margin-right:12px;color:var(--text);}
.header .logo{font-weight:700;font-size:18px;color:var(--text);}
.header .logo span{color:var(--accent);}

/* 侧栏 */
.sidebar{position:fixed;top:var(--header-h);bottom:0;left:0;width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);overflow-y:auto;padding:14px 0 40px;z-index:15;}
.sidebar .nav-group{margin-bottom:8px;}
.sidebar .nav-title{font-size:12px;text-transform:uppercase;color:var(--muted);padding:8px 18px 4px;letter-spacing:.5px;font-weight:600;}
.sidebar a{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;color:var(--text);font-size:14px;border-left:3px solid transparent;}
.sidebar a:hover{background:#eceef1;text-decoration:none;}
.sidebar a.active{background:#e6f0ff;border-left-color:var(--accent);color:var(--accent-dark);font-weight:600;}

/* 内容 */
.main{margin-left:var(--sidebar-w);margin-top:var(--header-h);padding:28px 36px 90px;max-width:980px;}
.main h1{font-size:28px;margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid var(--border);}
.main h2{font-size:22px;margin:34px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.main h3{font-size:18px;margin:24px 0 8px;color:#24292f;}
.main p{margin:10px 0;}
.main ul,.main ol{margin:10px 0;padding-left:24px;}
.main li{margin:6px 0;}
.main table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px;}
.main th,.main td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top;}
.main th{background:var(--sidebar-bg);font-weight:600;}
.main blockquote{margin:14px 0;padding:8px 16px;border-left:4px solid var(--accent);background:#fafbfc;color:var(--muted);}

/* 提示框 */
.note,.warn,.tip{border-radius:6px;padding:12px 16px;margin:16px 0;border:1px solid;font-size:15px;}
.note{background:var(--note-bg);border-color:var(--note-border);}
.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text);}
.tip{background:var(--tip-bg);border-color:var(--tip-border);}
.note b,.warn b,.tip b{display:block;margin-bottom:4px;}

/* 卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:18px 0;}
.card{border:1px solid var(--border);border-radius:8px;padding:16px;background:#fafbfc;}
.card h4{margin:0 0 6px;font-size:16px;color:var(--accent-dark);}
.card p{margin:0;font-size:14px;color:var(--muted);}

.overlay{display:none;}

/* 上一页 / 下一页 */
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:20px;border-top:1px solid var(--border);}
.pager a{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--border);border-radius:8px;background:#fafbfc;color:var(--text);transition:border-color .15s,background .15s;}
.pager a:hover{text-decoration:none;border-color:var(--accent);background:#f0f6ff;}
.pager-prev{text-align:left;}
.pager-next{text-align:right;align-items:flex-end;}
.pager-dir{font-size:13px;color:var(--accent);font-weight:600;}
.pager-name{font-size:15px;color:var(--text);}
.pager-empty{flex:1;border:none;background:none;}
@media(max-width:900px){
  .pager{flex-direction:column;}
}

/* 响应式 */
@media(max-width:900px){
  .header .menu-btn{display:block;}
  .sidebar{transform:translateX(-100%);transition:transform .25s;box-shadow:2px 0 12px rgba(0,0,0,.12);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;padding:20px 16px 70px;}
  .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:14;}
  .overlay.show{display:block;}
  .cards{grid-template-columns:1fr;}
}

/* 图解 */
.diagram{margin:18px 0;background:#fafbfc;border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
.diagram svg{width:100%;height:auto;display:block;}
.diagram .cap{font-size:13px;color:var(--muted);margin:8px 2px 0;text-align:center;}