/* 设置全局样式，背景颜色为暗色，字体颜色为白色 */
body {
    background-color: #121212; /* 背景颜色：深色 */
    color: #ffffff; /* 文字颜色：白色 */
    font-family: Arial, sans-serif; /* 字体：Arial，无衬线 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 高度设为视口高度 */
    margin: 0; /* 去除默认边距 */
}

/* 容器样式，包含整个布局 */
.container {
    display: flex; /* 使用flex布局 */
    flex-direction: row; /* 子元素横向排列 */
    width: 80%; /* 宽度设为视口宽度的80% */
    max-width: 1200px; /* 最大宽度1200px */
    gap: 20px; /* 子元素间距20px */
}

/* 输入框和输出框的通用样式，增加高度300px */
.box {
    flex: 1; /* 占据剩余空间 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素纵向排列 */
    background-color: #1e1e1e; /* 背景颜色：深灰色 */
    padding: 20px; /* 内边距20px */
    border-radius: 10px; /* 圆角10px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    height: 300px; /* 增加300px高度 */
}

/* 输入框和输出框内的textarea样式 */
textarea {
    flex: 1; /* 占据剩余空间 */
    background-color: #2d2d2d; /* 背景颜色：更深的灰色 */
    color: #ffffff; /* 文字颜色：白色 */
    border: none; /* 无边框 */
    resize: none; /* 禁止手动调整大小 */
    padding: 10px; /* 内边距10px */
    font-size: 1rem; /* 字体大小1rem */
    border-radius: 5px; /* 圆角5px */
    outline: none; /* 无外边框 */
}

/* 控制区域样式 */
.controls {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素纵向排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    gap: 10px; /* 子元素间距10px */
}

/* 下拉菜单和按钮的样式 */
select, button {
    padding: 10px; /* 内边距10px */
    font-size: 1rem; /* 字体大小1rem */
    color: #ffffff; /* 文字颜色：白色 */
    background-color: #3a3a3a; /* 背景颜色：深灰色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角5px */
    cursor: pointer; /* 鼠标悬停时显示为手形 */
}

/* 下拉菜单和按钮聚焦时的样式 */
select:focus, button:focus {
    outline: none; /* 无外边框 */
    box-shadow: 0 0 5px #ffffff; /* 聚焦时显示白色阴影 */
}