:root {
    --primary: 95 120 150;
    --background: 250 250 250;
    --foreground: 23 23 23;
    --muted: 228 228 231;
    --tcp-low: 0, 153, 76;
    --tcp-medium: 204, 102, 0;
    --tcp-high: 204, 0, 0;
    --primary-color: rgb(var(--primary));
    --text-color: rgb(var(--foreground));
    --background-color: rgb(var(--background))
}

body {
    margin: 0;
    padding: 0;
    font-family: Inter, system-ui, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5
}

.container {
    max-width: 800px;
    margin: 5vh auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgb(var(--muted));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1)
}

h1 {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--primary-color);
    margin: 0 0 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.025em
}

p {
    margin: 1rem 0;
    color: rgb(82 82 91);
    font-size: 1rem
}

a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s ease
}

a:hover {
    color: rgb(75 95 120);
    text-decoration: underline;
    text-underline-offset: 2px
}

.info-section {
    margin: 2rem 0;
    padding: 1rem;
    background: rgb(var(--muted)/0.2);
    border-radius: 6px
}

.info-label {
    display: inline-block;
    width: 120px;
    font-weight: 500;
    color: rgb(var(--foreground))
}

.info-value {
    color: var(--primary-color)
}

.tcp-ping-value {
    transition: color .3s ease
}

.tcp-ping-low {
    color: rgb(var(--tcp-low))
}

.tcp-ping-medium {
    color: rgb(var(--tcp-medium))
}

.tcp-ping-high {
    color: rgb(var(--tcp-high))
}

.speedtest button {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: .25rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .875rem;
    transition: background-color .15s ease
}

.speedtest button:hover {
    background-color: rgb(75 95 120)
}

.speedtest button:disabled {
    background-color: rgb(var(--muted));
    cursor: not-allowed
}

#speedtest-result {
    margin-left: .5rem;
    color: var(--primary-color)
}

/* Canvas容器布局 */
.canvas-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 保持 4:3 宽高比 */
    overflow: auto;
    border: 1px solid rgb(var(--muted));
    margin-top: 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

/* 输出框样式 */
.output {
    margin-top: 2rem;
    white-space: pre; /* 修改为 pre 以确保内容不会自动换行 */
    background: rgb(var(--muted)/0.2);
    padding: 0;
    border-radius: 6px;
    min-height: 100px;
    overflow-y: auto;
    overflow-x: auto; /* 增加水平滚动 */
    font-family: "Consolas", monospace; /* 设置系统等宽字体，Windows下使用console */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

/* 按钮样式 */
button {
    margin-right: 0.5rem;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.15s ease;
}

button:hover {
    background-color: rgb(75 95 120);
}

button:disabled {
    background-color: rgb(var(--muted));
    cursor: not-allowed;
}

/* Flexbox布局样式 */
.api-base-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 设置间距 */
}

/* 调整下拉框宽度 */
#apiBaseSelect {
    flex: 1; /* 占据剩余空间 */
}

/* 调整输入框宽度 */
#apiBaseInput {
    flex: 2; /* 占据更多空间 */
}

/* 下拉列表样式 */
#apiBaseSelect {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgb(var(--muted));
    border-radius: 4px;
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

#apiBaseSelect:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* 输入框样式 */
#apiBaseInput {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgb(var(--muted));
    border-radius: 4px;
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

#apiBaseInput:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* 新增 apiKeyInput 样式 */
#apiKeyInput {
    flex: 1; /* 占据剩余空间 */
    padding: 0.5rem;
    margin-top: 0;
    border: 1px solid rgb(var(--muted));
    border-radius: 4px;
    background-color: var(--background-color);
    color: rgb(var(--foreground));
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease;
}

#apiKeyInput:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* 新增 api-key-container 样式 */
.api-key-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap; /* 确保内容不换行 */
}

/* 调整 testResultIcon 样式 */
#testResultIcon {
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
}

/* 新增 api-config 样式 */
.api-config {
    margin-top: 1rem; /* 增加上边距 */
}

/* 调整 base-config 和 api-key-container 的间距 */
.base-config {
    margin-bottom: 1rem; /* 增加下边距 */
}

