/* 修改：域名设置容器 flex 布局 */
.domain-sets {
    padding: 0 20px 10px;
    display: flex; /* 关键：启用 flex 布局 */
    flex-wrap: wrap; /* 允许子元素换行 */
    align-items: center; /* 子元素垂直居中 */
    gap: 15px; /* 子元素间统一间距 */
    margin-top: 10px;
}


/* 调整按钮 margin（移除冗余的左右 margin，依赖 flex gap） */
.add-domain-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #2196F3;
    color: white;
    margin: 0; /* 移除原有 margin-left/right */
}

/* 下拉框保持原有样式（无需额外 margin） */
.select-domain {
    min-width: 200px;
    padding: 6px 32px 6px 12px;
    font-size: 14px;
    color: #2c3e50;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

.select-domain:hover {
    border-color: #2196F3; /* 悬停时边框变蓝 */
}

.select-domain:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1); /* 蓝色阴影提示聚焦 */
}
.domain_title {
     color: #2196F3;
     
     height: 32px; /* 统一高度 */
    line-height: 32px; /* 文字垂直居中 */
 }

 /* 表单容器（为后续表单扩展预留） */
.form-container {
    padding: 0px;
    margin: 5px 20px;
    background-color: #f8f8f8;
    border-radius: 6px;
    min-height: 100px; /* 预留内容空间 */
    border: 1px solid #e0e0e0
}

/* 默认提示样式 */
.default-prompt {
    color: #666;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    padding: 20px;
}

 /* 移动端适配（宽度≤768px） */
 @media (max-width: 768px) {
    .form-container {
        margin: 5px 5px;
    }

    .default-prompt {
        padding: 5px;
    }
 }

 .btn-clear{
    margin-left: 5px;
    padding: 5px 15px;
    background: #f44336; /* 红色系，与删除按钮保持风格一致 */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-dw{
    margin-left: 5px;
    padding: 5px 15px;
    background: burlywood;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-new {
    background: #2196F3;
    margin-left: 5px;
    padding: 5px 15px;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.button-node {
    display: flex;
    margin-top: 10px;
}

/* 日志容器：限制最大宽度避免移动端溢出 */
.log-container {
    margin: 15px 0;
    max-width: 100vw; /* 不超过视口宽度 */
}
.log-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;  /* 水平居中 */
    margin-bottom: 10px;
}
/* 日志内容容器：关键横向滚动适配 */
.log-content {
    min-height: 100px;
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    text-align: left;
    border-radius: 4px;
    margin-top: 10px;
    overflow-x: auto; /* 横向内容溢出时显示滚动条 */
    overflow-y: auto; /* 垂直内容溢出时显示滚动条 */
    white-space: pre-wrap; /* 保留换行但允许长文本换行 */
    max-width: 100%; /* 防止内容超出父容器 */
    max-height: 300px; /* 限制最大高度为300px，可根据需求调整 */
    padding: 12px; /* 增加内边距提升可读性 */
}
/* 移动端适配（宽度≤768px） */
@media (max-width: 768px) {
    .log-content {
        font-size: 12px; /* 小屏幕缩小字体 */
        padding: 8px; /* 减少内边距节省空间 */
    }
}