/* ===== 全局重置样式 ===== */
/* 重置所有元素的默认边距和内边距 */
body {
  margin: 0;                   /* 清除默认外边距 */
  padding: 0;                 /* 清除默认内边距 */
  font-family: "Microsoft YaHei", sans-serif;  /* 设置默认字体 */
  color: #333;                /* 设置默认文字颜色 */
  line-height: 1.6;           /* 设置行高为1.6倍 */
  background-color: #fff;     /* 设置背景颜色为白色 */
}

/* ===== 第一屏背景样式 ===== */
.first-screen {
  position: relative;          /* 相对定位 */
  height: 100vh;              /* 高度为视口高度 */
  width: 100%;                /* 宽度为100% */
  background-image: url('https://i.postimg.cc/g2zzr7Nn/desktop.jpg');  /* 背景图片URL */
  background-size: cover;     /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  z-index: 1;                 /* 设置堆叠顺序 */
}

/* ===== 页首区域样式 ===== */
header {
  display: flex;              /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center;       /* 垂直居中 */
  padding: 15px 5%;          /* 内边距上下15px，左右5% */
  position: fixed;           /* 固定定位 */
  width: 90%;                /* 宽度为90% */
  top: 0;                    /* 距离顶部0 */
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  z-index: 1000;             /* 设置高堆叠顺序 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 左侧标题样式 */
.header-left {
  font-size: 24px;           /* 字体大小24px */
  font-weight: bold;         /* 字体加粗 */
  color: #333;              /* 文字颜色 */
}

/* 导航栏居中样式 */
.nav-center {
  display: flex;             /* 使用flex布局 */
  font-size: 18px;          /* 字体大小18px */
  justify-content: center; /* 水平居中 */
  flex-grow: 1;             /* 占据剩余空间 */
  margin-left: -144px;      /* 向左偏移144px */
}

/* 导航链接样式 */
.nav-center a {
  margin: 0 15px;           /* 左右外边距15px */
  color: #555;              /* 文字颜色 */
  text-decoration: none;    /* 去除下划线 */
  transition: color 0.3s;    /* 颜色过渡效果 */
}

/* 导航链接悬停效果 */
.nav-center a:hover {
  color: #1e88e5;           /* 悬停时文字颜色 */
  border-bottom: 2px solid #1e88e5; /* 底部边框 */
  padding-bottom: 5px;      /* 底部内边距 */
}

/* 右侧区域样式 */
.header-right {
  display: flex;             /* 使用flex布局 */
  align-items: center;      /* 垂直居中 */
  gap: 20px;                /* 子元素间距20px */
}

/* 右侧链接样式 */
.header-right a {
  color: #555;              /* 文字颜色 */
  text-decoration: none;   /* 去除下划线 */
  font-size: 20px;         /* 字体大小20px */
  transition: color 0.3s;   /* 颜色过渡效果 */
}

/* 右侧链接悬停效果 */
.header-right a:hover {
  color: #1e88e5;          /* 悬停时文字颜色 */
}

/* 头像图片样式 */
.header-right img {
  width: 40px;             /* 宽度40px */
  height: 40px;            /* 高度40px */
  border-radius: 50%;      /* 圆形边框 */
  border: 2px solid #eee;   /* 边框样式 */
}

/* ===== 页面主体核心区样式 ===== */
#mainContent {
  order: 2;                 /* flex排序 */
  max-width: 65ch;          /* 最大宽度65字符 */
  margin: 2rem auto;       /* 上下边距2rem，左右自动 */
  padding: 2rem;           /* 内边距2rem */
  background: white;       /* 白色背景 */
  border-radius: 0.375rem;  /* 圆角边框 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 阴影效果 */
}

/* 主内容区样式 */
.main-content {
  position: relative;       /* 相对定位 */
  display: flex;           /* flex布局 */
  flex-direction: column;  /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center;     /* 水平居中 */
  height: 100vh;           /* 高度为视口高度 */
  text-align: center;      /* 文字居中 */
  z-index: 2;              /* 堆叠顺序 */
}

/* 主标题样式 */
.main-title {
  font-size: 48px;         /* 字体大小48px */
  font-weight: bold;       /* 字体加粗 */
  color: #fff;             /* 文字颜色白色 */
  margin-bottom: 15px;     /* 底部外边距15px */
  font-family: "SimSun", serif; /* 字体设置 */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* 文字阴影 */
}

/* 副标题样式 */
.sub-title {
  font-size: 24px;         /* 字体大小24px */
  letter-spacing: 4px;     /* 字符间距4px */
  color: #fff;             /* 文字颜色白色 */
}

/* ===== 独立居中的分类导航 ===== */
/* 分类导航容器样式 */
.category-nav-container {
  width: 100%;                /* 宽度100% */
  background-color: white;   /* 白色背景 */
  padding: 20px 0;           /* 上下内边距20px */
  margin-bottom: 30px;       /* 底部外边距30px */
  position: relative;        /* 相对定位 */
  z-index: 5;                /* 堆叠顺序 */
}

/* 分类导航样式 */
.category-nav {
  display: flex;             /* 使用flex布局 */
  justify-content: center;  /* 水平居中 */
  margin: 0 auto;           /* 左右自动外边距 */
  padding: 0;               /* 清除内边距 */
  max-width: 1000px;        /* 最大宽度1000px */
  border-bottom: 1px solid #eee; /* 底部边框 */
}

/* 分类导航链接样式 */
.category-nav a {
  color: #666;              /* 文字颜色 */
  text-decoration: none;   /* 去除下划线 */
  padding: 10px 20px;       /* 内边距 */
  margin: 0 5px;            /* 左右外边距 */
  transition: all 0.3s;     /* 过渡效果 */
  white-space: nowrap;      /* 禁止换行 */
  font-size: 15px;         /* 字体大小 */
}

/* 分类导航链接悬停效果 */
.category-nav a:hover {
  color: #1e88e5;          /* 悬停文字颜色 */
  background-color: #f5f7fa; /* 悬停背景色 */
  border-radius: 4px;      /* 圆角边框 */
}

/* ===== 博客内容区容器 ===== */
.blog-container {
  max-width: 1200px;        /* 最大宽度1200px */
  margin: 0 auto;           /* 水平居中 */
  padding: 0 20px 40px;     /* 内边距 */
  display: flex;           /* 使用flex布局 */
  background-color: white;  /* 白色背景 */
  position: relative;      /* 相对定位 */
}

/* ===== 主内容区 ===== */
.blog-main {
  flex: 1;                 /* 占据剩余空间 */
  padding-right: 30px;      /* 右侧内边距 */
}

/* ===== 文章列表 ===== */
.article-list {
  margin-bottom: 40px;      /* 底部外边距 */
}

/* 文章项样式 */
.article-item {
  margin-bottom: 25px;      /* 底部外边距 */
  padding-bottom: 20px;    /* 底部内边距 */
  border-bottom: 1px solid #f0f0f0; /* 底部边框 */
}

/* 文章标题样式 */
.article-title {
  font-size: 20px;         /* 字体大小 */
  margin-bottom: 10px;     /* 底部外边距 */
}

/* 文章标题链接样式 */
.article-title a {
  color: #333;             /* 文字颜色 */
  text-decoration: none;  /* 去除下划线 */
  transition: color 0.3s;  /* 颜色过渡效果 */
}

/* 文章标题链接悬停效果 */
.article-title a:hover {
  color: #1e88e5;         /* 悬停文字颜色 */
}

/* 文章元信息样式 */
.article-meta {
  font-size: 12px;        /* 字体大小 */
  color: #999;           /* 文字颜色 */
  margin-bottom: 10px;   /* 底部外边距 */
}

