/* CSS变量定义 */
:root {
    --primary-color: #2c3e50;      /* 主色调 */
    --accent-color: #3498db;       /* 强调色 */
    --success-color: #28a745;      /* 成功状态颜色 */
    --danger-color: #dc3545;       /* 危险状态颜色 */
}

/* 全局样式 */
body {
    background: #f8f9fa;           /* 背景色 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 字体族 */
    padding: 20px 0;               /* 上下内边距 */
}

/* 设置容器样式 */
.setup-container {
    background: white;             /* 白色背景 */
    border-radius: 15px;           /* 圆角边框 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 阴影效果 */
    overflow: hidden;              /* 隐藏溢出内容 */
    max-width: 900px;              /* 最大宽度 */
    margin: 0 auto;                /* 水平居中 */
}

/* 设置头部样式 */
.setup-header {
    background: linear-gradient(135deg, var(--primary-color), #1a2530); /* 渐变背景 */
    color: white;                  /* 文字颜色 */
    padding: 25px;                 /* 内边距 */
    text-align: center;            /* 文字居中 */
}

/* 设置主体样式 */
.setup-body {
    padding: 30px;                 /* 内边距 */
}

/* 卡片样式 */
.card {
    border: none;                  /* 无边框 */
    border-radius: 10px;           /* 圆角 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.05); /* 阴影 */
    margin-bottom: 20px;           /* 底部外边距 */
}

/* 卡片头部样式 */
.card-header {
    background: none;              /* 透明背景 */
    border-bottom: 1px solid #e9ecef; /* 底部边框 */
    padding: 15px 20px;            /* 内边距 */
    font-weight: 600;              /* 字体粗细 */
}

/* 卡片主体样式 */
.card-body {
    padding: 20px;                 /* 内边距 */
}

/* 主要按钮样式 */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-color), #2980b9); /* 渐变背景 */
    border: none;                  /* 无边框 */
    border-radius: 8px;            /* 圆角 */
    padding: 10px 25px;            /* 内边距 */
    font-weight: 600;              /* 字体粗细 */
}

/* 主要按钮悬停效果 */
.btn-primary:hover {
    transform: translateY(-1px);   /* 上移效果 */
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3); /* 阴影 */
}

/* 表单标签样式 */
.form-label {
    font-weight: 500;              /* 字体粗细 */
    color: #495057;                /* 文字颜色 */
    margin-bottom: 8px;            /* 底部外边距 */
}

/* 表单控件样式 */
.form-control, .form-select {
    border-radius: 8px;            /* 圆角 */
    border: 1px solid #dee2e6;     /* 边框 */
    padding: 10px 15px;            /* 内边距 */
}

/* 表单控件聚焦状态 */
.form-control:focus, .form-select:focus {
    border-color: var(--accent-color); /* 边框颜色 */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* 阴影 */
}

/* API密钥输入容器 */
.api-key-input {
    position: relative;            /* 相对定位 */
}

/* 显示/隐藏密码按钮样式 */
.api-key-input .toggle-visibility {
    position: absolute;            /* 绝对定位 */
    right: 12px;                   /* 右侧位置 */
    top: 50%;                      /* 垂直居中 */
    transform: translateY(-50%);   /* 垂直偏移 */
    background: none;              /* 透明背景 */
    border: none;                  /* 无边框 */
    color: #6c757d;                /* 文字颜色 */
    cursor: pointer;               /* 手型光标 */
    z-index: 10;                   /* 层级 */
    padding: 5px;                  /* 内边距 */
}

/* 状态指示器样式 */
.status-indicator {
    display: inline-flex;          /* 内联弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 8px;                      /* 元素间距 */
    padding: 6px 12px;             /* 内边距 */
    border-radius: 20px;           /* 圆角 */
    font-size: 14px;               /* 字体大小 */
    font-weight: 500;              /* 字体粗细 */
}

/* 连接成功状态样式 */
.status-connected {
    background: #d4edda;           /* 背景色 */
    color: #28a745;                /* 文字颜色 */
}

/* 连接断开状态样式 */
.status-disconnected {
    background: #f8d7da;           /* 背景色 */
    color: #dc3545;                /* 文字颜色 */
}

/* 测试中状态样式 */
.status-testing {
    background: #fff3cd;           /* 背景色 */
    color: #856404;                /* 文字颜色 */
}

