/*
 * @Author: Eyosc
 * @Author URI: https://nav.eyosc.com/
 * @Date: 2024-01-03 00:15:11
 * @LastEditors: Eyosc
 * @LastEditTime: 2026-05-10 11:05:39
 * @FilePath: \onenavsub\assets\css\sub-style.css
 * @Description: 自定义样式
 */








/* ==========================================
   视频背景模糊处理
   ========================================== */
/*
.video-bg {
    filter: blur(2px);
}
*/

/* ==========================================
   投稿页：未登录时「提交审核」视觉弱化（仍可点击，会弹提示）
   ========================================== */
/* 投稿页：分类名称输入 + 核对 */
.onenavsub-cat-picker {
    margin-bottom: 0;
}
.onenavsub-cat-hint {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #856404;
    background: #fff8e6;
    border: 1px solid #ffe08a;
}
.onenavsub-cat-hint-limit {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #ffe08a;
    font-weight: 600;
}
.onenavsub-cat-input:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}
.onenavsub-cat-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.onenavsub-cat-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: stretch;
}
.onenavsub-cat-browse {
    white-space: nowrap;
}
.onenavsub-cat-tree-dialog {
    max-width: 420px;
}
.onenavsub-cat-tree-body {
    max-height: 60vh;
    overflow: auto;
    margin-top: 8px;
}
.onenavsub-cat-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.onenavsub-cat-tree-list .onenavsub-cat-tree-list {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1px dashed #ddd;
}
.onenavsub-cat-tree-item {
    margin: 0;
    padding: 0;
}
.onenavsub-cat-tree-label {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}
.onenavsub-cat-tree-item.is-top > .onenavsub-cat-tree-label {
    font-weight: 600;
    color: #666;
    cursor: default;
    margin-top: 6px;
}
.onenavsub-cat-tree-item.is-selectable > .onenavsub-cat-tree-label {
    cursor: pointer;
    color: #1e7e34;
}
.onenavsub-cat-tree-item.is-selectable > .onenavsub-cat-tree-label:hover {
    background: #eaf7ee;
}
.onenavsub-cat-tree-item.is-disabled > .onenavsub-cat-tree-label {
    color: #aaa;
    cursor: not-allowed;
}
.onenavsub-cat-tree-loading,
.onenavsub-cat-tree-empty {
    padding: 12px 4px;
}
html.io-black-mode .onenavsub-cat-tree-item.is-top > .onenavsub-cat-tree-label,
.io-black-mode .onenavsub-cat-tree-item.is-top > .onenavsub-cat-tree-label {
    color: #aaa;
}
html.io-black-mode .onenavsub-cat-tree-item.is-selectable > .onenavsub-cat-tree-label,
.io-black-mode .onenavsub-cat-tree-item.is-selectable > .onenavsub-cat-tree-label {
    color: #7dcea0;
}
html.io-black-mode .onenavsub-cat-tree-item.is-selectable > .onenavsub-cat-tree-label:hover,
.io-black-mode .onenavsub-cat-tree-item.is-selectable > .onenavsub-cat-tree-label:hover {
    background: #1e2e24;
}
html.io-black-mode .onenavsub-cat-tree-list .onenavsub-cat-tree-list,
.io-black-mode .onenavsub-cat-tree-list .onenavsub-cat-tree-list {
    border-left-color: #444;
}
.onenavsub-cat-input {
    flex: 1 1 auto;
    min-width: 0;
}
.onenavsub-cat-input.is-invalid {
    border-color: #dc3545;
}
.onenavsub-cat-verify {
    flex: 0 0 auto;
    white-space: nowrap;
}
.onenavsub-cat-feedback {
    margin-top: 8px;
    min-height: 2.75em;
}
.onenavsub-cat-status {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
    min-height: 2.75em;
    box-sizing: border-box;
}
.onenavsub-cat-status:empty {
    display: none;
}
.onenavsub-cat-status.is-info {
    color: #666;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
}
.onenavsub-cat-status.is-ok {
    color: #1e7e34;
    background: transparent;
    border: none;
    padding: 0;
    min-height: 0;
}
.onenavsub-cat-tag {
    display: inline-block;
    margin: 0 6px 4px 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
    color: #1e7e34;
    background: #eaf7ee;
    border: 1px solid #b9e0c3;
}
.onenavsub-cat-status.is-error {
    color: #a94442;
    background: #fdf2f2;
    border: 1px solid #f1c0c0;
}
html.io-black-mode .onenavsub-cat-hint,
.io-black-mode .onenavsub-cat-hint {
    color: #e6c200;
    background: #3d3520;
    border-color: #6b5a2a;
}
html.io-black-mode .onenavsub-cat-hint-limit,
.io-black-mode .onenavsub-cat-hint-limit {
    border-top-color: #6b5a2a;
}
html.io-black-mode .onenavsub-cat-status.is-info,
.io-black-mode .onenavsub-cat-status.is-info {
    color: #bbb;
    background: #2a2a2a;
    border-color: #444;
}
html.io-black-mode .onenavsub-cat-status.is-ok,
.io-black-mode .onenavsub-cat-status.is-ok {
    color: #7dcea0;
    background: transparent;
    border: none;
}
html.io-black-mode .onenavsub-cat-tag,
.io-black-mode .onenavsub-cat-tag {
    color: #7dcea0;
    background: #1e2e24;
    border-color: #3a5a44;
}
html.io-black-mode .onenavsub-cat-status.is-error,
.io-black-mode .onenavsub-cat-status.is-error {
    color: #f5a9a9;
    background: #3a2222;
    border-color: #6b4040;
}

