/* =========================
   全局背景：奶油纸 + 波点
========================= */
body {
  background-color: #fdf8f2 !important;
  background-image:
    radial-gradient(circle, rgba(212, 163, 115, 0.16) 1.8px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 214, 165, 0.18) 1.8px, transparent 1.8px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
  color: #6b5b52 !important;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif !important;
}

/* 页面四角小贴纸感 */
body::before,
body::after {
  position: fixed;
  z-index: 0;
  font-size: 34px;
  opacity: 0.18;
  pointer-events: none;
}
body::before {
  content: "🐰 ✿";
  left: 18px;
  top: 18px;
  transform: rotate(-10deg);
}
body::after {
  content: "🥕 ♡";
  right: 18px;
  bottom: 18px;
  transform: rotate(8deg);
}

/* 主内容提到上层 */
#home,
#main,
#mainContent,
#sideBar {
  position: relative;
  z-index: 1;
}

/* =========================
   顶部标题区域
========================= */
#blogTitle {
  position: relative;
  padding: 32px 0 18px !important;
}

#blogTitle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%) rotate(-2deg);
  width: 200px;
  height: 28px;
  background: rgba(255, 230, 190, 0.75);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

#blogTitle::after {
  content: "🐰 ✿ 🥕";
  position: absolute;
  right: 18px;
  top: 12px;
  font-size: 18px;
  opacity: 0.75;
}

#blogTitle h1 a {
  position: relative;
  color: #7a5c48 !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  text-decoration: none !important;
  text-shadow: 1px 1px 0 #fff;
}

#blogTitle h1 a::before {
  content: "🐰 ";
}

#blogTitle h1 a::after {
  content: " ♡";
}

#blogTitle h2 {
  color: #a07c65 !important;
  font-size: 15px !important;
  margin-top: 10px !important;
}

/* =========================
   导航：胶带 + 手账条
========================= */
#navigator {
  position: relative;
  background: #fffaf6 !important;
  border: 2px solid #ecd8c8 !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 18px rgba(174, 140, 94, 0.08);
  padding: 12px 18px !important;
  margin: 18px auto !important;
}

#navigator::before,
#navigator::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 60px;
  height: 18px;
  background: rgba(255, 223, 186, 0.7);
  border-radius: 3px;
}

#navigator::before {
  left: 30px;
  transform: rotate(-8deg);
}

#navigator::after {
  right: 30px;
  transform: rotate(8deg);
}

#navList a {
  color: #8a6852 !important;
  font-weight: 700 !important;
  transition: all .25s ease;
}

#navList a:hover {
  color: #d08c60 !important;
}

/* =========================
   文章卡片：便签拼贴感
========================= */
.day,
.post,
.entrylistItem {
  position: relative;
  background: #fffdfb !important;
  border: 2px solid #efe1d3 !important;
  border-radius: 28px !important;
  padding: 24px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 10px 24px rgba(175, 139, 101, 0.10);
  transition: all .28s ease;
  overflow: visible !important;
}

/* 不同卡片轻微错位，更像手账纸张 */
.day:nth-of-type(odd),
.entrylistItem:nth-of-type(odd) {
  transform: rotate(-0.25deg);
}
.day:nth-of-type(even),
.entrylistItem:nth-of-type(even) {
  transform: rotate(0.25deg);
}

.day:hover,
.post:hover,
.entrylistItem:hover {
  transform: translateY(-4px) rotate(-0.35deg);
  box-shadow: 0 16px 28px rgba(175, 139, 101, 0.16);
}

/* 左上角胶带 */
.day::before,
.post::before,
.entrylistItem::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 28px;
  width: 76px;
  height: 22px;
  background: rgba(255, 224, 196, 0.75);
  transform: rotate(-8deg);
  border-radius: 4px;
}

/* 右上角波点 */
.day::after,
.post::after,
.entrylistItem::after {
  content: "● ● ●";
  position: absolute;
  top: 14px;
  right: 18px;
  color: #deb38a;
  font-size: 12px;
  letter-spacing: 4px;
}

