/* 桌面端显示site-nav，平板端隐藏 */
@media screen and (max-width: 1440px) {
  .site-nav {
    display: none !important;
  }
}

@keyframes backgroundFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@font-face {
  font-family: 'Space Wham'; /* 自定义字体名称 */
  src: url('{{ site.baseurl }}/assets/fonts/space-wham.ttf') format('truetype'); /* 引入字体文件 */
  font-weight: normal; /* 设置字体粗细 */
  font-style: normal; /* 设置字体样式 */
}

/* 第二个字体 */
@font-face {
  font-family: 'LXGW WenKai';  /* 字体名字，写成你想在 font-family 里用的 */
  src: url('{{ site.baseurl }}/assets/fonts/LXGWWenKai-Light.ttf') format('truetype');
  font-weight: 400; 
  font-style: normal; 
  font-display: swap; /* 建议加这个，提高加载体验 */
}

/* 同一字体的粗体版本 */
@font-face {
  font-family: 'LXGW WenKai';
  src: url('{{ site.baseurl }}/assets/fonts/LXGWWenKai-Regular.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 定义自定义 CSS 变量 */
:root {
  --h3-glow: #522931; /* 定义发光颜色 */
  --copyright-glow: #e697ab; /* 定义发光颜色 */
  --text-normal: #ffffff; /* 正常文字颜色 */
  --border-color: #e8d2fd; /*item分割线颜色*/
  --background-color: #ffffff;
  --text-color: #333333;
  --accent-color: #007bff;
  --hover-color: #f5f5f5;
  --disabled-color: #999999;
}

body {
    background-color: #000000 !important; /* 强制覆盖base.scss中的白色背景 */
    background-image: url('../images/aniya.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    font-family: 'Arial', sans-serif;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    animation: backgroundFadeIn 1s ease-in-out;
    overflow-x: hidden; /* 禁止水平滚动 */
    width: 100vw; /* 确保body宽度不超过视窗 */
    box-sizing: border-box; /* 包含padding和border在内的盒模型 */
}

/* 确保所有元素使用border-box */
*, *::before, *::after {
    box-sizing: border-box;
}

.content-wrapper {
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    max-width: 100%; /* 防止超出视窗 */
    box-sizing: border-box;
}

header {
    background-image: url('../images/aniya.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 2rem 2rem 2rem 180px; 
    text-align: left;
    height: 180px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-image: none;
    max-width: 100vw; /* 防止超出视窗宽度 */
    overflow: hidden; /* 隐藏溢出内容 */
}

header h1 {
    margin: 0 20px;
    font-size: 2rem; /* 增加标题大小 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 添加文字阴影以增加可读性 */
    font-family: 'Space Wham', sans-serif; /* 设置字体为 Space Wham */
    max-width: calc(100vw - 220px); /* 确保标题不超出视窗 */
    word-wrap: break-word; /* 长单词自动换行 */
}

.welcome-message{
  margin: 20px 170px;
  font-size: 14px !important;
  max-width: calc(100vw - 220px); /* 防止超出视窗 */
  word-wrap: break-word;
}

nav {
    margin-top: 2rem;
}

nav a {
    color: #fff;
    margin: 0 10px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
  
.container {
  display: flex;
  margin: 0 auto;
  max-width: 100vw; /* 改为100vw防止超出视窗 */
  width: 100%; /* 确保宽度不超过父容器 */
  padding: 2rem;
  flex: 1;
  box-sizing: border-box;
  overflow: hidden; /* 隐藏溢出内容 */
  background: transparent !important; /* 强制透明背景 */
}

.article-list {
  flex: 3;
  margin-top: -30px !important;
  margin-right: 20rem;
  align-items: center !important;
  max-width: calc(100vw - 400px); /* 为侧边栏留出空间 */
  overflow: hidden; /* 防止内容溢出 */
  margin-left: 310px;
  border-radius: 12px !important;
 
  padding: 1.5rem !important;
}

.sidebar {
  position: fixed !important;
  top: 170px  !important; /* Distance from the top of the viewport */
  right: 120px !important; /* 减少右边距，防止超出视窗 */
  width: 300px !important; /* 稍微减小宽度 */
  max-width: 25vw !important; /* 确保不超过视窗的25% */
  height: calc(100vh - 240px) !important; /* Calculate height to prevent overlapping footer */
  overflow-y: auto !important; /* Add a scrollbar if content is too long */
  overflow-x: hidden !important; /* 禁止水平滚动 */
  padding: 1rem !important; /* Add some internal spacing */
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(203, 203, 229, 0.08),
    rgba(255, 192, 203, 0.05)
  ) !important; /* 改为半透明渐变背景 */
  border: 1px solid rgba(228, 206, 253, 0.3) !important; /* 添加微妙边框 */
  border-radius: 12px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
  flex: 1 !important;
  box-sizing: border-box;
  backdrop-filter: blur(10px) !important; /* 添加毛玻璃效果 */
  box-shadow: 
    0 4px 15px rgba(228, 206, 253, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1) !important; /* 添加阴影 */
}

/* 单个卡片透明背景 + 分割线 */
.post-preview,
.article-list .post-preview {
  background: transparent !important;
  
  border-radius: 12px;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* 添加底部分割线 */
  border-bottom: 0px solid #e5cefe !important;
  padding: 1.2rem 0 !important;
  margin-bottom: 0 !important;
}

/* 最后一个卡片不显示分割线 */
.article-list .post-preview:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.article-list .post-preview:hover {
  transform: translateX(8px) !important;
 
  border-radius: 8px !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.post-content {
  width: 100%; /* 占满整个卡片宽度 */
  padding: 1.2rem 1.2rem; /* 内边距移到这里 */
  font-family: 'Roboto_slab', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  height: 100%; /* 占满父容器高度 */
}

.post-content h3.glow-text {
  margin: 0 0 0.2rem 0; /* 标题下边距最小化 */
  font-size: 1.2rem !important;
  line-height: 1.7  !important; /* 减小行高 */
}

.post-content h3 a {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 2px;
  font-weight: 500;
  letter-spacing: 1px;
}

.post-content h3 a:hover {
  color: #e5cefe;
  text-shadow: 
    0 0 15px rgba(255, 192, 203, 0.7),
    0 0 25px rgba(255, 192, 203, 0.5);
}

.post-content h3 a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(255, 192, 203, 0.8),
    rgba(228, 206, 253, 0.8),
    rgba(255, 192, 203, 0)
  );
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 192, 203, 0.5);
}

.post-content h3 a:hover::after {
  width: 100%;
}

.post-content .item-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0; /* 确保没有额外边距 */
  line-height: 1.3; /* 减小行高 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 16px !important;
}

/* 
.home-sidebar {
  flex: 1;
  margin-right: 5rem;
} */

/* 覆盖层容器的样式 */
.overlay-image-container {
  position: fixed;     /* 使用 fixed 定位，使其相对于视口定位 */
  top: 16px;           /* 固定在页面顶部 10px 处 */
  left: 16px;         /* 固定在页面右侧 10px 处 */
  width: auto;         /* 宽度自动，适应图片大小 */
  height: auto;        /* 高度自动，适应图片大小 */
  z-index: 1000;       /* 设置较高的 z-index 值，确保其显示在页面内容之上 */
  pointer-events: auto;/* 禁用鼠标事件，使得底层内容可点击 */
}

/* 覆盖层中图片的样式 */
.overlay-image {
  width: 300px;         /* 保持图片原始宽度 */
  height: auto;        /* 保持图片原始高度 */
  display: block;      /* 将图片设置为块级元素 */
  margin: 0;           /* 移除图片的默认 margin */
  padding: 0;          /* 移除图片的默认 padding */
  opacity: 0.8;
}

.copyright {
  text-align: center;
  color: #fff;
  font-size: 12px;
  text-shadow: 
  0 0 5px var(--copyright-glow), 
  0 0 10px var(--copyright-glow), 
  0 0 20px var(--copyright-glow), 
  0 0 10px var(--copyright-glow); /* 使用自定义变量的颜色作为发光颜色 */
  transition: all 0.3s ease-in-out; /* 添加过渡效果 */
}

@keyframes glowAnimation {
  0% {
      text-shadow: 0 0 5px var(--h3-glow), 0 0 10px var(--h3-glow), 0 0 20px var(--h3-glow);
  }
  100% {
      text-shadow: 0 0 15px var(--h3-glow), 0 0 25px var(--h3-glow), 0 0 35px var(--h3-glow);
  }
}

/* 强制移除所有可能的背景 */
.article-list, 
.article-list *,
.article-list .post-preview,
.article-list .post-preview *,
.article-list .post-preview::before,
.article-list .post-preview::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 确保卡片悬停时也没有背景 */
.article-list .post-preview:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  transform: translateX(5px) !important;
 
  box-shadow: none !important;
}

/* 首页专用样式 - 使用高特异性覆盖其他样式 */
.article-list .post-preview {
  border: 0.1px solid rgba(228, 206, 253, 0.103) !important; /* 更淡的边框，更好融合 */
  backdrop-filter: blur(1.5px) !important;
  margin-bottom: 0.6rem !important; /* 减少间距，更紧凑 */
  padding: 0 !important; /* 移除所有内边距，让 post-content 完全控制 */
  transition: all 0.3s ease !important;
  border-radius: 8px !important; /* 精致的圆角 */
 
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important; /* 更轻微的阴影 */
  min-height: 70px !important; /* 稍微减小高度，更精致 */
  display: flex !important; /* 使用 flex 布局 */
  align-items: center !important; /* 垂直居中 */
}

.article-list .post-preview::before {
  display: none !important; /* 完全隐藏伪元素 */
}

.article-list .post-preview:hover {
  border-color: rgba(228, 206, 253, 0.5) !important;
  background: rgba(228, 206, 253, 0.2) !important;
  transform: translateY(-1px) !important; /* 轻微上移效果 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; /* hover时更自然的阴影 */
  backdrop-filter: blur(1.5px) !important;
}

.article-list .post-preview:last-child {
  margin-bottom: 0 !important;
}

.article-list .post-preview .post-content {
  width: 100% !important; /* 占满整个卡片宽度 */
  padding: 1rem 1.2rem !important; /* 调整内边距，更精致 */
  font-family: 'Roboto_slab', sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* 垂直居中内容 */
  height: 100% !important; /* 占满父容器高度 */
  margin: 0 !important;
  color: inherit !important; /* 继承颜色而不是使用components.scss中的设置 */
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
}

.article-list .post-preview .post-content h3.glow-text {
  margin: 0 0 0.5rem 0 !important; /* 减少标题下边距，更紧凑 */
  font-size: 1.1rem !important; /* 稍微减小字体大小 */
  line-height: 1.3 !important; /* 稍微增加行高，更易读 */
  color: inherit !important; /* 不使用components.scss中的颜色 */
  font-weight: 500 !important;
}

.article-list .post-preview .post-content h3 a {
  color: rgba(255, 255, 255, 0.95) !important; /* 稍微降低不透明度，更柔和 */
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  padding-bottom: 2px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important; /* 减少字间距 */
  font-size: 1.1rem !important; /* 与h3保持一致 */
}

.article-list .post-preview .post-content h3 a:hover {
  color: #e5cefe !important;
  text-shadow: 
    0 0 15px rgba(255, 192, 203, 0.7),
    0 0 25px rgba(255, 192, 203, 0.5) !important;
}

.article-list .post-preview .post-content h3 a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(255, 192, 203, 0.8),
    rgba(228, 206, 253, 0.8),
    rgba(255, 192, 203, 0)
  );
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 192, 203, 0.5);
}