body.page-template-template-contribute:not(.logged-in) .new-posts-submit[action$="_save"] {
    opacity: 0.65;
}

/* ==========================================
   顶部导航栏快捷菜单 (传文件/工具等) 专属样式
   ========================================== */

/* 1. 主容器样式 */
.topgj_r {
    margin-right: 15px;
    display: flex;
    align-items: center;
    height: 100%;
}

/* 2. 一级菜单项 */
.topgj_r .menu-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.topgj_r .menu-item a {
    padding: 8px;
    color: #282a2d;
    display: flex;
    align-items: center;
    font-size: 13px;
    transition: all 0.3s ease;
}

/* 夜间模式：一级菜单文字颜色 */
.io-black-mode .topgj_r .menu-item a {
    color: #c6c9cf;
}

/* 3. 下拉子菜单容器 */
.topgj_r .sub-menu-z {
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    min-width: 90px;
    background: rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transition: all 0.25s cubic-bezier(0.3, 0, 0.3, 1);
    z-index: 1000;
    padding: 8px 0;
    margin: 0;
    list-style-type: none;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* 夜间模式：下拉子菜单背景色 */
.io-black-mode .topgj_r .sub-menu-z {
    background: rgb(60, 60, 60);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 鼠标悬停时显示下拉菜单 */
.topgj_r .menu-item:hover .sub-menu-z {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
}

/* 4. 下拉子菜单项 */
.sub-menu-z .menu-item-z {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-align: center;
}

.sub-menu-z .menu-item-z a {
    padding: 8px 16px;
    color: #666 !important;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
}

.sub-menu-z .menu-item-z span {
    display: inline-block;
    text-align: center;
    width: 100%;
}

/* 夜间模式：下拉子菜单文字颜色 */
html.io-black-mode .sub-menu-z .menu-item-z a {
    color: #c6c9cf !important;
}

/* 1. 顶部菜单项：从中心向上下展开的动画特效 */
.topgj_r .menu-item a {
    position: relative !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    transition: color 0.3s ease !important;
    /* 移除了 overflow: hidden，防止切掉内容 */
    z-index: 1;
}

/* 创建红框层：利用伪元素控制垂直缩放 */
.topgj_r .menu-item a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1404b !important;
    border-radius: 8px !important;
    /* 加上圆角，让红框更圆润 */
    z-index: 0;
    /* 只要比文字层级低即可 */

    /* 动画核心：垂直方向缩放 */
    transform: scaleY(0);
    transform-origin: center center;
    /* 从中心向上下展开 */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 悬停触发：垂直方向铺开 */
.topgj_r .menu-item:hover>a::before,
html.io-black-mode .topgj_r .menu-item:hover>a::before {
    transform: scaleY(1);
}

/* 确保文字在红框之上 */
.topgj_r .menu-item a span,
.topgj_r .menu-item a i {
    position: relative;
    z-index: 1;
}

/* 悬停时文字变色 */
.topgj_r .menu-item:hover>a,
html.io-black-mode .topgj_r .menu-item:hover>a {
    color: #fff !important;
}

/* 2. 下拉菜单项：胶囊感 + 中心向两端伸缩动画 */
.sub-menu-z .menu-item-z a {
    /* 基础布局 */
    padding: 6px 10px !important;
    margin: 2px 8px !important;
    width: calc(100% - 16px) !important;
    display: block !important;
    color: #666 !important;

    /* 关键：使用相对定位，为伪元素做准备 */
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    /* 确保动画不出界 */
    transition: color 0.3s ease !important;
}

/* 创建红框层：利用伪元素实现精确的缩放动画 */
.sub-menu-z .menu-item-z a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1404b !important;
    border-radius: 8px !important;
    z-index: -1;
    /* 放在文字下方 */

    /* 动画核心：从中心向两边缩放 */
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 悬停触发：红框从中心向两边铺开 */
.sub-menu-z .menu-item-z a:hover::before,
html.io-black-mode .sub-menu-z .menu-item-z a:hover::before {
    transform: scaleX(1);
}

/* 悬停时文字变白 */
.sub-menu-z .menu-item-z a:hover,
html.io-black-mode .sub-menu-z .menu-item-z a:hover {
    color: #fff !important;
}


/* 5. 图标间距 */
.navbar-menu .menu-item i {
    margin-right: 5px;
}

/* 6. 移动端隐藏 (屏幕宽度小于 992px 时不显示) */
@media (max-width: 992px) {
    .topgj_r {
        display: none !important;
        /* 加上 !important 强制隐藏 */
    }
}



/*------------------------------------------------------------------------------------------*/
/* ==========================================
   顶部菜单 (统一动画：中心向上下展开)
   ========================================== */

/* 1. 顶部菜单项：设置相对定位，为伪元素做准备 */
.navbar-header-menu .menu-item a {
    position: relative !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    transition: color 0.3s ease !important;
    z-index: 1;
    /* 确保背景层不遮挡文字 */
    display: flex !important;
    align-items: center;
}

/* 2. 创建红框层：利用伪元素控制垂直缩放 */
.navbar-header-menu .menu-item:not(.current-menu-item) a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1404b !important;
    /* 红色背景 */
    border-radius: 8px !important;
    z-index: -1;
    /* 确保在文字下方 */

    /* 动画核心：垂直方向缩放 */
    transform: scaleY(0);
    transform-origin: center center;
    /* 从中心向上下展开 */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 3. 悬停触发：垂直方向铺开 */
.navbar-header-menu .menu-item:not(.current-menu-item):hover>a::before {
    transform: scaleY(1);
}

/* 4. 确保文字在红框之上并变色 */
.navbar-header-menu .menu-item:not(.current-menu-item):hover>a {
    color: #fff !important;
}

/* 针对 OneNav 主题可能存在的图标颜色同步 */
.navbar-header-menu .menu-item:not(.current-menu-item):hover>a i {
    color: #fff !important;
}

/* ------------------
弹出下拉菜单 (强制清除原主题动画)
--------------------*/
.sub-menu:not(.footer .sub-menu) {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    background: rgb(255, 255, 255) !important;
    /* 强制重置动画 */
    animation: none !important;
    transform: none !important;
}

html.io-black-mode .sub-menu:not(.footer .sub-menu) {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgb(60, 60, 60) !important;
}

/* 基础设置：清理 li 的默认样式 */
.sub-menu li.menu-item:not(.footer li.menu-item) {
    position: relative !important;
    background-color: transparent !important;
    overflow: visible !important;
    transition: none !important;
}

/* 针对 a 标签设置胶囊感 */
.sub-menu li.menu-item:not(.footer li.menu-item) a {
    position: relative !important;
    display: block !important;
    padding: 6px 10px !important;
    margin: 2px 8px !important;
    border-radius: 8px !important;
    transition: color 0.3s ease !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 创建红框层：中心向两端伸缩 */
.sub-menu li.menu-item:not(.current-menu-item):not(.footer li.menu-item) a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1404b !important;
    border-radius: 8px !important;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 悬停触发：红框铺开 */
.sub-menu li.menu-item:not(.current-menu-item):not(.footer li.menu-item):hover a::before {
    transform: scaleX(1);
}

/* 悬停时文字变白 */
.sub-menu li.menu-item:not(.current-menu-item):not(.footer li.menu-item):hover a {
    color: #fff !important;
}




/* ==========================================
   一、 首页及全局：背景渐变与图层分离
   ========================================== */
/* 1. 彻底干掉主题自带的生硬白边与遮罩 */
.header-banner::after,
.header-banner::before,
.bg-gradual::after,
.bg-gradual::before {
    display: none !important;
    background: transparent !important;
}

.header-banner {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: transparent !important;
    position: relative !important;
}

/* 2. 专门针对【星空特效 Canvas】的弧形柔和渐变（更圆润的U型） */
.canvas-bg {
    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.2) 75%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.2) 75%, transparent 100%) !important;
}

