body {
    background-image: url('/img/1769871307797/9827d01b24b33f673da3e3608b1ba75a'); /* 背景图片地址 */
    /* http://pcfs.eno.ink:20009/api/img/Takanashi-Hoshino?ratio=16_9 */
    background-size: cover; /* 图片覆盖整个页面 */
    background-position: center; /* 居中显示图片 */
    background-repeat: no-repeat; /* 禁止重复 */
    background-attachment: fixed; /* 固定背景图，滚动时保持静止 */
    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    display: flex;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Fluent Design 侧边栏样式 */
.sidebar {
    background-color: rgba(255, 255, 255, 0.4); /* 半透明背景色 */
    border-radius: 8px; /* Fluent Design 圆角 */
    box-shadow: 
        0 1.6px 3.6px rgba(0, 0, 0, 0.1), 
        0 0.3px 0.9px rgba(0, 0, 0, 0.05), 
        0 0 0 1px rgba(0, 0, 0, 0.05) inset; /* Fluent Design 阴影 */
    backdrop-filter: blur(30px) saturate(120%); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(30px) saturate(120%); /* Safari 兼容性前缀 */

    /* 布局与交互相关的原有属性 */
    width: 20ch;
    min-width: 20ch;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    height: 100%;
    overflow-y: auto;
    z-index: 1000;
    transform: translateZ(0);
}

.sidebar.hidden {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
}

.sidebar a {
    display: block;
    margin-bottom: 10px;
    color: #333;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar a:hover {
    color: #0078d4;
    background-color: rgba(0, 0, 0, 0.05);
}

/* 修改主要内容样式 */
.main-content {
    flex-grow: 1;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 60px;
}

/* 确保帖子容器跟随顶栏一起移动 */
.section {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 20px;
    display: flex; /* 添加flex布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 设置卡片间距 */
    justify-content: center; /* 居中排列卡片 */
}

.sidebar:not(.hidden) + .main-content .section {
    margin-left: 20ch;
}

/* 用户信息卡片样式 - 修改为横向布局 */
.user-info-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    box-shadow: 
        0 1.6px 3.6px rgba(0, 0, 0, 0.1), 
        0 0.3px 0.9px rgba(0, 0, 0, 0.05), 
        0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    padding: 18px 18px 14px 18px;
    margin: 20px;
    min-width: 200px;
    backdrop-filter: blur(30px) saturate(120%);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    flex: 1 1 calc(33.33% - 40px);
    max-width: calc(33.33% - 40px);
    width: calc(33.33% - 40px);
}

/* 修改顶栏样式以居中并匹配卡片宽度 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center; /* 居中对齐 */
    align-items: center;
    background-color: rgba(255, 255, 255, 0.85);
    color: black;
    padding: 10px 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 
        0 1.6px 3.6px rgba(0, 0, 0, 0.1), 
        0 0.3px 0.9px rgba(0, 0, 0, 0.05), 
        0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    backdrop-filter: blur(30px) saturate(120%);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    z-index: 2147483646;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    transform: translateZ(0);
    margin: 0 auto;
    max-width: 1200px; /* 最大宽度限制 */
}

/* 当侧边栏显示时调整顶栏左边距 */
.sidebar:not(.hidden) + .main-content .navbar {
    margin-left: 20ch;
    width: calc(100% - 20ch);
    border-radius: 0 0 8px 0;
}

/* 顶栏按钮样式调整以匹配帖子卡片的放大按钮 */
.navbar .btn {
    background-color: rgba(255, 255, 255, 0.35); /* 半透明背景色 */
    border: 1.5px solid rgba(255, 255, 255, 0.45); /* 边框 */
    box-shadow: 0 4px 10px rgba(31, 38, 135, 0.2), 0 2px 12px 0 rgba(255, 255, 255, 0.2) inset; /* 内外阴影 */
    backdrop-filter: blur(14px) saturate(180%); /* 高斯模糊效果 */
    -webkit-backdrop-filter: blur(14px) saturate(180%); /* Safari 兼容性前缀 */
    border-radius: 8px; /* 圆角 */
    padding: 6px 12px;
    font-size: 14px;
    color: black; /* 文字颜色 */
    transition: box-shadow 0.18s, border 0.18s, background 0.18s;
}

