: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}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand-text{letter-spacing:.01em;color:#1e2a36;margin:0;font-size:34px;line-height:1}.web-logo{object-fit:contain;filter:brightness(0)saturate();width:auto;max-width:min(560px,82vw);height:108px;display:block}.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{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:box-shadow .15s}.list li:hover{box-shadow:0 0 0 1px #a0c4f1}.list li.selected{background:#eaf2fd;border-color:#1f6feb;box-shadow:0 0 0 1px #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}.preview-meta-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px;display:flex}.preview-meta-row .tip{white-space:nowrap;margin:0}.preview-quality-inline{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.preview-quality-inline label{color:#405163;white-space:nowrap;font-size:13px}.preview-quality-inline input[type=range]{flex:1;min-width:80px}.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}.tip.tip-warn{color:#a15c00}.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{grid-template-columns:1fr 1fr;gap:8px;display:grid}.field-compact-row>.field{margin-bottom:0}.field-compact label{margin-bottom:4px;font-size:12px}.select-wrap{position:relative}.select-wrap:before{content:"≡";color:#6f8297;pointer-events:none;font-size:11px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.select-wrap:after{content:"▾";color:#6f8297;pointer-events:none;font-size:12px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.select-wrap select{appearance:none;padding-left:28px;padding-right:28px}.field-compact .select-wrap select{padding-top:6px;padding-bottom:6px;font-size:13px}.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;touch-action:none;overscroll-behavior:contain;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-selection{z-index:1;cursor:move;background:#ffffff0a;border-radius:2px;position:absolute;box-shadow:inset 0 0 0 1px #ffffff8c}.crop-handle{z-index:2;touch-action:none;-webkit-tap-highlight-color:transparent;position:absolute}.crop-handle:active{filter:brightness(1.08)}.crop-h{cursor:ns-resize;background:0 0;justify-content:center;align-items:center;height:28px;display:flex;left:0;right:0}.crop-h:before{content:"";background:repeating-linear-gradient(90deg,#1f6febcc 0 8px,#0000 8px 14px);height:2px;transition:background .15s;position:absolute;left:0;right:0}.crop-h-start:before{top:0}.crop-h-end:before{bottom:0}.crop-h:after{content:"⠿";z-index:1;color:#fff;opacity:0;pointer-events:none;background:#1f6feb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;line-height:1;transition:opacity .15s,transform .15s;display:flex;position:relative;transform:rotate(90deg)scale(.7)}.crop-h:hover:before{background:repeating-linear-gradient(90deg,#1f6feb 0 8px,#0000 8px 14px)}.crop-h:hover:after{opacity:1;transform:rotate(90deg)scale(1)}.crop-v{cursor:ew-resize;background:0 0;justify-content:center;align-items:center;width:28px;display:flex;top:0;bottom:0}.crop-v:before{content:"";background:repeating-linear-gradient(#1f6febcc 0 8px,#0000 8px 14px);width:2px;transition:background .15s;position:absolute;top:0;bottom:0}.crop-v-start:before{left:0}.crop-v-end:before{right:0}.crop-v:after{content:"⠿";z-index:1;color:#fff;opacity:0;pointer-events:none;background:#1f6feb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;line-height:1;transition:opacity .15s,transform .15s;display:flex;position:relative;transform:scale(.7)}.crop-v:hover:before{background:repeating-linear-gradient(#1f6feb 0 8px,#0000 8px 14px)}.crop-v:hover:after{opacity:1;transform:scale(1)}.crop-corner{opacity:0;pointer-events:none;background:#1f6feb;border:2px solid #fff;border-radius:50%;width:22px;height:22px;transition:opacity .15s,box-shadow .15s;box-shadow:0 2px 8px #1f6feb59}.crop-corner:before{content:"";background:#fffffff2;border-radius:50%;position:absolute;inset:6px}.crop-corner-tl{cursor:nwse-resize;transform:translate(-50%,-50%)}.crop-corner-tr{cursor:nesw-resize;transform:translate(50%,-50%)}.crop-corner-bl{cursor:nesw-resize;transform:translate(-50%,50%)}.crop-corner-br{cursor:nwse-resize;transform:translate(50%,50%)}.crop-img-wrap:hover .crop-corner,.crop-corner:active{opacity:1;pointer-events:auto}@media (hover:none){.crop-corner{opacity:1;pointer-events:auto}}.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}.brand{gap:8px}.brand-text{font-size:28px}.web-logo{height:86px}.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-preset-row{flex-direction:column;align-items:stretch;gap:6px}.crop-preset-row .select-wrap,.crop-preset-row .select-wrap select{width:100%;min-width:0}.crop-h{height:12px}.crop-v{width:12px}.crop-h:after,.crop-v:after{opacity:1;flex-shrink:0;transform:none}.crop-corner{opacity:1;pointer-events:auto;width:30px;height:30px}.crop-corner:before{inset:8px}.crop-selection{background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffffb8,0 0 0 1px #1f6feb2e}.crop-actions{background:#ffffffdb;border-radius:14px;padding:10px;position:sticky;bottom:8px;box-shadow:0 10px 24px #1f2a441f}.crop-actions button{flex:1;min-height:42px;font-size:15px}}@media (width<=480px){.app{padding:8px}.brand{gap:6px}.brand-text{font-size:22px}.web-logo{max-width:78vw;height:68px}.row-btn{gap:4px}.row-btn button{padding:5px 7px;font-size:12px}.crop-img-wrap img{max-height:52vh}.crop-actions{gap:6px;padding:8px;bottom:4px}.crop-actions button{min-height:40px;padding:6px 12px;font-size:14px}.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}.crop-preset-row{justify-content:center;align-items:center;gap:8px;margin:0 0 10px;display:flex}.crop-preset-row label{color:#3f5368;font-size:13px}.crop-preset-row .select-wrap{min-width:120px}.crop-preset-row .select-wrap select{min-width:120px;padding-top:5px;padding-bottom:5px}.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]{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}.toast.toast-raised{bottom:112px}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.heic-progress{color:#fff;z-index:999;background:#1e2a36ee;border-radius:10px;flex-direction:column;gap:8px;min-width:200px;padding:12px 22px 14px;font-size:14px;font-weight:500;animation:.25s toast-in;display:flex;position:fixed;bottom:32px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000026}.heic-progress-label{text-align:center}.heic-progress-bar-track{background:#fff3;border-radius:3px;width:100%;height:6px;overflow:hidden}.heic-progress-bar-fill{background:#4dabf7;border-radius:3px;height:100%;transition:width .2s}.export-progress{color:#fff;z-index:999;background:#1e2a36ee;border-radius:10px;flex-direction:column;gap:8px;min-width:220px;padding:12px 22px 14px;font-size:14px;font-weight:500;animation:.25s toast-in;display:flex;position:fixed;bottom:32px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000026}.export-progress-label{text-align:center}.export-progress-subtitle{text-align:center;color:#ffffffd1;text-overflow:ellipsis;white-space:nowrap;max-width:320px;font-size:12px;overflow:hidden}.export-progress-bar-track{background:#fff3;border-radius:3px;width:100%;height:6px;overflow:hidden}.export-progress-bar-fill{background:#52d1a5;border-radius:3px;height:100%;transition:width .2s}.export-progress-bar-fill.is-indeterminate{width:45%;animation:1.1s ease-in-out infinite export-indeterminate}@keyframes export-indeterminate{0%{transform:translate(-120%)}to{transform:translate(260%)}}.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}.heic-progress-cancel{color:#fff;cursor:pointer;background:#ef5350;border:none;border-radius:4px;margin-top:8px;padding:4px 12px;font-size:13px}.heic-progress-cancel:hover{background:#e53935}.modal-overlay{z-index:1000;background:#0006;justify-content:center;align-items:center;animation:.2s modal-fade-in;display:flex;position:fixed;inset:0}.modal-box{text-align:center;z-index:1001;background:#fff;border-radius:12px;max-width:320px;padding:24px;box-shadow:0 8px 32px #00000026}.modal-title{color:#1e2a36;margin:0 0 8px;font-size:16px;font-weight:600}.modal-msg{color:#666;margin:0 0 20px;font-size:14px}.modal-buttons{justify-content:center;gap:10px;display:flex}.modal-buttons button{cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-size:14px;transition:background .2s}.btn-cancel{color:#333;background:#e0e0e0}.btn-cancel:hover{background:#d0d0d0}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}