/* styles.css */

/* 全局样式 */
body {
    font-family: Arial, sans-serif; /* 设置字体 */
    background-color: #f0f8ff; /* 设置背景颜色 */
    margin: 0; /* 设置外边距 */
    padding: 0; /* 设置内边距 */
}

/* 卡片样式 */
.card {
    background-color: #409EFF; /* 卡片背景颜色 */
    text-align: center; /* 文本居中 */
    padding: 10px; /* 内边距 */
    width: 80%; /* 宽度 */
    margin: 20px auto; /* 上下居中 */
    color: #fff; /* 字体颜色 */
    font-size: 12px; /* 字体大小 */
    border-radius: 20px; /* 圆角边框 */
}
img {
        max-width: 100%; /* 图片最大宽度为父元素宽度 */
        height: auto; /* 高度自适应，保持原始宽高比 */
    }
/* 调试文本样式 */
#debugText {
    display: none; /* 默认隐藏 */
    width: 80%; /* 宽度 */
    margin: 20px auto; /* 上下居中 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 5px; /* 圆角边框 */
    text-align: center; /* 文本居中 */
}

#okText {
    display: none; /* 默认隐藏 */
    width: 80%; /* 宽度 */
    margin: 20px auto; /* 上下居中 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 5px; /* 圆角边框 */
    text-align: center; /* 文本居中 */
}
/* 上传按钮样式 */
.uploadButton {
    background-color: #409Eff; /* 按钮背景颜色 */
    color: #fff; /* 字体颜色 */
    padding: 10px 20px; /* 内边距 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角边框 */
    cursor: pointer; /* 鼠标指针样式 */
}

/* 表单容器样式 */
.formContainer {
    display: none; /* 默认隐藏 */
    text-align: center; /* 文本居中 */
    margin-top: 20px; /* 顶部间距 */
}

/* 表单行样式 */
.formRow {
    margin-bottom: 10px; /* 底部间距 */
}

/* 表单标签样式 */
.formRow label {
    font-weight: bold; /* 加粗字体 */
}

/* 表单输入框样式 */
.formRow input {
    width: 200px; /* 宽度 */
    padding: 5px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 5px; /* 圆角边框 */
}

/* 只读输入框样式 */
.formRow input[readonly] {
    background-color: #f0f0f0; /* 背景颜色 */
}

/* 图片上传样式 */
.imageUpload {
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 图片上传按钮样式 */
.imageUploadButton {
    width: 130.55px; /* 宽度 */
    height: 200px; /* 高度 */
    border: 2px dashed #ccc; /* 边框样式 */
    display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    cursor: pointer; /* 鼠标指针样式 */
    font-size: 80px; /* 字体大小 */
    background-size: contain; /* 背景图最大程度缩放显示 */
    background-position: center; /* 背景图居中显示 */
    background-repeat: no-repeat; /* 背景图不重复显示 */
    padding: 20px; /* 内边距 */
}
.imageUploadButton {
    position: relative; /* 设置父元素为相对定位 */
}

.imageUploadButton::after {
    content: '';
    position: absolute;
    top: -25px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url(mb.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    /*opacity: 0.5;*/
}

/* 图片预览样式 */
.imagePreview {
    width: 180px; /* 宽度 */
    height: 240px; /* 高度 */
    margin-left: 10px; /* 左边距 */
     display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-size: contain; /* 图片最大程度缩放显示 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 图片不重复显示 */
    padding: 10px; /* 内边距 */
}

/* 确认上传按钮样式 */
#confirmUploadButton {
    display: block; /* 显示 */
    margin: 0 auto; /* 水平居中 */
}

/* 加载动画样式 */
.spinner {
    position: relative; /* 相对定位 */
    margin: 30px auto; /* 上下居中 */
    width: 50px; /* 宽度 */
    height: 30px; /* 高度 */
    text-align: center; /* 文本居中 */
    font-size: 10px; /* 字体大小 */
    z-index: 9999; /* 层级 */
}

/* 加载动画文本样式 */
.loading-text {
    position: absolute; /* 绝对定位 */
    top: 40px; /* 顶部偏移 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度 */
    color: #333; /* 文本颜色 */
}

/* 加载动画小方块样式 */
.spinner > div {
    background-color: #67CF22; /* 小方块背景颜色 */
    height: 100%; /* 高度 */
    width: 6px; /* 宽度 */
    margin-right: 3px; /* 右侧间距 */
    display: inline-block; /* 行内块元素 */
    z-index: 9999; /* 层级 */
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out; /* Webkit 动画 */
    animation: stretchdelay 1.2s infinite ease-in-out; /* 动画 */
}

/* 加载动画小方块动画延迟样式 */
.spinner .rect2 {
    -webkit-animation-delay: -1.1s; /* Webkit 动画延迟 */
    animation-delay: -1.1s; /* 动画延迟 */
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

/* 加载动画关键帧动画样式 */
@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 
    20% { -webkit-transform: scaleY(1.0); }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

.container {
    margin-left: 7%;
    margin-right: 10%;
    position: relative;
    overflow: hidden; 
    }

  .container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }