/* 白灰色泡沫块主题-最终最终版 | 文章按钮右下角+平铺不换行+无右侧栏+顶部导航+全页面美化 */
:root {
  --foam-bg: #fafafa;       /* 全局浅灰背景 */
  --foam-white: #ffffff;    /* 泡沫块底色 */
  --foam-gray: #f5f5f5;     /* 浅灰过渡色 */
  --foam-dark-gray: #e0e0e0;/* 深灰边框色 */
  --foam-text: #333333;     /* 正文文字色 */
  --foam-link: #666666;     /* 链接/按钮文字色 */
  --foam-hover: #222222;    /* 悬浮文字色 */
  --foam-hover-bg: #f8f8f8; /* 按钮悬浮背景色 */
  --foam-radius: 18px;      /* 大泡沫块圆角 */
  --foam-radius-sm: 12px;   /* 小泡沫块圆角 */
  --foam-shadow: 0 3px 10px rgba(0,0,0,0.04);   /* 基础阴影 */
  --foam-shadow-hover: 0 8px 20px rgba(0,0,0,0.07); /* 悬浮阴影 */
  --foam-transition: all 0.35s ease; /* 全局过渡 */
  --foam-padding: 30px;     /* 核心内边距 */
}

/* 全局重置+基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
}
body {
  background: var(--foam-bg) !important;
  font-family: "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif !important;
  color: var(--foam-text) !important;
  line-height: 1.85 !important;
  font-size: 14px !important;
  scroll-behavior: smooth !important;
}
a {
  color: var(--foam-link) !important;
  text-decoration: none !important;
  transition: var(--foam-transition) !important;
}
a:hover {
  color: var(--foam-hover) !important;
}
ul, ol {list-style: none !important;}
img {border: none !important; vertical-align: middle !important;}
button, input, textarea {
  font-family: inherit !important;
  transition: var(--foam-transition) !important;
  outline: none !important;
  border: none !important;
}
/* 隐藏原生冗余元素 */
#header, #sideBar, #leftmenu, .catListEssay, .catListTag, .blogStats, .postDescStats, #blog_post_info_block .postDesc {
  display: none !important;
}

/* 顶部自定义导航：粘滞+美化+选中态 */
#custom-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  border-bottom-width: 1px !important;
}
#navigator li a:hover, #navigator li a:active {
  border-bottom-color: var(--foam-dark-gray) !important;
  color: var(--foam-hover) !important;
}
#top-search:focus, #top-search:hover {
  border-color: var(--foam-dark-gray) !important;
  box-shadow: var(--foam-shadow-hover) !important;
}
#custom-header button:hover {
  background: var(--foam-hover-bg) !important;
  color: var(--foam-hover) !important;
  box-shadow: var(--foam-shadow-hover) !important;
  transform: translateY(-1px) !important;
}
#custom-header button:active {
  transform: translateY(0) !important;
  box-shadow: var(--foam-shadow) !important;
}

/* 页面主容器：无右侧栏，100%宽度居中 */
#main {
  width: 85% !important;
  max-width: 1000px !important;
  margin: 30px auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#mainContent {
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.forFlow {background: transparent !important; padding: 0 !important; margin: 0 !important;}

/* 首页随笔卡片：核心泡沫块样式 */
.day {
  background: var(--foam-white) !important;
  border-radius: var(--foam-radius) !important;
  box-shadow: var(--foam-shadow) !important;
  padding: var(--foam-padding) !important;
  margin-bottom: 25px !important;
  border: 1px solid var(--foam-dark-gray) !important;
  transition: var(--foam-transition) !important;
  width: 100% !important;
}
.day:hover {
  box-shadow: var(--foam-shadow-hover) !important;
  transform: translateY(-3px) !important;
}
.dayTitle {
  color: var(--foam-link) !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  padding: 4px 10px !important;
  background: var(--foam-gray) !important;
  border-radius: var(--foam-radius-sm) !important;
  display: inline-block !important;
  border: 1px solid var(--foam-dark-gray) !important;
}
.postTitle {
  border-bottom: 1px solid var(--foam-gray) !important;
  padding-bottom: 12px !important;
  margin-bottom: 15px !important;
}
.postTitle a {
  font-size: 20px !important;
  font-weight: 600 !important;
  display: block !important;
  color: var(--foam-text) !important;
}
.postCon {
  background: var(--foam-gray) !important;
  border-radius: var(--foam-radius-sm) !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--foam-dark-gray) !important;
  font-size: 14px !important;
}
.postDesc a {
  color: var(--foam-link) !important;
  font-size: 13px !important;
  padding: 3px 8px !important;
  background: var(--foam-gray) !important;
  border-radius: 8px !important;
  border: 1px solid var(--foam-dark-gray) !important;
}
.postDesc a:hover {
  background: var(--foam-hover-bg) !important;
  color: var(--foam-hover) !important;
}

