/* ===========================================================
   共享左侧栏外壳（公开页与个人空间共用视觉）
   - 类名统一使用 sb- 前缀，避免与页面自有样式冲突
   - 侧栏固定为视口高度，主区独立滚动
   - 变量均带 fallback，未引入 tokens.css 的页面也能用
   =========================================================== */
*{ box-sizing:border-box; }
.sb-wrap{ display:block; min-height:100vh; background:var(--paper,#F8F7F5); }
.sb-sidebar{
  position:fixed; top:0; left:0; bottom:0; z-index:20;
  width:260px; min-width:260px; height:100vh; overflow-y:auto; overscroll-behavior:contain;
  background:#F2F0EB; border-right:1px solid var(--line,#E8E5E0);
  display:flex; flex-direction:column; flex-shrink:0;
  /* 字体跟随全站宋体基调；显式声明（而非继承 body）以保证各页侧栏渲染一致 */
  font-family:var(--serif,'Noto Serif SC','Songti SC','STSong',serif);
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.sb-sidebar *{ box-sizing:border-box; }
.sb-sidebar::-webkit-scrollbar{ width:0; height:0; }
.sb-logo{ height:94px; min-height:94px; display:flex; align-items:center; padding:8px 20px; text-decoration:none; }
.sb-logo img{ height:78px; width:auto; max-width:100%; object-fit:contain; display:block; }
.sb-nav{ display:flex; flex-direction:column; padding-top:8px; padding-bottom:8px; }
.sb-item{
  display:flex; align-items:center; gap:10px; padding:10px 14px; margin:0 10px 2px;
  min-height:40px; line-height:22.4px;
  border-radius:var(--radius-md,12px); font-size:14px; color:var(--ink2,#666);
  text-decoration:none; background:none; border:none; width:calc(100% - 20px);
  text-align:left; font-family:inherit; cursor:pointer;
  transition:background .15s, color .15s, box-shadow .15s;
}
.sb-item:hover{ background:var(--surface2,#ECEAE5); color:var(--ink,#181818); }
.sb-item.active{
  background:var(--surface,#fff); color:var(--ink,#181818); font-weight:500;
  box-shadow:0 4px 14px rgba(24,24,24,.10), 0 1px 2px rgba(24,24,24,.05);
}
.sb-bottom{ border-top:1px solid var(--line,#E8E5E0); padding:12px; margin-top:auto; }
.sb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%;
  font-size:14px; font-weight:500; padding:11px 18px; border-radius:var(--radius-md,12px);
  border:1px solid transparent; cursor:pointer; transition:.15s; line-height:1;
  font-family:inherit; text-decoration:none;
}
.sb-btn-primary{ background:var(--primary,#181818); color:#fff; box-shadow:0 4px 12px rgba(24,24,24,.15); }
.sb-btn-primary:hover{ background:var(--btn-primary-hover,#2E2E2E); }
.sb-btn-ghost{ background:var(--surface2,#ECEAE5); color:var(--ink2,#666); border:1px solid var(--line,#E8E5E0); margin-top:8px; }
.sb-btn-ghost:hover{ background:var(--line,#E8E5E0); }
.sb-user{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border-radius:var(--radius-md,12px); text-decoration:none; color:inherit;
  background:none; border:none; font-family:inherit; text-align:left; cursor:pointer;
}
.sb-user:hover{ background:var(--surface2,#ECEAE5); }
.sb-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--surface2,#ECEAE5);
  color:var(--ink,#181818); display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:500; flex-shrink:0;
}
.sb-user-meta{ min-width:0; flex:1; }
.sb-user-email{ font-size:13px; color:var(--ink,#181818); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-main{ min-width:0; margin-left:260px; overflow-x:hidden; }

/* 窄屏：侧栏降级为顶部横向条，保证内容可读 */
@media (max-width:860px){
  .sb-sidebar{
    position:static; height:auto; max-height:none; overflow:visible;
    width:100%; min-width:0; flex-direction:row; align-items:center; gap:4px;
    border-right:none; border-bottom:1px solid var(--line,#E8E5E0); padding:8px 10px;
  }
  .sb-main{ margin-left:0; }
  .sb-logo{ height:auto; min-height:0; padding:0 10px 0 0; }
  .sb-logo img{ height:38px; }
  .sb-nav{ flex-direction:row; padding:0; }
  .sb-item{ width:auto; margin:0; padding:8px 12px; white-space:nowrap; }
  .sb-bottom{ margin:0 0 0 auto; padding:0; border-top:none; display:flex; gap:8px; align-items:center; }
  .sb-btn{ width:auto; padding:8px 14px; }
  .sb-btn-ghost{ margin-top:0; }
  .sb-user{ width:auto; padding:6px 10px; }
  .sb-user-email{ display:none; }
}