:root{
  --blue:#0d47a1; --blue2:#1565c0; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --bg:#f4f6fb; --card:#ffffff;
  --red:#d32f2f; --blue-t:#1565c0; --green:#2e7d32; --gold:#b5860a; --purple:#6a1b9a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7; font-size:15px;
}
.site-head{
  background:linear-gradient(135deg,#0d47a1,#1565c0); color:#fff;
  padding:18px 24px; box-shadow:0 2px 10px rgba(13,71,161,.2);
}
.site-head .brand{font-size:20px; font-weight:800; letter-spacing:.5px}
.site-head .sub{font-size:13px; opacity:.85; margin-top:2px}
.layout{display:flex; align-items:flex-start; max-width:1200px; margin:0 auto; gap:0}
.sidebar{
  width:300px; flex:none; position:sticky; top:0; align-self:flex-start;
  height:calc(100vh); overflow:auto; background:#fff; border-right:1px solid var(--line);
  padding:16px 14px;
}
.search{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; margin-bottom:12px; outline:none;
}
.search:focus{border-color:var(--blue2); box-shadow:0 0 0 3px rgba(21,101,192,.12)}
.nav-group{margin-bottom:14px}
.nav-group-title{
  font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; margin:6px 4px 6px;
}
.chap-btn{
  display:block; width:100%; text-align:left; cursor:pointer; border:none; background:transparent;
  padding:8px 10px; border-radius:8px; font-size:14px; color:var(--ink); font-family:inherit;
  border-left:3px solid transparent;
}
.chap-btn:hover{background:#eef3fb}
.chap-btn.active{background:#e7f0fb; color:var(--blue); border-left-color:var(--blue2); font-weight:700}
.content{flex:1; min-width:0; padding:22px 26px 60px}
.ch-head h1{font-size:22px; color:var(--blue); margin-bottom:4px}
.ch-head .ch-meta{font-size:12.5px; color:var(--muted); margin-bottom:14px}
.legend{
  display:flex; flex-wrap:wrap; gap:8px 14px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:12.5px; color:var(--muted);
}
.legend .lg{display:flex; align-items:center; gap:6px}
.legend .dot{width:12px; height:12px; border-radius:3px; display:inline-block}
.legend b{color:var(--ink)}
.toolbar{display:flex; gap:8px; margin-bottom:12px}
.toolbar button{
  cursor:pointer; border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:5px 12px; font-size:13px; color:var(--ink); font-family:inherit;
}
.toolbar button:hover{border-color:var(--blue2); color:var(--blue)}
.node{margin:2px 0}
.node-row{
  display:flex; align-items:flex-start; gap:8px; padding:7px 10px; border-radius:9px;
  cursor:default;
}
.node.has-child > .node-row{cursor:pointer}
.node.has-child > .node-row:hover{background:#f1f5fb}
.chev{
  flex:none; width:16px; text-align:center; color:var(--muted); transition:transform .15s;
  user-select:none; font-size:12px; margin-top:4px;
}
.node.collapsed > .node-children{display:none}
.node.collapsed > .node-row .chev{transform:rotate(-90deg)}
.node-text{font-size:14.5px}
.node-children{margin-left:18px; border-left:1px dashed var(--line); padding-left:6px}
.em-red{color:var(--red)} .em-blue{color:var(--blue-t)} .em-green{color:var(--green)}
.em-yellow{color:var(--gold)} .em-purple{color:var(--purple)} .em-bold{font-weight:800}
.cases{
  margin-top:26px; background:#fffdf5; border:1px solid #f0e2b8; border-left:4px solid #e6b800;
  border-radius:12px; padding:16px 18px;
}
.cases h2{font-size:17px; color:#8a6d00; margin-bottom:10px}
.case{
  background:#fff; border:1px solid #f0e2b8; border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.case .ct{font-weight:700; color:#6b5500; margin-bottom:4px}
.case .cb{font-size:14px; color:#4a4a4a}
.empty{color:var(--muted); padding:30px; text-align:center}
footer{
  max-width:1200px; margin:0 auto; padding:18px 26px 40px; font-size:12px; color:var(--muted);
  border-top:1px solid var(--line);
}
.site-note{
  background:#eef3fb; border:1px solid #d4e0f3; border-radius:10px; padding:10px 14px;
  font-size:12.5px; color:#36506f; margin-bottom:16px;
}
@media (max-width:860px){
  .layout{flex-direction:column}
  .sidebar{position:static; width:100%; height:auto; border-right:none; border-bottom:1px solid var(--line)}
  .content{padding:18px 16px 50px}
}