/* 文章摘要样式 */
.article-excerpt {
  font-size: 14px;       /* 字体大小 */
  color: #666;           /* 文字颜色 */
  line-height: 1.6;      /* 行高 */
}

/* ===== 侧边栏 ===== */
.blog-sidebar {
  width: 250px;          /* 固定宽度 */
}

/* 侧边栏通用区块样式 */
.sidebar-notice,
.sidebar-calendar,
.sidebar-tags,
.sidebar-stats {
  margin-bottom: 25px;   /* 底部外边距 */
  padding-bottom: 20px; /* 底部内边距 */
  border-bottom: 1px solid #eee; /* 底部边框 */
}

/* 侧边栏标题样式 */
.sidebar-notice h4,
.sidebar-calendar h4,
.sidebar-tags h4,
.sidebar-stats h4 {
  font-size: 16px;      /* 字体大小 */
  color: #444;          /* 文字颜色 */
  margin-bottom: 15px;   /* 底部外边距 */
  padding-bottom: 8px;  /* 底部内边距 */
  border-bottom: 1px solid #f0f0f0; /* 底部边框 */
}

/* 公告内容样式 */
.notice-content p {
  font-size: 13px;      /* 字体大小 */
  color: #666;          /* 文字颜色 */
  margin-bottom: 8px;    /* 底部外边距 */
  line-height: 1.5;     /* 行高 */
}

/* 标签容器样式 */
.tags-content {
  display: flex;        /* 使用flex布局 */
  flex-wrap: wrap;      /* 允许换行 */
  gap: 8px;            /* 子元素间距 */
}

/* 单个标签样式 */
.tag {
  display: inline-block; /* 行内块元素 */
  padding: 4px 8px;     /* 内边距 */
  font-size: 12px;      /* 字体大小 */
  color: #666;          /* 文字颜色 */
  background-color: #f5f5f5; /* 背景色 */
  border-radius: 3px;   /* 圆角边框 */
  text-decoration: none; /* 去除下划线 */
  transition: all 0.3s; /* 过渡效果 */
}

/* 标签悬停效果 */
.tag:hover {
  color: white;        /* 文字颜色 */
  background-color: #1e88e5; /* 背景色 */
}

/* 统计内容样式 */
.stats-content p {
  font-size: 13px;     /* 字体大小 */
  color: #666;         /* 文字颜色 */
  margin-bottom: 5px;  /* 底部外边距 */
}

/* 统计数值样式 */
.stats-content span {
  color: #1e88e5;      /* 文字颜色 */
  font-weight: bold;   /* 字体加粗 */
}
/* =========================================================
   博客园默认页脚居中样式
   ========================================================= */

/* 页脚主容器样式 */
#footer {
  text-align: center !important;      /* 文本水平居中 */
  padding: 20px 0 !important;         /* 上下内边距 20px，左右 0 */
  font-size: 12px !important;         /* 字体大小 12px */
  color: #999 !important;              /* 文字颜色为浅灰色 */
  background-color: #fff !important;   /* 背景颜色为白色 */
  border-top: 1px solid #fff !important; /* 顶部边框（与背景同色，相当于无） */
  width: 100% !important;             /* 宽度占满父容器 */
  margin: 0 auto !important;           /* 水平居中（配合 width:100% 使用） */
  display: flex !important;            /* 启用弹性布局 */
  flex-direction: column !important;   /* 子元素垂直排列 */
  align-items: center !important;     /* 子元素水平居中 */
  justify-content: center !important;   /* 子元素垂直居中 */
}

/* 页脚文字容器 */
#footer-text {
  text-align: center !important;      /* 文本水平居中 */
  margin: 5px 0 !important;           /* 上下外边距 5px，左右 0 */
  width: 100% !important;             /* 宽度占满父容器 */
}

