/* ══ 全局骨架与侧边栏 ═══════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout {
  height: 100vh;
  width: 100%;
  display: flex;
}
.leftBar {
  height: inherit;
  position: relative;
  overflow: hidden;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 在原图上面叠一层暖黑。不叠的话，这张浅色壁纸会把白字彻底吃掉 */
.leftBar::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(rgba(30,23,21,0.58) /* 壁纸压暗层 */, rgba(30,23,21,0.58) /* 壁纸压暗层 */), url("/images/background.jpg");
  filter: blur(3px);
  z-index: -1;
}
/* 内容超出视口高度时，滚动发生在这里，而不是 .leftBar。
   .leftBar 必须一直保持 overflow: hidden —— 它的 ::before 用 inset: -20px
   外加 blur 铺满整块背景，去掉裁剪那层模糊就会糊出侧边栏外面。
   导航栏放在这一层【外面】，所以滚不到它。 */
.leftBarScroll {
  flex: 1 /* 占满导航以上的剩余高度 */;
  min-height: 0 /* flex 子项的默认最小高是内容高，不写这行它不肯收缩，也就滚不起来 */;
  width: 100%;
  position: relative /* 头像 .leftBarAvatar 靠这层定位，跟着内容一起滚 */;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 细滚动条，免得在深色侧栏里杵一根白杠 */
.leftBarScroll::-webkit-scrollbar {
  width: 6px;
}
.leftBarScroll::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(245,241,238,0.22);
}
.leftBarAvatar {
  border-radius: 50%;
  transform: translate(-50%, -45%);
  top: 0;
  left: 50%;
  position: absolute;
  background-image: url("/images/avatar.jpg");
  background-size: cover;
  background-position: center;
  width: 100px;
  height: 100px;
  border: 3px solid rgba(245,241,238,0.9);
  box-shadow: 0 0 0 4px rgba(179,18,63,0.55) /* 酒红柔光 */, 0 10px 30px rgba(16,10,9,0.5);
}
.rightPage {
  flex: 1;
  position: relative;
/* 这一层不再滚，只负责两件事：
       给 ::before 当定位锚点、把溢出裁掉。 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 滚动挪到内层。这样 ::before 挂在"不滚动的父元素"上，
   内容在它上面滑过，背景自然就静止了。 */
.rightPageInner {
  flex: 1;
  min-height: 0 /* 关键：不加的话 flex 子项不肯收缩，整个滚不动 */;
  padding: 2rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.rightPage::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: top;
  background-image: url("/images/articlepic11.webp");
  filter: blur(6px);
  z-index: -1;
}
.userDetail {
  margin: 50px 20px 0;
  padding: 16px 12px;
  border-radius: 12px;
  background-color: rgba(46,36,33,0.5) /* 卡片底：暖褐半透明 */;
/* saturate() 让卡片"透"出壁纸的红棕调，配色融进背景的关键就是它 */
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  text-align: center;
  box-shadow: 0 8px 28px rgba(16,10,9,0.35);
  transition: transform 1s, box-shadow 0.4s;
}
.userDetail:hover {
  transform: translateY(8px);
  box-shadow: 0 14px 34px rgba(179,18,63,0.55) /* 酒红柔光 */;
}
.userDetail p {
  line-height: 1.7;
}
.userDetail p:first-of-type {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(179,18,63,0.55) /* 酒红柔光 */, 0 2px 6px rgba(16,10,9,0.7);
}
.userDetail p:not(:first-of-type) {
  font-size: 15px;
  color: rgba(245,241,238,0.74) /* 次要文字 */;
}
/* 导航常驻底部：它在 .leftBarScroll 外面，所以上面内容再长也压不到它。
   不需要 margin-top: auto 了 —— 上一层的 flex: 1 已经把剩余空间吃干净。 */
.leftNar {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background-color: rgba(30,23,21,0.42) /* 导航栏底衬 */;
  margin-top: auto;
}
.navItem {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: rgba(245,241,238,0.74) /* 次要文字 */;
  font-size: 20px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s, color 0.3s, border-color 0.3s;
}
.navItem:hover {
  background-color: rgba(179,18,63,0.3);
  border-left-color: #b3123f /* 主强调：领带的酒红 */;
  transform: translateX(6px);
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
}
.navItem.active {
  background-color: rgba(179,18,63,0.45);
  border-left-color: #d99846 /* 次强调：齿轮数字的琥珀金 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-weight: 700;
}
.sideStat {
  align-self: stretch;
  display: flex;
  margin: 20px;
  padding: 14px 0;
  border-radius: 12px;
  background-color: rgba(46,36,33,0.5) /* 卡片底：暖褐半透明 */;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  box-shadow: 0 8px 24px rgba(16,10,9,0.28);
}
.statItem {
  flex: 1 /* 三等分，自动平分宽度 */;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  transition: transform 0.2s;
}
.statItem:hover {
  transform: translateY(-3px);
}
.statItem:not(:last-child) {
  border-right: 1px solid rgba(245,241,238,0.22) /* 描边 */;
}
.statNum {
  font-size: 22px;
  font-weight: 900;
  color: #d99846 /* 次强调：齿轮数字的琥珀金 */ /* 数字用琥珀金，呼应齿轮上那串数字 */;
  text-shadow: 0 0 12px rgba(217,152,70,0.5);
}
.statLabel {
  font-size: 12px;
  opacity: 0.8;
}
.category {
  width: 80%;
  padding: 14px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  background-color: rgba(179,18,63,0.2);
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  border-radius: 12px;
}
.categoryItem {
  cursor: pointer;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  color: rgba(245,241,238,0.74) /* 次要文字 */;
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s, color 0.3s;
}
.categoryItem:hover {
  background-color: rgba(179,18,63,0.35);
  transform: translateX(6px);
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
}
.categoryItem.active {
  background-color: rgba(179,18,63,0.5);
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-weight: 700;
}
.socialBar {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 16px 0;
}
.socialItem {
  position: relative /* 给二维码当定位锚点 */;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 /* <button> 自带内边距，不清掉图标会偏 */;
  border-radius: 50%;
  background-color: rgba(46,36,33,0.5) /* 卡片底：暖褐半透明 */;
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-family: inherit /* <button> 默认不继承字体 */;
  font-size: 18px;
  text-decoration: none;
  transition: background-color 0.25s, transform 0.25s;
}
.socialItem:hover {
  background-color: rgba(179,18,63,0.45);
  transform: translateY(-3px);
}
.socialWechat {
  cursor: pointer /* 它能被聚焦，给个手势提示 */;
}
/* 触屏没有 hover，只靠 :hover 二维码在手机上永远弹不出来。
   它是个 <button>，点一下就有焦点，再点别处失焦。
   不写 outline: none —— 键盘用户靠那圈焦点框认位置 */
.socialWechat:focus {
  background-color: rgba(179,18,63,0.45);
}
.wechatQr {
  position: absolute;
  bottom: 52px /* 弹在按钮上方 */;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  width: 140px;
  opacity: 0;
  pointer-events: none /* 隐藏时别挡着鼠标 */;
  border-radius: 8px;
  transition: opacity 0.25s, transform 0.25s;
}
.socialWechat:hover .wechatQr,
.socialWechat:focus .wechatQr {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}