.api-key-container {
    margin-bottom: 1rem; /* 增加下边距 */
}

/* 新增 prompt-container 样式 */
.prompt-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%; /* 确保宽度与容器一致 */
}

/* 新增 promptInput 样式 */
#promptInput {
    width: calc(100% - 1rem); /* 减去 padding 和 border 的宽度 */
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgb(var(--muted));
    border-radius: 4px;
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease;
    resize: vertical; /* 允许垂直调整大小 */
    min-height: 100px; /* 设置最小高度 */
    font-family: inherit; /* 确保字体与页面默认字体一致 */
}

#promptInput:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* 新增 button-container 样式 */
.button-container {
    display: flex;
    justify-content: space-between; /* 确保按钮分别靠左和靠右对齐 */
    gap: 0.5rem; /* 设置按钮之间的间距 */
    margin-bottom: 1rem; /* 增加下边距 */
}

/* 新增从上到下，再从下到上的扫描动画 */
@keyframes scan {
    0% {
        background-position: 0 100%;
    }
    100% {
        background-position: 0 -100%;
    }
}

/* 新增白色半透明渐变线的扫描网格 */
.scan-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(207, 223, 252, 0.5), rgba(255, 255, 255, 0));
    background-size: 100% 200%;
    animation: scan 1s linear infinite;
    pointer-events: none;
    z-index: 1;
    display: none; /* 默认隐藏扫描动画 */
}

/* 修改 canvas-container 样式以包含扫描网格 */
.canvas-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 保持 4:3 的比例 */
    overflow: auto;
    border: 1px solid rgb(var(--muted));
    margin-top: 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    position: absolute; /* 使 canvas 相对于容器定位 */
    width: 100%; /* 使 canvas 完全覆盖容器 */
    height: 100%; /* 使 canvas 完全覆盖容器 */
    top: 50%; /* 垂直方向居中 */
    left: 50%; /* 水平方向居中 */
    transform: translate(-50%, -50%); /* 调整中心点 */
    display: block;
}

.task-duration-label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(82 82 91); /* 使用与<p>元素相同的颜色 */
    margin-left: 10px;
}

#colorPicker {
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    width: 40px;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}

/* 新增模型选择框样式，与API Base选择框保持一致 */
#modelSelect {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgb(var(--muted));
    border-radius: 4px;
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

#modelSelect:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* 新增 modelInput 样式 */
#modelInput {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgb(var(--muted));
    border-radius: 4px;
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

#modelInput:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* 在现有样式文件末尾添加以下内容 */
.model-config {
    margin-bottom: 1rem; /* 增加 model-config 与下方组件的间距 */
}

/* 修改 api-key-config 的样式 */
.api-key-config {
    margin-top: 1rem; /* 可选：增加 api-key-config 与上方组件的间距 */
}

/* 修改 highlight.js 的字体 */
code.hljs {

    font-family: "Consolas", monospace; /* 设置系统等宽字体，Windows下使用console */
}

.hljs {
    font-family: "Consolas", monospace; /* 设置系统等宽字体，Windows下使用console */
}

/* 扫描动画样式 */
.scan-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(207, 223, 252, 0.5), rgba(255, 255, 255, 0));
    background-size: 100% 200%;
    animation: scan 1s linear infinite;
    pointer-events: none;
    z-index: 1;
    display: none;
}

@keyframes scan {
    0% { background-position: 0 100%; }
    100% { background-position: 0 -100%; }
}

/* 表单控件统一样式 */
input, select {
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgb(var(--muted));
    border-radius: 4px;
    background-color: var(--background-color);
    color: rgb(var(--foreground));
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

input:focus, select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* 暗黑模式适配 */
@media (prefers-color-scheme:dark) {
    :root {
        --background: 23 23 23;
        --foreground: 250 250 250;
        --muted: 63 63 70
    }

    .container {
        background: rgb(38 38 38);
        border-color: rgb(var(--muted))
    }

    p {
        color: rgb(161 161 170)
    }

    .info-value {
        color: rgb(229 231 235)
    }
}