/* "Powered by" 信息容器 */
#poweredby {
  text-align: center !important;      /* 文本水平居中 */
  margin: 5px 0 !important;           /* 上下外边距 5px，左右 0 */
  width: 100% !important;             /* 宽度占满父容器 */
}

/* 页脚链接容器 */
#footer-links {
  text-align: center !important;      /* 文本水平居中 */
  margin: 5px 0 !important;           /* 上下外边距 5px，左右 0 */
  width: 100% !important;             /* 宽度占满父容器 */
  display: flex !important;            /* 启用弹性布局 */
  justify-content: center !important;   /* 子元素水平居中 */
  flex-wrap: wrap !important;          /* 允许子元素换行 */
}

/* 页脚链接样式 */
#footer-links a {
  margin: 0 10px !important;          /* 左右外边距 10px */
  color: #fff !important;              /* 文字颜色为白色 */
  text-decoration: none !important;   /* 去除下划线 */
}

/* 主题列表页脚样式 */
.topicListFooter {
  text-align: center !important;      /* 文本水平居中 */
  padding: 20px 0 !important;         /* 上下内边距 20px */
  width: 100% !important;             /* 宽度占满父容器 */
  margin: 0 auto !important;           /* 水平居中 */
}

/* 分页导航样式 */
#nav_next_page {
  text-align: center !important;      /* 文本水平居中 */
  margin: 0 auto !important;           /* 水平居中 */
  width: 100% !important;             /* 宽度占满父容器 */
}

/* =========================================================
   默认隐藏元素样式
   ========================================================= */

/* === 侧边栏组件 === */
#blog-news { display: none !important; }            /* 隐藏博客公告区域 */
#blog-calendar { display: none !important; }        /* 隐藏日历组件 */
#blog-sidecolumn-tags { display: none !important; } /* 隐藏标签云 */
#blog-sidecolumn-stats { display: none !important; }/* 隐藏博客统计信息 */
#blog-sidecolumn-search { display: none !important; }/* 隐藏搜索框 */
#blog-sidecolumn-categories { display: none !important; } /* 隐藏文章分类 */
#blog-sidecolumn-comments { display: none !important; }   /* 隐藏最新评论 */
#blog-sidecolumn-topdiggers { display: none !important; } /* 隐藏推荐排行榜 */

/* === 其他布局元素 === */
#sideBarMain { display: none !important; }    /* 隐藏侧边栏主容器 */
#leftcontentcontainer { display: none !important; } /* 隐藏左侧内容容器 */
#sidebar_search { display: none !important; } /* 隐藏侧边栏搜索框(旧版) */
#sidebar_categories { display: none !important; } /* 隐藏侧边栏分类(旧版) */
#calendar { display: none !important; }      /* 隐藏日历容器(旧版) */

/* =========================================================
   自定义内容显示样式
   ========================================================= */
.blog-container { 
  margin-top: 0 !important;    /* 移除自定义容器的上边距 */
  display: block !important;   /* 确保自定义内容正常显示 */
}


/* =========================================================
   自定义光标和交互效果样式
   ========================================================= */

/* 隐藏默认光标 */
body {
  cursor: none !important;  /* 完全隐藏浏览器默认光标 */
}

/* 自定义主光标样式 */
.custom-cursor {
  position: fixed;          /* 固定定位，不随页面滚动 */
  width: 32px;             /* 光标宽度 */
  height: 32px;            /* 光标高度 */
  background-image: url('https://i.postimg.cc/brKkbbdV/f-I8ff-Ihh-J.png'); /* 光标图片 */
  background-size: contain; /* 图片自适应容器 */
  pointer-events: none;   /* 防止光标阻挡下方元素交互 */
  z-index: 9999;          /* 确保光标在最上层 */
  transform: translate(-50%, -50%); /* 居中定位 */
  transition: transform 0.1s ease; /* 平滑过渡效果 */
}

/* 链接悬停时的光标放大效果 */
.custom-cursor.link-hover {
  transform: translate(-50%, -50%) scale(1.2); /* 放大20% */
}