/* 给不同文章卡片一点便签颜色变化 */
.day:nth-of-type(3n+1),
.entrylistItem:nth-of-type(3n+1) {
  background: #fffdf9 !important;
}
.day:nth-of-type(3n+2),
.entrylistItem:nth-of-type(3n+2) {
  background: #fffaf5 !important;
}
.day:nth-of-type(3n+3),
.entrylistItem:nth-of-type(3n+3) {
  background: #fff8f1 !important;
}

.postTitle,
.entrylistPosttitle {
  position: relative;
  margin-bottom: 14px !important;
}

.postTitle a,
.entrylistPosttitle a {
  color: #7b5c49 !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all .25s ease;
}

.postTitle a:hover,
.entrylistPosttitle a:hover {
  color: #d08c60 !important;
}

/* 标题下方手绘线 */
.postTitle::after,
.entrylistPosttitle::after {
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, #f7d7b5, #f3cda4, transparent);
}

/* 文章小图标装饰 */
.postTitle::before,
.entrylistPosttitle::before {
  content: "✿";
  position: absolute;
  left: -8px;
  top: -10px;
  font-size: 16px;
  color: #d9a273;
  opacity: 0.7;
}

.postCon,
.c_b_p_desc,
.entrylistItemPostDesc,
.day .postDesc,
.cnblogs-post-body {
  color: #6d625a !important;
  line-height: 1.95 !important;
  font-size: 15px !important;
}

/* =========================
   侧边栏：兔耳朵便利贴盒
========================= */
#sideBar {
  position: relative;
  background: #fffaf5 !important;
  border: 2px solid #ecdccf !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-shadow: 0 10px 22px rgba(175, 139, 101, 0.08);
}

#sideBar::before,
#sideBar::after {
  content: "";
  position: absolute;
  top: -20px;
  width: 26px;
  height: 58px;
  background: #fffdfb;
  border: 2px solid #ecdccf;
  border-radius: 999px;
}

#sideBar::before {
  left: 30px;
  transform: rotate(-12deg);
}

#sideBar::after {
  left: 58px;
  transform: rotate(12deg);
}

/* 侧边栏底部小装饰 */
#sideBar .catList:first-child::after {
  content: "🐰 ♡";
  display: block;
  margin-top: 12px;
  color: #d4a373;
  font-size: 16px;
  opacity: .75;
}

.catListTitle {
  display: inline-block;
  background: #fff1db !important;
  color: #9c7358 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 10px rgba(220, 184, 140, 0.18);
}

#sideBar a {
  color: #866857 !important;
  transition: all .25s ease;
}

#sideBar a:hover {
  color: #d08c60 !important;
  padding-left: 4px;
}

/* =========================
   元信息 / 描述
========================= */
.postDesc,
.entrylistItemPostDesc {
  color: #b08968 !important;
  font-size: 13px !important;
}

/* =========================
   按钮：奶油糖果风
========================= */
#green_channel a,
input[type="button"],
input[type="submit"],
button {
  background: linear-gradient(135deg, #fff1df, #ffe4c7) !important;
  color: #8b684d !important;
  border: 2px solid #efd7be !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 14px rgba(223, 186, 146, 0.16);
  transition: all .25s ease !important;
}

#green_channel a:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
  transform: translateY(-2px) scale(1.03);
  background: linear-gradient(135deg, #ffe9cf, #ffdcb8) !important;
}

/* =========================
   代码块：便签纸风
========================= */
pre,
.cnblogs-markdown pre,
.cnblogs-post-body pre {
  background: #fffaf5 !important;
  border: 2px dashed #e7c9ab !important;
  border-radius: 18px !important;
  padding: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
  position: relative;
}

pre::before,
.cnblogs-markdown pre::before,
.cnblogs-post-body pre::before {
  content: "code";
  position: absolute;
  right: 14px;
  top: 8px;
  font-size: 12px;
  color: #c59872;
  letter-spacing: 1px;
}

code {
  background: #fff0e2 !important;
  color: #b65f3d !important;
  border-radius: 8px !important;
  padding: 2px 6px !important;
}

/* =========================
   分页
========================= */
.pager a {
  background: #fffdf9 !important;
  color: #8a6852 !important;
  border: 2px solid #ecdccf !important;
  border-radius: 14px !important;
  padding: 6px 12px !important;
}

.pager a:hover {
  background: #fff1df !important;
  color: #cf8f63 !important;
}

/* =========================
   页脚
========================= */
#footer {
  color: #ad8b73 !important;
  margin-top: 28px !important;
}

