* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; color:#1f2328; background:#fff; }

/* ---------- layout ---------- */
.layout { display:flex; min-height:100vh; }
.sidebar { width:280px; flex:0 0 280px; background:#f6f8fa; border-right:1px solid #d0d7de; display:flex; flex-direction:column; height:100vh; position:sticky; top:0; }
.content { flex:1; padding:28px 40px; max-width:960px; }

/* ---------- sidebar ---------- */
.brand { padding:16px 18px 8px; font-size:17px; font-weight:700; }
.brand a { color:#1f2328; text-decoration:none; }
.side-search { padding:0 14px 8px; }
.side-search input { width:100%; padding:8px 10px; border:1px solid #d0d7de; border-radius:6px; font-size:13px; }
.btn-new { display:block; margin:6px 14px 10px; padding:8px 12px; background:#1f883d; color:#fff; text-align:center; border-radius:6px; text-decoration:none; font-size:14px; font-weight:600; }
.btn-new:hover { background:#1a7f37; }
.tree { flex:1; overflow:auto; padding:4px 8px 12px; }
.tree-node { font-size:14px; }
.tree-children { margin-left:12px; border-left:1px dashed #d0d7de; padding-left:6px; }
.tree-link { display:block; padding:5px 8px; border-radius:5px; color:#24292f; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tree-link:hover { background:#eaeef2; }
.tree-link.active { background:#ddf4ff; color:#0969da; font-weight:600; }
.tree-empty { color:#8c959f; font-size:13px; padding:8px; }
.side-foot { border-top:1px solid #d0d7de; padding:10px 14px; font-size:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.side-foot a { color:#57606a; text-decoration:none; }
.side-foot a:hover { color:#0969da; }

/* ---------- generic ---------- */
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:8px; }
.page-head h1 { font-size:24px; margin:0 0 4px; }
.sub { color:#8c959f; font-size:13px; margin:0; }
.empty { color:#8c959f; padding:30px 0; }
.inline { display:inline; }

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost, .btn-danger { border-radius:6px; padding:8px 16px; font-size:14px; cursor:pointer; border:1px solid transparent; text-decoration:none; display:inline-block; }
.btn-primary { background:#1f883d; color:#fff; } .btn-primary:hover { background:#1a7f37; }
.btn-ghost { background:#f6f8fa; border-color:#d0d7de; color:#24292f; } .btn-ghost:hover { background:#eaeef2; }
.btn-danger { background:#fff; border-color:#d0d7de; color:#cf222e; } .btn-danger:hover { background:#ffebe9; }

/* ---------- flash ---------- */
.flashes { margin-bottom:16px; }
.flash { padding:10px 14px; border-radius:6px; font-size:14px; margin-bottom:8px; }
.flash-success { background:#dafbe1; color:#1a7f37; border:1px solid #aceebb; }
.flash-error { background:#ffebe9; color:#cf222e; border:1px solid #ffcecb; }

/* ---------- home ---------- */
.tag-cloud { margin:12px 0 20px; display:flex; flex-wrap:wrap; gap:8px; }
.tag { display:inline-block; background:#ddf4ff; color:#0969da; padding:3px 10px; border-radius:12px; font-size:13px; text-decoration:none; }
.tag:hover { background:#b6e3ff; }
.tag.sm { font-size:12px; padding:2px 8px; }
.recent-list { display:flex; flex-direction:column; gap:8px; }
.recent-item { display:block; padding:12px 16px; border:1px solid #d0d7de; border-radius:8px; text-decoration:none; color:inherit; }
.recent-item:hover { border-color:#0969da; background:#f6f8fa; }
.recent-title { font-weight:600; font-size:15px; margin-bottom:3px; }
.recent-meta { font-size:12px; color:#8c959f; }

/* ---------- page ---------- */
.page-actions { display:flex; gap:8px; }
.page-meta { color:#8c959f; font-size:13px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid #eaecef; }
.page-tags { margin-left:8px; }

/* ---------- markdown ---------- */
.markdown-body { font-size:15px; line-height:1.75; color:#24292f; word-wrap:break-word; }
.markdown-body h1 { font-size:24px; border-bottom:1px solid #eaecef; padding-bottom:6px; margin:24px 0 12px; }
.markdown-body h2 { font-size:20px; border-bottom:1px solid #eaecef; padding-bottom:5px; margin:22px 0 10px; }
.markdown-body h3 { font-size:17px; margin:20px 0 8px; }
.markdown-body img { max-width:100%; border-radius:6px; }
.markdown-body pre { background:#f6f8fa; padding:14px; border-radius:6px; overflow:auto; font-size:13px; }
.markdown-body code { background:#eff1f3; padding:2px 5px; border-radius:4px; font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.markdown-body pre code { background:none; padding:0; }
.markdown-body blockquote { border-left:4px solid #d0d7de; padding-left:14px; color:#57606a; margin:10px 0; }
.markdown-body table { border-collapse:collapse; margin:12px 0; }
.markdown-body th, .markdown-body td { border:1px solid #d0d7de; padding:6px 12px; }
.markdown-body th { background:#f6f8fa; }
.markdown-body a { color:#0969da; }
.markdown-body hr { border:0; border-top:1px solid #d0d7de; margin:20px 0; }
.markdown-body ul, .markdown-body ol { padding-left:24px; }

/* ---------- search ---------- */
.search-big { display:flex; gap:8px; margin:12px 0 20px; }
.search-big input { flex:1; padding:10px 14px; border:1px solid #d0d7de; border-radius:6px; font-size:15px; }
.results { display:flex; flex-direction:column; gap:10px; }
.result-item { display:block; padding:12px 16px; border:1px solid #d0d7de; border-radius:8px; text-decoration:none; color:inherit; }
.result-item:hover { border-color:#0969da; background:#f6f8fa; }
.result-title { font-weight:600; font-size:15px; margin-bottom:4px; }
.result-snip { font-size:13px; color:#57606a; line-height:1.6; }
.result-snip mark { background:#fff8c5; padding:0 2px; }
.result-meta { font-size:12px; color:#8c959f; margin-top:4px; }

/* ---------- forms ---------- */
.card-form { display:flex; flex-direction:column; gap:14px; max-width:420px; }
.card-form label { font-size:13px; font-weight:600; color:#57606a; }
.card-form input { display:block; width:100%; margin-top:5px; padding:9px 12px; border:1px solid #d0d7de; border-radius:6px; font-size:14px; font-weight:400; }

/* ---------- login ---------- */
.login-body { background:#f6f8fa; }
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:#fff; border:1px solid #d0d7de; border-radius:12px; padding:32px 36px; width:340px; box-shadow:0 4px 16px rgba(27,31,36,.08); }
.login-box h1 { font-size:20px; margin:0 0 6px; text-align:center; }
.login-sub { text-align:center; color:#8c959f; font-size:13px; margin:0 0 18px; }
.login-box label { display:block; font-size:13px; font-weight:600; color:#57606a; margin-bottom:12px; }
.login-box input { display:block; width:100%; margin-top:5px; padding:9px 12px; border:1px solid #d0d7de; border-radius:6px; font-size:14px; }
.login-box .btn-primary { width:100%; padding:10px; font-size:15px; margin-top:4px; }

@media (max-width: 760px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; flex:none; height:auto; position:static; }
  .content { padding:18px; }
}