/* --- 全局与基础样式 --- */
body {
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 更适合中文的字体栈 */
    line-height: 1.6;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
    font-size: 14px; /* 基础字号 */
}

.container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 20px 30px; /* 增加内边距 */
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* 调整阴影 */
}

/* --- 标题样式 --- */
h1, h2 {
    color: #0056b3; /* 深蓝色 */
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 25px;
    margin-bottom: 15px; /* 调整标题下边距 */
}
h1 {
    margin-top: 0;
    text-align: center; /* 主标题居中 */
    border-bottom: none; /* 去掉主标题下划线 */
    margin-bottom: 20px;
    color: #003366; /* 更深的标题颜色 */
}

/* --- 功能区块样式 --- */
.section {
    margin-bottom: 30px;
    padding: 20px; /* 增加区块内边距 */
    border: 1px solid #ddd;
    border-radius: 5px; /* 轻微调整圆角 */
    background-color: #fdfdfd;
}

/* --- 配置区块特殊样式 --- */
.config-section {
    background-color: #eaf2ff; /* 淡蓝色背景突出配置区 */
    border-color: #c4d9f7;
}

/* --- 表单元素样式 --- */
label {
    display: block;
    margin-bottom: 8px; /* 调整标签下边距 */
    font-weight: bold;
    color: #555; /* 标签颜色稍深 */
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
    width: 100%; /* 统一宽度为100% */
    padding: 10px 12px; /* 调整内边距 */
    margin-bottom: 15px; /* 调整元素下边距 */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 和 border 不会撑大宽度 */
    font-size: 14px; /* 统一输入框字号 */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 添加过渡效果 */
}
input:focus, select:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none; /* 去掉默认的 outline */
}

select {
     background-color: #fff;
     cursor: pointer;
     appearance: none; /* 移除默认箭头样式 (部分浏览器) */
     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); /* 自定义箭头 */
     background-repeat: no-repeat;
     background-position: right 12px center;
     background-size: 10px 10px;
     padding-right: 30px; /* 为箭头留出空间 */
}
select[disabled] {
    background-color: #e9ecef; /* 禁用时的背景色 */
    cursor: not-allowed;
}

/* --- 按钮样式 --- */
button {
    display: inline-block;
    background-color: #007bff; /* 主题蓝 */
    color: white;
    padding: 10px 18px; /* 调整按钮内边距 */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px; /* 按钮字号 */
    margin-top: 10px;
    margin-right: 10px;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover {
    background-color: #0056b3; /* 悬停加深 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- 结果显示区域 --- */
.result {
    margin-top: 20px; /* 增加结果区上边距 */
    padding: 15px; /* 增加结果区内边距 */
    background-color: #f0f0f0; /* 结果区背景色 */
    border: 1px solid #ccc;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-height: 350px; /* 增加最大高度 */
    overflow-y: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* 等宽字体 */
    font-size: 0.9em;
    line-height: 1.5; /* 调整代码行高 */
    color: #333; /* 结果文字颜色 */
}
.result pre {
    margin: 0;
    padding: 0; /* 确保 pre 标签没有额外边距 */
}
.result p strong {
    color: #0056b3; /* 结果标题颜色 */
    display: block; /* 让标题独占一行 */
    margin-bottom: 8px; /* 标题和内容间距 */
}


/* --- Token 显示区域 --- */
#tokenDisplay {
    margin-top: 20px;
    padding: 12px 15px;
    background-color: #fff3cd; /* 淡黄色背景 */
    border: 1px solid #ffeeba;
    border-radius: 4px;
    color: #856404; /* 暗黄色文字 */
    word-break: break-all;
    font-size: 0.9em;
    line-height: 1.5; /* 增加行高以便阅读长Token */
}
#tokenDisplay strong {
    margin-right: 8px;
    font-weight: bold;
}

/* --- 错误消息样式 --- */
.error-message {
    color: #dc3545; /* 红色 */
    background-color: #f8d7da; /* 淡红色背景 */
    border: 1px solid #f5c6cb;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9em;
}
/* 隐藏错误区域，除非有内容 */
#urlConfigError:empty {
    display: none;
}