/* ==========================================================================
   1. 网址卡片样式调整
   ========================================================================== */

/* 卡片主体样式调整 */
.url-card a.card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.01);
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.url-card a.card:hover {
    border-color: rgba(0, 0, 0, 0.03);
    background: rgba(255, 255, 255, 0.5);
}

/* 卡片悬停效果调整 */
.url-card .url-body:hover {
    transform: translateY(-8px);
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .4);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .4);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .4);
    border-radius: 12px;
    transition: all 0.4s ease;
}

/* 网址图片样式调整 */
.url-card .url-img {
    width: 45px;
    height: 45px;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.url-card .max .url-img {
    width: 65px;
    height: 65px;
}

/* 网址信息区域调整 */
.url-card {
    padding-right: 10px;
    padding-left: 10px;
}

.url-card .url-info {
    padding-right: 10px;
    padding-left: 10px;
}

.url-card .url-info .overflowClip_1 strong {
    font-weight: 600;
    color: #333;
}

.url-card .url-info .text-muted {
    color: #666;
    font-size: 0.85rem;
}

/* 隐藏"直达"按钮 */
.url-card a.togo {
    display: none !important;
}


/* ==========================================================================
   2. 网站详情页样式调整
   ========================================================================== */

/* 网站详情页网址信息区域调整 */
.row.site-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 网站详情页正文内容使用与卡片相同的背景色 */
.panel.site-content.card.transparent {
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08) !important;
    padding: 25px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transition: all 0.4s ease !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 网站详情页正文内容段落样式优化 */
.panel-body.single p {
    line-height: 1.8;
    margin-bottom: 1.2em;
    font-size: 16px;
}

/* 网站详情页标题样式优化 */
.panel-body.single h2,
.panel-body.single h3 {
    position: relative;
    padding-left: 15px;
    border-left: 4px solid #007bff;
    margin-top: 1.5em;
    margin-bottom: 1em;
}


/* ==========================================================================
   3. 暗色模式适配
   ========================================================================== */

/* 卡片暗色模式适配 */
.io-black-mode .url-card a.card {
    border: 1px solid rgba(255, 255, 255, 0.02);
    background: rgba(255, 255, 255, 0.01);
}

.io-black-mode .url-card a.card:hover {
    border-color: rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.03);
}

/* 网址信息区域暗色模式适配 */
.io-black-mode .url-card .url-info .overflowClip_1 strong {
    color: #eee;
}

.io-black-mode .url-card .url-info .text-muted {
    color: #aaa;
}

/* 网站详情页正文内容暗色模式适配 */
.io-black-mode .panel.site-content.card.transparent {
    background: rgba(255, 255, 255, 0.01) !important;
}



/*--------------------------------------------------------------
# 卡片高度调整和悬停效果
--------------------------------------------------------------*/

/* 减小卡片高度 - 通过调整图片比例 */
.list-grid .list-item .media:after {
    padding-top: 55% !important; /* 原来可能是75%或更高，现在降低到55% */
}

/* 移动端图片比例调整 */
@media (max-width: 767.98px) {
    .list-grid.list-grid-padding .list-item .media-3x2:after {
        padding-top: 60% !important; /* 移动端稍微高一点 */
    }
}

/* 文章卡片悬停图片放大效果 */
.list-item.card:hover .media-content {
    transform: scale(1.05) !important;
}

.list-item.card .media-content {
    transition: transform 0.4s ease !important;
    overflow: hidden !important;
}

/* 轮播图悬停放大效果 */
.slide-blog .swiper-slide:hover .media-content,
.slide-blog .media:hover .media-content {
    transform: scale(1.05) !important;
}

.slide-blog .swiper-slide .media-content,
.slide-blog .media .media-content {
    transition: transform 0.4s ease !important;
    overflow: hidden !important;
}


/*--------------------------------------------------------------
# 浅色背景图片下的文字颜色修复
--------------------------------------------------------------*/

/* 当有浅色背景图片时，强制使用深色文字 */
.big-header-banner.has-light-bg:not(.header-bg) .page-header .navbar-nav>li>a,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-menu a:not(.dropdown-item),
.big-header-banner.has-light-bg:not(.header-bg) .mobile-menu a {
    color: #282a2d !important;
}

/* 浅色背景时的伸缩图标颜色 */
.big-header-banner.has-light-bg:not(.header-bg) .header-mini-btn path {
    stroke: #282a2d !important;
}

/* 浅色背景的悬停效果 */
.big-header-banner.has-light-bg:not(.header-bg) .page-header .navbar-nav>li>a:hover,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-menu a:not(.dropdown-item):hover {
    color: #0071e2 !important;
}

/* 浅色背景时的伸缩图标悬停效果 */
.big-header-banner.has-light-bg:not(.header-bg) .header-mini-btn label:hover path {
    stroke: #0071e2 !important;
}

/* 浅色背景时的下拉菜单箭头颜色修复 */
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .menu-item-has-children > a::after,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .menu-item-has-children > a::before,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu .menu-item-has-children > a::after,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu .menu-item-has-children > a::before,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .dropdown-toggle::after,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .dropdown-toggle::before {
    color: #282a2d !important;
    border-color: #282a2d transparent transparent !important;
}