/* 测试按钮样式 */
.test-btn {
    background: #6c757d;           /* 背景色 */
    border: none;                  /* 无边框 */
    border-radius: 6px;            /* 圆角 */
    padding: 8px 15px;             /* 内边距 */
    color: white;                  /* 文字颜色 */
    font-size: 14px;               /* 字体大小 */
}

/* 测试按钮悬停效果 */
.test-btn:hover {
    background: #5a6268;           /* 背景色 */
}

/* 设置底部样式 */
.setup-footer {
    padding: 20px;                 /* 内边距 */
    border-top: 1px solid #e9ecef; /* 顶部边框 */
    text-align: center;            /* 文字居中 */
    background: #f8f9fa;           /* 背景色 */
}

/* 连接提示样式 */
.connection-tips {
    font-size: 12px;               /* 字体大小 */
    color: #6c757d;                /* 文字颜色 */
    margin-top: 5px;               /* 顶部外边距 */
}

/* 错误消息样式 */
.error-message {
    color: #dc3545;                /* 文字颜色 */
    font-size: 13px;               /* 字体大小 */
    margin-top: 5px;               /* 顶部外边距 */
}

/* 成功消息样式 */
.success-message {
    color: #28a745;                /* 文字颜色 */
    font-size: 13px;               /* 字体大小 */
    margin-top: 5px;               /* 顶部外边距 */
}

/* 天翼云标识样式 */
.tianyi-logo {
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    justify-content: center;       /* 水平居中 */
    gap: 10px;                     /* 元素间距 */
    margin-bottom: 15px;           /* 底部外边距 */
}

/* 天翼云图标样式 */
.tianyi-logo i {
    font-size: 28px;               /* 图标大小 */
    color: #e60012;                /* 图标颜色 */
}

/* 测试区域样式 */
.test-section {
    background: #f8f9fa;           /* 背景色 */
    border-radius: 8px;            /* 圆角 */
    padding: 15px;                 /* 内边距 */
    margin-top: 20px;              /* 顶部外边距 */
    border-left: 4px solid var(--accent-color); /* 左侧边框 */
}

/* 测试结果样式 */
.test-result {
    margin-top: 10px;              /* 顶部外边距 */
    padding: 10px;                 /* 内边距 */
    border-radius: 6px;            /* 圆角 */
    display: none;                 /* 默认隐藏 */
}

/* 成功测试结果样式 */
.test-result.success {
    background: #d4edda;           /* 背景色 */
    color: #155724;                /* 文字颜色 */
    border: 1px solid #c3e6cb;     /* 边框 */
}

/* 错误测试结果样式 */
.test-result.error {
    background: #f8d7da;           /* 背景色 */
    color: #721c24;                /* 文字颜色 */
    border: 1px solid #f5c6cb;     /* 边框 */
}

/* 调试信息样式 */
.debug-info {
    background: #e9ecef;           /* 背景色 */
    border-radius: 6px;            /* 圆角 */
    padding: 10px;                 /* 内边距 */
    margin-top: 10px;              /* 顶部外边距 */
    font-family: monospace;        /* 等宽字体 */
    font-size: 12px;               /* 字体大小 */
    display: none;                 /* 默认隐藏 */
}

/* 连接方式区域样式 */
.connection-method {
    margin-top: 15px;              /* 顶部外边距 */
    padding-top: 15px;             /* 顶部内边距 */
    border-top: 1px solid #dee2e6; /* 顶部边框 */
}

/* 模型加载指示器样式 */
.model-loading {
    display: none;                 /* 默认隐藏 */
    color: #6c757d;                /* 文字颜色 */
    font-size: 12px;               /* 字体大小 */
    margin-top: 5px;               /* 顶部外边距 */
}

/* 手动模型输入区域样式 */
.manual-model-input {
    margin-top: 10px;              /* 顶部外边距 */
    display: none;                 /* 默认隐藏 */
}

/* 设置面板样式 */
.settings-panel {
    padding: 12px 15px;            /* 内边距 */
    border-bottom: 1px solid #e9ecef; /* 底部边框 */
    background: #f8f9fa;           /* 背景色 */
    flex-shrink: 0;                /* 禁止收缩 */
}

/* 设置行样式 */
.settings-row {
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    margin-bottom: 12px;           /* 底部外边距 */
}

/* 设置标签样式 */
.settings-label {
    width: 100px;                  /* 固定宽度 */
    font-size: 14px;               /* 字体大小 */
    font-weight: 500;              /* 字体粗细 */
    color: #495057;                /* 文字颜色 */
}