/* 拖尾元素样式（增强版） */
.cursor-trail {
  position: fixed;          /* 固定定位 */
  width: 24px;             /* 宽度略小于主光标 */
  height: 24px;            /* 高度略小于主光标 */
  background-image: url('https://i.postimg.cc/brKkbbdV/f-I8ff-Ihh-J.png'); /* 使用相同图片 */
  background-size: contain; /* 图片自适应 */
  pointer-events: none;   /* 不阻挡交互 */
  z-index: 9998;          /* 在主光标下方 */
  transform: translate(-50%, -50%); /* 居中 */
  filter: blur(1px);     /* 轻微模糊效果 */
  transition:            /* 多属性过渡效果 */
    opacity 0.3s ease,
    transform 0.3s ease,
    width 0.3s ease,
    height 0.3s ease;
}

/* 拖尾元素淡出动画 */
@keyframes trail-fade {
  0% {
    opacity: 0.8;         /* 初始透明度 */
    transform: translate(-50%, -50%) scale(1); /* 原始大小 */
  }
  100% {
    opacity: 0;          /* 完全透明 */
    transform: translate(-50%, -50%) scale(0.5); /* 缩小 */
  }
}

/* 水波纹点击效果 */
.cursor-ripple {
  position: fixed;          /* 固定定位 */
  border: 2px solid rgba(30, 136, 229, 0.5); /* 蓝色半透明边框 */
  border-radius: 50%;     /* 圆形 */
  pointer-events: none;   /* 不阻挡交互 */
  z-index: 9997;          /* 在拖尾下方 */
  animation: ripple 0.6s ease-out; /* 动画效果 */
}

/* 水波纹动画 */
@keyframes ripple {
  0% {
    width: 0;             /* 初始大小 */
    height: 0;
    opacity: 1;          /* 完全可见 */
  }
  100% {
    width: 100px;         /* 扩大到100px */
    height: 100px;
    opacity: 0;          /* 完全透明 */
  }
}

/* 右键提示样式 */
.right-click-alert {
  position: fixed;          /* 固定定位 */
  padding: 8px 12px;      /* 内边距 */
  background-color: #ff9ff3; /* 粉色背景 */
  color: white;           /* 白色文字 */
  border-radius: 20px;    /* 圆角 */
  font-size: 14px;        /* 字体大小 */
  z-index: 10000;         /* 在最上层 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影 */
  animation: bounce 0.5s ease; /* 弹跳动画 */
  white-space: nowrap;    /* 不换行 */
}

/* 弹跳动画 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); } /* 起始和结束位置 */
  50% { transform: translateY(-10px); }   /* 中间上移 */
}

/* =========================================================
   文本选择和页面布局控制
   ========================================================= */

/* 全局禁止文本选择 */
body {
  user-select: none !important;          /* 标准语法 */
  -webkit-user-select: none !important; /* Webkit浏览器 */
  -moz-user-select: none !important;    /* Firefox */
  -ms-user-select: none !important;     /* IE/Edge */
}

/* =========================================================
   博客园特定元素控制
   ========================================================= */

/* 精确隐藏博客园首页的header部分 */
#home #header {
  display: none !important;  /* 完全隐藏 */
}

/* 调整首页布局 */
#home {
  padding-top: 0 !important; /* 移除顶部内边距 */
}

/* 确保首页内容不会被遮挡 */
#home #main {
  margin-top: 0 !important; /* 移除顶部外边距 */
}

/* 保留其他页面的header显示 */
body:not(#home) #header {
  display: block !important; /* 非首页显示header */
}

/* 隐藏首页的博客标题 */
#home #header #blogTitle {
  display: none !important;
}

/* 隐藏首页的导航栏 */
#home #header #navigator {
  display: none !important;
}

/* 隐藏首页的统计信息 */
#home #header .blogStats {
  display: none !important;
}