.article-list .post-preview .post-content h3 a:hover::after {
  width: 100%;
}

.article-list .post-preview .post-content .item-text {
  font-size: 0.85rem !important; /* 使用rem单位，更一致 */
  color: rgba(255, 255, 255, 0.75) !important; /* 稍微降低不透明度 */
  margin: 0 !important; /* 确保没有额外边距 */
  line-height: 1.4 !important; /* 保持良好的行高 */
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 400 !important; /* 稍微减轻字重 */
  letter-spacing: 0.2px !important; /* 添加轻微字间距 */
}

/* 平板端样式调整 */
@media screen and (min-width: 1025px) and (max-width: 1500px) {
  body {
    background-image: url('../images/aniya.jpg') !important; /* 保留背景图片 */
    background-color: #000000 !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
  
  header {
    background-image: none !important; /* 移除header背景图片 */
  }
  
  /* 调整文章列表在平板端的布局 */
  html body main.container .article-list {
    margin-left: 60px !important; /* 左边距很小，让文章列表靠左 */
    margin-right: 40px !important; /* 右边距为侧边栏留出空间：50px(侧边栏右边距) + 280px(侧边栏宽度) + 20px(间距) */
    max-width: calc(100vw - 500px) !important; /* 移除最大宽度限制，让右边距决定动态宽度 */
    width: auto !important; /* 自动宽度 */
  }
  
  /* 调整侧边栏在平板端的位置 */
  html body main.container .sidebar {
    right: 60px !important; /* 右边距50px */
    width: 280px !important; /* 侧边栏宽度 */
    margin-top: 90px !important;
  }
}

/* 移动端样式调整 */
@media screen and (max-width: 767px) {
  /* 防止水平滚动 */
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    background-color: #000000 !important; /* 确保移动端也是黑色背景 */
    background-image: url('../images/bg_phone.png') !important; /* 移除背景图片 */
    background-size: cover !important; /* 图片缩放以覆盖整个区域 */
    background-position: center !important; /* 图片居中 */
    background-repeat: no-repeat !important; /* 不重复 */
    height: 100vh !important; /* 确保 body 高度为整个视口 */
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 调整header在移动端的样式 */
  header {
    padding: 1rem !important;
    min-height: 10px !important;
    height: auto !important;
    background: transparent !important; /* 确保header背景透明 */
    background-image: none !important; /* 移除header背景图片 */
    
  }
  
  /* 汉堡菜单样式 */
  .site-nav {
    display: block !important;
  }

  .menu-icon {
      display: block !important; /* 显示汉堡图标 */
      cursor: pointer;
      font-size: 1.5rem; /* 调整 emoji 大小 */
      line-height: 1; /* 防止 emoji 周围的额外空间 */
      margin-top: 6px;
    }
  
  /* 默认隐藏trigger内容 */
  .site-nav .trigger {
      display: none !important;
      position: absolute !important;
      top: 100% !important;
      right: -20px !important;
      background: linear-gradient(135deg, 
      rgba(255, 255, 255, 0.98), 
      rgba(248, 249, 250, 0.95)
    ) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(228, 206, 253, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 1rem !important;
      min-width: 180px !important;
      z-index: 1000 !important;
      margin-top: 25px !important;
    }

  /* 当checkbox被选中时显示trigger */
  .site-nav input:checked ~ .trigger {
    display: block !important;
  }

  .category-link {
    display: block !important;
    padding: 0.2rem 0.8rem !important;
    margin: 0.2rem 0 !important;
    color: #7ec57f !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
  }

  .category-link:hover {
    background: linear-gradient(90deg, 
      rgba(228, 206, 253, 0.15), 
      rgba(228, 206, 253, 0.05)
    ) !important;
    color: #f093fb !important;
    border-left-color: #d57eeb !important;
    transform: translateX(3px) !important;
  }

  
  
  header h1 {
    margin: 0 !important;
    font-size: 1.5rem !important;
    max-width: 100% !important;
  }
  
  .welcome-message {
    margin: 10px 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
  }
  
  /* 调整容器 - 使用更高特异性的选择器 */
  body .container,
  main.container {
    flex-direction: column !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    background: transparent !important; /* 确保容器背景透明 */
    margin: 0 !important;
    padding: 0 0.2rem !important; /* 大幅减少左右padding，几乎贴边 */
    padding-right: 0.2rem !important; /* 强制覆盖layout.scss中的380px右边距 */
    padding-left: 0.2rem !important; /* 强制覆盖可能的左边距 */
    box-sizing: border-box !important;
  }
  
  /* 隐藏侧边栏 */
  .sidebar {
    display: none !important;
  }
  
  /* 调整文章列表 - 使用更高特异性的选择器 */
  body .article-list,
  main .article-list,
  .container .article-list {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important; /* 确保文章列表背景透明 */
    margin-top: 0 !important;
    padding: 0 !important; /* 移除所有内边距 */
    flex: unset !important; /* 取消flex设置 */
    box-sizing: border-box !important;
  }
  
  /* 调整卡片的左右边距 */
  .article-list .post-preview {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
    min-height: 75px !important; /* 移动端稍微减小高度 */
    max-width: calc(100vw - 0.2rem) !important; /* 几乎充满整个视窗，只留很小边距 */
    width: calc(100vw - 0.2rem) !important; /* 强制设置宽度 */
    left: 0 !important; /* 强制靠左对齐 */
    position: relative !important; /* 确保定位生效 */
  }
  
  /* 调整内容区域的左右内边距 */
  .article-list .post-preview .post-content {
    padding: 0.1rem 0.1rem !important; /* 减少左右内边距 */
  }
  
  /* 调整标题字体大小 */
  .article-list .post-preview .post-content h3.glow-text {
    font-size: 1.1rem !important; /* 移动端稍微减小字体 */
    margin: 0 0 0.6rem 0 !important; /* 稍微减少下边距 */
    line-height: 1.3 !important;
  }
  
  .article-list .post-preview .post-content h3 a {
    font-size: 1.1rem !important;
    letter-spacing: 0.5px !important; /* 减少字间距 */
  }
  
  /* 调整摘要文本 */
  .article-list .post-preview .post-content .item-text {
    font-size: 12px !important; /* 移动端稍微减小字体 */
    line-height: 1.3 !important;
  }
}

/* 超小屏幕（手机竖屏）*/
@media screen and (max-width: 480px) {
  body {
    background-image: url('../images/bg_phone.png') !important; /* 移除背景图片 */
    background-color: #000000 !important; /* 纯黑色背景 */
    background-size: cover !important; /* 图片缩放以覆盖整个区域 */
    background-position: center !important; /* 图片居中 */
    background-repeat: no-repeat !important; /* 不重复 */
    height: 100vh !important; /* 确保 body 高度为整个视口 */
  }
  body .container,
  main.container {
    padding: 0 !important; /* 几乎贴边的极小padding */
    box-sizing: border-box !important;
  }
  
  .article-list .post-preview {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
    min-height: 70px !important; /* 更小的高度 */
    max-width: calc(100vw - 0.2rem) !important; /* 几乎充满整个视窗 */
   
    left: 0 !important; /* 强制靠左对齐 */
    position: relative !important; /* 确保定位生效 */
  }
  
  .article-list .post-preview .post-content {
    padding: 0.3rem !important; /* 减少左右内边距以配合贴边设计 */
  }
  
  .article-list .post-preview .post-content h3.glow-text {
    font-size: 1rem !important;
    margin: 0 0 0.5rem 0 !important;
  }
  
  .article-list .post-preview .post-content h3 a {
    font-size: 1rem !important;
  }
  
  .article-list .post-preview .post-content .item-text {
    font-size: 11px !important;
  }
}

/* 侧边栏内容样式 */
.widget.categories {
  display: flex;
  flex-direction: column;
  gap: 10px;



  .category-box {
      padding: 10px 15px;
      border-radius: 12px;
      display: block;
      font-weight: 500;
      font-size: 16px;
      text-decoration: none;
      transition: all 0.3s ease;
      background-size: 200% 100%;
      background-position: 0 0;
      font-weight: 800;
      
      
  }
  
  .category-box:hover {
      transform: translateY(-1px);
      background-position: 100% 0;
      color: #fff !important;
  }
  
  
  .cate-1 { background-image: linear-gradient(45deg, #fbe6ef, #f399be 50%); color: #f071a4; }
  .cate-2 { background-image: linear-gradient(145deg, #f8f5ca, #f1e88a 50%); color: #e8ce5c; }
  .cate-3 { background-image: linear-gradient(145deg, #ccccf3, #ababeb 50%); color: #8989e2; }
  .cate-4 { background-image: linear-gradient(145deg, #fcebed, #e49a96 50%); color: #d6756e; } 
  .cate-5 { background-image: linear-gradient(45deg, #b7eeed, #89e2e2 50%); color: #30c4cd; }
  .cate-6 { background-image: linear-gradient(45deg, #e0f3cc, #b6e289 50%); color: #95d455; } 
}

.sidebar .widget {
  margin-bottom: 1.5rem !important;
}

.sidebar .widget-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.8rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(228, 206, 253, 0.3) !important;
  padding-bottom: 0.5rem !important;
}

.sidebar .category-box {
  display: inline-block !important;
  padding: 0.4rem 0.8rem !important;
  margin: 0.2rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(228, 206, 253, 0.2) !important;
  backdrop-filter: blur(5px) !important;
}

.sidebar .tag-box {
  display: inline-block !important;
  padding: 0.2rem 0.6rem !important;
  margin: 0.4rem 0.3rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  background-color: rgba(255, 255, 255, 0.1) !important; /* 保持原有的半透明背景 */
  border: 1px solid rgba(228, 206, 253, 0.2) !important;
  backdrop-filter: blur(5px) !important;

  /* 应用渐变文字的关键样式 */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* 为标签文字应用20种不同的渐变背景 */
.sidebar .tag-box:nth-child(20n + 1) { background-image: linear-gradient(150deg, #ffd699, #ffa500) !important; }
.sidebar .tag-box:nth-child(20n + 2) { background-image: linear-gradient(150deg, #a7f3f0, #5ee7df) !important; }
.sidebar .tag-box:nth-child(20n + 3) { background-image: linear-gradient(150deg, #e1e7f0, #c3cfe2) !important; }
.sidebar .tag-box:nth-child(20n + 4) { background-image: linear-gradient(150deg, #f0e1fd, #e0c3fc) !important; }
.sidebar .tag-box:nth-child(20n + 5) { background-image: linear-gradient(150deg, #f7c9fd, #f093fb) !important; }
.sidebar .tag-box:nth-child(20n + 6) { background-image: linear-gradient(150deg, #c6e6e6, #75c8c7) !important; }
.sidebar .tag-box:nth-child(20n + 7) { background-image: linear-gradient(150deg, #ffecd2, #fcb69f) !important; }
.sidebar .tag-box:nth-child(20n + 8) { background-image: linear-gradient(150deg, #d4fc79, #96e6a1) !important; }
.sidebar .tag-box:nth-child(20n + 9) { background-image: linear-gradient(150deg, #84fab0, #8fd3f4) !important; }
.sidebar .tag-box:nth-child(20n + 10) { background-image: linear-gradient(150deg, #fccb90, #d57eeb) !important; }
.sidebar .tag-box:nth-child(20n + 11) { background-image: linear-gradient(150deg, #f6d365, #fda085) !important; }
.sidebar .tag-box:nth-child(20n + 12) { background-image: linear-gradient(150deg, #ccccf3, #8989e2) !important; }
.sidebar .tag-box:nth-child(20n + 13) { background-image: linear-gradient(150deg, #fdcbf1, #e6dee9) !important; }
.sidebar .tag-box:nth-child(20n + 14) { background-image: linear-gradient(150deg, #a1c4fd, #c2e9fb) !important; }
.sidebar .tag-box:nth-child(20n + 15) { background-image: linear-gradient(150deg, #d4fc79, #96e6a1) !important; }
.sidebar .tag-box:nth-child(20n + 16) { background-image: linear-gradient(150deg, #ff9a9e, #fecfef) !important; }
.sidebar .tag-box:nth-child(20n + 17) { background-image: linear-gradient(150deg, #f6d5f7, #fbe9d7) !important; }
.sidebar .tag-box:nth-child(20n + 18) { background-image: linear-gradient(150deg, #c6e6c6, #7ec57f) !important; }
.sidebar .tag-box:nth-child(20n + 19) { background-image: linear-gradient(150deg, #c1dfc4, #deecdd) !important; }
.sidebar .tag-box:nth-child(20n + 20) { background-image: linear-gradient(150deg, #f0f2f0, #bdbbbe) !important; }

.sidebar .category-box:hover,
.sidebar .tag-box:hover {
  border-color: rgba(228, 206, 253, 0.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(228, 206, 253, 0.3) !important;
}

.sidebar .category-box:hover {
  background: rgba(228, 206, 253, 0.2) !important;
}

.sidebar .tag-box:hover {
  background-color: rgba(228, 206, 253, 0.2) !important; /* 悬停时只改变背景色，保留文字渐变 */
}

/* 隐藏侧边栏滚动条 */
.sidebar::-webkit-scrollbar {
  display: none !important;
}

/* 确保所有主要容器元素都没有背景 */
main, main.container {
  background: transparent !important;
}

/* 超高优先级移动端样式覆盖 - 确保生效 */
@media screen and (max-width: 769px) {
  html body main.container,
  html body .container,
  body main.container,
  body .container {
    padding: 0 0.4rem !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    align-items: center !important;
    margin-top: 20px !important;
  }
  
  html body main.container .article-list,
  html body .container .article-list,
  body main.container .article-list,
  body .container .article-list {
    margin: 0 !important;
    padding: 0rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  html body main.container .article-list .post-preview,
  html body .container .article-list .post-preview,
  body main.container .article-list .post-preview,
  body .container .article-list .post-preview {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    padding: 0 0.6rem !important;
    max-width: calc(100vw - 2.4rem) !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 480px) {
  html body main.container,
  html body .container,
  body main.container,
  body .container {
    padding: 0 0.4rem !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    align-items: center !important;
    margin-top: 20px !important;
  }
  
  html body main.container .article-list .post-preview,
  html body .container .article-list .post-preview,
  body main.container .article-list .post-preview,
  body .container .article-list .post-preview {
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
  }
}

/* 桌面端两栏布局 (宽度 >= 768px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .sidebar {
    position: fixed !important;
    margin-top: 90px !important;
    right: 50px !important;
    width: 280px !important;
    height: calc(100vh - 240px) !important;
    display: block !important; /* 在桌面端显示侧边栏 */
  }

  html body main.container .article-list ,
  html body .container .article-list ,
  body main.container .article-list,
  body .container .article-list {
    margin-right: 300px !important;
    margin-left: auto !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* 移动端单栏布局 (宽度 < 768px) */
@media screen and (max-width: 767px) {
  .container {
    flex-direction: column !important;
    padding: 1rem !important;
    align-items: center !important;
  }
  
  .sidebar {
    display: none !important; /* 在移动端默认隐藏侧边栏 */
    position: static !important; /* 如果需要显示，则取消固定定位 */
    width: 100% !important;
    margin-top: 2rem !important;
  }
  
  .article-list {
    margin-right: 0 !important;
    width: 100% !important;
  }
}