/* 设置控件区域样式 */
.settings-control {
    flex: 1;                       /* 占据剩余空间 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 10px;                     /* 元素间距 */
}

/* 模型状态指示器样式 */
.model-status {
    font-size: 13px;               /* 字体大小 */
    margin-top: 8px;               /* 顶部外边距 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 6px;                      /* 元素间距 */
}

/* 连接成功状态样式 */
.status-connected {
    color: var(--success-color);   /* 文字颜色 */
}

/* 连接断开状态样式 */
.status-disconnected {
    color: var(--danger-color);    /* 文字颜色 */
}

/* 加载中状态样式 */
.status-loading {
    color: #856404;                /* 文字颜色 */
}

/* 配置按钮样式 */
.config-btn {
    background: var(--accent-color); /* 背景色 */
    border: none;                  /* 无边框 */
    border-radius: 6px;            /* 圆角 */
    padding: 6px 12px;             /* 内边距 */
    font-size: 12px;               /* 字体大小 */
    cursor: pointer;               /* 手型光标 */
    color: white;                  /* 文字颜色 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 5px;                      /* 元素间距 */
}

/* 配置按钮悬停效果 */
.config-btn:hover {
    background: #2980b9;           /* 背景色 */
}

/* 连接建议样式 */
.connection-advice {
    padding: 10px 15px;            /* 内边距 */
    margin: 10px 0;                /* 上下外边距 */
    border-radius: 8px;            /* 圆角 */
    font-size: 13px;               /* 字体大小 */
    display: flex;                 /* 弹性布局 */
    align-items: flex-start;       /* 顶部对齐 */
    gap: 8px;                      /* 元素间距 */
    animation: slideIn 0.3s ease-out; /* 动画效果 */
}

/* 良好连接建议样式 */
.connection-advice.good {
    background: #d4edda;           /* 背景色 */
    color: #155724;                /* 文字颜色 */
    border-left: 4px solid #28a745; /* 左侧边框 */
}

/* 一般连接建议样式 */
.connection-advice.fair {
    background: #fff3cd;           /* 背景色 */
    color: #856404;                /* 文字颜色 */
    border-left: 4px solid #ffc107; /* 左侧边框 */
}

/* 较差连接建议样式 */
.connection-advice.poor {
    background: #f8d7da;           /* 背景色 */
    color: #721c24;                /* 文字颜色 */
    border-left: 4px solid #dc3545; /* 左侧边框 */
}

/* 连接建议图标样式 */
.connection-advice i {
    margin-top: 2px;               /* 顶部外边距 */
    flex-shrink: 0;                /* 禁止收缩 */
}

/* 连接建议小字样式 */
.connection-advice small {
    display: block;                /* 块级显示 */
    margin-top: 4px;               /* 顶部外边距 */
    opacity: 0.8;                  /* 透明度 */
}

/* 连接帮助内容样式 */
.connection-help-content {
    padding: 15px;                 /* 内边距 */
}

/* 连接帮助标题样式 */
.connection-help-content h6 {
    color: #2c3e50;                /* 文字颜色 */
    margin-bottom: 10px;           /* 底部外边距 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 8px;                      /* 元素间距 */
}

/* 连接帮助段落样式 */
.connection-help-content p {
    margin-bottom: 8px;            /* 底部外边距 */
    line-height: 1.5;              /* 行高 */
}

/* 性能统计区域样式 */
.performance-stats {
    background: #f8f9fa;           /* 背景色 */
    border-radius: 8px;            /* 圆角 */
    padding: 15px;                 /* 内边距 */
    border-left: 4px solid var(--accent-color); /* 左侧边框 */
}

/* 统计网格布局 */
.stats-grid {
    display: grid;                 /* 网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
    gap: 15px;                     /* 网格间距 */
    margin-top: 10px;              /* 顶部外边距 */
}

/* 统计项样式 */
.stat-item {
    text-align: center;            /* 文字居中 */
    padding: 10px;                 /* 内边距 */
    background: white;             /* 背景色 */
    border-radius: 6px;            /* 圆角 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 阴影 */
}

/* 统计值样式 */
.stat-value {
    font-size: 18px;               /* 字体大小 */
    font-weight: bold;             /* 字体粗细 */
    color: #2c3e50;                /* 文字颜色 */
    margin-bottom: 5px;            /* 底部外边距 */
}