/* 3. 专门针对【Bing图片/自定义图片】的独立图层渐变（更圆润的U型） */
.custom-bg-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-size: cover !important;
    background-position: center !important;

    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.2) 75%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.2) 75%, transparent 100%) !important;
}



/* 4. 确保公告栏、搜索框等内容层永远在最上层，不被遮挡 */
.header-banner>div:not(.custom-bg-layer) {
    position: relative;
    z-index: 2;
}

/* 彻底消灭 FULL 模式下的横向滚动条 */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* 限制背景层绝对不能超出屏幕 */
.canvas-bg,
.custom-bg-layer {
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 确保 canvas 作为块级元素 */
#starCanvas {
    display: block !important;
    max-width: 100% !important;
}

/*------------------------------------------------------------------------------------------*/


/* ==========================================
   详情页头部：添加与正文完全一致的卡片框
========================================== */

/* 1. 扩大范围：包含详情页 (single) 和 归档页 (archive) */
.posts-row:not(.justify-content-center):not(.auto-ad-body.posts-row):not(.sidebar .posts-row):not(.page-template-template-rankings .posts-row):not(.card-body.posts-row):not(.module-sidebar-widget .posts-row),
body.single .site-content:not(.card) {
    border-radius: 12px !important;
    padding: 30px !important;
}

/* 针对 .posts-row 的彻底修复 */
.posts-row:not(.justify-content-center):not(.auto-ad-body.posts-row):not(.sidebar .posts-row):not(.page-template-template-rankings .posts-row):not(.card-body.posts-row) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. 针对手机端的适配 */
/*
@media (max-width: 768px) {
    .posts-row:not(.auto-ad-body.posts-row):not(.sidebar .posts-row):not(.page-template-template-rankings .posts-row):not(.card-body.posts-row),
    body.single .site-content:not(.card) {
        padding: 20px 15px !important;
    }
}
*/



/* ==========================================
   左侧边栏卡片化：使其和右侧内容区块风格一致 (修正位置版)
   ========================================== */

