/* 知识库页面：三栏布局、侧边目录、分类总览、文章头部 */
.notes-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 220px;gap:48px;padding:36px 0 40px;align-items:start}
.notes-layout.no-toc{grid-template-columns:250px minmax(0,1fr)}
.notes-layout.no-toc .notes-toc{display:none}

.notes-side{position:sticky;top:calc(var(--header-h) + 20px);max-height:calc(100vh - var(--header-h) - 40px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.side-search{position:relative;margin-bottom:18px}
.side-search input{width:100%;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);padding:0 36px 0 12px;font-size:13px;outline:none;transition:border-color .2s}
.side-search input:focus{border-color:var(--accent)}
.side-search kbd{position:absolute;right:9px;top:9px}
.tree-cat{margin-bottom:6px}
.tree-cat>button{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;background:none;border-radius:8px;font-size:13px;font-weight:600;text-align:left;color:var(--text-2)}
.tree-cat>button:hover{background:var(--panel-2)}
.tree-cat>button .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.tree-cat>button .n{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--faint);font-weight:400}
.tree-cat>button .chev{transition:transform .3s var(--ease);color:var(--faint);font-size:10px}
.tree-cat.open>button .chev{transform:rotate(90deg)}
.tree-list{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.tree-cat.open .tree-list{grid-template-rows:1fr}
.tree-list>div{overflow:hidden}
.tree-list a{display:block;position:relative;padding:6px 10px 6px 42px;font-size:12.5px;line-height:1.6;color:var(--muted);border-radius:7px;transition:color .2s,background .2s}
.tree-list a::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;background:var(--line)}
.tree-list a:hover{color:var(--text)}
.tree-list a.active{color:var(--c);background:color-mix(in srgb,var(--c) 8%,transparent)}
.tree-list a.active::before{background:var(--c);width:2px}
.tree-list a.hide{display:none}

.notes-main{min-width:0;animation:mainIn .5s var(--ease)}
@keyframes mainIn{from{opacity:0;transform:translateY(12px)}}

/* 总览 */
.kb-hero{padding:24px 0 36px;border-bottom:1px solid var(--line);margin-bottom:32px}
.kb-hero h1{font-size:clamp(34px,4.5vw,56px);margin:14px 0 14px}
.kb-hero p{color:var(--muted);max-width:640px;line-height:1.9}
.kb-filters{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
.kb-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kb-item{padding:22px;display:flex;flex-direction:column;gap:10px;--c:var(--accent)}
.kb-item .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-item h3{font-family:var(--f-sans);font-size:16.5px;font-weight:650;letter-spacing:0;line-height:1.5;transition:color .2s}
.kb-item:hover h3{color:var(--c)}
.kb-item p{font-size:13px;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb-item .foot{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;padding-top:6px}
.kb-item .lab-flag{margin-left:auto}
.kb-empty{padding:60px 0;text-align:center;color:var(--muted)}
.cat-banner{padding:30px;margin-bottom:28px;display:flex;gap:22px;align-items:center;--c:var(--accent);background:linear-gradient(120deg,color-mix(in srgb,var(--c) 12%,var(--panel)),var(--panel))}
.cat-banner .ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-family:var(--f-mono);font-size:28px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);flex:none}
.cat-banner h1{font-size:32px}
.cat-banner p{color:var(--muted);margin-top:6px;font-size:14px}
.cat-banner .en{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--c)}

/* 文章头部 */
.art-head{padding:8px 0 30px;border-bottom:1px solid var(--line);margin-bottom:36px;--c:var(--accent)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);margin-bottom:22px;flex-wrap:wrap}
.crumbs a:hover{color:var(--accent)}
.art-head h1{font-size:clamp(28px,3.4vw,42px);line-height:1.3;letter-spacing:-.025em}
.art-summary{margin-top:18px;color:var(--muted);font-size:15px;line-height:1.9;padding-left:16px;border-left:2px solid var(--c)}
.art-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;align-items:center}
.art-meta .tag svg{width:12px;height:12px}
.art-actions{margin-left:auto;display:flex;gap:8px}

.art-foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pager a{padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.pager a small{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);letter-spacing:.1em}
.pager a span{font-size:14px;font-weight:600;line-height:1.5}
.pager a.next{text-align:right}
.pager a:hover span{color:var(--accent)}
.related{margin-top:36px}
.related h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--faint);font-weight:500;margin-bottom:12px}
.related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-list a{padding:16px;font-size:13px;line-height:1.6}
.related-list a:hover{color:var(--accent)}

/* 右侧目录 */
.notes-toc{position:sticky;top:calc(var(--header-h) + 24px);max-height:calc(100vh - var(--header-h) - 48px);overflow:auto;font-size:12.5px}
.notes-toc h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);font-weight:500;margin-bottom:12px}
.toc-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc-list a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);line-height:1.55;transition:color .2s,border-color .2s}
.toc-list a.l3{padding-left:28px;font-size:12px}
.toc-list a:hover{color:var(--text)}
.toc-list a.active{color:var(--accent);border-left-color:var(--accent)}
.toc-progress{margin-top:18px;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.toc-progress svg{width:34px;height:34px;transform:rotate(-90deg)}
.toc-progress circle{fill:none;stroke-width:3}
.toc-progress .bg{stroke:var(--line)}
.toc-progress .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .2s}

.side-fab{display:none;position:fixed;right:16px;bottom:20px;z-index:40;width:46px;height:46px;border-radius:14px;background:var(--panel);box-shadow:var(--shadow-sm)}

.skeleton{display:flex;flex-direction:column;gap:14px;padding-top:20px}
.skeleton i{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--panel-2),var(--panel-3),var(--panel-2));background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

@media (max-width:1180px){
  .notes-layout{grid-template-columns:230px minmax(0,1fr);gap:36px}
  .notes-toc{display:none}
}
@media (max-width:860px){
  .notes-layout,.notes-layout.no-toc{grid-template-columns:minmax(0,1fr);padding-top:20px}
  .notes-side{position:fixed;inset:var(--header-h) auto 0 0;z-index:45;width:min(320px,86vw);max-height:none;background:var(--bg);border-right:1px solid var(--line);padding:18px 16px;transform:translateX(-102%);transition:transform .35s var(--ease)}
  .notes-side.open{transform:none;box-shadow:var(--shadow)}
  .side-fab{display:grid}
  .kb-list,.related-list,.pager{grid-template-columns:1fr}
  .art-actions{margin-left:0}
  .cat-banner{padding:22px;flex-direction:column;align-items:flex-start}
}