:root{
  /* ① 背景图地址（必改） */
  --bg-url:    url("https://images.cnblogs.com/cnblogs_com/blogs/880269/galleries/2537550/o_261014124733_IMG_4092(20261014-204648).PNG");
  --bg-color:  #e9f2fb;          /* 图片没加载出来时的兜底色（取图里的浅蓝） */

  /* ② 内容面板透明度：0 = 完全透明（纯看图），0.45 ≈ 半透明玻璃，1 = 纯白 */
  --panel:      0.45;
  --panel-rgb:  255,255,255;
  --radius:     14px;            /* 面板圆角 */

  /* ③ 文字颜色（背景浅色用深字，背景深色请改亮色并加大 --panel） */
  --text:  #2c3648;
  --link:  #2f6fd0;
}

/* ===== 1. 背景图：铺满整屏、居中、固定在视口（页面滚动时背景不动） =====
   注意：这里必须把 html 的背景清空，浏览器才会把 body 的背景铺到整张画布上，
   否则页面内容比屏幕短的时候，图片只铺到内容底部就不铺了。 */
html{
  background: none !important;
  min-height: 100%;
}
body{
  background: var(--bg-color) var(--bg-url) no-repeat fixed center center / cover !important;
  color: var(--text);
}

/* ===== 2. 把所有内容容器原有的白色底 / 背景图清空 =====
   （博客园不同皮肤的元素名不一样，这里把常见的一批全列上了）
   想保留原皮肤的分隔线和阴影，就把下面 border-color、box-shadow 两行删掉。 */
#home, #top, #topnav, #navigator, #header, #blogTitle, #main, #mainContent,
#sideBar, #sideBarMain, #footer, #blogStats, #blog-calendar, #post_detail,
#comment_form, #commentform, #cnblogs_post_body, #post_next_prev, #mylinks,
.forFlow, .day, .dayTitle, .post, .postTitle, .postCon, .postBody, .postDesc,
.postSeparator, .entry, .entrylistPostSummary, .topicList, .topicListFooter,
.feedbackArea, .feedbackItem, .comment, .commentbox_main, .commentform,
.pager, .catList, .catListTag, .catListTitle, .catListComment, .catListFeedback,
.newsItem, .widget, .sideblock, .block, .blogStats, .search, .mySearch,
.cnblogs-markdown, .cnblogs-post-body{
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ===== 3. 给主要内容区套一层半透明面板（--panel 设为 0 即完全透明） ===== */
#header, #mainContent, #sideBar, #footer{
  background-color: rgba(var(--panel-rgb), var(--panel)) !important;
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(70, 100, 150, .12);
  color: var(--text);
  /* 想要磨砂玻璃质感（面板后面的背景被虚化）就把下面两行的注释符号去掉。
     低配设备、老显卡上可能略微卡顿，所以默认关闭。 */
  /* -webkit-backdrop-filter: blur(8px); */
  /*         backdrop-filter: blur(8px); */
}

/* 正文区域继承文字颜色，避免被皮肤写死 */
#cnblogs_post_body, .postBody, .postCon, .day, .forFlow, #sideBar, #footer{
  color: var(--text);
}
#mainContent a, #sideBar a, #footer a, #header a{
  color: var(--link);
}
#mainContent a:hover, #sideBar a:hover, #footer a:hover{
  opacity: .75;
}

/* 面板内边距，让背景图从四周透出来 */
#mainContent{ padding: 24px !important; }
#sideBar, #footer{ padding: 16px !important; }

/* ===== 4. 代码块 / 表格 / 引用 / 输入框：改成浅半透明，保持可读 ===== */
#cnblogs_post_body pre,
#cnblogs_post_body code,
#cnblogs_post_body .code,
#cnblogs_post_body .highlight,
.cnblogs-post-body pre,
.cnblogs-post-body code{
  background-color: rgba(var(--panel-rgb), .72) !important;
  border-radius: 8px;
}
#cnblogs_post_body table,
#cnblogs_post_body th,
#cnblogs_post_body td{
  background-color: rgba(var(--panel-rgb), .45) !important;
}
#cnblogs_post_body blockquote{
  background-color: rgba(var(--panel-rgb), .45) !important;
  border-left-color: var(--link) !important;
}
input, textarea, select, button{
  background-color: rgba(var(--panel-rgb), .65) !important;
  border: 1px solid rgba(120, 140, 170, .35) !important;
  color: var(--text) !important;
  border-radius: 6px;
}

/* ===== 5. 边角细节 ===== */
/* 头像、配图统一圆角（不想要就删掉这段） */
#blogTitle img, #sideBar img, .post img, #cnblogs_post_body img{
  border-radius: 10px;
}
/* 顶部分页/导航栏也做成半透明 */
#navigator, #topnav, .pager{
  background-color: rgba(var(--panel-rgb), .5) !important;
  border-radius: 10px;
}
/* 滚动条调成半透明，跟整体更搭 */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(120, 150, 190, .45);
  border-radius: 10px;
}

/* ===== 6. 移动端 ===== */
@media screen and (max-width: 768px){
  /* 手机竖屏又高又窄，用 cover 会把图放大很多；
     这里改成图从顶部开始、随页面滚动，视觉上更自然。
     想跟电脑端一样固定在屏幕上，删掉下面这段。 */
  body{
    background-attachment: scroll !important;
    background-position: center top !important;
  }
  :root{
    --panel: .62;   /* 手机上字更小，面板稍微加厚一点更好读 */
  }
  #mainContent, #sideBar, #footer{ border-radius: 10px; }
  #mainContent{ padding: 14px !important; }
}