/* 悬停效果 */
.navbar .btn:hover {
    background-color: rgba(255, 255, 255, 0.55); /* 更亮的背景色 */
    border: 1.5px solid rgba(255, 255, 255, 0.65); /* 更明显的边框 */
    box-shadow: 0 6px 20px rgba(31, 38, 135, 0.35), 0 3px 16px 0 rgba(255, 255, 255, 0.35) inset; /* 更强的阴影 */
    transform: translateY(-1px);
}

.navbar .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.navbar a {
    color: black; /* 将文本颜色从白色改为黑色 */
    text-decoration: none;
    margin: 0 10px;
}
.navbar img {
    height: 30px;
}

#sections {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* 居中排列 */
}

/* 卡片通用样式 */

.post,
.user-info-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.1),
              0 0.3px 0.9px rgba(0, 0, 0, 0.05),
              0 0 0 1px rgba(0, 0, 0, 0.05) inset;
  padding: 18px 18px 14px 18px;
  margin: 20px;
  backdrop-filter: blur(30px) saturate(120%);
  -webkit-backdrop-filter: blur(30px) saturate(120%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);

  /* 修改为水平排列，每列宽度为33.33% */
  flex: 1 1 calc(33.33% - 20px);
  max-width: calc(33.33% - 20px);
  min-width: 200px; /* 保证最小宽度 */
}

.post:hover {
    box-shadow: 
        0 3.2px 7.2px rgba(0, 0, 0, 0.15), 
        0 0.6px 1.8px rgba(0, 0, 0, 0.1), 
        0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}



.user-info-card:hover {
    box-shadow: 
        0 3.2px 7.2px rgba(0, 0, 0, 0.15), 
        0 0.6px 1.8px rgba(0, 0, 0, 0.1), 
        0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

/* Fluent Design 帖子标题 */
.post-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
}

.post-tags {
    color: #666;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    font-size: 0.9em;
}

.post-tags-container {
    padding: 0 18px 10px 18px;
}

/* Fluent Design 帖子内容样式 */
.post-content {
    margin-bottom: 10px;
    color: #000;
}

/* Fluent Design 帖子发布时间样式 */
.post-time {
    font-size: 0.9em;
    color: #666;
    margin-left: auto;
}

/* Fluent Design 帖子作者样式 */
.post-author {
    font-size: 0.9em;
    color: #666;
    margin-right: 10px;
}

.post-content-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.section {
    margin-bottom: 20px;
}
.section-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 600;
    color: #000;
}
.sidebar-tabs {
    display: flex;
    margin-bottom: 10px;
}
.sidebar-tab {
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px 4px 0 0;
}

.sidebar-tab:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-tab.active {
    background-color: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}
.sidebar-content {
    display: none;
}
.sidebar-content.active {
    display: block;
}
.sidebar-links li {
    margin-left: 20px; /* 增加缩进 */
}
.modal-enter {
    opacity: 0;
    transform: scale(0.9);
}
.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Fluent Design 按钮样式 */
.pushButton {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.1), 0 0.3px 0.9px rgba(0, 0, 0, 0.05);
    transform: translateZ(0);
    position: relative;
    overflow: hidden;
}

.pushButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pushButton:hover {
    background-color: rgba(240, 240, 240, 0.9);
    box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, 0.15), 0 0.6px 1.8px rgba(0, 0, 0, 0.1);
}

.pushButton:hover::before {
    opacity: 1;
}

.pushButton:active {
    transform: translateZ(0) scale(0.98);
    box-shadow: 0 0.6px 1.8px rgba(0, 0, 0, 0.05), 0 0.3px 0.9px rgba(0, 0, 0, 0.03);
}

