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

/* 容器样式 */
.container {
    background-color: #444; /* 设置容器背景颜色 */
    padding: 20px; /* 设置内边距 */
    border-radius: 10px; /* 设置圆角 */
    width: 600px; /* 设置容器宽度 */
    height: 500px; /* 设置高度为视口高度 */
    text-align: center; /* 内容居中对齐 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 子元素水平居中 */
    justify-content: center; /* 子元素垂直居中 */
}

/* 输入框和按钮的容器 */
.input-container {
    display: flex; /* 使用flex布局 */
    width: 100%; /* 设置宽度为100% */
    justify-content: center; /* 子元素水平居中 */
    align-items: center; /* 子元素垂直居中 */
    margin-bottom: 10px; /* 设置底部外边距 */
}

/* 输入框样式 */
#inputText {
    width: 65%; /* 设置宽度为65% */
    padding: 10px; /* 设置内边距 */
    border-radius: 9px; /* 设置圆角 */
    border: none; /* 移除边框 */
}

/* 隐藏文件输入框 */
#inputFile {
    display: none; /* 隐藏文件输入框 */
}

/* 文件选择按钮样式 */
#inputLabel {
    width: 25%; /* 设置宽度为25% */
    margin-left: 10px; /* 设置左边距 */
    border-radius: 9px; /* 设置圆角 */
    padding: 10px; /* 设置内边距 */
    border-radius: 5px; /* 设置圆角 */
    border: none; /* 移除边框 */
    background-color: #555; /* 设置背景颜色 */
    color: white; /* 设置文本颜色 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    text-align: center; /* 文本居中对齐 */
}

/* 清除按钮样式 */
#clearBtn {
    width: 10%; /* 设置宽度为10% */
    margin-left: 10px; /* 设置左边距 */
    padding: 12px; /* 设置内边距 */
    border-radius: 10px; /* 设置圆角 */
    border: none; /* 移除边框 */
    background-color: #d9534f; /* 设置背景颜色 */
    color: white; /* 设置文本颜色 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    position: relative; /* 设置相对定位 */
    top: -5px; /* 向上移动5px */
}

/* 输出结果的容器样式 */
#output {
    background-color: #555; /* 设置背景颜色 */
    padding: 10px; /* 设置内边距 */
    border-radius: 9px; /* 设置圆角 */
    margin-top: 20px; /* 设置顶部外边距 */
    color: #ffffff; /* 设置文本颜色 */
    word-wrap: break-word; /* 自动换行 */
    text-align: center; /* 文本居中对齐 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 子元素水平居中 */
    align-items: center; /* 子元素垂直居中 */
    height: 100%; /* 设置固定高度 */
    width: 100%; /* 设置宽度为100% */
}

/* 按钮样式 */
button {
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #555; /* 设置背景颜色 */
    color: white; /* 设置文本颜色 */
    padding: 10px; /* 设置内边距 */
    border-radius: 5px; /* 设置圆角 */
    border: none; /* 移除边框 */
    margin-top: 10px; /* 设置顶部外边距 */
    width: 80%; /* 设置宽度为80% */
}

/* 鼠标悬停按钮时的样式 */
button:hover {
    background-color: #666; /* 更改背景颜色 */
}

/* 生成的二维码画布样式 */
canvas {
    margin: auto; /* 水平居中 */
}