/* 夜间模式下，让全站所有图片变暗 */
body.io-black-mode img {
    /* 核心：降低亮度（0.7表示70%亮度，数值越小越暗） */
    filter: brightness(0.7);
    /* 可选：轻微降低对比度，避免图片过暗后显得生硬 */
    filter: brightness(0.7) contrast(0.9);
    /* 切换时的平滑过渡效果（0.3秒渐变） */
    transition: filter 0.3s ease;
}

/* 确保白天模式下图片恢复正常（防止夜间模式样式残留） */
body:not(.io-black-mode) img {
    filter: none !important;
    transition: filter 0.3s ease;
}


.auth-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            /* 调整为清新蓝色渐变背景 */
            background: linear-gradient(120deg, #e3f2fd, #bbdefb); 
            border: 2px solid #42a5f5; /* 加深边框蓝色，增强轮廓感 */
            border-radius: 20px; /* 圆润弧度适配卡通感 */
            color: #0d47a1; /* 深蓝色文字，提升辨识度 */
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 3px 8px rgba(66, 165, 245, 0.25); /* 更柔和的阴影，增强立体感 */
            cursor: default;
            transition: all 0.2s ease; /* 增加 hover 过渡动画 */
        }
        .auth-badge::before {
            content: "✔";
            display: inline-block;
            width: 20px; 
            height: 20px;
            margin-right: 6px;
            background: #42a5f5; /* 统一蓝色系 */
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 20px; 
            font-size: 12px;
            font-weight: normal;
            box-shadow: 0 2px 4px rgba(66, 165, 245, 0.3); /* 给对勾背景加阴影，更立体 */
        }
        /* 鼠标悬浮交互优化 */
        .auth-badge:hover {
            background: linear-gradient(120deg, #bbdefb, #e3f2fd); /* 渐变反向，增加互动感 */
            box-shadow: 0 4px 12px rgba(66, 165, 245, 0.35); 
            transform: translateY(-1px); /* 轻微上移，模拟微动效 */
        }




/*新增卡片*/
.scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap; /* 禁止内容换行 */
    border: 1px solid #eee; /* 可选：加个边框方便查看 */
  }
  .scroll-content {
    display: inline-block;
    animation: scroll-left 15s linear infinite; /* 滚动速度可调整 */
  }
  /* 复制一份内容用于衔接 */
  .scroll-content-copy {
    display: inline-block;
    margin-left: 20px; /* 与原内容的间距 */
  }
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 滚动到自身一半时复位 */
  }
  /* 图片样式（可选，根据需要调整） */
  .scroll-img {
    width: 100px;
    height: auto;
    margin: 0 10px; /* 图片之间的间距 */
    vertical-align: middle; /* 与文字对齐 */
  }

/* 二级分类标签容器 */
.io-slider-tab {
    position: relative;
    white-space: nowrap;
}

.slider-tab {
    position: relative;
    white-space: nowrap;
    background: var(--muted-bg-color);
    padding: 4px;
    margin: 0;
    border-radius: var(--theme-border-radius-md);
    list-style: none;
    transition: background-color 0.3s;
}

/* 二级分类标签项 */
.slider-tab .tab-item {
    position: relative;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    font-size: 14px;
    color: var(--muted-color);
    cursor: pointer;
    border-radius: var(--theme-border-radius-sm);
    list-style-type: none;
    transition: 0.3s;
}

/* 未激活标签 hover 效果 */
.slider-tab .tab-item:not(.active):hover {
    background: var(--main-bg-color);
}

/* 激活标签样式 */
.slider-tab .tab-item.active {
    color: #fff;
}

/* 标签激活状态指示器 */
.slider-tab .anchor {
    opacity: 0;
    color: #fff;
    background: var(--focus-color);
    transition: 0.35s;
    border-radius: var(--theme-border-radius-sm);
}
/* 内容卡片容器 */
.content-card {
    padding: 0;
}

/* 内容卡片 hover 效果 */
.content-card:hover .tab-to-more::before {
    width: calc(100% - 5px);
}

/* 标签页内容容器 */
.tab-content {
    margin-top: 0.5rem;
}

/* 标签页内容项（默认隐藏） */
.tab-pane {
    display: none;
}

/* 激活的标签页内容（显示） */
.tab-pane.active {
    display: block;
}
/* 小屏幕下的滚动条控制 */
@media (max-width: 767.98px) {
    .tab-auto-scrollbar::-webkit-scrollbar {
        display: none;
    }
}


/* 网站提示内容样式代码 */
#warningBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 77, 77, 0.8);
    color: #fff;
    text-align: center;
    padding: 12px 20px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* 初始状态：完全隐藏且不占空间 */
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 9999;
    box-sizing: border-box; /* 避免padding导致宽度溢出 */
}

#warningBox.show {
    /* 显示时的动画状态 */
    opacity: 1;
    transform: translateY(0);
}

#warningBox::before {
    content: "!";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    color: #ff4d4d;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    margin-right: 8px;
    font-size: 14px;
}






.loader {
                width: 250px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: helvetica, arial, sans-serif;
                text-transform: uppercase;
                font-weight: 900;
                color: #f1404b;
                letter-spacing: 0.2em
            }

            .loader::before,
            .loader::after {
                content: "";
                display: block;
                width: 15px;
                height: 15px;
                background: #f1404b;
                position: absolute;
                animation: load .7s infinite alternate ease-in-out
            }

            .loader::before {
                top: 0
            }

            .loader::after {
                bottom: 0
            }

            @keyframes load {
                0% {
                    left: 0;
                    height: 30px;
                    width: 15px
                }

                50% {
                    height: 8px;
                    width: 40px
                }

                100% {
                    left: 235px;
                    height: 30px;
                    width: 15px
                }
            }
/*弹窗*/
h1 {
    font-size: 24px; /* 可根据需求调整大小 */
    box-sizing: border-box;
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
}
.h2r {
    font-size: 10px; /* 可根据需求调整大小 */
    box-sizing: border-box;
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
}