.aside-body {
    /* 1. 纯视觉修改：背景色、圆角、阴影 */
    background: var(--main-bg-color, #ffffff) !important;
    border-radius: var(--main-radius, 12px) !important;
    box-shadow: var(--main-shadow, 0 5px 20px rgba(0, 0, 0, 0.05)) !important;

    /* 移除之前的 margin 和 overflow，确保位置绝对不变 */
}

/* 2. 针对黑夜模式的适配 */
html.io-black-mode .aside-body {
    background: var(--main-bg-color, #2D2E2F) !important;
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.05) !important;
}

/* 3. 隐藏侧边栏原本可能存在的右侧分割线，让卡片更干净 */
.aside-body::before,
.aside-body::after {
    display: none !important;
}

/* ==========================================
   左侧边栏按钮：从中间向两边生成，两边向中间消失
   ========================================== */

/* 1. 基础样式 */
.ioui-aside .aside-btn {
    position: relative !important;
    overflow: hidden !important;
    transition: color 0.3s ease !important;
    z-index: 1;
    background-color: transparent !important;
}

/* 2. 创建红框层：初始为 scaleX(0)，原点在中心 */
.ioui-aside .aside-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1404b !important;
    z-index: -1;

    /* 动画核心：从中心向两边生成 */
    transform: scaleX(0);
    transform-origin: center center;
    /* 关键：原点在中心 */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 3. 悬停触发：从中心向两边铺开 */
.ioui-aside .aside-btn:hover::before,
html.io-black-mode .ioui-aside .aside-btn:hover::before {
    transform: scaleX(1);
}

/* 4. 悬停文字变色与样式修正 */
.ioui-aside .aside-btn:hover,
html.io-black-mode .ioui-aside .aside-btn:hover {
    color: #fff !important;
    background-color: transparent !important;
}

/* 确保文字和图标在红框上方 */
.ioui-aside .aside-btn span,
.ioui-aside .aside-btn i {
    position: relative;
    z-index: 1;
}









/* ==========================================
   详情页右侧：预览图内框边框定制
   ========================================== */

/* 1. 白天模式：给灰色线 */
.sites-preview .preview-body {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* 2. 黑夜模式：给白线 (用20%透明度的白线，既清晰又高级，不会太刺眼) */
html.io-black-mode .sites-preview .preview-body,
body.io-black-mode .sites-preview .preview-body,
.io-black-mode .sites-preview .preview-body {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}



/* ==========================================================
   首页 "more+" 按钮单独样式 (应用特效2 scale)
   ========================================================== */

/* 1. 基础样式 (白天模式) */
.btn-more {
    position: relative;
    overflow: hidden !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    /* 胶囊形状 */
    transition: all 0.3s ease !important;
    font-weight: bold !important;
    text-shadow: none !important;

    /* 尺寸微调 */
    padding: 4px 16px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;

    /* 白天底色 */
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    color: var(--main-color, #333333) !important;
}

/* 2. 黑夜模式底色 */
html.io-black-mode .btn-more,
body.io-black-mode .btn-more {
    background-color: rgba(60, 60, 60, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--main-color, #eeeeee) !important;
}

/* 3. 特效2核心：伪元素滑块 (中心缩放 scale) */
.btn-more::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--theme-color, #f1404b) !important;
    border-radius: 50px !important;
    z-index: -1 !important;

    /* 动画核心：中心缩放 */
    transform: scale(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. 悬停触发：滑块展开 */
.btn-more:hover::before {
    transform: scale(1) !important;
}

/* 5. 悬停时按钮本体变化 (白天和黑夜通用) */
.btn-more:hover,
html.io-black-mode .btn-more:hover,
body.io-black-mode .btn-more:hover {
    background: transparent !important;
    background-color: transparent !important;
    /* 强制透明，露出底层红色动画 */
    color: #ffffff !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 6px 20px rgba(241, 64, 75, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* tab 模式 more+：恢复父主题定位（btn-more 勿用 position !important 以免挤到 tab 下方） */
.io-slider-tab .tab-more.btn-more {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
}

@media screen and (min-width: 768px) {
    .io-slider-tab .tab-more.btn-more {
        position: relative !important;
        right: auto !important;
        top: auto !important;
    }
}


/* ==========================================================
   "加载更多" 按钮单独样式 (修复中心扩散动画)
   ========================================================== */
/* 1. 基础样式 (白天模式：毛玻璃) */
.module-sidebar-widget.io-widget-big-posts-list .ajax-page-post,
.next-page.ajax-posts-load a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    text-shadow: none !important;
    overflow: hidden !important;

    padding: 8px 24px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;

    /* 毛玻璃底色 (白天) */
    background-color: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    color: var(--main-color, #333333) !important;

    /* 动画核心：径向渐变模拟 scale 效果 */
    background-image: radial-gradient(circle, var(--theme-color, #f1404b) 49%, transparent 50%) !important;
    background-size: 0px 0px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* 【关键修改】：时间改为 0.4s，曲线改为 ease-out，完美匹配 btn-more 的节奏 */
    transition: background-size 0.4s ease-out, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* 2. 黑夜模式 (毛玻璃) */
html.io-black-mode .module-sidebar-widget.io-widget-big-posts-list .ajax-page-post,
html.io-black-mode .next-page.ajax-posts-load a {
    background-color: rgba(50, 50, 50, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--main-color, #eeeeee) !important;
}

/* 3. 悬停触发：圆圈放大填满整个按钮 */
.module-sidebar-widget.io-widget-big-posts-list .ajax-page-post:hover,
html.io-black-mode.module-sidebar-widget.io-widget-big-posts-list .ajax-page-post:hover,
.next-page.ajax-posts-load a:hover,
html.io-black-mode .next-page.ajax-posts-load a:hover {
    /* 目标大小控制在 300px，配合 0.4s 速度刚刚好 */
    background-size: 300px 300px !important;
    color: #ffffff !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 6px 20px rgba(241, 64, 75, 0.5) !important;
    transform: translateY(-2px) !important;
}


/* ==========================================================
   分页导航按钮 (.posts-nav .page-numbers)
   形状特效同 more+，配色同 毛玻璃
========================================================== */
/* 1. 基础样式 (白天模式：毛玻璃) */
.posts-nav .page-numbers {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    /* 保持 50px 确保两端是半圆 */
    transition: all 0.3s ease !important;
    font-weight: bold !important;
    text-shadow: none !important;

    /* 【修改这里】：加大左右 padding 和 min-width，拉长胶囊形状 */
    padding: 4px 20px !important;
    /* 原来是 14px，现在左右加宽到 20px */
    margin: 0 5px !important;
    /* 稍微增加一点按钮间距，避免太挤 */
    font-size: 13px !important;
    line-height: 1.5 !important;
    min-width: 46px !important;
    /* 原来是 32px，现在加大，保证单个数字也是长胶囊 */

    background-color: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    color: var(--main-color, #333333) !important;
}

/* 2. 黑夜模式 (毛玻璃) */
html.io-black-mode .posts-nav .page-numbers {
    background-color: rgba(50, 50, 50, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--main-color, #eeeeee) !important;
}

/* 3. 特效核心：伪元素滑块 (中心缩放 scale，仅对可点击的 a 标签生效) */
.posts-nav a.page-numbers::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--theme-color, #f1404b) !important;
    border-radius: 50px !important;
    z-index: -1 !important;

    transform: scale(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. 悬停触发：滑块展开 */
.posts-nav a.page-numbers:hover::before {
    transform: scale(1) !important;
}

/* 5. 悬停时按钮本体变化 (仅限可点击的 a 标签) */
.posts-nav a.page-numbers:hover,
html.io-black-mode .posts-nav a.page-numbers:hover {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 6px 20px rgba(241, 64, 75, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* 6. 当前选中页码的特殊样式 (白天和黑夜强制保持一致：红色常亮) */
.posts-nav .page-numbers.current,
html.io-black-mode .posts-nav .page-numbers.current {
    background-color: var(--theme-color, #f1404b) !important;
    color: #ffffff !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 6px 20px rgba(241, 64, 75, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 7. 省略号 (...) 的特殊样式 (白天和黑夜强制保持一致：透明无边框) */
.posts-nav .page-numbers.dots,
html.io-black-mode .posts-nav .page-numbers.dots {
    background-color: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    color: var(--main-color, #999999) !important;
    min-width: auto !important;
    /* 省略号不需要拉长 */
    padding: 4px 8px !important;
}

/* ==========================================================
   搜索提交按钮 (search-submit-btn) 特效覆盖 - 保持原形状
========================================================== */
/* 1. 确保按钮本身具备相对定位，且不被改变形状 */
.search-submit-btn {
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
    /* 必须开启，否则动画会溢出 */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    color: #484b4f !important;
}

html.io-black-mode .search-submit-btn {
    color: #b4b8bf !important;
}

/* 2. 创建扩散层 (伪元素) - 继承按钮形状 */
.search-submit-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #f1404b !important;
    z-index: -1 !important;
    transform: scale(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. 悬停触发：扩散效果 */
.search-submit-btn:hover::before {
    transform: scale(1) !important;
}

/* 4. 悬停时仅添加微小的位移或阴影，不改变形状 */
.search-submit-btn:hover,
html.io-black-mode .search-submit-btn:hover {
    color: #fff !important;
    transform: translateY(0px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}


/* ==========================================================
   顶部搜索提交按钮 (search-submit-btn) 特效覆盖 - 保持原形状
========================================================== */
/* 1. 搜索图标按钮：设置相对定位，确保动画不出界 */
.header-icon-btn.nav-search {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    /* 保持与你其他按钮圆角一致 */
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. 创建扩散层 (伪元素) - 继承按钮形状 */
.header-icon-btn.nav-search::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #f1404b !important;
    /* 红色主题色 */
    z-index: -1 !important;

    /* 动画核心：中心缩放 */
    transform: scale(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. 悬停触发：扩散效果 */
.header-icon-btn.nav-search:hover::before {
    transform: scale(1) !important;
}













/*__________________________________________________________________________________________________________*/




/*------------------------------------------------------------------------------------------*/


/* ==========================================
   全局开关 - 全局背景：白天/黑夜双模式流体渐变 (静谧大地色系)
========================================== */
/*
:root {
    --bg-color-1: #1a1a1a;
    --bg-color-2: #262e2a;
    --bg-color-3: #262d33;
    --bg-color-4: #2d2633;
    --bg-color-5: #332626;
}

body {
    background-image: linear-gradient(in oklab 120deg,
            color-mix(in srgb, var(--bg-color-1), white 20%),
            color-mix(in srgb, var(--bg-color-2), white 20%),
            color-mix(in srgb, var(--bg-color-3), white 20%),
            color-mix(in srgb, var(--bg-color-4), white 20%),
            color-mix(in srgb, var(--bg-color-5), white 20%),
            color-mix(in srgb, var(--bg-color-4), white 20%),
            color-mix(in srgb, var(--bg-color-3), white 20%),
            color-mix(in srgb, var(--bg-color-2), white 20%),
            color-mix(in srgb, var(--bg-color-1), white 20%));
    background-size: 2200% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    animation: gradient 100s ease infinite;
    min-height: 100vh;
    margin: 0;
    position: relative;
}

html.io-black-mode body,
body.io-black-mode {
    background-image: linear-gradient(in oklab 120deg,
            var(--bg-color-1),
            var(--bg-color-2),
            var(--bg-color-3),
            var(--bg-color-4),
            var(--bg-color-5),
            var(--bg-color-4),
            var(--bg-color-3),
            var(--bg-color-2),
            var(--bg-color-1));
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
*/

/*----------------------------------
纯净背景
-------------------------------*/
/*------------- 1 ---------------*/

:root {
    --bg-color-1: #29232e;
    --bg-color-2: #3b3b3b;
}

body {
    background: color-mix(in srgb, var(--bg-color-2), white 90%) !important;
    transition: background 1s ease !important;
}

html.io-black-mode body,
body.io-black-mode {
    background: var(--bg-color-2) !important;
}



/*-------------------------
    清理footer图片背景
-------------------------*/
.main-footer .bg-l {
    background: transparent !important;
}




/*_________________________________________________________________________________________
                            
                                 毛玻璃特效开始

___________________________________________________________________________________________*/




/*__________________________   全局   __________________________*/



/* ==========================================
   全站所有推荐/广告区 (.auto-ad-url .card) 毛玻璃效果
========================================== */
.auto-ad-url .card {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
}

html.io-black-mode .auto-ad-url .card {
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

.page-template-template-rankings .ranking-range-body,
.page-template-template-rankings .card,
.posts-row:not(.justify-content-center):not(.auto-ad-body.posts-row):not(.sidebar .posts-row):not(.page-template-template-rankings .posts-row):not(.card-body.posts-row):not(.module-sidebar-widget .posts-row) {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode .page-template-template-rankings .ranking-range-body,
html.io-black-mode .page-template-template-rankings .card,
html.io-black-mode .posts-row:not(.justify-content-center):not(.auto-ad-body.posts-row):not(.sidebar .posts-row):not(.page-template-template-rankings .posts-row):not(.card-body.posts-row):not(.module-sidebar-widget .posts-row) {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   小工具io-文章列表
========================================== */
.module-sidebar-widget.io-widget-big-posts-list {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    padding: 5px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode .module-sidebar-widget.io-widget-big-posts-list {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}




/*__________________________   全局 end   __________________________*/

/*__________________________   首页   __________________________*/

body .blur-bg {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode .blur-bg {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

.big-search,
.big-search .search-box-big,
.big-search .search-form {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.big-search .search-box-big .search-form .form-control {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    color: #333 !important;
}

html.io-black-mode .search-box-big .search-form .form-control {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #eee !important;
}

.search-box-big .search-form .form-control::placeholder {
    color: rgba(51, 51, 51, 0.7) !important;
}

html.io-black-mode .search-box-big .search-form .form-control::placeholder {
    color: rgba(238, 238, 238, 0.7) !important;
}

/* ==========================================
   公告栏 (#bulletin_box) 毛玻璃与字体颜色设置
   ========================================== */
#bulletin_box {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

#bulletin_box .card-body {
    color: #333 !important;
}

html.io-black-mode #bulletin_box {
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html.io-black-mode #bulletin_box .card-body {
    color: #eee !important;
}

#bulletin_box a {
    color: #333 !important;
}

#bulletin_box a:hover,
html.io-black-mode #bulletin_box a:hover {
    color: #f1404b !important;
}

html.io-black-mode #bulletin_box a {
    color: #eee !important;
}

/* ==========================================
   清空左侧边栏 (aside) 的所有上下层纯色背景
========================================== */
.ioui-aside,
.ioui-aside .aside-body,
.main-header,
html.io-black-mode .ioui-aside,
html.io-black-mode .ioui-aside .aside-body,
html.io-black-mode .main-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================
   中间内容 标签切换特效
========================================== */
.slider-tab {
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px;
}

html.io-black-mode .slider-tab {
    background: rgb(60, 60, 60) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;

}

.slider-tab .tab-item:not(.active) {
    color: #484b4f !important;
}

html.io-black-mode .slider-tab .tab-item:not(.active) {
    color: #b4b8bf !important;
}

/* 1. 建立独立的层叠上下文，确保标签层级高于底部的滑动块 */
.slider-tab .slider-li.tab-item {
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
}

/* 2. 制作红框 (仅针对未选中标签) */
.slider-tab .slider-li.tab-item:not(.active)::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #f1404b !important;
    border-radius: 8px !important;

    /* 核心：沉在文字下方，但因为父级 z-index:1，所以会盖在滑动块上方 */
    z-index: -1 !important;

    transform: scaleY(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 3. 悬停时：红框上下展开 */
.slider-tab .slider-li.tab-item:not(.active):hover::before {
    transform: scaleY(1) !important;
}

/* 4. 悬停时：文字变白 */
.slider-tab .slider-li.tab-item:not(.active):hover {
    color: #ffffff !important;
}






/* ==========================================
   中间内容 (.content-card) 毛玻璃效果
========================================== */
.content-card {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode .content-card {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}


/* ==========================================
   右侧栏小工具 (Sidebar Widgets) 毛玻璃效果
========================================== */
.io-sidebar-widget {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode .io-sidebar-widget {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

.sidebar_right:not(.page-template-template-contribute) {
    background: transparent !important;
}


/* ==========================================
   底部内容容器 (.container-footer) 毛玻璃卡片
   ========================================== */
.container-footer {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode .container-footer {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

.main-footer,
.container-footer .footer {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================
   右下悬浮小工具毛玻璃
========================================== */
/* 1. 基础样式 (白天模式：保留你的原配色，增加动画必须的结构属性) */
.btn-tools {
    /* 你原本的颜色设定 */
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;

    /* 新增：动画必须的结构属性 */
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

/* 2. 黑夜模式 (保留你的原配色) */
html.io-black-mode .btn-tools {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* 3. 特效核心：伪元素滑块 (中心缩放 scale) */
.btn-tools::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--theme-color, #f1404b) !important;
    border-radius: inherit !important;
    /* 自动继承按钮本身的圆角形状 */
    z-index: -1 !important;

    transform: scale(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. 悬停触发：滑块展开 */
.btn-tools:hover::before {
    transform: scale(1) !important;
}

/* 5. 悬停时按钮本体变化 (去掉毛玻璃，文字/图标变白，边框变红，上浮) */
.btn-tools:hover,
html.io-black-mode .btn-tools:hover {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    color: #ffffff !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 6px 20px rgba(241, 64, 75, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* 6. 确保按钮里面的图标(如果有)在悬停时也变成白色 */
.btn-tools:hover i,
.btn-tools:hover span,
.btn-tools:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}




/*__________________________   首页 end   __________________________*/



/*__________________________   内页_____________________________*/
/* ==========================================
   
========================================== */
body>.container>.text-xs {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    padding: 5px !important;
}

html.io-black-mode body>.container>.text-xs {
    background: rgba(50, 50, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   网址详情页内容区 (.site-content) 毛玻璃效果
========================================== */

body.single .site-content:not(.card) {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode body.single .site-content:not(.card) {
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   网址详情页图表区 (.card.io-chart) 毛玻璃效果
   ========================================== */
body.single .card.io-chart {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
}

html.io-black-mode body.single .card.io-chart {
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   网址详情页介绍面板 (.panel.site-content.card) 毛玻璃效果
   ========================================== */
body.single .panel.site-content.card {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    /* 保持圆角统一 */
    padding: 30px !important;
}

html.io-black-mode body.single .panel.site-content.card {
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   分类筛选栏 (.taxonomy-selects.card) 毛玻璃效果
========================================== */
.taxonomy-selects.card {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

html.io-black-mode .taxonomy-selects.card {
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   links页面毛玻璃效果
========================================== */
/* ================= 1. 外层：毛玻璃大框 (保持不动) ================= */


.page-template-default .card,
.page-template-template-links .content-layout {
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    padding: 30px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    transition: all 0.4s ease-in-out !important;
}

html.io-black-mode .page-template-default .card,
html.io-black-mode .page-template-template-links .content-layout {
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05) !important;
}

/* ================= 2. 内层：提交链接框 (全新高级感设计) ================= */
.page-template-template-links .card-body {
    background: rgba(255, 255, 255) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    transition: all 0.4s ease-in-out !important;
}


html.io-black-mode .page-template-template-links .card-body {
    background: rgba(60, 60, 60) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.05) !important;
}




/*________________________________   内页 end   _________________________________________


/*________________________________   其他   _________________________________________*/


/* ==========================================
   修复公告卡片 (.bulletin-card) 背景颜色遮挡问题
========================================== */
.bulletin-card {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
}

html.io-black-mode .bulletin-card {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
}


/* ==========================================
   全站卡片边框设置 (支持白天/黑夜模式)
   包含：网站、文章、APP、书籍等所有卡片
========================================== */

.posts-item {
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.posts-item:hover,
.bulletin-card:hover {
    border-color: rgba(0, 0, 0, 0.6) !important;
}

html.io-black-mode .posts-item {
    background: rgb(60, 60, 60) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html.io-black-mode .posts-item:hover,
html.io-black-mode .bulletin-card:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
}


.icon-goto {
    color: #333;
}

html.io-black-mode .icon-goto {
    color: #eee;
}

.icon-goto:hover,
html.io-black-mode .icon-goto:hover {
    color: #f1404b;
}

/* ==========================================
   用户页面毛玻璃特效
========================================== */
.user-center .card {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
}

html.io-black-mode .user-center .card {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(50, 50, 50, 0.7) !important;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
}

.user-center .sidebar>.btn,
html.io-black-mode .user-center .sidebar>.btn {
    --placeholder: none;
    /*backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    /*全局开关 - 全局替换上面2行开关模糊特效*/
}

/* ==========================================
   用户中心封面背景图修复 - 强制全覆盖
   ========================================== */
.box-head-author .box-head-img {
    background-size: cover !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
}
.box-head-author .box-head-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(0,0,0,0.35) 0%, transparent 40%) !important;
    pointer-events: none;
}

/* ==========================================
   分类页头部 - 去掉卡片模式下的底部黑色渐变遮罩
   ========================================== */
.taxonomy-head .taxonomy-head-img::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to top right, rgba(0,0,0,0.35) 0%, transparent 40%) !important;
}

/* ==========================================================
   广告URL卡片覆盖样式 (仅 中心扩散 + 悬停上浮特效)
========================================================== */
/* 1. 卡片基础：设置相对定位，为伪元素做准备 */
.auto-ad-url .auto-list .auto-url-list {
    position: relative !important;
    /* 确保伪元素不会超出卡片原有的圆角 */
    overflow: hidden !important;
    /* 移除自带的悬停阴影背景，交给伪元素处理 */
    background-image: none !important;
}

/* 2. 创建主题色背景层：利用伪元素控制垂直缩放 */
.auto-ad-url .auto-list .auto-url-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-color, #f1404b) !important;
    /* 使用主题色，默认红色 */
    z-index: 0;
    /* 放在底层 */

    /* 动画核心：垂直方向缩放，初始状态为 0 */
    transform: scaleY(0);
    transform-origin: center center;
    /* 从中心向上下展开 */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 3. 确保卡片内部的内容（文字、图标等）在背景层之上 */
.auto-ad-url .auto-list .auto-url-list>* {
    position: relative;
    z-index: 1;
}

/* 4. 悬停触发：垂直方向铺开 */
.auto-ad-url .auto-list .auto-url-list:hover::before {
    transform: scaleY(1);
}

/* 5. 悬停时的文字和图标颜色变白 */
.auto-ad-url .auto-list .auto-url-list:hover * {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

/*html .home .search-container .auto-ad-url .card {
    max-width: 1500px;
}*/

/* 针对手机端屏幕 (最大宽度 767px) */
/*@media (max-width: 767px) {
    .auto-ad-url .card-body.row-col-3a > div {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        width: 48% !important;
    }
}
*/
@media (min-width: 768px) {
    .auto-ad-url.my-md-5 {
        margin-bottom: 0 !important;
    }
}

.header-fixed {
    padding: 0 10px 10px 10px !important;
}

/* 针对手机端屏幕 (最大宽度 767px) */
@media (max-width: 767px) {

    .auto-ad-url.my-3 {
        margin-bottom: 0 !important;
    }

    .auto-ad-url .card-body.row-col-3a {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* 【关键】用 gap 控制网格之间的缝隙，8px 可以自己调大或调小 */
        gap: 8px !important;
    }

    .auto-ad-url .card-body.row-col-3a>div {
        max-width: 100% !important;
        width: 100% !important;
        /* 清除子元素自带的 margin，完全交给父级的 gap 来排版 */
        margin: 0 !important;
    }

    .footer-tabbar.tabbar-type-round {
        padding: 0 !important;
        padding-bottom: 0 !important;
    }

    .tabbar-type-round .tabbar-bg {
        border-radius: 0 !important;
    }

    .scroll-ing .scrolling-hide.footer-tabbar {
        transform: none !important;
    }

    .header-nav {
        border-radius: 0 !important;
        height: 90% !important;
    }

    .header-fixed {
        padding: 0 !important;
    }

}

.tools-left {
    left: 0px !important;
}

.tools-right {
    right: 0px !important;
}

/* 隐藏 Logo 旁「子页面导航」四点菜单 */
.navbar-logo .more-menu-logo {
    display: none !important;
}

/* 彩色图标 Symbol 模式：转换后的 svg 需显式尺寸 */
svg.io-color {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    overflow: visible;
}

/* 顶部「最近访问」— 并入 topgj_r 自定义菜单 */
.topgj_r .menu-item-visit-history .sub-menu-z.io-visit-history-panel {
    min-width: 300px;
    width: 320px;
    padding: 0;
    text-align: left;
    overflow: hidden;
}

.io-visit-history-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html.io-black-mode .io-visit-history-hd,
.io-black-mode .io-visit-history-hd {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.io-visit-history-hd h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #282a2d;
}

html.io-black-mode .io-visit-history-hd h5,
.io-black-mode .io-visit-history-hd h5 {
    color: #c6c9cf;
}

.io-visit-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 300px;
    overflow: auto;
}

.io-visit-history-foot {
    margin: 0;
    padding: 4px 0 6px;
    list-style: none;
}

/* 列表项：红框悬停挂在 li 上，删除按钮区域也保持红底白字 */
.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item {
    position: relative;
    padding: 0 !important;
    margin: 2px 8px !important;
    border-bottom: none;
    border-radius: 8px;
    overflow: hidden;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #f1404b;
    border-radius: 8px;
    z-index: 0;
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover::before,
html.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover::before,
.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover::before {
    transform: scaleX(1);
}

/* 不用 a 自带红框，避免移到删除按钮时红框消失 */
.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item > a.io-visit-history-link::before {
    display: none !important;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item > a.io-visit-history-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 30px 8px 10px !important;
    text-align: left !important;
    color: #666 !important;
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    border-radius: 0 !important;
}

html.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item > a.io-visit-history-link,
.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item > a.io-visit-history-link {
    color: #c6c9cf !important;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover > a.io-visit-history-link,
html.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover > a.io-visit-history-link,
.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover > a.io-visit-history-link {
    color: #fff !important;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-name,
.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-type,
html.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-name,
html.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-type {
    color: #fff !important;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-del {
    color: #fff;
}

/* 覆盖 sub-menu-z 子项 span 的居中/100% 宽度，避免挤乱 flex 布局 */
.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item > a.io-visit-history-link > .io-visit-history-main,
.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item > a.io-visit-history-link > .io-visit-history-count {
    position: relative;
    z-index: 1;
    width: auto;
    text-align: left;
}

.io-visit-history-main {
    flex: 1;
    min-width: 0;
}

.io-visit-history-name {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.io-visit-history-type {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

html.io-black-mode .io-visit-history-type,
.io-black-mode .io-visit-history-type {
    color: #73757a;
}

.io-visit-history-count {
    font-size: 11px;
    background: rgba(241, 64, 75, 0.12);
    color: #f1404b;
    padding: 2px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.io-visit-history-del {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: none;
    background: none;
    color: #bbb;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* × 独立悬停：圆形从中心展开 + 轻微放大 */
.io-visit-history-del::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(241, 64, 75, 0.2);
    transform: scale(0);
    transform-origin: center center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item .io-visit-history-del:hover::before {
    transform: scale(1);
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item .io-visit-history-del:hover {
    transform: translateY(-50%) scale(1.2);
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:not(:hover) .io-visit-history-del:hover {
    color: #f1404b;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-del:hover {
    color: #fff;
}

.topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:hover .io-visit-history-del:hover::before {
    background: rgba(255, 255, 255, 0.35);
}

html.io-black-mode .io-visit-history-del,
.io-black-mode .io-visit-history-del {
    color: #73757a;
}

html.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:not(:hover) .io-visit-history-del:hover,
.io-black-mode .topgj_r .io-visit-history-panel .menu-item-z.io-visit-history-item:not(:hover) .io-visit-history-del:hover {
    color: #f1404b;
}

.io-visit-history-empty {
    text-align: center;
    padding: 24px 10px;
    color: #999;
    font-size: 13px;
}

html.io-black-mode .io-visit-history-empty,
.io-black-mode .io-visit-history-empty {
    color: #73757a;
}

.io-visit-history-list::-webkit-scrollbar {
    width: 4px;
}

.io-visit-history-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

html.io-black-mode .io-visit-history-list::-webkit-scrollbar-thumb,
.io-black-mode .io-visit-history-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 992px) {
    .topgj_r .menu-item-visit-history .sub-menu-z.io-visit-history-panel {
        width: calc(100vw - 24px);
        max-width: 320px;
    }
}