/*
html {  display: flex;height: 100vh;overflow: hidden;justify-content: center;align-items: center;flex-direction:column;background: #222;}
body {min-height: unset;}
body::before, body::after {font-weight: bold;font-family: 'SF Mono', 'Courier New', Courier, monospace;font-size: 42px;color: #ff4473;}
head { display: block;background-image: url(https://files.cnblogs.com/files/blogs/757752/rickroll-roll.gif);height:20rem;width:20rem;background-repeat: no-repeat;background-size: cover;border: 5px solid #fff;border-radius: 10px;border-style: dashed;}
body::before {display: inline-block;padding-top: 3rem;content: "Never gonna give you up...";}
body::after {margin-left: 16px;display: inline;content: "_";background: #ff4473;animation: blink 1s infinite;}
@keyframes blink {from {opacity: 1;}to {opacity: 0;}}
#top_nav {display: none;}
#home {display: none;}
*/

#top_nav {
    display: none;
}

@font-face {
    font-family: Material Symbols Outlined;
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v7/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDDxHOem.ttf) format("truetype")
}

#vip_tip {
    display: none;
}

em {
    font-weight: 300;
}


html {
    --main-color: #181a1a;
    --sub-color: #2d2d2d;
    --light-color: #d7dbdf;
    --gray-color: #a7aaac;
    --theme-color: #33c4da;
    --theme-color-light: #54bdd2;
    --theme-color-dark: #1374ca;

    --cnblogs-toc-bg-color: var(--main-color) !important;
    --cnblogs-toc-color: white !important;
    --cnblogs-toc-highlight-color: var(--sub-color) !important;

    --cnblogs-current-collection-bg-color: var(--main-color) !important;
    --cnblogs-current-collection-highlight-color: var(--theme-color-dark) !important;
    --cnblogs-current-collection-active-color: var(--gray-color) !important;
    --cnblogs-current-collection-hover-color: var(--sub-color) !important;
    --cnblogs-current-collection-color: white !important;
}

body {
    color: var(--light-color);
    font-family: Ubuntu, Lato, PingFang SC, Microsoft YaHei, sans-serif;
    font-weight: 400;
    background: url(https://img2024.cnblogs.com/blog/3514250/202503/3514250-20250313172759705-1630989327.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
}

a {
    color: var(--light-color);
    transition: ease-in-out 0.07s;
    text-decoration-thickness: 0.1px;
    text-decoration-color: var(--gray-color);
}

a:hover {
    color: var(--gray-color);
}

#cnblogs_post_body a {
    color: var(--theme-color);
    transition: ease-in-out 0.07s;
    text-decoration-thickness: 0.1px;
    text-decoration-color: var(--theme-color);
}

#cnblogs_post_body a:hover {
    color: var(--theme-color-dark);
}


#Header1_HeaderTitle {
    font-family: Consolas;
    text-decoration: none;
}

/* h2 {
    font-family: Gabriola;
    font-size: 2em;
    font-style: italic;
    text-decoration: none;
} */

@keyframes sparkles {
    0% {
        color: var(--main-color);
    }

    49.99% {
        color: var(--main-color);
    }

    50% {
        color: var(--light-color);
    }
}

#Header1_HeaderTitle:after {
    content: "_";
    color: var(--light-color);
    animation: sparkles 3s infinite;
}


#home {
    padding-top: 0.75em;
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
}

#header {
    padding-bottom: 50px;
}

#navList {
    padding-left: 0px;
}

#navList li {
    display: inline;
    margin-left: 3px;
    margin-right: 3px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 10px;
    padding-bottom: 7px;
    border-bottom: 2px var(--gray-color) solid;
}

#navList li a, .search_button {
    text-decoration: none;
    font-size: large;
    font-weight: bold;
    user-select: none;
    cursor: pointer;
}

#navList li:nth-child(4), #navList li:nth-child(5) {
    display: none;
}

#sideBar {
    display: none;
}

#footer {
    text-align: center;
    color: var(--gray-color);
}

.day {
    padding-bottom: 18px;
}

.dayTitle a {
    text-decoration: none;
    
    font-size: small;
}

.pinned-post-mark {
    font-weight: bold;
}

