/* 初始化a标签 */
a {
    text-decoration: none;
    color: #777;
}

a:hover {
    text-decoration: none;
}

/* 设置网页背景颜色 */
body {
    background-color: #f8f4f4bb;
}

/* 增加容器最大宽度 */
.container-fluid {
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
}

/* 确保卡片在大屏幕上有足够宽度 */
@media (min-width: 1200px) {
    .container-fluid {
        max-width: 1600px; /* 增加容器最大宽度以适应5个280px卡片 */
    }
}

/* 胶囊导航改变样式 */
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #24abf2;
}

.tool-nav {
    margin-bottom: 20px; /* 添加底部间距 */
}

/* 或者修改现有的.tool-nav样式 */
.tool-nav ul li {
    margin-bottom: 2px;
    background-color: #f9f9f9;
    border-radius: 5%;
    margin-top: 10px; /* 添加顶部间距 */
    margin-bottom: 10px; /* 增加底部间距 */
}



/* 工具明细分类样式*/
span{
    font-size:1.5rem;
    color:#24abf2;
}

.tool-li {
    height: 108px;  /* 保持高度不变 */
    width: 280px !important; /* 强制固定宽度为280px */
    min-width: 280px !important; /* 强制最小宽度为280px */
    max-width: 280px !important; /* 强制最大宽度为280px */
    margin: 0 10px 15px !important; /* 上下间距50px，左右间距10px */
    padding: 10px !important; /* 卡片内边距 */
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative; /* 添加相对定位以便统计信息绝对定位 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    overflow: hidden; /* 防止内容溢出 */
    box-sizing: border-box; /* 确保padding不会增加总宽度 */
    flex-shrink: 0; /* 防止卡片被压缩 */
}

/* 每排第5个卡片移除右侧间距 */
.row > .tool-li:nth-child(5n) {
    margin-right: 0 !important;
}

/* 简化卡片容器布局 */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
}

/* 调整卡片间距样式 */
/* 媒体查询 - 确保在小屏幕上卡片间距适当 */
@media (max-width: 768px) {
    .row > .tool-li {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.row > .tool-li {
    padding-left: 25px;
    padding-right: 25px;
}

/* 为大屏幕上的row增加额外负margin以容纳手动添加的margin-right */
@media (min-width: 992px) {
    .row {
        margin: 0 -30px !important;
    }
}

/* 卡片悬停效果 */
.tool-li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

/* 图标部分 */
.tool-li .tool-li-li {
    width: 40px; /* 图标容器宽度 */
    height: 40px; /* 图标容器高度 */
    border-radius: 50%; /* 圆形背景 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    flex-shrink: 0; /* 防止图标容器收缩 */
    margin-right: 12px; /* 与文本的间距 */
}

/* 图标样式 */
.tool-li .tool-li-li i {
    font-size: 20px; /* 图标大小 */
    color: #fff; /* 图标颜色 */
}

/* 文本部分 */
.tool-li .card-text {
    flex-grow: 1; /* 文本部分占剩余空间 */
}

.tool-li .card-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-li .card-desc {
    font-size: 11px;
    color: #777;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 访问统计 */
.site-stats {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
    color: #999;
    background: rgba(255,255,255,0.8);
    padding: 2px 5px;
    border-radius: 3px;
}

/* 跳转图标样式 */
.jump-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    color: #24abf2;
    opacity: 1;
    z-index: 10;
}

/* 增加悬停效果 */
.tool-li:hover .jump-icon {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* 删除冲突的旧样式 */
.tool-li .text-left {
    text-align: center;
    margin-top: 3px;
    font-size: 14px;
}

.tool-li .text-color-height{
    color: #777;
    height: auto;
    font-size: 11px;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 删除重复的站点统计样式 */
/* 保留绝对定位的站点统计样式 */
.site-stats {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
    color: #999;
    background: rgba(255,255,255,0.8);
    padding: 2px 5px;
    border-radius: 3px;
}

/* 删除旧的鼠标滑动效果，已被新效果替代 */
.tool-li-li:hover{
    position: relative;
    top: -1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: 0.3s;
}
.tool-li-li:hover i{
    display: inline-block;
    font-size: 2.2rem;
    transform: rotate(5deg);
    transition: 0.3s;
}