/* 标签样式优化 */
    .tabs {
        display: flex;
        /* margin: 20px 0; */
    }
    .tabs p.active {
        background: #1b8efc;
        color: white;
    }


    /* 详情行样式 */
    .detail-row {
        background-color: #f9f9f9;
    }

    .detail-row td {
        padding: 0 !important;
        /* 移除默认padding */
        border-top: none;
        border-bottom: 1px solid #ddd;
    }

    /* HTTP详情容器 */
    .http-details-container {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    /* 详情内容 - 左对齐 */
    .http-details-content {
        text-align: left;
        width: 100%;
    }

    /* 下载信息样式 - 左对齐并排显示 */
    .download-info {
        display: flex;
        gap: 20px;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 4px;
        margin-bottom: 10px;
        text-align: left;
    }

    .download-info span {
        white-space: nowrap;
    }

    /* HTTP头信息样式 - 左对齐 */
    .http-headers pre {
        white-space: pre-wrap;
        background-color: #f8f8f8;
        padding: 10px;
        border-radius: 4px;
        font-family: monospace;
        margin: 0;
        /* max-height: 300px;
    overflow: auto; */
        text-align: left;
    }

    .http-headers p {
        /* white-space: pre-wrap; */
        background-color: #f8f8f8;
        /* padding: 10px; */
        border-radius: 4px;
        font-family: monospace;
        margin: 0;
        /* max-height: 300px;
    overflow: auto; */
        text-align: left;
        display: flex;
        flex-direction: column;
        font-size: 12px;
    }

    .http-headers p span {
        white-space: pre-wrap;
        background-color: #f8f8f8;
        padding: 10px;
        border-radius: 4px;
        font-family: monospace;
        margin: 0;
        /* max-height: 300px;
    overflow: auto; */
        text-align: left;
    }

    /* 按钮样式 */
    .toggle-details {
        background: none;
        border: none;
        color: #1890ff;
        cursor: pointer;
        padding: 0;
        text-align: left;
    }

    .toggle-details:hover {
        text-decoration: underline;
    }

    .isp-tag {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
    }

    .isp-dianxin {
        background-color: #4caf50;
    }

    /* 电信：绿色 */
    .isp-liantong {
        background-color: #ff9800;
    }

    /* 联通：橙色 */
    .isp-yidong {
        background-color: #2196f3;
    }

    /* 移动：蓝色 */
    .isp-haiwai {
        background-color: #9c27b0;
    }

    /* 海外：紫色 */
    .isp-duoxian {
        background-color: #795548;
    }

    /* 多线：棕色 */
    .isp-qita {
        background-color: #9e9e9e;
    }

    #table1 th,
    #table1 td {
        text-align: center;
    }

    #table2 th,
    #table2 td {
        text-align: center;
    }

    /* 问号元素：保持原有样式，增加hover光标反馈 */
    .help-icon {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background-color: black;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        cursor: help;
        border: none;
        margin: 0;
        cursor: pointer;
        margin-left: -16px;
    }

    /* 提示框：默认隐藏，hover时显示 */
    .help-tooltip {

        position: absolute;
        top: 80%;
        left: 12%;
        transform: translateX(-50%);
        margin-top: 8px;

        /* 样式：白色背景+阴影+圆角，确保清晰可见 */
        background-color: black;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        padding: 8px 12px;


        font-size: 12px;
        color: white;
        line-height: 1.4;
        white-space: normal;
        max-width: 300px;


        opacity: 0;
        visibility: hidden;
        height: 0;
        overflow: hidden;


        transition: opacity 0.2s ease, visibility 0.2s ease, height 0.2s ease;
        z-index: 10;
    }

    .help-icon:hover+.help-tooltip,
    .help-tooltip:hover {
        opacity: 1;
        visibility: visible;
        height: auto;
    }


    
      .dns-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  font-size: 14px;
}

.dns-container label {
  cursor: pointer;
}

#testResult {
  /* padding: 6px 10px; */
  width: 180px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#testResult:focus {
  border-color: #0078d7;
  box-shadow: 0 0 3px rgba(0, 120, 215, 0.4);
}

/* 下拉框样式 */
.dns-dropdown {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-top: 2px;
  width: 180px;
  display: none;
  z-index: 100;
}

.dns-option {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  color: #666;
}
.dns-option label{
  cursor: pointer;
}

.dns-option:hover {
  background: #f3f7ff;
  color: #0078d7;
}