/* 文章详情页：深度美化 | 核心：按钮移至右下角+平铺不换行 */
#cb_post_title_url {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--foam-text) !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--foam-gray) !important;
  margin-bottom: 30px !important;
  display: block !important;
  text-align: center !important;
  letter-spacing: 1px !important;
}
#post_meta {
  background: var(--foam-gray) !important;
  border-radius: var(--foam-radius-sm) !important;
  padding: 15px 20px !important;
  margin-bottom: 30px !important;
  border: 1px solid var(--foam-dark-gray) !important;
  color: var(--foam-link) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
#post_meta a:hover {
  text-decoration: underline !important;
}
/* 文章主体：相对定位，为右下角按钮做容器，预留底部空间不遮挡 */
#cnblogs_post_body {
  background: var(--foam-white) !important;
  border-radius: var(--foam-radius) !important;
  box-shadow: var(--foam-shadow) !important;
  padding: calc(var(--foam-padding) + 5px) !important;
  padding-bottom: 80px !important; /* 预留按钮底部空间，不遮挡最后一行文字 */
  margin: 0 auto !important;
  border: 1px solid var(--foam-dark-gray) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  position: relative !important; /* 关键：开启相对定位 */
}
#cnblogs_post_body h1, #cnblogs_post_body h2, #cnblogs_post_body h3, #cnblogs_post_body h4, #cnblogs_post_body h5 {
  color: var(--foam-text) !important;
  margin: 30px 0 18px 0 !important;
  padding-left: 15px !important;
  border-left: 4px solid var(--foam-dark-gray) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
#cnblogs_post_body h1 {font-size: 22px !important;}
#cnblogs_post_body h2 {font-size: 20px !important;}
#cnblogs_post_body h3 {font-size: 18px !important;}
#cnblogs_post_body h4, #cnblogs_post_body h5 {font-size: 16px !important;}
#cnblogs_post_body p {margin-bottom: 20px !important;}
#cnblogs_post_body ul, #cnblogs_post_body ol {
  list-style: disc inside !important;
  margin-left: 20px !important;
  margin-bottom: 20px !important;
  padding-left: 10px !important;
}
#cnblogs_post_body ol {list-style: decimal inside !important;}
#cnblogs_post_body pre, #cnblogs_post_body code {
  background: var(--foam-gray) !important;
  border-radius: var(--foam-radius-sm) !important;
  border: 1px solid var(--foam-dark-gray) !important;
  padding: 15px !important;
  overflow-x: auto !important;
  color: var(--foam-text) !important;
  font-family: "Consolas", "Monaco", monospace !important;
  font-size: 14px !important;
}
#cnblogs_post_body code {padding: 3px 6px !important;}
#cnblogs_post_body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--foam-radius-sm) !important;
  border: 1px solid var(--foam-dark-gray) !important;
  display: block !important;
  margin: 25px auto !important;
  box-shadow: var(--foam-shadow) !important;
}
#cnblogs_post_body a {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}
#cnblogs_post_body a:hover {
  text-decoration: none !important;
}

/* 🔥 核心优化：文章页功能按钮（好文要顶/关注我等）移至右下角+横向平铺不换行 */
#green_channel {
  position: absolute !important; /* 绝对定位，固定在文章右下角 */
  right: 20px !important;       /* 距文章右侧20px */
  bottom: 20px !important;      /* 距文章底部20px */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;     /* 横向排列 */
  align-items: center !important;
  gap: 8px !important;          /* 按钮之间间距8px，不拥挤 */
  flex-wrap: nowrap !important; /* 强制不换行，始终平铺 */
  z-index: 10 !important;       /* 防止被内容遮挡 */
}
/* 按钮样式：泡沫块+强制不换行+统一美化 */
#green_channel a {
  white-space: nowrap !important; /* 按钮文字强制不换行 */
  padding: 8px 12px !important;   /* 适配大小，平铺更美观 */
  border-radius: var(--foam-radius-sm) !important;
  background: var(--foam-white) !important;
  color: var(--foam-link) !important;
  box-shadow: var(--foam-shadow) !important;
  border: 1px solid var(--foam-dark-gray) !important;
  font-size: 13px !important;
  margin: 0 !important;
}
#green_channel a:hover {
  background: var(--foam-hover-bg) !important;
  color: var(--foam-hover) !important;
  box-shadow: var(--foam-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* 点赞/踩按钮：美化+和右下角按钮风格统一 */
#digg_area {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--foam-gray) !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
}
#digg_btn, #bury_btn {
  padding: 9px 18px !important;
  border-radius: var(--foam-radius-sm) !important;
  background: var(--foam-white) !important;
  color: var(--foam-link) !important;
  cursor: pointer !important;
  box-shadow: var(--foam-shadow) !important;
  border: 1px solid var(--foam-dark-gray) !important;
}
#digg_btn:hover, #bury_btn:hover {
  background: var(--foam-hover-bg) !important;
  color: var(--foam-hover) !important;
  box-shadow: var(--foam-shadow-hover) !important;
  transform: translateY(-1px) !important;
}
#digg_count, #bury_count {
  padding: 5px 12px !important;
  border-radius: var(--foam-radius-sm) !important;
  background: var(--foam-white) !important;
  box-shadow: var(--foam-shadow) !important;
  border: 1px solid var(--foam-dark-gray) !important;
  color: var(--foam-link) !important;
  font-size: 13px !important;
}