/* =========================
   滚动条
========================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f8f1e8;
}
::-webkit-scrollbar-thumb {
  background: #e3c2a4;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d9ae84;
}

/* =========================
   小屏适配
========================= */
@media (max-width: 768px) {
  body::before,
  body::after,
  #blogTitle::after {
    display: none;
  }

  #blogTitle h1 a {
    font-size: 28px !important;
  }

  .postTitle a,
  .entrylistPosttitle a {
    font-size: 21px !important;
  }

  .day,
  .post,
  .entrylistItem,
  #sideBar {
    border-radius: 20px !important;
    padding: 18px !important;
    transform: none !important;
  }
}

/* =========================
   顶部悬挂小兔子头
========================= */
#miffy-hanging {
  position: fixed;
  top: 8px;
  right: 38px;
  z-index: 9999;
  width: 78px;
  height: 110px;
  pointer-events: none;
}

#miffy-hanging::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 48px;
  background: #d8b48a;
  opacity: 0.9;
}

#miffy-hanging::after {
  content: "";
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: #f7d7b5;
  border: 2px solid #e7c9ab;
  border-radius: 50%;
  box-sizing: border-box;
}

#miffy-hanging img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff6ec;
  box-shadow: 0 8px 18px rgba(175, 139, 101, 0.18);
  background: #fff;
  animation: miffySwing 3.2s ease-in-out infinite;
}

/* 摇晃效果 */
@keyframes miffySwing {
  0% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(-6deg);
  }
}

/* 小屏幕隐藏，避免挡住内容 */
@media (max-width: 768px) {
  #miffy-hanging {
    display: none;
  }
}

/* =========================
   优化顶部导航大卡片区域
========================= */

/* 整个导航卡片 */
#navigator {
  width: auto !important;
  max-width: 1180px !important;
  margin: 18px auto 18px !important;
  padding: 20px 24px 14px !important;
  min-height: auto !important;
  background: #fffaf6 !important;
  border: 2px solid #ecd8c8 !important;
  border-radius: 26px !important;
  box-shadow: 0 8px 20px rgba(174, 140, 94, 0.08);
  position: relative;
}

/* 去掉里面过大的默认布局影响 */
#navList,
#navList li,
.blogStats {
  margin: 0 !important;
  padding: 0 !important;
}

/* 导航列表改成横向排列 */
#navList {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  margin-bottom: 16px !important;
}

/* 去掉默认小圆点 */
#navList li {
  list-style: none !important;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 导航按钮样式 */
#navList a {
  display: inline-block !important;
  padding: 10px 18px !important;
  background: #fff3e3 !important;
  border: 2px solid #edd7bf !important;
  border-radius: 999px !important;
  color: #8a6852 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 10px rgba(220, 184, 140, 0.12);
}

#navList a:hover {
  background: #ffe9cf !important;
  color: #d08c60 !important;
  transform: translateY(-2px);
}

/* 统计信息单独放一行 */
.blogStats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  color: #a07c65 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  border-top: 1px dashed #ead7c4 !important;
  padding-top: 12px !important;
}

/* 统计里的文字更柔和一点 */
#blog_stats_place_holder {
  color: #a07c65 !important;
}

/* 导航区左右留白更自然 */
#navigator ul {
  padding-left: 0 !important;
}

/* 小屏适配 */
@media (max-width: 768px) {
  #navigator {
    padding: 16px 14px 12px !important;
    border-radius: 20px !important;
  }

  #navList {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #navList a {
    font-size: 14px !important;
    padding: 8px 14px !important;
  }

  .blogStats {
    font-size: 13px !important;
    gap: 8px !important;
  }
}
#navList li:nth-child(1) a::before { content: "🐰 "; }
#navList li:nth-child(2) a::before { content: "🏠 "; }
#navList li:nth-child(3) a::before { content: "✿ "; }
#navList li:nth-child(4) a::before { content: "💌 "; }
#navList li:nth-child(5) a::before { content: "☆ "; }
#navList li:nth-child(6) a::before { content: "⚙ "; }