<style>  html {display:block;font-size:12px;}
* {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;}
body {margin:0;background-color:#004387;font-family:Arial,"Microsoft YaHei",sans-serif;display:block;font-size:12px;}
a {text-decoration:none;}
.bgdiv {position:absolute;top:0;left:0;right:0;bottom:0;-webkit-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:50%;}
.tishi {position:fixed;width:100%;text-align:center;bottom:20px;z-index:10;pointer-events:none;}
.animation {color:#deb683;font-size:18px;animation-iteration-count:infinite;animation-duration:1.8s;animation-name:mymove;text-shadow:0 2px 4px rgba(0,0,0,0.3);pointer-events:none;}
@keyframes mymove {0% {opacity:0;transform:translate3d(0,-100%,0);}
100% {opacity:1;}
}
.content-box {position:absolute;left:0;top:0;margin:0;padding:10px 0;box-sizing:border-box;border:0;font:inherit;vertical-align:baseline;min-height:100%;min-width:100%;display:flex;justify-content:center;align-items:center;background:#123881;background:linear-gradient(to bottom,#010204 0%,#123881 100%);}
.content-box .content-info2 {padding:3.333rem;background:#fff;border-radius:.833rem;}
.content-box .content-info {padding:2.5rem;background:#fff;border-radius:.833rem;width:90%;max-width:1480px;min-width:auto !important;margin:1rem auto;}
.content-title {font-size:1.6rem;color:#231e1c;padding-bottom:1.5rem;display:flex;align-items:center;white-space:nowrap;font-weight:bold;}
.content-title>.content-subtitle {font-size:1rem;display:inline;padding-top:0.3rem;font-weight:normal;color:#666;}
.content-title>.content-subtitle span {font-weight:bold;}
.input-view {padding:0;}
.input-view .title {width:33.333rem;font-size:1.8rem;font-family:PingFang SC;text-align:left;font-weight:400;color:#000;opacity:1;padding-bottom:.617rem;padding-top:1.033rem;}
.input-view .input {width:35.167rem;font-size:1.1rem;height:3.167rem;background:#fff;border:1px solid #c4c4c4;opacity:1;border-radius:.417rem;padding-left:.833rem;}
.btn-box {width:100%;margin-top:3rem;display:flex;justify-content:space-between;gap:2rem;}
.btn-common {width:100%;height:4rem;line-height:4rem;text-align:center;color:#fff;font-size:1.167rem;background:#004387;opacity:1;border-radius:.417rem;margin:auto;cursor:pointer;transition:background 0.3s ease;padding:0 2rem;}
.btn-common:hover {background:linear-gradient(to bottom,#010204 0%,#123881 100%);}
.btn-next {flex:1;height:4rem;line-height:4rem;text-align:center;color:#fff;font-size:1.367rem;background:#004387;opacity:1;border-radius:.417rem;cursor:pointer;transition:background 0.3s ease;display:block;text-decoration:none;padding:0 2rem;}
.btn-next:hover {background:#003366;}
.btn-prev {flex:1;height:4rem;line-height:4rem;text-align:center;color:#fff;font-size:1.367rem;background:#666;opacity:1;border-radius:.417rem;cursor:pointer;transition:background 0.3s ease;display:block;text-decoration:none;padding:0 2rem;}
.btn-prev:hover {background:#555;}
.btn-download {width:100%;height:4rem;line-height:4rem;text-align:center;color:#fff;background:#004387;opacity:1;border-radius:.417rem;margin:auto;cursor:pointer;transition:background 0.3s ease;padding:0 2rem;margin-top:1.5rem;font-size:1rem;text-decoration:none;display:block;min-width:26rem;}
.btn-download:hover {background:linear-gradient(to bottom,#010204 0%,#123881 100%);}
.up-tips {font-size:1.467rem;color:#004387;width:100%;padding-bottom:10px;justify-content:center;color:#004387;display:flex;align-items:center;white-space:nowrap;}
.tips {font-size:1.167rem;color:#004387;width:100%;padding-bottom:10px;}
/* 组别容器样式 - 优化为一行6个，左右无外边距 */.classly {display:flex;flex-wrap:wrap;justify-content:center;/* 使用space-between确保左右对齐 */  width:100%;margin:0 auto;padding:0;/* 移除内边距 */}
/* 组别项样式 - 确保一行6个，左右无间隙 */.classly-item {text-align:center;padding:0.417rem;box-sizing:border-box;cursor:pointer;position:relative;width:16.666%;/* 直接使用百分比，6个正好占满一行 */  flex:0 0 16.666%;/* 固定宽度，确保6个一行 */  transition:all 0.3s ease;border:2px solid transparent;border-radius:8px;background:transparent;margin:0;/* 移除外边距 */}
/* 移除左右边距的特定类 */.classly-item:nth-child(6n+1) {/* 每行的第一个 */  padding-left:0;}
.classly-item:nth-child(6n) {/* 每行的最后一个 */  padding-right:0;}
.classly-item.classly-item-active {border:2px solid #0066cc !important;box-shadow:0 5px 20px rgba(0,102,204,0.3);transform:translateY(-3px) scale(1.02);background:rgba(0,102,204,0.05);padding:0.417rem !important;/* 保持选中状态内边距 */  z-index:2;}
.classly-item-box {display:block;position:relative;overflow:hidden;border-radius:6px;height:100%;min-height:180px;}
.classly-item-box img {width:100%;height:15rem;object-fit:cover;transition:transform 0.5s ease,opacity 0.5s ease;opacity:0.9;}
.classly-item:hover .classly-item-box img,.classly-item-active .classly-item-box img {transform:scale(1.08);opacity:1;}
.classly-item-box-name {font-size:1.5rem;width:100%;text-align:center;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;text-shadow:0 0 0.333rem #000;pointer-events:none;padding:0.5rem;background:rgba(0,0,0,0.3);border-radius:4px;}
.classly-item-box-name-big {font-size:1.2rem;margin-bottom:0.5rem;}
.classly-item-box-name-small {font-size:0.8rem;opacity:0.9;}
.check-style-unequal-width {position:absolute;bottom:1rem;right:1rem;width:2rem;height:2rem;border-radius:50%;background-color:#0066cc;border:2px solid white;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);box-shadow:0 3px 8px rgba(0,0,0,0.3);z-index:10;}
.check-style-unequal-width::after {content:'';width:0.4rem;height:0.8rem;border:solid white;border-width:0 3px 3px 0;transform:rotate(45deg);margin-top:-2px;}
.classly-item-active .check-style-unequal-width {opacity:1;transform:scale(1);animation:checkPop 0.4s ease forwards;}
@keyframes checkPop {0% {transform:scale(0);opacity:0;}
70% {transform:scale(1.1);}
100% {transform:scale(1);opacity:1;}
}
.classly-item:hover {transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15);}
.classly-item:hover .check-style-unequal-width {opacity:0.7;transform:scale(0.8);}
@keyframes fadeInUp {from {opacity:0;transform:translateY(20px);}
to {opacity:1;transform:translateY(0);}
}
.classly-item {animation:fadeInUp 0.5s ease forwards;opacity:0;}
/* 动画延迟 */.classly-item:nth-child(1) {animation-delay:0.05s;}
.classly-item:nth-child(2) {animation-delay:0.1s;}
.classly-item:nth-child(3) {animation-delay:0.15s;}
.classly-item:nth-child(4) {animation-delay:0.2s;}
.classly-item:nth-child(5) {animation-delay:0.25s;}
.classly-item:nth-child(6) {animation-delay:0.3s;}
.classly-item:nth-child(7) {animation-delay:0.35s;}
.classly-item:nth-child(8) {animation-delay:0.4s;}
.classly-item:nth-child(9) {animation-delay:0.45s;}
.classly-item:nth-child(10) {animation-delay:0.5s;}
.classly-item:nth-child(11) {animation-delay:0.55s;}
@keyframes shake {0%,100% {transform:translateX(0);}
10%,30%,50%,70%,90% {transform:translateX(-5px);}
20%,40%,60%,80% {transform:translateX(5px);}
}
/* 移除所有移动端响应式媒体查询 */.category-selected-info {background:#f5f5f5;padding:1rem;margin:2rem 0;border-radius:0.5rem;font-size:1.2rem;border-left:4px solid #004387;}
/* 确保在PC端始终显示6个 */.classly-item {width:16.666% !important;flex:0 0 16.666% !important;}
.content-tips {margin-top:.833rem;font-size:1.33rem;width:33.333rem;color:#032e03;text-align:left;font-weight:bold;text-align:center;}
.wechat_pay {display:block;margin-left:auto;margin-right:auto;margin-top:.833rem}
#qrcode {margin-top:2.5rem;padding:.833rem;width:12.5rem;height:12.5rem;border:1px solid #004387;margin-left:auto;margin-right:auto}
#qrcode>img {width:100%}
/* 从step4.html复用的卡片式预览样式 */        .upload-preview-container {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:1rem;padding:1rem;}
.upload-preview-card {background:white;border-radius:0.5rem;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all 0.3s ease;position:relative;border:1px solid #e9ecef;}
.upload-preview-card:hover {transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,0.15);}
.preview-image {width:100%;height:160px;overflow:hidden;position:relative;background:#f8f9fa;}
.preview-image img {width:100%;height:100%;object-fit:contain;transition:transform 0.3s ease;}
.upload-preview-card:hover .preview-image img {transform:scale(1.05);}
.preview-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(49,38,32,0.8);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;}
.upload-preview-card:hover .preview-overlay {opacity:1;}
.preview-actions {display:flex;gap:0.5rem;}
.preview-btn {background:white;color:#312620;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;}
.preview-btn:hover {background:#312620;color:white;transform:scale(1.1);}
.preview-info {padding:1rem;}
.preview-title {margin-bottom:0.5rem;}
.preview-title h4 {margin:0;font-size:14px;font-weight:500;color:#333;text-align:center;word-break:break-word;}
.preview-meta {display:flex;justify-content:space-between;align-items:center;margin-top:0.5rem;}
.preview-id {font-size:.8rem;color:#999;}
.preview-index {font-size:.8rem;color:#666;font-weight:bold;}
.empty-state {text-align:center;padding:4rem 2rem;color:#999;grid-column:1 / -1;}
.empty-state i {font-size:4rem;margin-bottom:1rem;color:#dee2e6;}
.empty-state p {font-size:1.4rem;margin-bottom:1.5rem;}
.loading-spinner {display:inline-block;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #312620;border-radius:50%;animation:spin 1s linear infinite;margin-right:0.5rem;}
@keyframes spin {0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
/* 基本信息预览优化样式 */        .preview-info-container {background:#fff;border-radius:8px;padding:12px 15px;margin:10px 0;box-shadow:0 1px 5px rgba(0,0,0,0.08);display:flex;flex-wrap:wrap;gap:15px;align-items:center;}
.info-item {display:flex;flex-direction:column;padding:0 10px;border-right:1px solid #eee;min-width:180px;flex:1;}
.info-item:last-child {border-right:none;}
.info-label {font-size:12px;color:#666;margin-bottom:3px;}
.info-value {font-size:14px;font-weight:600;color:#312620;word-break:break-word;}
.tips {font-size:16px;margin:15px 0;padding:10px 15px;border-radius:5px;background:#f8f9fa;border-left:4px solid #312620;}
.tips_user {border-left-color:#3498db;}
.tips_tel {border-left-color:#2ecc71;}
.warning-box {background:#fff3cd;border:1px solid #ffeaa7;border-radius:5px;padding:15px;font-size:14px;color:#856404;}
.warning-box i {color:#f39c12;margin-right:10px;}
/* 响应式设计 */        @media (max-width:768px) {.upload-preview-container {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}
.preview-image {height:120px;}
.preview-title h4 {font-size:12px;}
.preview-info-container {flex-direction:column;align-items:flex-start;gap:8px;padding:10px;}
.info-item {border-right:none;border-bottom:1px solid #eee;padding-bottom:8px;width:100%;min-width:auto;}
.info-item:last-child {border-bottom:none;padding-bottom:0;}
}
@media (max-width:480px) {.upload-preview-container {grid-template-columns:repeat(2,1fr);}
}
/* 自定义模态框样式 */        .modal-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:10000;}
.modal-content {background:white;border-radius:8px;padding:30px;max-width:500px;width:90%;box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.modal-title {margin-bottom:20px;font-size:18px;color:#312620;text-align:center;}
.modal-body {margin-bottom:25px;text-align:center;}
.modal-footer {display:flex;justify-content:center;gap:15px;}
.modal-btn {padding:10px 25px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:all 0.3s ease;}
.modal-btn-confirm {background:#312620;color:white;}
.modal-btn-confirm:hover {background:#4a3c34;}
.modal-btn-cancel {background:#f8f9fa;color:#666;border:1px solid #ddd;}
.modal-btn-cancel:hover {background:#e9ecef;}
.step-indicator {display:flex;justify-content:center;align-items:center;margin:20px 0;gap:10px;}
.step-item {display:flex;flex-direction:column;align-items:center;gap:5px;}
.step-number {width:30px;height:30px;border-radius:50%;background:#ddd;color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;}
.step-number.active {background:#312620;}
.step-number.completed {background:#27ae60;}
.step-text {font-size:12px;color:#666;}
.progress-bar {width:100px;height:4px;background:#ddd;margin-top:13px;}
.progress-bar.completed {background:#27ae60;}
/* 支付表单样式 */        .pay-form-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10001;}
.pay-form-content {text-align:center;padding:30px;max-width:500px;}
.pay-form-loading {font-size:16px;color:#312620;margin-top:20px;}
/* step2 */.input-view {margin-bottom:20px;position:relative;}
.error-message {color:#e74c3c;font-size:14px;margin-top:5px;min-height:20px;display:none;}
.input.error {border-color:#e74c3c !important;}
.input.valid {border-color:#2ecc71 !important;}
.btn-common {transition:all 0.3s ease;}
.btn-common:disabled {opacity:0.6;cursor:not-allowed;}
.btn-loading {position:relative;color:transparent;}
.btn-loading::after {content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:btnSpin 0.8s linear infinite;}
@keyframes btnSpin {0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.input-hint {position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:14px;display:none;}
.input.error + .input-hint {display:block;color:#e74c3c;}
.input.valid + .input-hint {display:block;color:#2ecc71;}
.form-tip {color:#666;font-size:14px;margin-bottom:20px;text-align:center;}
/* step4 */

 /* 上传统计样式 */        .upload-stats {display:flex;justify-content:space-between;margin:2rem 0;background:#fff;border:1px solid #e9ecef;border-radius:0.5rem;padding:1.5rem;box-shadow:0 2px 4px rgba(0,0,0,0.05);}
.stat-item {text-align:center;flex:1;padding:0 1rem;}
.stat-value {font-size:1.2rem;font-weight:bold;color:#312620;line-height:1;}
.stat-label {font-size:.9rem;color:#666;margin-top:0.3rem;}
.stat-note {font-size:.7rem;color:#999;margin-top:0.3rem;}
/* 上传提示信息 */        .upload-hint {text-align:center;font-size:1rem;color:#666;margin-top:0.5rem;padding:0.5rem;background:#f8f9fa;border-radius:0.25rem;}
/* 上传组件样式优化 */        .upload-container {margin:2rem 0;}
.fileupload-buttonbar {background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:1.5rem;border-radius:0.5rem;margin-bottom:1rem;border:1px dashed #c4c4c4;transition:all 0.3s ease;text-align:center;position:relative;}
.fileupload-buttonbar:hover {border-color:#312620;background:linear-gradient(135deg,#e9ecef 0%,#dee2e6 100%);}
.btn.blue {background:#312620;color:white;border:none;padding:1rem 2rem;border-radius:0.25rem;cursor:pointer;font-size:1rem;transition:all 0.3s ease;display:inline-flex;align-items:center;justify-content:center;}
.btn.blue:hover {background:#4a362f;transform:translateY(-2px);box-shadow:0 4px 12px rgba(49,38,32,0.2);}
.btn.blue i {margin-right:0.8rem;font-size:1rem;}
.fileupload-process {margin-left:1rem;color:#666;font-size:1.3rem;}
.fileupload-progress {margin-top:1rem;}
.progress {height:1.2rem;background-color:#f5f5f5;border-radius:0.6rem;box-shadow:inset 0 1px 3px rgba(0,0,0,.2);overflow:hidden;}
.progress-bar-success {background:linear-gradient(90deg,#5cb85c 0%,#4cae4c 100%);border-radius:0.6rem;transition:width 0.3s ease;}
/* 上传进度容器 */        .upload-progress-container {margin:1.5rem 0;padding:1rem;background:#f8f9fa;border-radius:0.5rem;border:1px solid #e9ecef;}
.progress-info {display:flex;justify-content:space-between;margin-bottom:0.5rem;font-size:0.9rem;}
.progress-text {color:#312620;font-weight:bold;}
.progress-percentage {color:#666;}
/* 全局上传进度条 */        .global-progress {height:0.8rem;background-color:#e9ecef;border-radius:0.4rem;overflow:hidden;margin-top:0.5rem;}
.global-progress-bar {height:100%;background:linear-gradient(90deg,#312620 0%,#4a362f 100%);border-radius:0.4rem;transition:width 0.3s ease;width:0%;}
/* 优化卡片式预览布局 */        .upload-preview-container {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem;margin-top:1rem;padding:1rem 0;}
.upload-preview-card {background:white;border-radius:0.5rem;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all 0.3s ease;position:relative;border:1px solid #e9ecef;}
.upload-preview-card:hover {transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.15);}
.preview-image {width:100%;height:160px;overflow:hidden;position:relative;background:#f8f9fa;}
.preview-image img {width:100%;height:100%;object-fit:contain;transition:transform 0.3s ease;}
.preview-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(49,38,32,0.8);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;}
.upload-preview-card:hover .preview-overlay {opacity:1;}
.preview-actions {display:flex;gap:0.5rem;}
.preview-btn {background:white;color:#312620;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;}
.preview-btn:hover {background:#312620;color:white;transform:scale(1.1);}
.preview-info {padding:1rem;}
.preview-title {margin-bottom:0.5rem;}
.preview-title input {width:100%;padding:0.4rem 0.6rem;border:1px solid #e9ecef;border-radius:0.25rem;transition:all 0.2s;font-size:.8rem;}
.preview-title input:focus {outline:none;border-color:#312620;box-shadow:0 0 0 3px rgba(49,38,32,0.1);}
.preview-title input.error {border-color:#e74c3c;box-shadow:0 0 0 3px rgba(231,76,60,0.1);}
.preview-meta {display:flex;justify-content:space-between;align-items:center;margin-top:0.5rem;}
.preview-id {font-size:.8rem;color:#999;}
.delete-btn {background:#e74c3c;color:white;border:none;padding:0.6rem 0.6rem;border-radius:0.25rem;font-size:.8rem;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;gap:0.4rem;}
.delete-btn:hover {background:#c0392b;transform:scale(1.05);}
.delete-btn i {font-weight:normal !important;}
/* 空状态提示 */        .empty-state {text-align:center;padding:4rem 2rem;color:#999;grid-column:1 / -1;}
.empty-state i {font-size:4rem;margin-bottom:1rem;color:#dee2e6;}
.empty-state p {font-size:1.4rem;}
/* 加载状态 */        .loading-spinner {display:inline-block;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #312620;border-radius:50%;animation:spin 1s linear infinite;margin-right:0.5rem;}
@keyframes spin {0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
/* 文件大小提示 */        .file-size-hint {font-size:0.9rem;color:#666;margin-top:0.5rem;text-align:center;}
/* 文件上传状态提示 */        .file-upload-status {display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding:0.5rem;background:#f8f9fa;border-radius:0.25rem;border:1px solid #e9ecef;}
.upload-count-display {font-size:.8rem;color:#312620;font-weight:bold;}
.upload-count-display span {color:#5cb85c;}
.upload-count-display .remaining {color:#f0ad4e;}
/* 上传弹窗模态框 */
.upload-modal {display: none !important;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:all 0.3s ease;}
.upload-modal.active {display: flex !important;opacity:1;visibility:visible;}
.upload-modal-content {background:white;width:90%;max-width:500px;border-radius:12px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,0.3);transform:translateY(20px);transition:transform 0.3s ease;}
.upload-modal.active .upload-modal-content {transform:translateY(0);}
.upload-modal-header {text-align:center;margin-bottom:2rem;}
.upload-modal-title {font-size:1.5rem;color:#312620;margin-bottom:0.5rem;}
.upload-modal-subtitle {color:#666;font-size:0.9rem;}
.upload-modal-body {margin-bottom:2rem;}
.upload-file-list {max-height:200px;overflow-y:auto;margin-bottom:1.5rem;padding:1rem;background:#f8f9fa;border-radius:8px;}
.upload-file-item {display:flex;align-items:center;justify-content:space-between;padding:0.5rem;border-bottom:1px solid #e9ecef;}
.upload-file-item:last-child {border-bottom:none;}
.file-name {flex:1;font-size:0.9rem;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-status {font-size:0.8rem;padding:0.2rem 0.5rem;border-radius:4px;margin-left:0.5rem;}
.file-status.uploading {background:#e3f2fd;color:#1976d2;}
.file-status.success {background:#e8f5e9;color:#388e3c;}
.file-status.error {background:#ffebee;color:#d32f2f;}
.upload-modal-progress {margin-top:1rem;}
.progress-total {margin-bottom:1rem;}
.progress-detail {display:flex;justify-content:space-between;margin-bottom:0.5rem;}
.progress-count {font-size:0.9rem;color:#666;}
.modal-progress-bar {height:10px;background:#e9ecef;border-radius:5px;overflow:hidden;}
.modal-progress-fill {height:100%;background:linear-gradient(90deg,#312620 0%,#4a362f 100%);border-radius:5px;width:0%;transition:width 0.3s ease;}
.upload-modal-footer {text-align:center;}
.btn-confirm {background:#312620;color:white;border:none;padding:0.8rem 2rem;border-radius:6px;font-size:1rem;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;justify-content:center;}
.btn-confirm:hover {background:#4a362f;transform:translateY(-2px);}
.btn-confirm:disabled {background:#ccc;cursor:not-allowed;transform:none;}
.progress-percent {font-weight:bold;color:#312620;}
/* 上传成功提示模态框 */        .success-modal {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:all 0.3s ease;}
.success-modal.active {opacity:1;visibility:visible;}
.success-modal-content {background:white;width:90%;max-width:400px;border-radius:12px;padding:2.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.3);transform:translateY(20px);transition:transform 0.3s ease;text-align:center;}
.success-modal.active .success-modal-content {transform:translateY(0);}
.success-icon {width:60px;height:60px;background:#5cb85c;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;}
.success-icon i {color:white;font-size:28px;}
.success-title {font-size:1.2rem;color:#312620;margin-bottom:0.5rem;font-weight:600;}
.success-message {font-size:0.9rem;color:#666;line-height:1.5;}
.success-modal-footer {margin-top:1.5rem;}
.btn-ok {background:#312620;color:white;border:none;padding:0.6rem 2rem;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;justify-content:center;}
.btn-ok:hover {background:#4a362f;transform:translateY(-2px);}
/* 错误提示模态框 */        .error-modal {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:all 0.3s ease;}
.error-modal.active {opacity:1;visibility:visible;}
.error-modal-content {background:white;width:90%;max-width:400px;border-radius:12px;padding:2.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.3);transform:translateY(20px);transition:transform 0.3s ease;text-align:center;}
.error-modal.active .error-modal-content {transform:translateY(0);}
.error-icon {width:60px;height:60px;background:#e74c3c;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;}
.error-icon i {color:white;font-size:28px;}
.error-title {font-size:1.2rem;color:#312620;margin-bottom:0.5rem;font-weight:600;}
.error-message {font-size:0.9rem;color:#666;line-height:1.5;margin-bottom:1rem;}
.error-details {font-size:0.85rem;color:#888;background:#f9f9f9;padding:0.8rem;border-radius:8px;margin-top:1rem;}
.error-modal-footer {margin-top:1.5rem;display:flex;gap:1rem;justify-content:center;}
.btn-cancel {background:#95a5a6;color:white;border:none;padding:0.6rem 1.5rem;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;justify-content:center;}
.btn-cancel:hover {background:#7f8c8d;transform:translateY(-2px);}
.btn-fix {background:#312620;color:white;border:none;padding:0.6rem 1.5rem;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;justify-content:center;}
.btn-fix:hover {background:#4a362f;transform:translateY(-2px);}
/* 响应式设计 */        @media (max-width:768px) {.upload-stats {flex-direction:column;gap:1rem;}
.stat-item {padding:0.5rem 0;border-bottom:1px solid #e9ecef;}
.stat-item:last-child {border-bottom:none;}
.upload-preview-container {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}
.preview-image {height:120px;}
.file-upload-status {flex-direction:column;gap:0.5rem;text-align:center;}
.upload-modal-content {width:95%;padding:1.5rem;}
.success-modal-content {width:95%;padding:2rem;}
.error-modal-content {width:95%;padding:1.5rem;}
.error-modal-footer {flex-direction:column;gap:0.5rem;}
}
@media (max-width:480px) {.upload-preview-container {grid-template-columns:repeat(2,1fr);}
.success-modal-content {padding:1.5rem;}
.error-modal-content {padding:1.5rem;}
.success-icon {width:50px;height:50px;margin-bottom:1rem;}
.error-icon {width:50px;height:50px;margin-bottom:1rem;}
.success-icon i {font-size:24px;}
.error-icon i {font-size:24px;}
.success-title {font-size:1.1rem;}
.error-title {font-size:1.1rem;}
.success-message {font-size:0.85rem;}
.error-message {font-size:0.85rem;}
} /* 检测弹窗样式 */        .check-modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;}
.check-modal.active {display:flex;}
.check-modal-content {background:white;border-radius:12px;width:90%;max-width:600px;max-height:80vh;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
.check-modal-header {padding:24px 24px 16px;text-align:center;border-bottom:1px solid #eee;}
.check-modal-title {margin:0 0 8px;font-size:20px;font-weight:600;color:#333;}
.check-modal-subtitle {margin:0;color:#666;font-size:14px;}
.check-modal-body {padding:20px 24px;max-height:50vh;overflow-y:auto;}
.check-section {margin-bottom:24px;}
.check-section:last-child {margin-bottom:0;}
.check-section-header {display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.check-section-header h4 {margin:0;font-size:16px;font-weight:600;color:#333;}
.valid-icon {color:#5cb85c;font-size:18px;}
.invalid-icon {color:#f0ad4e;font-size:18px;}
.count-badge {display:inline-block;background:#f0f0f0;color:#666;font-size:12px;padding:2px 8px;border-radius:10px;margin-left:6px;}
.check-file-list {background:#f8f9fa;border-radius:8px;padding:8px;max-height:200px;overflow-y:auto;}
.check-file-item {display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:white;border-radius:6px;margin-bottom:8px;border-left:4px solid #5cb85c;}
.check-file-item.invalid {border-left-color:#f0ad4e;}
.check-file-item:last-child {margin-bottom:0;}
.file-info {display:flex;align-items:center;gap:12px;flex:1;}
.file-icon {color:#5bc0de;font-size:18px;}
.file-details {flex:1;min-width:0;}
.file-name {font-weight:500;color:#333;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-size {font-size:12px;color:#999;}
.file-status {display:flex;align-items:center;gap:6px;font-size:13px;}
.status-icon {font-size:14px;}
.check-file-item .valid .status-icon {color:#5cb85c;}
.check-file-item .invalid .status-icon {color:#f0ad4e;}
.check-tips {margin-top:20px;padding:12px;background:#f0f9f0;border-radius:6px;border-left:4px solid #5cb85c;}
.tip-item {display:flex;align-items:center;gap:8px;}
.tip-icon {color:#5cb85c;font-size:14px;}
.check-modal-footer {padding:20px 24px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:12px;}
.btn-cancel {padding:10px 20px;background:#f8f9fa;border:1px solid #ddd;border-radius:6px;color:#666;font-size:14px;cursor:pointer;transition:all 0.3s;}
.btn-cancel:hover {background:#e9ecef;}
/* 简洁汇总信息样式 */        .upload-summary-section {padding:20px;text-align:center;}
.upload-summary-header {margin-bottom:25px;}
.summary-icon {width:60px;height:60px;border-radius:50%;background:#5cb85c;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;}
.summary-icon i {font-size:30px;color:white;}
.upload-summary-header h4 {margin:0 0 8px;font-size:20px;color:#333;font-weight:600;}
.summary-subtitle {margin:0;color:#666;font-size:14px;}
/* 简洁统计信息 */        .summary-stats-simple {margin:0 auto 25px;max-width:400px;}
.stats-row {display:flex;justify-content:space-around;gap:15px;}
.stat-item {flex:1;text-align:center;}
.stat-number {font-size:28px;font-weight:700;margin-bottom:5px;color:#333;}
.stat-success {color:#5cb85c;}
.stat-warning {color:#f0ad4e;}
.stat-label {font-size:13px;color:#666;}
/* 隐藏文件上传组件的进度条 */        .fileupload-progress {display:none !important;}

/* step5.css */
.preview-actions {display:flex;gap:0.5rem;}
.preview-btn {background:white;color:#312620;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;}
.preview-btn:hover {background:#312620;color:white;transform:scale(1.1);}
.preview-info {padding:1rem;}
.preview-title {margin-bottom:0.5rem;}
.preview-title h4 {margin:0;font-size:14px;font-weight:500;color:#333;text-align:center;word-break:break-word;}
.preview-meta {display:flex;justify-content:space-between;align-items:center;margin-top:0.5rem;}
.preview-id {font-size:.8rem;color:#999;}
.preview-index {font-size:.8rem;color:#666;font-weight:bold;}
.empty-state {text-align:center;padding:4rem 2rem;color:#999;grid-column:1 / -1;}
.empty-state i {font-size:4rem;margin-bottom:1rem;color:#dee2e6;}
.empty-state p {font-size:1.4rem;margin-bottom:1.5rem;}
.loading-spinner {display:inline-block;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #312620;border-radius:50%;animation:spin 1s linear infinite;margin-right:0.5rem;}
@keyframes spin {0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
/* 基本信息预览优化样式 */.preview-info-container {background:#fff;border-radius:8px;padding:12px 15px;margin:10px 0;box-shadow:0 1px 5px rgba(0,0,0,0.08);display:flex;flex-wrap:wrap;gap:15px;align-items:center;}
.info-item {display:flex;flex-direction:column;padding:0 10px;border-right:1px solid #eee;min-width:180px;flex:1;}
.info-item:last-child {border-right:none;}
.info-label {font-size:12px;color:#666;margin-bottom:3px;}
.info-value {font-size:14px;font-weight:600;color:#312620;word-break:break-word;}
.tips {font-size:16px;margin:15px 0;padding:10px 15px;border-radius:5px;background:#f8f9fa;border-left:4px solid #312620;}
.tips_user {border-left-color:#3498db;}
.tips_tel {border-left-color:#2ecc71;}
.warning-box {background:#fff3cd;border:1px solid #ffeaa7;border-radius:5px;padding:15px;font-size:14px;color:#856404;}
.warning-box i {color:#f39c12;margin-right:10px;}
/* 响应式设计 */        @media (max-width:768px) {.upload-preview-container {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}
.preview-image {height:120px;}
.preview-title h4 {font-size:12px;}
.preview-info-container {flex-direction:column;align-items:flex-start;gap:8px;padding:10px;}
.info-item {border-right:none;border-bottom:1px solid #eee;padding-bottom:8px;width:100%;min-width:auto;}
.info-item:last-child {border-bottom:none;padding-bottom:0;}
}
@media (max-width:480px) {.upload-preview-container {grid-template-columns:repeat(2,1fr);}
}
/* 从step4.html复用的模态框样式 */

.upload-modal-header {text-align:center;margin-bottom:1.5rem;}
.upload-modal-icon {width:60px;height:60px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.upload-modal-icon i {color:#312620;font-size:40px;}
.upload-modal-title {font-size:1.2rem;color:#312620;margin-bottom:0.5rem;font-weight:600;}
.upload-modal-message {font-size:0.9rem;color:#666;line-height:1.5;text-align:center;margin-bottom:1.5rem;}
.upload-modal-body {margin-bottom:1.5rem;}
.upload-modal-footer {display:flex;justify-content:center;gap:1rem;}
.modal-btn {padding:0.6rem 1.5rem;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease;border:none;min-width:80px;text-align:center;display:inline-flex;align-items:center;justify-content:center;}
.modal-btn-confirm {background:#312620;color:white;}
.modal-btn-confirm:hover {background:#4a362f;transform:translateY(-2px);}
.modal-btn-cancel {background:#f8f9fa;color:#666;border:1px solid #e9ecef;}
.modal-btn-cancel:hover {background:#e9ecef;transform:translateY(-2px);}
.modal-btn-ok {background:#312620;color:white;padding:0.6rem 2rem;}
.modal-btn-ok:hover {background:#4a362f;transform:translateY(-2px);}
/* 提交按钮加载状态 */
.btn-loading {position:relative;pointer-events:none;opacity:0.8;}
.btn-loading:after {content:'';position:absolute;width:20px;height:20px;top:50%;left:50%;margin-left:-10px;margin-top:-10px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 1s linear infinite;}
.modal-btn-confirm.btn-loading:after {border:2px solid rgba(255,255,255,0.3);border-top-color:white;}
