/* 1. 主题色彩变量 - 黑白灰系 */
 
.hot-search {
    margin-top: 15px;
    padding: 0 5px;
}
.hot-title {
    font-size: 16px;
    color: #666;
    margin-right: 5px;
}
.hot-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hot-tag {
    font-size: 16px;
    color: var(--theme-theme);
    text-decoration: none;
}
.hot-tag:hover {
    color: var(--theme-background);
}
 
/* 横向网盘筛选区域 */
.network-filter {
    margin: 5px 0px 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    overflow-y: hidden;
}

.filter-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.filter-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #f5f5f5;
    border-radius: 6px;
    text-decoration: none;
    color: #666;
    font-size: 16px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.filter-tabs a:hover {
    background: #f5ebf0;
    color: var(--theme-theme)!important;
    border-color: var(--theme-theme);
}

.filter-tabs a.active {
    background: var(--theme-theme);
    color: #fff!important;
    font-weight: 500;
    border-color: var(--theme-theme);
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}
@media screen and (max-width: 768px) {
    
    
.filter-box{
    padding-top: 5vw;
}
    
    .network-filter {
        padding: 6px 8px;
    }
    
    .filter-tabs {
        gap: 3px;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    .filter-tabs a {
        padding: 5px 6px;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 1;
        flex-grow: 1;
        min-width: 0;
        border-radius: 4px;
    }
}




.atips{
    position: relative;
    overflow: unset !important;
}

/* item类a标签的提示框伪元素 */
.atips::before {
    content: "出现【该网页无法正常运作】，刷新即可"; /* 固定提示内容 */
    background-color:#10b400; /* 提示框背景色 */
    color: #fff; /* 提示文字颜色 */
    font-size: 12px; /* 提示文字大小 */
    padding: 4px 10px; /* 提示框内边距 */
    border-radius: 4px; /* 提示框圆角 */
    position: absolute;
    bottom: 100%; /* 定位到链接正上方 */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0; /* 初始隐藏 */
    visibility: hidden;
    transition: all 0.2s ease; /* 悬停平滑过渡 */
    pointer-events: none; /* 避免遮挡鼠标操作 */
    z-index: 99999; /* 确保提示框在最上层 */
    white-space: nowrap; /* 提示文字不换行 */
}

/* 鼠标悬停时显示提示框 */
.atips:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px); /* 向上偏移8px，增加间距 */
}


/* 2. 字体差异化 */
html, body {
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
    letter-spacing: 0.5px !important;
}

/* 3. 搜索框边框颜色 - 灰色系 */
.searchBox .search {
    border-color: #e2e8f0 !important;
    transition: border-color 0.3s ease !important;
}

.searchBox .search:hover {
    border-color: #4a5568 !important;
}

/* 4. 搜索按钮图标颜色 - 灰色系 */
.searchBox .search .btn .iconfont {
    color: #4a5568 !important;
    transition: color 0.3s ease !important;
}

.searchBox .search .btn:hover .iconfont {
    color: #2d3748 !important;
}

/* 5. 移动端搜索按钮图标颜色 - 灰色系 */
@media screen and (max-width: 768px) {
    .searchList .search .btn .iconfont,
    .searchDetail .search .btn .iconfont {
        color: #4a5568 !important;
        transition: color 0.3s ease !important;
    }
    
    .searchList .search .btn:hover .iconfont,
    .searchDetail .search .btn:hover .iconfont {
        color: #2d3748 !important;
    }
}