/* 浅色背景时的下拉菜单箭头悬停效果 */
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .menu-item-has-children > a:hover::after,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .menu-item-has-children > a:hover::before,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu .menu-item-has-children > a:hover::after,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu .menu-item-has-children > a:hover::before,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .dropdown-toggle:hover::after,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .dropdown-toggle:hover::before {
    color: #0071e2 !important;
    border-color: #0071e2 transparent transparent !important;
}

/* 浅色背景时的图标字体下拉箭头颜色修复 */
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav i,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu i,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav .iconfont,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu .iconfont,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav [class*="icon-"],
.big-header-banner.has-light-bg:not(.header-bg) .site-menu [class*="icon-"] {
    color: #282a2d !important;
}

/* 浅色背景时的图标字体下拉箭头悬停效果 */
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav a:hover i,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu a:hover i,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav a:hover .iconfont,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu a:hover .iconfont,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav a:hover [class*="icon-"],
.big-header-banner.has-light-bg:not(.header-bg) .site-menu a:hover [class*="icon-"] {
    color: #0071e2 !important;
}

/* 强制所有菜单中的图标和伪元素为深色 */
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav *,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu *,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav *::before,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav *::after,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu *::before,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu *::after {
    color: #282a2d !important;
    border-color: #282a2d !important;
    fill: #282a2d !important;
    stroke: #282a2d !important;
}

/* 浅色背景时的菜单悬停效果 */
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav *:hover,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu *:hover,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav *:hover::before,
.big-header-banner.has-light-bg:not(.header-bg) .navbar-nav *:hover::after,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu *:hover::before,
.big-header-banner.has-light-bg:not(.header-bg) .site-menu *:hover::after {
    color: #0071e2 !important;
    border-color: #0071e2 !important;
    fill: #0071e2 !important;
    stroke: #0071e2 !important;
}

/* 浅色背景时的搜索框文字颜色 */
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .text-muted,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .search-type .menu-item a,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .big-title .h1,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .big-title h1 {
    color: #282a2d !important;
}

/* 浅色背景时的搜索类型标签文字颜色 */
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) #search-list-menu label,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) #search-list-menu label span,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) #search-list label,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) #search-list label span,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .s-type label,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .s-type label span,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .s-type-list label,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .s-type-list label span {
    color: #282a2d !important;
}

/* 更广泛的搜索区域文字颜色覆盖 */
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .s-search label,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .s-search span,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .s-search a,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .super-search-fm label,
.big-header-banner.has-light-bg ~ .header-big:not(.no-bg) .super-search-fm span {
    color: #282a2d !important;
}

/* 搜索框样式修复 */
/* 亮色模式下的搜索框 - 白色背景+柔化边框 */
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #search-text,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .search-key,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .form-control {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    color: #333 !important;
}

/* 亮色模式下的搜索框placeholder */
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #search-text::placeholder,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .search-key::placeholder,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .form-control::placeholder {
    color: #999 !important;
}

/* 暗色模式下的搜索框 - 灰色背景+柔化边框 */
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #search-text,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .search-key,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .form-control {
    background-color: #666 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
}

/* 暗色模式下的搜索框placeholder */
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #search-text::placeholder,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .search-key::placeholder,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .form-control::placeholder {
    color: #ccc !important;
}

/* 搜索框focus状态 - 保持柔化效果 */
/* 亮色模式下的搜索框focus */
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #search-text:focus,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .search-key:focus,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .form-control:focus {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
}

/* 暗色模式下的搜索框focus */
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #search-text:focus,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .search-key:focus,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .form-control:focus {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    outline: none !important;
}

/* 搜索框内的搜索图标颜色修复 */
/* 亮色模式下的搜索图标 */
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #btn_search,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #btn_search i,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #btn_search .iconfont,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .super-search-fm button,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .super-search-fm button i,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .super-search-fm button .iconfont {
    color: #666 !important;
    background: transparent !important;
}

/* 暗色模式下的搜索图标 */
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #btn_search,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #btn_search i,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #btn_search .iconfont,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .super-search-fm button,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .super-search-fm button i,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .super-search-fm button .iconfont {
    color: #ccc !important;
    background: transparent !important;
}

/* 搜索图标悬停效果 */
/* 亮色模式下的搜索图标悬停 */
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #btn_search:hover,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #btn_search:hover i,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big #btn_search:hover .iconfont,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .super-search-fm button:hover,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .super-search-fm button:hover i,
body:not(.io-black-mode) .big-header-banner.has-light-bg ~ .header-big .super-search-fm button:hover .iconfont {
    color: #0071e2 !important;
}

/* 暗色模式下的搜索图标悬停 */
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #btn_search:hover,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #btn_search:hover i,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big #btn_search:hover .iconfont,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .super-search-fm button:hover,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .super-search-fm button:hover i,
body.io-black-mode .big-header-banner.has-light-bg ~ .header-big .super-search-fm button:hover .iconfont {
    color: #0071e2 !important;
}