/************************************************************
 * 浅色系 + 偏紫的蓝色渐变背景 + 玻璃拟态 + 自定义鼠标指针
 ************************************************************/

/* ========== 背景渐变动画(偏紫+蓝) ========== */
@keyframes purpleGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 全局：黑字 + 渐变背景 + 动画 + 自定义鼠标 */
html, body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft Yahei UI", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: #333; /* 黑色文字，更清晰 */
  line-height: 1.7;

  /* 这里用偏紫的蓝色系渐变，可以根据自己喜好调整 */
  background: linear-gradient(-45deg, #c2b8f7, #a89ce3, #c2b8f7, #a89ce3);
  background-size: 400% 400%;
  animation: purpleGradient 15s ease infinite;

  /* 自定义鼠标指针 (请换成你真正的 .cur / .png / .ico 链接) */
  cursor: url("https://cdn.example.com/my-cursor.cur"), auto;
}

/* ========== 滚动条美化（仅在WebKit内核浏览器有效） ========== */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* ========== 顶部导航 (Sticky + 玻璃) ========== */
/* 如需适配博客园实际结构，请改成对应选择器 */
#header, #top_nav, .navbar {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 10px 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* 导航栏左侧标题 */
#header h2 a,
#header h2 a:visited {
  font-size: 24px;
  font-weight: 700;
  margin-right: auto;
  text-decoration: none;
  color: #333;
}

/* 导航链接 */
#top_nav a, .navbar a {
  margin-left: 16px;
  padding: 6px 12px;
  font-size: 14px;
  color: #444;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}
#top_nav a:hover, .navbar a:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #222;
}

/* ========== 主体外层容器（玻璃卡片） ========== */
/* 按博客园实际结构，如 #home 或 .forFlow */
#home {
  max-width: 1200px;
  margin: 40px auto;
  padding: 24px;

  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border-radius: 12px;

  /* 小动画：进入时渐显 */
  animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 文章列表 / 标题 ========== */
.postTitle a {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  transition: transform 0.3s, text-shadow 0.3s;
}
.postTitle a:hover {
  transform: scale(1.03);
  text-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* 文章描述信息（作者/时间等） */
.postDesc,
.postDesc a {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

/* ========== 文章正文 ========== */
#cnblogs_post_body, .postBody {
  margin-top: 20px;
  margin-bottom: 40px;
  font-size: 16px;
  color: #333;
  line-height: 1.9;
  word-wrap: break-word;
}
#cnblogs_post_body p, .postBody p {
  margin-bottom: 16px;
}

/* ========== 代码高亮区 ========== */
.highlight pre,
.post pre {
  background-color: #fafafa;
  color: #333;
  font-family: Consolas, "Fira Code", Courier, monospace;
  padding: 1.2em;
  margin: 1.5em 0;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid #ddd;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.02);
}
.highlight pre code,
.post pre code {
  background: transparent;
  color: inherit;
}

/* 若使用Prism.js或Highlight.js，可自定义如下token */
.token.comment { color: #999; }
.token.punctuation { color: #666; }
.token.selector, .token.attr-name { color: #a626a4; }
.token.property, .token.keyword { color: #ff6a00; }
.token.operator, .token.number { color: #005cc5; }
.token.string, .token.attr-value { color: #008000; }

/* ========== 引用块 ========== */
.postBody blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: 1em;
  border-left: 4px solid #ccc;
  background: rgba(0,0,0,0.03);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.04);
  border-radius: 4px;
}
.postBody blockquote::before {
  content: "“";
  position: absolute;
  top: -10px; left: 10px;
  font-size: 2em;
  color: #ccc;
  opacity: 0.3;
}
.postBody blockquote p {
  margin: 0;
  color: #555;
}

/* ========== 列表样式 ========== */
.postBody ul, .postBody ol {
  margin-left: 2em;
  margin-bottom: 1em;
  color: #333;
}
.postBody li {
  margin-bottom: 8px;
}

/* ========== 图片样式 ========== */
.postBody img {
  display: block;
  max-width: 100%;
  margin: 24px auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.postBody img:hover {
  transform: scale(1.02);
}

/* ========== 分页样式 ========== */
#nav_next_prev,
.pager,
.c_b_pager {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}
#nav_next_prev a,
.pager a,
.c_b_pager a {
  margin: 0 10px;
  padding: 8px 16px;
  background: #fff;
  color: #666;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: background 0.3s, color 0.3s;
}
#nav_next_prev a:hover,
.pager a:hover,
.c_b_pager a:hover {
  background: #7B61FF; /* 替换之前的蓝色(#0070f3)为偏紫 */
  color: #fff;
}

/* ========== 评论区 ========== */
#comments {
  margin: 40px 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.feedbackItem {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #ccc;
}
.feedbackCon {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}
.feedbackListSubtitle {
  color: #999;
  margin-top: 4px;
}

/* 评论输入框 */
#tbCommentBody {
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
}
#tbCommentBody::placeholder {
  color: #999;
}
/* 提交按钮 */
#btn_comment_submit {
  background-color: #7B61FF; /* 替换 #0070f3 */
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s, filter 0.3s;
}
#btn_comment_submit:hover {
  background-color: #634BDC; /* 替换 #005bd1 */
  filter: brightness(0.95);
}

/* ========== 侧边栏 ========== */
#sideBar {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  color: #333;
}
#sideBar h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
}
#sideBar a {
  display: block;
  margin: 6px 0;
  color: #444;
  transition: transform 0.2s, color 0.2s;
}
#sideBar a:hover {
  transform: translateX(4px);
  color: #7B61FF;
}

/* ========== 页脚 ========== */
#footer {
  font-size: 14px;
  color: #666;
  text-align: center;
  padding: 24px 0;
}
#footer a {
  color: #7B61FF;
  text-decoration: none;
  transition: color 0.2s;
}
#footer a:hover {
  color: #634BDC;
}

/* ========== 返回顶部按钮 ========== */
#back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  color: #333;
  font-size: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: none; /* 用JS在页面滚动后再显示 */
  z-index: 9999;
  transition: transform 0.3s, background 0.3s;
}
#back-to-top:hover {
  background: rgba(255,255,255,0.9);
  transform: scale(1.1) translateY(-3px);
}
#magic-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 鼠标可穿透Canvas */
  z-index: 9999;
}