*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:#222;background:#fafafa}
.container{max-width:980px;margin:24px auto;padding:0 16px}
h1{font-size:22px;margin:0 0 16px}
.uploader{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.file-btn{display:inline-block;position:relative;overflow:hidden;background:#2563eb;color:#fff;padding:8px 14px;border-radius:6px;cursor:pointer}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-zone{flex:1;min-width:220px;border:1px dashed #cbd5e1;border-radius:6px;padding:10px 12px;color:#475569;background:#fff}
.file-name{color:#64748b}
.controls{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.control{display:flex;flex-direction:column;gap:6px}
.control input[type="number"]{width:120px;padding:6px 8px;border:1px solid #e2e8f0;border-radius:6px}
.control input[type="color"]{width:48px;height:36px;padding:2px;border:1px solid #e2e8f0;border-radius:6px}
.text-area{margin:10px 0 6px;display:flex;flex-direction:column;gap:6px}
textarea{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:6px;resize:vertical;background:#fff}
.tips{font-size:12px;color:#64748b}
.actions{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
button{padding:10px 14px;border:0;border-radius:8px;background:#10b981;color:#fff;cursor:pointer}
button[disabled]{opacity:.5;cursor:not-allowed}
#saveBtn{background:#0ea5e9}
.status{color:#64748b}
.preview{border:1px solid #e2e8f0;background:#fff;border-radius:8px;padding:12px;display:flex;justify-content:center;align-items:center;min-height:320px}
canvas{max-width:100%;height:auto;display:block}