*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#f5f2ed;color:#2c2418;min-height:100vh}
.header{background:#fff;border-bottom:1px solid #e8e0d4;padding:20px 24px;position:relative}
.header .back{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:#8a7a60;text-decoration:none;font-size:13px;letter-spacing:1px}
.header .back:hover{color:#4a3a2a}
.header h1{font-size:20px;font-weight:600;letter-spacing:2px;text-align:center;color:#1a1410}
.header p{font-size:12px;color:#8a7a60;text-align:center;margin-top:2px;letter-spacing:1px}
.container{max-width:680px;margin:0 auto;padding:24px 20px}
.tool-card{background:#fff;border-radius:16px;border:1px solid #e8e0d4;padding:32px 24px}

.upload-area{border:2px dashed #d8d0c4;border-radius:14px;padding:48px 20px;text-align:center;cursor:pointer;transition:all 0.3s}
.upload-area:hover,.upload-area.dragover{border-color:#b09070;background:#faf8f5}
.upload-area .icon{font-size:42px;margin-bottom:8px}
.upload-area .title{font-size:15px;color:#2c2418;font-weight:500}
.upload-area .sub{font-size:13px;color:#8a7a60;margin-top:4px}
.upload-area input{display:none}
.file-info{display:none;margin-top:12px;padding:10px 14px;background:#f8f5f0;border-radius:8px;font-size:13px;color:#4a3a2a}

.btn{display:block;width:100%;margin-top:16px;padding:14px;border:none;border-radius:10px;background:#2c2418;color:#f0ece6;font-size:15px;font-weight:500;letter-spacing:2px;cursor:pointer;transition:all 0.3s;font-family:inherit}
.btn:hover{background:#3a3024}
.btn:disabled{background:#c8c0b4;cursor:not-allowed}
.btn.loading{background:#8a7a60;pointer-events:none}
.download-btn{display:inline-block;padding:10px 24px;border:none;border-radius:8px;background:#4a6a3a;color:#f0ece6;font-size:14px;cursor:pointer;letter-spacing:2px;text-decoration:none;font-family:inherit}
.download-btn:hover{background:#5a7a4a}

.options{display:flex;flex-wrap:wrap;gap:12px;padding:16px 0;align-items:center}
.options label{font-size:13px;color:#4a3a2a}
.options select{padding:6px 10px;border:1px solid #d8d0c4;border-radius:6px;font-size:13px;background:#fff;font-family:inherit}
.options input[type="range"]{width:100px;vertical-align:middle}

.progress{margin-top:16px}
.progress-bar{height:4px;background:#e8e0d4;border-radius:2px;overflow:hidden}
.progress-bar span{display:block;height:100%;width:0%;background:#b09070;border-radius:2px;transition:width 0.3s}
.progress-text{font-size:12px;color:#8a7a60;text-align:center;margin-top:6px;letter-spacing:1px}

.preview-title{font-size:13px;color:#6a5a4a;margin:12px 0 8px;letter-spacing:1px}
.preview-content{background:#faf8f5;border-radius:8px;padding:16px;max-height:260px;overflow-y:auto;font-size:13px;line-height:1.7;color:#3a3024}
.preview-flex{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.preview-flex img{max-width:200px;max-height:200px;border-radius:8px;border:1px solid #e8e0d4}

.result{margin-top:16px;padding:20px;background:#f8faf5;border-radius:12px;border:1px solid #d8e0cc}
.result h3{font-size:15px;color:#2c2418;font-weight:500;margin-bottom:8px}
.result-info{font-size:13px;color:#6a5a4a;line-height:1.7;margin-bottom:12px}

.tip{text-align:center;font-size:12px;color:#8a7a60;margin-top:12px;letter-spacing:1px}

@media(max-width:480px){.header .back{position:static;display:block;text-align:center;margin-bottom:8px;transform:none}}