.pushButton.primary {
    background-color: rgba(0, 120, 215, 0.8);
    color: white;
}

.pushButton.primary:hover {
    background-color: rgba(0, 100, 190, 0.9);
}

.pushButton.secondary {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pushButton.secondary:hover {
    background-color: rgba(240, 240, 240, 0.9);
}


/* Fluent Design 气泡菜单样式 */
.bubble-menu {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.15), 
        0 2px 4px rgba(0, 0, 0, 0.1), 
        0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    padding: 10px 0 6px 0;
    min-width: 140px;
    position: absolute;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    backdrop-filter: blur(30px) saturate(120%);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    overflow: visible;
    transform: translateZ(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bubble-arrow {
    position: absolute;
    top: -8px;
    left: 38px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    z-index: 1;
    pointer-events: none;
}

.bubble-arrow::after {
    content: '';
    position: absolute;
    left: -7px;
    top: 2px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(240, 240, 240, 0.9);
    z-index: 2;
}

.bubble-menu .block {
    border-radius: 10px;
    margin: 0 10px;
}

.bubble-menu .block:hover {
    background: rgba(255,255,255,0.18);
}

.bubble-menu a {
    text-align: center; /* 文字水平居中 */
    padding: 8px 12px;    /* 可以适当增加内边距 */
}

/* 版权信息样式 */
.sidebar-footer {
    margin-top: auto; /* 将版权信息固定在侧边栏底部 */
    text-align: center;
    font-size: 0.8em;
    color: #888; /* 默认灰色 */
    padding: 10px 0;
    cursor: default;
    -webkit-user-select: none; /* Safari 兼容性前缀 */
    user-select: none;
    position: relative; /* 确保可以定位伪元素 */
}

.sidebar-footer span {
    display: inline-block; /* 确保每个字符单独应用动画 */
    color: #888; /* 默认颜色 */
    animation: none; /* 默认无动画 */
}

.sidebar-footer:hover span {
    animation: colorFade 0.75s ease-in-out forwards; /* 动画速度加快一倍 */
}

.sidebar-footer:hover {
    animation: none; /* 禁止伪元素动画 */
}

.sidebar-footer span:nth-child(1) { animation-delay: 0s; }
.sidebar-footer span:nth-child(2) { animation-delay: 0.05s; }
.sidebar-footer span:nth-child(3) { animation-delay: 0.1s; }
.sidebar-footer span:nth-child(4) { animation-delay: 0.15s; }
.sidebar-footer span:nth-child(5) { animation-delay: 0.2s; }
.sidebar-footer span:nth-child(6) { animation-delay: 0.25s; }
.sidebar-footer span:nth-child(7) { animation-delay: 0.3s; }
.sidebar-footer span:nth-child(8) { animation-delay: 0.35s; }
.sidebar-footer span:nth-child(9) { animation-delay: 0.4s; }
.sidebar-footer span:nth-child(10) { animation-delay: 0.45s; }
.sidebar-footer span:nth-child(11) { animation-delay: 0.5s; }
.sidebar-footer span:nth-child(12) { animation-delay: 0.55s; }
.sidebar-footer span:nth-child(13) { animation-delay: 0.6s; }
.sidebar-footer span:nth-child(14) { animation-delay: 0.65s; }
.sidebar-footer span:nth-child(15) { animation-delay: 0.7s; }
.sidebar-footer span:nth-child(16) { animation-delay: 0.75s; }
.sidebar-footer span:nth-child(17) { animation-delay: 0.8s; }
.sidebar-footer span:nth-child(18) { animation-delay: 0.85s; }
.sidebar-footer span:nth-child(19) { animation-delay: 0.9s; }
.sidebar-footer span:nth-child(20) { animation-delay: 0.95s; }
.sidebar-footer span:nth-child(21) { animation-delay: 1s; }
.sidebar-footer span:nth-child(22) { animation-delay: 1.05s; }
.sidebar-footer span:nth-child(23) { animation-delay: 1.1s; }
.sidebar-footer span:nth-child(24) { animation-delay: 1.15s; }
.sidebar-footer span:nth-child(25) { animation-delay: 1.2s; }
.sidebar-footer span:nth-child(26) { animation-delay: 1.25s; }
.sidebar-footer span:nth-child(27) { animation-delay: 1.3s; }
.sidebar-footer span:nth-child(28) { animation-delay: 1.35s; }
.sidebar-footer span:nth-child(29) { animation-delay: 1.4s; }
.sidebar-footer span:nth-child(30) { animation-delay: 1.45s; }
.sidebar-footer span:nth-child(31) { animation-delay: 1.5s; }
.sidebar-footer span:nth-child(32) { animation-delay: 1.55s; }
.sidebar-footer span:nth-child(33) { animation-delay: 1.6s; }
.sidebar-footer span:nth-child(34) { animation-delay: 1.65s; }

@keyframes colorFade {
    0%, 100% {
        color: #888; /* 起始和结束为灰色 */
    }
    50% {
        color: #000; /* 中间变为黑色 */
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateZ(0) translateY(10px); }
    to { opacity: 1; transform: translateZ(0) translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: translateZ(0) scale(0.95); }
    to { opacity: 1; transform: translateZ(0) scale(1); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateZ(0) translateX(20px); }
    to { opacity: 1; transform: translateZ(0) translateX(0); }
}

.post-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.85); /* 提高不透明度 */
    border: 1.5px solid rgba(255,255,255,0.85); /* 提高边框不透明度 */
    box-shadow: 0 4px 10px rgba(31, 38, 135, 0.2), 0 2px 12px 0 rgba(255, 255, 255, 0.2) inset;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    cursor: pointer;
    transition: box-shadow 0.18s, border 0.18s, background 0.18s;
    border-radius: 8px;
    padding: 0;
}
.post-view-btn:hover {
    background: rgba(255,255,255,0.95); /* 悬停时更高的不透明度 */
    border: 1.5px solid rgba(255,255,255,0.95);
    box-shadow: 0 6px 20px rgba(31, 38, 135, 0.35), 0 3px 16px 0 rgba(255, 255, 255, 0.35) inset;
}
.post-view-btn img {
    width: 20px;
    height: 20px;
    pointer-events: none;
}
/* 图表标题时间样式 */
.chart-title-time {
    color: #000;
}

