/*============================= 网站背景开始 =============================*/
/* 白天网站背景/颜色 */
#web_bg {
    background-size: 20rem;
    background-image: url(/images/site/bg.svg) !important;
    background-repeat: initial
}

[data-theme=dark] #web_bg {
    background-size: 100rem;
    background-image: url(/images/site/bg-dark.jpg) !important
}

/* 页脚透明 */
@media screen and (min-width: 768px) {

    [data-theme=light] #footer,
    [data-theme=light] #footer-wrap {
        background: rgba(255, 255, 255, .3) !important
    }

    [data-theme=dark] #footer {
        background: rgba(0, 0, 0, .3) !important
    }

    [data-theme=dark] #footer #footer-bar {
        background: rgba(0, 0, 0, .6) !important
    }
}

#footer-animal {
    position: relative;
}

#footer-animal::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: url(/images/site/animalBg.jpg) repeat center / auto 100%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .15);
}

.animal {
    position: relative;
    max-width: min(974px, 100vw);
    margin: 0 auto;
    display: block;
}

#footer-bar {
    margin-top: 0 !important;
}

@media screen and (max-width: 1023px) {
    #footer-animal::before {
        height: 4vw;
    }
}

[data-theme=dark] #footer-animal {
    filter: brightness(.8);
}

/*============================= 网站背景结束 =============================*/

/*============================= 下划线（微信风格）开始 =============================*/
/* 实下滑线 */
.underline {
    text-decoration: underline;
    text-decoration-color: rgb(73, 177, 245);
    text-underline-offset: 0.3em;
    /* 调整这个值控制间距 */
    text-decoration-thickness: 1.5px;
}

/* 双实下滑线 */
.double-underline {
    text-decoration: underline;
    text-decoration-color: rgb(73, 177, 245);
    text-decoration-style: double;
    text-underline-offset: 0.3em;
    /* 调整这个值控制间距 */
    text-decoration-thickness: 1.5px;
}

/* 悬停下划线 非焦点*/
.hover-underline {
    position: relative;
    display: inline-block;
}

/* 悬停下划线 焦点*/
.hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 0;
    height: 1.5px;
    background: rgb(73, 177, 245);
    transition: width 0.3s ease;
}

/* 悬停下划线 焦点*/
.hover-underline:hover::after {
    width: 100%;
}

/* 虚下滑线 */
.dashed-underline {
    background: linear-gradient(90deg, rgb(73, 177, 245) 60%, transparent 0) repeat-x;
    /* 60%透明度比例控制虚实比例 */
    background-size: 12px 1.5px;
    /* 调整12px值控制虚线长度 */
    background-position: 0 1.2em;
    text-underline-offset: 0.3em;
    /* 调整这个值控制间距 */
    padding-bottom: 4px;
}

/*用法<span class="underline">*/
/*============================= 下划线（微信风格）结束 =============================*/

/*============================= 荧光笔（小书风格）开始 =============================*/
.highlighter {
    background: linear-gradient(to bottom,
            transparent 35%,
            rgba(200, 160, 255, 0.4) 35%,
            rgba(200, 160, 255, 0.4) 80%,
            transparent 80%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 1px 2px 1px;
    display: inline;
    border-radius: 2px;
}

/* 多色变体 */
.highlighter.purple {
    background: linear-gradient(to bottom,
            transparent 35%,
            rgba(200, 160, 255, 0.4) 35%,
            rgba(200, 160, 255, 0.4) 80%,
            transparent 80%);
}

.highlighter.yellow {
    background: linear-gradient(to bottom,
            transparent 35%,
            rgba(255, 223, 0, 0.4) 35%,
            rgba(255, 223, 0, 0.4) 80%,
            transparent 80%);
}

.highlighter.blue {
    background: linear-gradient(to bottom,
            transparent 35%,
            rgba(100, 200, 255, 0.4) 35%,
            rgba(100, 200, 255, 0.4) 80%,
            transparent 80%);
}

.highlighter.pink {
    background: linear-gradient(to bottom,
            transparent 35%,
            rgba(255, 150, 200, 0.4) 35%,
            rgba(255, 150, 200, 0.4) 80%,
            transparent 80%);
}

/*用法：<span class="highlighter pink">*/

/*============================= 荧光笔（小书风格）结束 =============================*/

/*============================= 页脚备案容器开始 =============================*/

/* 为 #footer-bar 设置相对定位，作为备案容器的定位参考 */
#footer-bar {
    /* 为备案信息预留更多空间 */
    min-height: 100px;
    /* 底部内边距，确保有足够空间 */
    padding-bottom: 50px;
}

/* 备案链接容器样式 - 使用ID选择器 */
#beian-links {
    /* 定位样式 - 绝对定位在footer-bar底部居中 */
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    /* 文本和布局样式 */
    display: block;
    width: auto;
    text-align: center;
    white-space: nowrap;

    /* 字体样式 */
    font-size: 12px;
    color: var(--anzhiyu-fontcolor);
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* 确保在最上层 */
    z-index: 10;
}

/* 备案链接的样式 */
#beian-links a.footer-bar-link {
    color: var(--anzhiyu-fontcolor); /* 链接文字也设置为深色 */
    text-decoration: none;
    transition: color 0.3s ease; /* 添加过渡效果 */
}

#beian-links a.footer-bar-link:hover {
    text-decoration: none;
    color: var(--anzhiyu-lighttext); /* 悬停颜色 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    #beian-links {
        margin: -30px 0;
        font-size: 11px;
        white-space: normal; /* 允许内容换行 */
        text-align: center; /* 确保换行后内容依然居中 */
        max-width: 90%;
        bottom: 10px;
        /* 使整个容器在移动端独占一行，居中效果更稳定 */
        display: block;
    }
    
    #beian-links a.footer-bar-link {
        display: inline-block;
        line-height: 1.8;
        padding: 2px 4px;
        /* 单独成行，可以设置为block，并赋予宽度或使用其他布局 */
        /* display: block; */
    }

     /* 移动端适配链接样式 */
    #beian-links .separator {
            display: none !important; /* 上下排列时隐藏竖线分隔符 */
        }
    
}

/* 暗色模式适配 */
[data-theme="dark"] #beian-links a.footer-bar-link {
    color: var(--anzhiyu-fontcolor);;
}

[data-theme="dark"] #beian-links a.footer-bar-link:hover {
    color: var(--anzhiyu-lighttext);
    text-decoration: none;
}

/* 竖线分隔符样式 */
#beian-links .separator {
    color: #CCCCCC;
    margin: 0 10px;
    display: inline-block;
}

/* 暗色模式竖线适配 */
[data-theme="dark"] #beian-links .separator {
    color: #666666;
}

/*============================= 页脚备案容器结束 =============================*/