:root{color:#1e2a36;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Avenir Next,PingFang SC,Helvetica Neue,sans-serif;font-weight:400;line-height:1.5}body{margin:0}#root{min-height:100vh}:root{font-family:Avenir Next,PingFang SC,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{color:#1e2a36;background:radial-gradient(circle at 15% 10%,#ffe6c7 0,#ffe6c700 35%),radial-gradient(circle at 85% 90%,#cfe8ff 0,#cfe8ff00 40%),linear-gradient(135deg,#f7f3ea,#f2f7ff 45%,#eef6ef);min-height:100vh;margin:0}.app{max-width:1400px;margin:0 auto;padding:24px}.top{margin-bottom:18px}.top h1{letter-spacing:.02em;margin:0;font-size:44px}.top p{color:#405163;margin:8px 0 0}.lang-toggle{cursor:pointer;color:#1f6feb;background:#eaf2fd;border:1px solid #1f6feb;border-radius:8px;padding:4px 14px;font-size:14px;font-weight:600;transition:background .15s,color .15s}.lang-toggle:hover{color:#fff;background:#1f6feb}.grid{grid-template-columns:1.1fr 1.8fr 1.1fr;align-items:start;gap:16px;display:grid}.panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffb8;border:1px solid #ffffffd9;border-radius:18px;padding:14px;box-shadow:0 12px 30px #1f2a4414}.grid>aside:first-child,.grid>aside:last-child{max-height:85vh;position:sticky;top:16px;overflow-y:auto}.panel h2,.panel h3{margin:0 0 12px}.upload{color:#fff;cursor:pointer;background:#1f6feb;border-radius:10px;align-items:center;gap:8px;padding:8px 12px;font-weight:600;display:inline-flex}.upload input{display:none}.list-toolbar{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.list-toolbar button{border-radius:8px;padding:4px 8px;font-size:12px}.list{gap:10px;margin:12px 0 0;padding:0;list-style:none;display:grid}.list li{cursor:pointer;background:#ffffffc4;border:1px solid #d9e3f0;border-radius:10px;padding:8px;transition:border-color .15s}.list li:hover{border-color:#a0c4f1}.list li.selected{background:#eaf2fd;border-color:#1f6feb}.item-head{justify-content:space-between;align-items:flex-start;gap:6px;display:flex}.item-head .thumb{object-fit:cover;border:1px solid #dbe4ef;border-radius:6px;flex-shrink:0;width:40px;height:40px}.item-head .row-btn{flex-shrink:0;margin-top:0}.list strong{word-break:break-all;text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:13px;display:block;overflow:hidden}.list span{color:#607387;font-size:12px}.item-tools{border-top:1px solid #d0dce8;margin-top:8px;padding-top:8px}.item-tools>label{color:#3f5368;margin-bottom:2px;font-size:12px;display:block}.item-tools>input[type=range]{width:100%;margin-bottom:6px}.row-btn{gap:6px;margin-top:8px;display:flex}button,select,input{font:inherit}button{cursor:pointer;background:#eef3f9;border:0;border-radius:8px;padding:7px 10px}button:hover{background:#dde7f4}button.active{color:#fff;background:#1f6feb}button:disabled{cursor:not-allowed;opacity:.6}.preview-panel{min-height:200px}.canvas-wrap{background:repeating-conic-gradient(#edf2f8 0 25%, #fff 0 50%) 50% / 20px 20px;border:2px solid #dbe4ef;border-radius:12px;width:100%;padding:8px;transition:border-color .2s,box-shadow .2s;overflow:auto}.canvas-wrap.drag-highlight{border-color:#1f6feb;box-shadow:0 0 0 3px #1f6feb33}.canvas-wrap canvas{max-width:100%;height:auto;margin:0 auto;display:block}.canvas-empty{color:#8a9bb0;-webkit-user-select:none;user-select:none;background:#f8fafc;border:2px dashed #c0d0e0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:260px;font-size:15px;display:flex}.canvas-empty p:first-child{margin:0;font-size:40px}.canvas-empty p:last-child{margin:0}.list li[draggable]{cursor:grab}.list li[draggable]:active{cursor:grabbing}.list li.drag-over-before{box-shadow:0 -2px #1f6feb}.list li.drag-over-after{box-shadow:0 2px #1f6feb}.tip{color:#57708a;margin-top:10px;font-size:13px}.field{margin-bottom:10px}.field label{color:#3f5368;margin-bottom:6px;font-size:13px;display:block}.field input,.field select{background:#fff;border:1px solid #c9d8e8;border-radius:9px;width:100%;padding:7px 8px}.field.two,.export-btns{grid-template-columns:1fr 1fr;gap:8px;display:grid}.export-btns button{color:#fff;background:#102b56;font-weight:600}.export-btns button:hover{background:#18396e}.tip-inline{color:#8a9bb0;font-size:13px;font-weight:400}.crop-controls{width:100%;margin-top:6px}.crop-controls>button{color:#1a4a8a;background:#e0ecfa;width:100%;margin-bottom:6px;padding:6px 0;font-size:13px}.crop-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;display:grid}.crop-grid label{flex-direction:column;align-items:center;gap:2px;font-size:12px;display:flex}.crop-grid input[type=number]{text-align:center;border:1px solid #c0d0e0;border-radius:5px;width:52px;padding:3px 4px;font-size:13px}.text-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.text-list li{cursor:pointer;background:#ffffffc4;border:1px solid #d9e3f0;border-radius:8px;padding:8px}.text-list li.selected{background:#eaf2fd;border-color:#1f6feb}.text-item-head{align-items:center;gap:6px;display:flex}.text-item-head textarea{resize:vertical;background:#fff;border:1px solid #c9d8e8;border-radius:6px;flex:1;padding:4px 6px;font-family:inherit;font-size:13px;line-height:1.4}.text-item-tools{border-top:1px solid #d0dce8;margin-top:6px;padding-top:6px}.text-item-tools .tip{margin:4px 0 0;font-size:11px}.crop-editor{text-align:center}.crop-img-wrap{-webkit-user-select:none;user-select:none;max-width:100%;line-height:0;display:inline-block;position:relative}.crop-img-wrap img{object-fit:contain;max-width:100%;max-height:60vh;display:block}.crop-mask{pointer-events:none;background:#00000073;position:absolute}.crop-handle{z-index:2;position:absolute}.crop-h{cursor:ns-resize;background:#1f6feb99;height:6px;margin-top:-3px;left:0;right:0}.crop-h:hover,.crop-v:hover{background:#1f6febe6}.crop-v{cursor:ew-resize;background:#1f6feb99;width:6px;margin-left:-3px;top:0;bottom:0}.crop-actions{justify-content:center;gap:8px;margin-top:10px;display:flex}.crop-actions button{padding:6px 16px;font-size:14px}@media (width<=1024px){.app{padding:12px}.top h1{font-size:28px}.top p{font-size:13px}.grid{grid-template-columns:1fr;gap:12px}.grid>aside:first-child,.grid>aside:last-child{max-height:none;position:static;overflow-y:visible}.preview-panel{min-height:auto}.panel{border-radius:14px;padding:10px}.item-head .thumb{width:32px;height:32px}.field.two{grid-template-columns:1fr 1fr}.export-btns{grid-template-columns:1fr}.crop-grid{grid-template-columns:1fr 1fr;gap:8px}.crop-h{height:12px;margin-top:-6px}.crop-v{width:12px;margin-left:-6px}}@media (width<=480px){.app{padding:8px}.top h1{font-size:22px}.row-btn{gap:4px}.row-btn button{padding:5px 7px;font-size:12px}.canvas-empty{min-height:180px;font-size:13px}.canvas-empty p:first-child{font-size:28px}}.badge{color:#fff;vertical-align:middle;background:#1f6feb;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 6px;font-size:12px;font-weight:600;display:inline-flex}.btn-danger:hover{color:#c53030;background:#fde8e8!important}.upload-secondary{margin-top:8px;padding:8px 20px;font-size:14px}.crop-tip{color:#57708a;margin:0 0 8px;font-size:13px}.export-btns+.tip{text-align:center;margin-top:6px}.canvas-wrap{position:relative}.panel h3{border-top:1px solid #e0e8f0;margin-top:14px;padding-top:10px}.color-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.color-swatch{cursor:pointer;flex-shrink:0;width:32px;height:32px;position:relative;margin:0!important;display:block!important}.color-swatch input[type=color]{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.color-preview{border:2px solid #d0dce8;border-radius:8px;width:32px;height:32px;transition:border-color .15s;display:block;box-shadow:0 1px 3px #00000014}.color-swatch:hover .color-preview{border-color:#1f6feb}.color-hex{color:#57708a;text-transform:uppercase;min-width:60px;font-family:SF Mono,Menlo,monospace;font-size:12px}.color-presets{flex-wrap:wrap;gap:4px;display:flex}.color-dot{cursor:pointer;border:2px solid #d0dce8;border-radius:50%;width:20px;height:20px;padding:0;transition:border-color .15s,transform .1s;box-shadow:0 1px 2px #0000000f}.color-dot:hover{border-color:#7aafff;transform:scale(1.15);background-color:inherit!important}.color-dot.active{border-color:#1f6feb;box-shadow:0 0 0 2px #1f6feb33}input[type=range]{appearance:none;background:#dde7f4;border-radius:3px;outline:none;height:6px;border:none!important;padding:0!important}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#1f6feb;border:2px solid #fff;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 1px 4px #1f6feb4d}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{cursor:pointer;background:#1f6feb;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #1f6feb4d}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23607387'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:28px!important}input[type=checkbox]{accent-color:#1f6feb;vertical-align:middle;width:16px;height:16px;margin-right:4px}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button{opacity:1}input[type=number]::-webkit-outer-spin-button{opacity:1}.toast{color:#fff;z-index:999;background:#1e2a36ee;border-radius:10px;padding:10px 22px;font-size:14px;font-weight:500;animation:.25s toast-in;position:fixed;bottom:32px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000026}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.footer{text-align:center;color:#8097ad;justify-content:center;gap:8px;padding:24px 0 12px;font-size:13px;display:flex}.footer a{color:#1f6feb;text-decoration:none}.footer a:hover{text-decoration:underline}