/* 分页按钮：泡沫化美化 */
#pager {
  text-align: center !important;
  margin: 40px 0 !important;
  width: 100% !important;
}
#pager a, #pager span {
  display: inline-block !important;
  padding: 9px 18px !important;
  margin: 0 6px !important;
  border-radius: var(--foam-radius-sm) !important;
  background: var(--foam-white) !important;
  border: 1px solid var(--foam-dark-gray) !important;
  color: var(--foam-link) !important;
  box-shadow: var(--foam-shadow) !important;
  font-size: 14px !important;
}
#pager a:hover {
  background: var(--foam-hover-bg) !important;
  color: var(--foam-hover) !important;
  box-shadow: var(--foam-shadow-hover) !important;
  transform: translateY(-1px) !important;
  border-color: var(--foam-dark-gray) !important;
}
#pager .current {
  background: var(--foam-gray) !important;
  color: var(--foam-hover) !important;
  border-color: var(--foam-dark-gray) !important;
}

/* 评论区：泡沫化美化 */
#comment_form, #comments {
  background: var(--foam-white) !important;
  border-radius: var(--foam-radius) !important;
  box-shadow: var(--foam-shadow) !important;
  padding: var(--foam-padding) !important;
  margin-bottom: 25px !important;
  border: 1px solid var(--foam-dark-gray) !important;
}
#commentbox_title, #feedback_title {
  border-bottom: 1px solid var(--foam-gray) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
  color: var(--foam-text) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
#tbCommentBody, #txtCommentAuthor, #txtCommentEmail, #txtCommentUrl {
  width: 100% !important;
  padding: 10px 15px !important;
  border: 1px solid var(--foam-dark-gray) !important;
  border-radius: var(--foam-radius-sm) !important;
  background: var(--foam-white) !important;
  color: var(--foam-text) !important;
  font-size: 14px !important;
  margin-bottom: 15px !important;
  resize: vertical !important;
}
#tbCommentBody:focus, #txtCommentAuthor:focus, #txtCommentEmail:focus, #txtCommentUrl:focus {
  border-color: var(--foam-dark-gray) !important;
  box-shadow: var(--foam-shadow-hover) !important;
}
.comment_btn, #btn_comment_submit {
  padding: 9px 20px !important;
  border-radius: var(--foam-radius-sm) !important;
  background: var(--foam-white) !important;
  color: var(--foam-link) !important;
  cursor: pointer !important;
  box-shadow: var(--foam-shadow) !important;
  border: 1px solid var(--foam-dark-gray) !important;
  font-size: 14px !important;
}
.comment_btn:hover, #btn_comment_submit:hover {
  background: var(--foam-hover-bg) !important;
  color: var(--foam-hover) !important;
  box-shadow: var(--foam-shadow-hover) !important;
  transform: translateY(-1px) !important;
}
.comment_item {
  padding: 20px !important;
  border-bottom: 1px solid var(--foam-gray) !important;
  margin-bottom: 20px !important;
}
.comment_item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
.comment_author {
  font-weight: 600 !important;
  color: var(--foam-text) !important;
  margin-bottom: 8px !important;
}
.comment_date {
  font-size: 12px !important;
  color: var(--foam-link) !important;
  margin-bottom: 10px !important;
}

/* 底部ICP信息：居中+适配主题 */
#footer {
  width: 100% !important;
  text-align: center !important;
  padding: 30px 0 !important;
  color: var(--foam-link) !important;
  border-top: 1px solid var(--foam-dark-gray) !important;
  background: var(--foam-bg) !important;
  margin-top: 50px !important;
  font-size: 13px !important;
}
#footer * {
  display: inline-block !important;
  margin: 0 auto !important;
  line-height: 1.8 !important;
}

/* 移动端适配：按钮自动调整间距，不挤压 */
@media (max-width: 992px) {
  #main {width: 95% !important;}
  #custom-header {flex-wrap: wrap !important; gap: 15px !important; padding: 12px 3% !important;}
  #blogTitle {width: 100% !important;}
  #navigator {gap: 15px !important; justify-content: flex-start !important;}
  #top-search {width: 150px !important;}
  .day {padding: 20px !important;}
  #cnblogs_post_body {padding: 20px !important; padding-bottom: 70px !important; font-size: 15px !important;}
  /* 移动端按钮：缩小间距，适配小屏 */
  #green_channel {gap: 6px !important; right: 15px !important; bottom: 15px !important;}
  #green_channel a {padding: 7px 10px !important; font-size: 12px !important;}
  #digg_btn, #bury_btn {padding: 8px 15px !important;}
  #post_meta {gap: 15px !important;}
}
@media (max-width: 576px) {
  #navigator {gap: 10px !important;}
  #navigator li a {font-size: 14px !important;}
  #top-search {width: 120px !important;}
  #cb_post_title_url {font-size: 22px !important;}
  .comment_item {padding: 15px !important;}
}