/* 6. 列表项三个按钮统一美化 - 黑白灰系 */
.listBox .left .list .item .btns .btn {
    /* 统一尺寸 */
    padding: 8px 16px !important;
    min-width: 80px !important;
    height: 32px !important;
    
    /* 圆角设计 */
    border-radius: 16px !important;
    
    /* 字体样式 */
    font-size: 12px !important;
    font-weight: 500 !important;
    
    /* 边框和背景 - 灰色系 */
    border: 1px solid #e2e8f0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #64748b !important;
    
    /* 过渡动画 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* 居中对齐 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* 阴影效果 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* 7. 按钮悬浮效果 - 移除移动动画，黑白灰系 */
.listBox .left .list .item .btns .btn:hover {
    /* 灰色渐变背景 */
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
    color: white !important;
    border-color: #4a5568 !important;
    
    /* 移除上浮效果 - 保持位置固定 */
    /* transform: translateY(-1px) !important; */
    
    /* 增强阴影 - 灰色系 */
    box-shadow: 0 4px 12px rgba(74, 85, 104, 0.25), 
                0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 8. 按钮激活状态 - 移除移动动画 */
.listBox .left .list .item .btns .btn:active {
    /* transform: translateY(0) !important; */
    box-shadow: 0 1px 3px rgba(74, 85, 104, 0.3) !important;
}

/* 9. 特殊按钮样式调整 - 黑白灰系 */
.listBox .left .list .item .btns .btn:first-child {
    /* 复制分享按钮 - 浅灰色 */
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

.listBox .left .list .item .btns .btn:first-child:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    color: white !important;
}

.listBox .left .list .item .btns .btn:nth-child(2) {
    /* 查看详情按钮 - 中灰色 */
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
    color: #4a5568 !important;
    border-color: #cbd5e0 !important;
}

.listBox .left .list .item .btns .btn:nth-child(2):hover {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
    color: white !important;
    border-color: #4a5568 !important;
}

.listBox .left .list .item .btns .btn:nth-child(3) {
    /* 立即访问按钮 - 主要按钮，深灰色 */
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
    color: white !important;
    border-color: #2d3748 !important;
}

.listBox .left .list .item .btns .btn:nth-child(3):hover {
    background: linear-gradient(135deg, #1a202c 0%, #171923 100%) !important;
    border-color: #1a202c !important;
}

/* 10. 分页器颜色 - 灰色系 */
.el-pager li.is-active, 
.el-pager li:hover {
    background-color: #4a5568 !important;
    color: white !important;
    border-color: #4a5568 !important;
}

/* 11. 详情页按钮颜色 - 灰色系 */
.details .btns .btn:hover {
    background-color: #4a5568 !important;
    color: white !important;
    border-color: #4a5568 !important;
}

.details .btns .btn.btnCol {
    background-color: #4a5568 !important;
}

/* 12. 标题和标记颜色 - 灰色系 */
.listBox h3:after {
    background-color: #4a5568 !important;
}

.listBox .left .list .item .title {
    color: #2d3748 !important;
}

.listBox .left .list .item .title:hover {
    color: #4a5568 !important;
}

.details .title {
    color: #4a5568 !important;
}

.listBox .screen .box a:hover {
    color: #4a5568 !important;
}

/* 14. 右侧列表悬停效果 - 灰色系 */
.listBox .right .list .item:hover p {
    color: #4a5568 !important;
    background-color: rgba(74, 85, 104, 0.1) !important;
}

/* 15. 首页Logo颜色 - 灰色系 */
.homeBox .logoBox .title {
    color: #4a5568 !important;
    text-shadow: 2px 2px 4px rgba(74, 85, 104, 0.2) !important;
}

/* 16. 首页分类导航颜色 - 灰色系 */
.home .nav {
    color: #2d3748 !important;
}

.home .nav:hover {
    color: #4a5568 !important;
}

/* 17. 详情页链接颜色 - 灰色系 */
.details .cat .r a {
    color: #4a5568 !important;
}

/* 18. 输入框焦点颜色 - 灰色系 */
input:focus {
    border-color: #4a5568 !important;
    box-shadow: 0 0 0 2px rgba(74, 85, 104, 0.2) !important;
}

/* 19. 滚动条颜色 - 灰色系 */
::-webkit-scrollbar-thumb {
    background-color: #4a5568 !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2d3748 !important;
}

/* 20. 选中文本颜色 - 灰色系 */
::selection {
    background-color: rgba(74, 85, 104, 0.3) !important;
    color: #1a202c !important;
}

/* 21. 首页内容项悬停效果 - 灰色系 */
.home .content .list .item:hover {
    border-left: 3px solid #4a5568 !important;
    box-shadow: 0 2px 8px rgba(74, 85, 104, 0.15) !important;
}

/* 22. 排行榜数字颜色 - 灰度层次 */
.listBox .right .list .item:nth-child(1) p span {
    color: #1a202c !important;
}

.listBox .right .list .item:nth-child(2) p span {
    color: #2d3748 !important;
}

.listBox .right .list .item:nth-child(3) p span {
    color: #4a5568 !important;
}

/* 23. 链接悬停颜色 - 灰色系 */
a:hover {
    color: #4a5568 !important;
    transition: color 0.3s ease !important;
}

/* 24. 图标悬停颜色 - 灰色系 */
.iconfont:hover {
    color: #4a5568 !important;
}

/* 结束 */



.goquanbtn{
    background: rgba(246, 200, 225, 0.3);
    border-radius: 12px;
    text-align: center;
    padding: 6px 20px;
    color: rgba(223, 1, 108, 0.7);
    cursor: pointer;
}
.goquanbtn span{
    text-decoration: underline;
}

.quanwangbox a{
    display: inline-flex !important;
    align-items: center;
}

.listBox .screen .box .icon{
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 3px;
}

@media screen and (max-width: 768px){

.listBox .screen .fixed{
    display: none;
}

.goquanbox{
    padding-top: 5vw;
}

}