/* 统计标签样式 */
.stat-label {
    font-size: 12px;               /* 字体大小 */
    color: #6c757d;                /* 文字颜色 */
}

/* 优化设置区域样式 */
.optimization-settings {
    background: #f8f9fa;           /* 背景色 */
    border-radius: 8px;            /* 圆角 */
    padding: 20px;                 /* 内边距 */
    border: 1px solid #e9ecef;     /* 边框 */
}

/* 优化设置标题样式 */
.optimization-settings h6 {
    color: #2c3e50;                /* 文字颜色 */
    margin-bottom: 15px;           /* 底部外边距 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
}

/* 重试信息样式 */
.retry-info {
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 6px;                      /* 元素间距 */
    margin-top: 8px;               /* 顶部外边距 */
    font-size: 12px;               /* 字体大小 */
    color: #856404;                /* 文字颜色 */
    opacity: 0.8;                  /* 透明度 */
}

/* 紧急测试区域样式 */
.emergency-test {
    padding: 10px;                 /* 内边距 */
    text-align: center;            /* 文字居中 */
    border-top: 1px solid #e9ecef; /* 顶部边框 */
}

/* 紧急测试按钮样式 */
.emergency-btn {
    background: #dc3545;           /* 背景色 */
    color: white;                  /* 文字颜色 */
    border: none;                  /* 无边框 */
    border-radius: 6px;            /* 圆角 */
    padding: 8px 16px;             /* 内边距 */
    cursor: pointer;               /* 手型光标 */
    display: inline-flex;          /* 内联弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 6px;                      /* 元素间距 */
    font-size: 12px;               /* 字体大小 */
    transition: all 0.2s;          /* 过渡效果 */
}

/* 紧急测试按钮悬停效果 */
.emergency-btn:hover {
    background: #c82333;           /* 背景色 */
    transform: translateY(-1px);   /* 上移效果 */
}

/* 诊断按钮样式 */
.diagnose-btn {
    background: #6c757d;           /* 背景色 */
    color: white;                  /* 文字颜色 */
    border: none;                  /* 无边框 */
    border-radius: 6px;            /* 圆角 */
    padding: 6px 12px;             /* 内边距 */
    font-size: 12px;               /* 字体大小 */
    cursor: pointer;               /* 手型光标 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 5px;                      /* 元素间距 */
    transition: all 0.2s;          /* 过渡效果 */
}

/* 诊断按钮悬停效果 */
.diagnose-btn:hover {
    background: #5a6268;           /* 背景色 */
    transform: translateY(-1px);   /* 上移效果 */
}

/* 滑入动画 */
@keyframes slideIn {
    from {
        opacity: 0;                /* 完全透明 */
        transform: translateY(-10px); /* 上移 */
    }
    to {
        opacity: 1;                /* 完全不透明 */
        transform: translateY(0);  /* 恢复位置 */
    }
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 768px) {
    .setup-container {
        margin: 10px;              /* 外边距 */
        border-radius: 10px;       /* 圆角 */
    }
    
    .setup-body {
        padding: 20px;             /* 内边距 */
    }
    
    .stats-grid {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 10px;                 /* 网格间距 */
    }
    
    .help-actions {
        flex-direction: column;    /* 垂直排列 */
    }
    
    .help-actions .suggestion-chip {
        justify-content: center;   /* 内容居中 */
    }
    
    .connection-status-panel {
        flex-direction: column;    /* 垂直排列 */
        align-items: stretch;      /* 拉伸对齐 */
        gap: 8px;                  /* 元素间距 */
    }
    
    .status-item {
        justify-content: space-between; /* 两端对齐 */
    }
}

/* 模型建议区域样式 */
.model-advice {
    border-left: 4px solid #17a2b8; /* 左侧边框 */
}

/* 模型建议列表样式 */
.model-advice ul {
    margin-bottom: 0;              /* 移除底部外边距 */
}

/* 模型建议列表项样式 */
.model-advice li {
    margin-bottom: 5px;            /* 底部外边距 */
}

/* 表单开关样式 */
.form-check.form-switch {
    padding-left: 0;               /* 移除左侧内边距 */
}

/* 表单开关标签样式 */
.form-check.form-switch .form-check-label {
    padding-left: 2.5em;           /* 左侧内边距 */
}

/* 表单开关输入框样式 */
.form-check.form-switch .form-check-input {
    margin-left: 0;                /* 移除左侧外边距 */
}