body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f7fa; /* 柔和的背景色 */
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px; /* 更宽的最大宽度 */
    margin: auto;
    background: #ffffff; /* 白色背景 */
    padding: 30px;
    border-radius: 12px; /* 圆角 */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h1 {
    text-align: center;
    color: #333; /* 深色标题 */
    margin-bottom: 20px;
    font-size: 2em; /* 更大的标题 */
}

select {
    width: 100%; /* 全宽选择框 */
    padding: 12px; /* 内边距 */
    border: 2px solid #007bff; /* 更粗的蓝色边框 */
    border-radius: 8px; /* 圆角 */
    margin-bottom: 20px; /* 底部间距 */
    background-color: #e9f7ff; /* 选择框背景 */
    font-size: 16px; /* 字体大小 */
    transition: border-color 0.3s; /* 边框颜色过渡 */
}

select:focus {
    border-color: #0056b3; /* 焦点状态下的边框颜色 */
    outline: none; /* 去除默认的焦点轮廓 */
}

.textarea-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 文本框之间的空间 */
    margin: 10px 0;
}

textarea {
    flex: 1; /* 让文本框自适应宽度 */
    margin: 5px; /* 文本框之间的间距 */
    height: 300px; /* 高度增加 */
    padding: 12px; /* 内边距 */
    border: 2px solid #007bff; /* 更粗的蓝色边框 */
    border-radius: 8px; /* 圆角 */
    resize: none; /* 禁止手动调整大小 */
    font-size: 16px; /* 字体大小 */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); /* 内部阴影 */
}

.button-container {
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 按钮居中显示 */
    margin-top: 10px; /* 上方间距 */
}

button {
    padding: 12px; /* 内边距 */
    margin: 0 10px; /* 左右间距 */
    border: none;
    border-radius: 8px; /* 圆角 */
    background-color: #007bff; /* 蓝色背景 */
    color: white;
    font-size: 16px; /* 字体大小 */
    cursor: pointer;
    transition: background-color 0.3s; /* 按钮背景色过渡 */
}

button:hover {
    background-color: #0056b3; /* 悬停时的背景颜色 */
}

#keywords-section {
    margin-top: 30px; /* 重要词汇部分顶部间距 */
}

#keywords-list {
    list-style-type: none; /* 移除列表符号 */
    padding: 0;
}

#keywords-list li {
    background: #e9ecef; /* 词汇背景 */
    margin: 5px 0;
    padding: 10px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    font-size: 16px; /* 字体大小 */
    transition: background-color 0.3s; /* 背景颜色过渡 */
}

#keywords-list li:hover {
    background: #d1e7dd; /* 悬停背景颜色 */
}
.copy-message {
            display: inline-block;
            margin-left: 10px;
            color: green;
            font-size: 0.9em;
            visibility: hidden; /* 初始设置为隐藏 */
        }
/* 媒体查询：适应小屏幕 */
@media (max-width: 600px) {
    .textarea-container {
        flex-direction: column; /* 垂直排列文本框 */
    }

   button {
        width: 120px; /* 在小屏幕下保持固定宽度 */
    }
    
    textarea {
        width: 100%; /* 文本框在小屏幕下全宽 */
    }

    .button-container {
        flex-direction: column; /* 垂直排列按钮 */
        align-items: stretch; /* 使按钮全宽 */
    }
}