/* Backpack Brawl 设计文档 · 共享导航样式（顶栏 + 左侧导航，所有页面统一引用） */
:root{--nav-w:252px;--topbar-h:54px}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:60;height:var(--topbar-h);display:flex;align-items:center;gap:14px;
  padding:0 22px;background:linear-gradient(95deg,#e0a83c,#b8842a);color:#1a140d;
  box-shadow:0 2px 14px rgba(0,0,0,.3)}
.topbar .logo{font-weight:800;font-size:17px;letter-spacing:.3px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.topbar .ver{font-size:12px;background:rgba(0,0,0,.15);padding:2px 10px;border-radius:20px;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar a{color:#1a140d;text-decoration:none;font-size:13px;font-weight:600;padding:5px 11px;border-radius:7px;white-space:nowrap}
.topbar a:hover{background:rgba(0,0,0,.12)}
.topbar .tb-theme{background:rgba(0,0,0,.15);border:none;color:#1a140d;border-radius:8px;
  width:32px;height:32px;font-size:15px;cursor:pointer;flex:none}
a.logo{color:#1a140d;text-decoration:none}

/* 窄屏（侧边栏隐藏时）顶栏出现三册快捷导航 */
.topbar .tb-doc{display:none}
@media(max-width:860px){
  .topbar{gap:8px;padding:0 14px}
  .topbar .ver{display:none}
  .topbar a.tb-more{display:none}
  .topbar .tb-doc{display:inline-block;padding:5px 8px;background:rgba(0,0,0,.1)}
  .topbar .tb-doc.on{background:rgba(0,0,0,.28);font-weight:800}
}

/* ---------- 布局 + 左侧导航 ---------- */
.layout{display:flex;max-width:1500px;margin:0 auto}
.sidenav{width:var(--nav-w);flex:none;position:sticky;top:var(--topbar-h);align-self:flex-start;
  height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:20px 14px 60px;
  border-right:1px solid var(--line,#3a3225)}
.sidenav h4{margin:18px 10px 6px;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--mut,#948a76)}
.sidenav a{display:block;padding:7px 12px;border-radius:8px;color:var(--ink2,#c7bca6);
  text-decoration:none;font-size:14px;line-height:1.5}
.sidenav a:hover{background:var(--card2,#272115);color:var(--gold2,#f2c66a)}
.sidenav a.active{background:var(--gold,#e0a83c);color:#1a140d;font-weight:700}
.sidenav a .n{display:inline-block;width:24px;color:var(--gold,#e0a83c);font-weight:700}
.sidenav a.active .n{color:#1a140d}
.sidenav a.sub{font-size:12.5px;padding:4px 12px 4px 36px;color:var(--mut,#948a76)}
.sidenav a.sub:hover{color:var(--gold2,#f2c66a)}

/* 内容区：index 用 .content（带内边距），其余页面用 .doc-main（页面自带 .wrap） */
.doc-main{flex:1;min-width:0}
.content{flex:1;min-width:0;padding:34px 46px 90px;max-width:1060px}
@media(max-width:860px){.sidenav{display:none}.content{padding:24px 20px 70px}}

/* 页面自带的 sticky 工具栏 / 章节导航下移，避让顶栏 */
.doc-main .top{top:var(--topbar-h)}
.doc-main nav.toc{top:var(--topbar-h)}

/* 锚点跳转时标题不被顶栏和 sticky 章节导航遮住 */
.doc-main [id]{scroll-margin-top:calc(var(--topbar-h) + 62px)}