.postTitle2, .entrylistItemTitle {
    font-size: x-large;
    text-decoration: none;
}

.postTitle, .entrylistPosttitle {
    margin-bottom: 7px;
    
}

.post .postTitle {
    margin-top: -10px;
    margin-bottom: 20px;
}

.post .postTitle:before {
    content: ">";
    animation: sparkles 4s infinite;;
}

.postDesc {
    margin: 10px;
    text-align: right;
}

#green_channel {
    display: none;
}

#ad_text_under_commentbox, #cnblogs_ch, #opt_under_post, #under_post_card1, #under_post_card2 {
    display: none;
}

.feedback_area_title {
    font-size: x-large;
    
    margin-bottom: 10px;
}

.feedbackManage {
    float: right;
}

.feedbackItem {
    border-bottom: 1px var(--main-color) solid;
    padding: 20px;
}

.feedbackListSubtitle {
    margin-left: -10px;
}

.layer {
    display: none;
}

.comment_textarea {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--main-color);
    width: 100%;
}

.commentbox_tab:hover, .commentbox_tab.active { 
    color: var(--gray-color)
}

.commentbox_title {
    border-bottom: 1px solid var(--main-color);
}

.commentbox_footer {
    border-top: 1px solid var(--main-color);
}

#tbCommentBody {
    background-color: rgba(0, 0, 0, 0);
    color: var(--light-color);
}

.comment_svg:hover, .comment_option:hover {
    stroke: white;
    fill: white;
    color: white;
}

#commentform_title + span, #tip_comment2 + p {
    display: none !important;
}

.comment_digg {
    color: #309730;
}

.comment_bury {
    color: #b93535;
}

.comment_digg, .comment_bury {
    user-select: none;
    cursor: pointer;
}

.blogpost-body blockquote {
    border-left: 3px solid var(--gray-color);
    color: var(--light-color);
    background-color: rgba(0,0,0,0.3);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
    padding-left: 20px;
    width: calc(100% - 20px);
}

details {
    padding-left: 10px;
}



.pager a {
    border: none;
    color: var(--light-color);
}

.pager {
    color: var(--gray-color);
}

.input_box {
    background-color: var(--main-color);
    border: 1px var(--light-color) solid;
    padding: 5px;
    color: var(--light-color);
}

.cnblogs-markdown :not(pre, div, td) > code, .blogpost-body :not(pre, div, td) > code {
    background-color: var(--sub-color);
}

#BlogPostCategory {
    display: none;
}

.entrylistItemPostDesc {
    display: none;
}


::-webkit-scrollbar {
    background-color: var(--main-color);
    color: var(--sub-color);
}

::-webkit-scrollbar-corner {
    background-color: var(--main-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--sub-color);
}

.under-post-card {
    display: none;
}

solution {
    display: block; 
    overflow: hidden;
}

.show_solution:hover {
    background-color: #b634edb9;
}

.show_solution {
    user-select: none;
    cursor: pointer;
    color: var(--light-color);
    padding: 10px;
    width: 100%;
    display: inline-block;
    background-color: #b634ed71;
    margin-bottom: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
    background-blend-mode: multiply;
    border-radius: 5px;
    transition: ease-out 0.1s;
}

html.light .show_solution:hover {
    background-color: #5934edb9;
}

html.light .show_solution {
    user-select: none;
    cursor: pointer;
    color: var(--light-color);
    padding: 10px;
    width: 100%;
    display: inline-block;
    background-color: #5934ed71;
    margin-bottom: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
    background-blend-mode: multiply;
    border-radius: 5px;
    transition: ease-out 0.1s;
}

mjx-container:not([display]) {
    display: unset !important;
}

li {
    margin-top: 5px;
}

.background-dimmed {
    background: rgba(0, 0, 0, 0.6);
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
    transition: background 0.5s ease;
}

html.light .background-dimmed {
    background: rgba(255, 255, 255, 0.2);
    /*transition: background 0.5s ease;*/
}

#div_digg .buryit, #div_digg .diggit {
    background: none;
    height: auto;
    width: auto;
    min-width: 75px;
    margin: 10px;
    font-size: 17px;
    border-radius: 4px;
    padding: 8px 10px;
    background-color: var(--sub-color);
}