#version-info {
    color: #000;
}

@media (max-width: 768px) {
  #sections {
    flex-direction: row;
    flex-wrap: wrap;   /* 允许换行 */
    overflow-x: visible;
  }
  .post,
  .user-info-card {
    flex: 1 1 100%;    /* 小屏幕下一列 */
    max-width: 100%;
  }
}


/* Fluent Design 动画类 */
.fadeInScale {
    animation: fadeInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slideIn {
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 新增：用户信息卡片父容器的flex布局，保证三卡片水平排列、响应式、间距均匀 */
.user-info-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}
.user-info-row .user-info-card {
  flex: 1 1 320px;
  max-width: 340px;
  min-width: 260px;
  height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .user-info-row {
    gap: 16px;
  }
  .user-info-row .user-info-card {
    max-width: 300px;
    min-width: 200px;
    height: 320px;
  }
}
@media (max-width: 900px) {
  .user-info-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .user-info-row .user-info-card {
    max-width: 100%;
    min-width: 160px;
    height: auto;
  }
}
@media (max-width: 600px) {
  .user-info-row {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .user-info-row .user-info-card {
    width: 95vw;
    max-width: 98vw;
    min-width: 0;
    height: auto;
  }
}
/* 卡片内容溢出处理 */
.user-info-card .post-content {
  overflow: auto;
  word-break: break-all;
}