:root{
  --bg:#f7f8fa; --panel:#fff; --ink:#1f2328; --muted:#6b7280;
  --line:#e5e7eb; --accent:#2d6cdf; --accent-soft:#e8f0fe;
  --code-bg:#f3f4f6; --maxw:880px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}

.layout{display:flex;min-height:100vh}

/* sidebar */
.sidebar{
  width:280px;flex:0 0 280px;background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;
}
.brand{padding:22px 20px 14px;border-bottom:1px solid var(--line)}
.brand-title{font-size:18px;font-weight:700;letter-spacing:.5px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:4px}
.nav{flex:1;overflow-y:auto;padding:10px 8px}
.nav-item{
  display:block;padding:9px 14px;border-radius:8px;cursor:pointer;
  color:var(--ink);font-size:14px;text-decoration:none;transition:.15s;
  border:1px solid transparent;
}
.nav-item:hover{background:var(--accent-soft)}
.nav-item.active{background:var(--accent);color:#fff;font-weight:600}
.nav-item .num{display:inline-block;width:26px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav-item.active .num{color:rgba(255,255,255,.8)}
.side-foot{padding:12px 20px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}

/* main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:10px 22px;
}
.menu-btn{display:none;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:4px 10px;font-size:16px;cursor:pointer}
.crumb{font-size:14px;color:var(--muted)}
.content{max-width:var(--maxw);margin:0 auto;padding:30px 32px 80px;width:100%}

.loading{color:var(--muted);padding:30px;text-align:center}

/* markdown content */
.content h1{font-size:26px;border-bottom:2px solid var(--line);padding-bottom:10px;margin:8px 0 22px}
.content h2{font-size:20px;margin:30px 0 14px;padding-left:10px;border-left:4px solid var(--accent)}
.content h3{font-size:17px;margin:22px 0 10px}
.content h4{font-size:15px;margin:18px 0 8px}
.content p{margin:12px 0}
.content ul,.content ol{margin:12px 0;padding-left:26px}
.content li{margin:6px 0}
.content blockquote{
  margin:16px 0;padding:10px 16px;background:var(--accent-soft);
  border-left:4px solid var(--accent);border-radius:0 6px 6px 0;color:#334155
}
.content blockquote p{margin:6px 0}
.content hr{border:none;border-top:1px solid var(--line);margin:28px 0}
.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--code-bg);padding:2px 6px;border-radius:4px;font-size:.92em}
.content pre{background:var(--code-bg);padding:14px 16px;border-radius:8px;overflow:auto}
.content pre code{background:none;padding:0}
.content table{border-collapse:collapse;margin:16px 0;width:100%;font-size:14px}
.content th,.content td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.content th{background:var(--code-bg);font-weight:600}
.content tr:nth-child(even) td{background:#fafbfc}
.content a{color:var(--accent);text-decoration:none}
.content a:hover{text-decoration:underline}
.content img{max-width:100%}
.content .katex-display{overflow-x:auto;overflow-y:hidden;padding:6px 0}

/* mobile */
@media (max-width:860px){
  .sidebar{position:fixed;left:0;top:0;z-index:20;transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 24px rgba(0,0,0,.12)}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:block}
  .content{padding:20px 16px 60px}
  .layout{display:block}
}