#div_digg .diggit::before {
    font-family: Material Symbols Outlined;
    content: "\e8dc";
    font-size: 17px;
    position: relative;
    top: 3px;
}

#div_digg .buryit::before {
    font-family: Material Symbols Outlined;
    content: "\e8db";
    font-size: 17px;
    position: relative;
    top: 3px;
}

#div_digg .buryit span, #div_digg .diggit span {
    font-size: inherit;
    color: inherit;
}

#div_digg {
    margin: 0;
    width: auto;
}

#author_profile a {
    text-decoration-color: rgba(0, 0, 0, 0);
}

.toc {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
}

#cnblogs_post_body .toc a {
    color: var(--light-color);
    text-decoration: none;
}

#cnblogs_post_body .toc a:hover {
    color: var(--gray-color);
}

pre[class*="language-"] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
}

code[class*="language-"] {
    background: rgba(0, 0, 0, 0);
}

.code-fullscreen-overlay pre[class*="language-"] {
    background: #171a1f;
}

span.cnb-code-toolbar-item {
    background: var(--main-color);
    color: var(--light-color);
}

span.cnb-code-toolbar-item:hover {
    background: var(--sub-color);
    color: var(--light-color);
}
.cnb-over-length-code-block-toggler {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 10%, rgba(0, 0, 0, 0.5) 30%, rgb(0, 0, 0));
}

.blogpost-body th {
    background-color: rgba(0, 0, 0, 0.7) !important
}

.blogpost-body td {
    background-color: rgba(0, 0, 0, 0.3) !important
}


.blogpost-body th, .blogpost-body td {
    border-top: 0px;
    border-left: var(--gray-color) 1px solid;
    border-right: 0px;
    border-bottom: var(--gray-color) 1px solid;
}

.blogpost-body th:first-child, .blogpost-body td:first-child {
    border-left: 0px;
}

.table-wrapper {
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}


@media only screen and (max-width: 767px) {
    #home {
        padding-top: 0.75em;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: unset;
        border-radius: unset;
        padding-left: 10px;
        padding-right: 10px;
    }
    body {
        margin: 0px;
    }
    #header > .search-mobile {
        display: flex !important;
        width: 100%;
    }
    #header > .search-mobile > .input_box {
        flex: auto;
    }
    #navList .search-mobile {
        display: none !important;
    }
    #navList li:nth-child(3), #navList li:nth-child(7) {
        display: none;
    }
}

.search_button {
    padding: 5px;
    margin-left: 5px;
}

#header > .search-mobile {
    display: none;
}

#cnblogs_post_body img {
    display: block;
    margin: 0 auto;
}

.cnblogs-toc-item {
    transition: ease-in-out 0.07s;
}

.current-collection-links .current-collection-link, #cnblogs_post_body .current-collection a {
    color: var(--light-color);
}

.icon-pin::before, .icon-arrow::before, .wb-close, .cnblogs-toc-item .cnblogs-toc-collapse-button::before {
    filter: invert();
}

html.light .icon-pin::before, html.light .icon-arrow::before, html.light .wb-close, html.light .cnblogs-toc-item .cnblogs-toc-collapse-button::before {
    filter: none;
}

.tippy-box[data-theme~="cnblogs"] {
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.15),0 4px 80px -8px rgba(0, 0, 0, 0.25),0 4px 4px -2px rgba(0, 0, 0, 0.15);
}

#commentform_title {
    background-image: none;
    padding: 0px;
    font-size: x-large;
}

#cnblogs_post_body a.headerlink {
    color: var(--light-color);
    opacity: 0%;
    display: none;
    text-decoration: none;
    font-weight: 50;
    margin-left: 10px;
    opacity: 80%;
}

#cnblogs_post_body :hover > a.headerlink {
    display: inline;
}

#cnblogs_post_body a.headerlink::before {
    content: "¶";
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999; 
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background-color: var(--theme-color-light);
  color: var(--light-color);
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.theme-toggle:hover {
  background-color: var(--theme-color);
  transform: scale(1.05);
}


