/* 工具导航唯一父容器 - 核心：隔绝外部样式污染 */
.tool-nav-container {
    width: 100%;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", sans-serif;
    padding: 8px; /* 缩小外层间距 */
}

/* 左侧导航+右侧内容 整体布局 - 关键：让左右高度一致 */
.tool-nav-container .tool-nav-layout {
    display: flex;
    gap: 10px; /* 缩小左右间距 */
    width: 100%;
    box-sizing: border-box;
    align-items: stretch; /* 强制左右子元素高度一致 */
}

/* 左侧侧边导航 - 更紧凑的尺寸 */
.tool-nav-container .tool-nav-sidebar {
    width: 160px; /* 缩小左侧宽度 */
    display: flex;
    flex-direction: column;
    gap: 4px; /* 缩小导航项间距 */
    background: #ffffff; /* 纯白背景匹配参考图 */
    padding: 4px;
    border-radius: 6px;
}

/* 左侧导航项 - 小巧化 */
.tool-nav-container .nav-item {
    padding: 8px 12px; /* 大幅缩小内边距 */
    background: #ffffff;
    border-radius: 4px; /* 更小的圆角 */
    cursor: pointer;
    font-size: 15px; /* 缩小字体 */
    color: #333;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px; /* 缩小图标和文字间距 */
    border: none !important;
    margin: 0 !important;
}

/* 导航项激活样式（蓝色背景，匹配参考图） */
.tool-nav-container .nav-item.active {
    background: #0066ff !important;
    color: #ffffff !important;
    font-weight: 500;
}

/* 导航项hover效果 */
.tool-nav-container .nav-item:hover:not(.active) {
    background: #f5f7fa !important;
}

/* 导航图标 - 更小尺寸 */
.tool-nav-container .nav-icon {
    font-size: 16px; /* 缩小图标 */
    display: inline-block;
    width: 16px;
    text-align: center;
}

/* 右侧工具内容区 - 更紧凑+高度和左侧一致 */
.tool-nav-container .tool-nav-content {
    flex: 1;
    background: #ffffff;
    border-radius: 6px;
    padding: 10px; /* 缩小内边距 */
    box-sizing: border-box;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* 工具卡片网格布局 - 更紧凑的4列（匹配参考图） */
.tool-nav-container .tool-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important; /* 大幅缩小卡片间距 */
    width: 100%;
}

/* 单个工具卡片项 - 极致小巧（匹配参考图） */
.tool-nav-container .tool-card-item {
    padding: 10px 6px !important; /* 大幅缩小内边距 */
    background: #ffffff !important; /* 纯白背景匹配参考图 */
    border: 1px solid #f0f2f5 !important; /* 浅边框匹配参考图 */
    border-radius: 6px !important; /* 更小的圆角 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important; /* 缩小图标和文字间距 */
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    min-height: 60px; /* 更小的最小高度 */
    text-decoration: none !important; /* 去掉a标签默认下划线 */
}

/* 工具卡片hover效果 - 轻微高亮 */
.tool-nav-container .tool-card-item:hover {
    background: #f5f7fa !important;
    border-color: #e8f0fe !important;
}

/* 工具图标 - 更小更精致（匹配参考图） */
.tool-nav-container .tool-icon {
    font-size: 15px !important; /* 缩小图标 */
    color: #0066ff !important;
    display: block !important;
}

/* 工具名称 - 更小字体 */
.tool-nav-container .tool-name {
    font-size: 12px !important; /* 缩小字体 */
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 标签样式 - 极致小巧 */
.tool-nav-container .tag {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    font-size: 11px !important; /* 缩小标签字体 */
    padding: 1px 4px !important; /* 缩小标签内边距 */
    border-radius: 3px !important; /* 更小的圆角 */
    color: #fff !important;
    margin: 0 !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

/* IPv6标签 */
.tool-nav-container .tag.ipv6 {
    background: #ff4d4f !important;
    right: 40px !important; /* 适配更小的标签 */
}

/* IPv4标签 */
.tool-nav-container .tag.ipv4 {
    background: #1890ff !important;
}

/* 新new标签 */
.tool-nav-container .tag.new {
    background: #00b42a !important;
}
/* hot标签 */
.tool-nav-container .tag.hot {
    background: #ff3c00 !important;
}
/* 右侧滚动条美化（更细） */
.tool-nav-container .tool-nav-content::-webkit-scrollbar {
    width: 4px; /* 更细的滚动条 */
}
.tool-nav-container .tool-nav-content::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 2px;
}
.tool-nav-container .tool-nav-content::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 2px;
}
.tool-nav-container .tool-nav-content::-webkit-scrollbar-thumb:hover {
    background: #d0d0d0;
}

/* 响应式适配（兼容小屏幕） */
@media (max-width: 992px) {
    .tool-nav-container .tool-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .tool-nav-container .tool-nav-layout {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .tool-nav-container .tool-nav-sidebar {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 4px !important;
        margin-bottom: 8px !important;
    }
    .tool-nav-container .nav-item {
        white-space: nowrap !important;
    }
    .tool-nav-container .tool-nav-content {
        width: 100% !important;
        max-height: 350px !important; /* 更小的最大高度 */
    }
}
/* 工具功能说明文字样式 */
.tool-nav-container .tool-desc {
    font-size: 11px !important; /* 比工具名称更小的字体 */
    color: #999 !important;     /* 浅灰色，匹配参考图 */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}