/* 2. 明模式（.light类）的CSS变量覆盖 */
html.light {
  /* 明模式颜色变量：浅色背景+深色文字 */
  --main-color: #f5f7fa;
  --sub-color: #e8ebf0;
  --light-color: #2d3748; /* 文字色反转 */
  --gray-color: #718096;
    --theme-color: #6b33da;
    --theme-color-light: #dba7ea;
    --theme-color-dark: #4b22aa;

    --cnblogs-toc-bg-color: var(--main-color) !important;
    --cnblogs-toc-color: black !important;
    --cnblogs-toc-highlight-color: var(--sub-color) !important;

    --cnblogs-current-collection-title-link-color: black !important;
    --cnblogs-current-collection-bg-color: var(--main-color) !important;
    --cnblogs-current-collection-highlight-color: var(--theme-color-light) !important;
    --cnblogs-current-collection-active-color: var(--gray-color) !important;
    --cnblogs-current-collection-hover-color: var(--sub-color) !important;
    --cnblogs-current-collection-color: black !important;
    transition: background-color 0.5s ease, color 0.5s ease;
 --body-bg-overlay: rgba(255, 255, 255, 0.9); /* 背景叠加层变浅 */
 
}

/* 3. 明模式下的样式调整（覆盖暗模式特定样式） */
html.light body {
  /* 明模式背景图（可替换为自己的浅色图，这里用渐变兜底） */
  background-image: url(https://img2024.cnblogs.com/blog/3514250/202508/3514250-20250815115922735-1164481995.jpg) !important;
  background-color: var(--main-color);
}

html.light #home {
  background: rgba(255, 255, 255, 0.75); /* 主体背景变白色半透明 */
  box-shadow: 0 0 30px rgba(0, 0, 0, 1);
}

html.light blockquote,
html.light pre[class*="language-"],
html.light .toc {
  background-color: rgba(255, 255, 255, 0.85); /* 代码块/引用/目录背景变浅 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

html.light .blogpost-body th {
  background-color: rgba(240, 244, 248, 0.9) !important;
}

html.light .blogpost-body td {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* 4. 明模式下的滚动条 */
html.light ::-webkit-scrollbar {
  background-color: var(--sub-color);
}
html.light ::-webkit-scrollbar-thumb {
  background-color: var(--gray-color);
}

/* 5. 切换按钮图标变化（明模式显示light_mode，暗模式显示dark_mode） */
html.light .theme-icon {
  content: "light_mode";
}

/*背景淡入淡出效果*/
.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; /* 确保在内容下方 */
  overflow: hidden;
}

/* 单个背景层：覆盖容器，默认隐藏，添加过渡动画 */
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.8s ease; /* 淡入淡出动画（0.8秒平滑过渡） */
}

/* 初始状态：默认显示暗模式背景 */
.bg-layer[data-theme="dark"] {
  opacity: 1;
}

/* 明模式激活时：显示明模式背景，隐藏暗模式背景 */
html.light .bg-layer[data-theme="light"] {
  opacity: 1;
}
html.light .bg-layer[data-theme="dark"] {
  opacity: 0;
}

/* 移除原body的背景图（改用背景层） */
body {
  background-image: none !important;
}

/*
.bg-layer {
  /* 原有样式保留，新增滤镜 
  filter: brightness(0.6);
  transition: opacity 0.8s ease, filter 0.8s ease; /* 增加滤镜过渡 
}
*/
/* 明模式下可适当提高亮度（避免过暗） 
html.light .bg-layer {
  filter: brightness(0.7);
}
*/
/* 6. 给关键容器/组件单独加过渡（确保背景、阴影等细节也有动画） */
body, #home, blockquote, pre[class*="language-"], .toc, .blogpost-body th, .blogpost-body td,.diggit,.buryit,.current-collection-links .current-collection-link, #cnblogs_post_body .current-collection,.bg-overlay,
/* 包含之前需要调整滤镜的图标元素 */
.icon-pin::before, .icon-arrow::before, .wb-close, .cnblogs-toc-item .cnblogs-toc-collapse-button::before {
  /* 过渡所有可能变化的属性：背景、颜色、滤镜、阴影 */
  transition: background-color 0.5s ease, color 0.3s ease, filter 0.5s ease, box-shadow 0.5s ease,background-image 0.5s ease; /* 若背景图变化也需要过渡 */
}