.image-url-input[data-v-58b6a767]{display:flex;flex-direction:column}.input-card[data-v-58b6a767]{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:all var(--transition-normal);border:1px solid var(--color-border-light)}.input-card[data-v-58b6a767]:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary-light);transform:translateY(-2px)}.input-card[data-v-58b6a767]:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.card-body[data-v-58b6a767]{padding:12px;display:flex;gap:12px;align-items:stretch}.card-left[data-v-58b6a767]{flex-shrink:0;width:100px;display:flex;align-items:center;justify-content:center}.card-right[data-v-58b6a767]{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.preview-area[data-v-58b6a767]{position:relative;width:100%;aspect-ratio:1/1;background:var(--color-border-light);border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px dashed var(--color-border);transition:all var(--transition-fast)}.input-card:hover .preview-area[data-v-58b6a767]{border-color:var(--color-primary);border-style:solid}.clear-btn[data-v-58b6a767]{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;background:#0009;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);opacity:0}.preview-area:hover .clear-btn[data-v-58b6a767]{opacity:1}.clear-btn[data-v-58b6a767]:hover{background:#dc2626;transform:scale(1.1)}.clear-btn[data-v-58b6a767]:active{transform:scale(.95)}.clear-btn svg[data-v-58b6a767]{width:14px;height:14px;color:#fff}.preview-area.has-image[data-v-58b6a767]{border-style:solid;border-color:var(--color-primary-light)}.preview-area.loading[data-v-58b6a767]{border-color:var(--color-primary);background:var(--color-primary-light)}.preview-area.error[data-v-58b6a767]{border-color:#fecaca;background:#fef2f2}.preview-image[data-v-58b6a767]{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.input-card:hover .preview-image[data-v-58b6a767]{transform:scale(1.02)}.preview-loading[data-v-58b6a767],.preview-error[data-v-58b6a767],.preview-placeholder[data-v-58b6a767]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--color-text-secondary)}.preview-loading svg[data-v-58b6a767],.preview-error svg[data-v-58b6a767],.preview-placeholder svg[data-v-58b6a767]{width:40px;height:40px;opacity:.5}.preview-loading span[data-v-58b6a767],.preview-error span[data-v-58b6a767],.preview-placeholder span[data-v-58b6a767]{font-size:12px;opacity:.7;font-weight:500}.preview-error[data-v-58b6a767]{color:#dc2626}.preview-error svg[data-v-58b6a767]{color:#dc2626;opacity:.8}.loading-spinner[data-v-58b6a767]{width:24px;height:24px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin-58b6a767 .8s linear infinite}@keyframes spin-58b6a767{to{transform:rotate(360deg)}}.input-wrapper[data-v-58b6a767]{display:flex;align-items:center;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);overflow:hidden}.input-wrapper.focused[data-v-58b6a767]{background:var(--color-surface);border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input-wrapper.error[data-v-58b6a767]{border-color:#ef4444;background:#fef2f2}.url-input[data-v-58b6a767]{flex:1;padding:10px 14px;border:none;background:transparent;font-size:13px;color:var(--color-text);outline:none;font-family:inherit}.url-input[data-v-58b6a767]::placeholder{color:var(--color-text-secondary);opacity:.6}.url-input[data-v-58b6a767]:disabled{cursor:not-allowed;opacity:.6}.position-slider[data-v-58b6a767]{display:flex;align-items:center;gap:10px;padding:10px;background:var(--color-border-light);border-radius:var(--radius-md)}.slider-value[data-v-58b6a767]{font-size:12px;font-weight:700;color:var(--color-primary);white-space:nowrap;min-width:45px;text-align:right}.slider-input[data-v-58b6a767]{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:3px;outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.slider-input[data-v-58b6a767]::-webkit-slider-runnable-track{height:6px;border-radius:3px}.slider-input[data-v-58b6a767]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border-radius:50%;cursor:grab;transition:transform .15s ease;margin-top:-7px;box-shadow:var(--shadow-sm)}.slider-input[data-v-58b6a767]::-webkit-slider-thumb:hover{transform:scale(1.2);cursor:grab;box-shadow:var(--shadow-md)}.slider-input[data-v-58b6a767]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}.slider-input[data-v-58b6a767]::-moz-range-track{height:6px;background:var(--color-border);border-radius:3px}.slider-input[data-v-58b6a767]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border:none;border-radius:50%;cursor:grab;transition:transform .15s ease;box-shadow:var(--shadow-sm)}.slider-input[data-v-58b6a767]::-moz-range-thumb:hover{transform:scale(1.2);cursor:grab;box-shadow:var(--shadow-md)}.slider-input[data-v-58b6a767]::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.1)}@media (max-width: 768px){.card-body[data-v-58b6a767]{padding:10px;gap:10px;flex-direction:column}.card-left[data-v-58b6a767]{width:100%;max-width:100px;margin:0 auto}.card-right[data-v-58b6a767]{width:100%}.preview-area[data-v-58b6a767]{aspect-ratio:1/1}.url-input[data-v-58b6a767]{padding:8px 12px;font-size:12px}.position-slider[data-v-58b6a767]{padding:8px}.slider-value[data-v-58b6a767]{font-size:11px}}@media (max-width: 480px){.card-body[data-v-58b6a767]{padding:8px;gap:8px;flex-direction:column}.card-left[data-v-58b6a767]{width:100%;max-width:100px}.card-right[data-v-58b6a767]{width:100%}.preview-area[data-v-58b6a767]{aspect-ratio:1/1}.clear-btn[data-v-58b6a767]{width:22px;height:22px;top:5px;right:5px}.clear-btn svg[data-v-58b6a767]{width:12px;height:12px}.preview-loading svg[data-v-58b6a767],.preview-error svg[data-v-58b6a767],.preview-placeholder svg[data-v-58b6a767]{width:32px;height:32px}.preview-loading span[data-v-58b6a767],.preview-error span[data-v-58b6a767],.preview-placeholder span[data-v-58b6a767]{font-size:11px}.url-input[data-v-58b6a767]{padding:8px 10px;font-size:11px}.position-slider[data-v-58b6a767]{padding:6px;gap:8px}.slider-input[data-v-58b6a767]{height:5px}.slider-input[data-v-58b6a767]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6.5px}.slider-input[data-v-58b6a767]::-moz-range-thumb{width:18px;height:18px}.slider-value[data-v-58b6a767]{font-size:10px;min-width:40px}}@media (min-width: 1400px){.card-body[data-v-58b6a767]{padding:14px;gap:14px}.card-left[data-v-58b6a767]{width:100px}.card-right[data-v-58b6a767]{gap:12px}.preview-area[data-v-58b6a767]{aspect-ratio:1/1}.url-input[data-v-58b6a767]{padding:12px 16px;font-size:14px}.position-slider[data-v-58b6a767]{padding:12px;gap:10px}.slider-value[data-v-58b6a767]{font-size:13px;min-width:50px}}@media (min-width: 1800px){.card-body[data-v-58b6a767]{padding:16px;gap:16px}.card-left[data-v-58b6a767]{width:100px}.card-right[data-v-58b6a767]{gap:14px}.preview-area[data-v-58b6a767]{aspect-ratio:1/1}.url-input[data-v-58b6a767]{padding:14px 18px;font-size:15px}.position-slider[data-v-58b6a767]{padding:14px;gap:12px}.slider-value[data-v-58b6a767]{font-size:14px;min-width:55px}}.text-input[data-v-75060ea6]{display:flex;flex-direction:column;gap:8px}.input-header[data-v-75060ea6]{display:flex;flex-direction:column;gap:2px}label[data-v-75060ea6]{font-size:13px;font-weight:600;color:var(--color-text)}label.required[data-v-75060ea6]:after{content:" *";color:#ef4444}.input-tips[data-v-75060ea6]{font-size:11px;color:var(--color-text-secondary);line-height:1.4}.input-wrapper[data-v-75060ea6]{display:flex;align-items:center;background:var(--color-border-light);border:1.5px solid transparent;border-radius:var(--radius-sm);padding:0 12px;transition:all var(--transition-fast)}.input-wrapper.focused[data-v-75060ea6]{background:var(--color-surface);border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.text-field[data-v-75060ea6]{flex:1;padding:10px 0;border:none;background:transparent;font-size:13px;color:var(--color-text);outline:none}.text-field[data-v-75060ea6]::placeholder{color:var(--color-text-secondary);opacity:.6}.char-count[data-v-75060ea6]{font-size:11px;color:var(--color-text-secondary);white-space:nowrap;padding-left:8px}.background-selector[data-v-a662f036]{display:flex;flex-direction:column;gap:16px}.selector-header[data-v-a662f036]{display:flex;justify-content:space-between;align-items:center}.selector-header h4[data-v-a662f036]{font-size:14px;font-weight:600;color:var(--color-text);margin:0}.current-bg[data-v-a662f036]{font-size:12px;color:var(--color-primary);background:#4f46e51a;padding:4px 10px;border-radius:12px}.bg-grid[data-v-a662f036]{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bg-item[data-v-a662f036]{position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all var(--transition-fast);background:var(--color-surface)}.bg-item[data-v-a662f036]:hover{border-color:var(--color-border);transform:translateY(-2px);box-shadow:var(--shadow-md)}.bg-item.active[data-v-a662f036]{border-color:var(--color-primary);box-shadow:0 0 0 3px #4f46e533}.bg-preview[data-v-a662f036]{width:100%;aspect-ratio:2 / 1;object-fit:cover;display:block}.bg-label[data-v-a662f036]{padding:6px 8px;font-size:11px;color:var(--color-text-secondary);text-align:center;background:var(--color-surface);border-top:1px solid var(--color-border-light)}.selected-mark[data-v-a662f036]{position:absolute;top:6px;right:6px;width:20px;height:20px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center}.selected-mark svg[data-v-a662f036]{width:12px;height:12px;color:#fff}@media (max-width: 480px){.bg-grid[data-v-a662f036]{grid-template-columns:repeat(2,1fr);gap:8px}}.template-editor[data-v-efa3bd1f]{display:flex;flex-direction:column;min-height:500px;height:100%}.tab-content[data-v-efa3bd1f]{flex:1;padding:20px;overflow-y:auto;min-height:0}.tab-panel[data-v-efa3bd1f]{animation:fadeIn-efa3bd1f .3s ease}.panel-header[data-v-efa3bd1f]{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--color-border-light)}.panel-header h3[data-v-efa3bd1f]{font-size:16px;font-weight:600;color:var(--color-text);margin-bottom:4px}.panel-desc[data-v-efa3bd1f]{font-size:13px;color:var(--color-text-secondary)}.input-list[data-v-efa3bd1f]{display:flex;flex-direction:column;gap:16px}.image-list[data-v-efa3bd1f]{display:flex;flex-direction:column;gap:12px}.tab-slide-enter-active[data-v-efa3bd1f],.tab-slide-leave-active[data-v-efa3bd1f]{transition:all .25s ease}.tab-slide-enter-from[data-v-efa3bd1f]{opacity:0;transform:translate(20px)}.tab-slide-leave-to[data-v-efa3bd1f]{opacity:0;transform:translate(-20px)}@keyframes fadeIn-efa3bd1f{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 480px){.tab-content[data-v-efa3bd1f]{padding:12px}.panel-header[data-v-efa3bd1f]{margin-bottom:16px;padding-bottom:12px}.panel-header h3[data-v-efa3bd1f]{font-size:15px}.panel-desc[data-v-efa3bd1f]{font-size:12px}.image-list[data-v-efa3bd1f]{gap:10px}}@media (min-width: 1400px){.tab-content[data-v-efa3bd1f]{padding:24px}.panel-header[data-v-efa3bd1f]{margin-bottom:24px;padding-bottom:20px}.panel-header h3[data-v-efa3bd1f]{font-size:18px}.panel-desc[data-v-efa3bd1f]{font-size:14px}.image-list[data-v-efa3bd1f]{gap:14px}}@media (min-width: 1800px){.tab-content[data-v-efa3bd1f]{padding:28px}.panel-header[data-v-efa3bd1f]{margin-bottom:28px;padding-bottom:24px}.panel-header h3[data-v-efa3bd1f]{font-size:20px}.panel-desc[data-v-efa3bd1f]{font-size:15px}.image-list[data-v-efa3bd1f]{gap:16px}}.template-preview[data-v-7518b1ab]{width:100%;height:100%;display:flex;justify-content:center;align-items:center;min-height:0}.template-wrapper[data-v-7518b1ab]{transform-origin:center center;transition:transform var(--transition-normal)}.preview-placeholder[data-v-7518b1ab]{width:400px;height:200px;display:flex;align-items:center;justify-content:center;background:var(--color-border-light);border-radius:var(--radius-sm);animation:pulse-7518b1ab 1.5s ease-in-out infinite}.placeholder-content[data-v-7518b1ab]{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--color-text-secondary)}.placeholder-content svg[data-v-7518b1ab]{width:48px;height:48px;opacity:.5}.placeholder-content span[data-v-7518b1ab]{font-size:13px}@keyframes pulse-7518b1ab{0%,to{opacity:1}50%{opacity:.6}}.gif-exporter[data-v-9bcdcfd3]{display:flex;flex-direction:column;gap:16px}.export-btn[data-v-9bcdcfd3]{width:100%;padding:14px 24px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 14px #6366f166;overflow:hidden;position:relative}.export-btn[data-v-9bcdcfd3]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 100%);opacity:0;transition:opacity var(--transition-fast)}.export-btn[data-v-9bcdcfd3]:hover:not(:disabled):before{opacity:1}.export-btn[data-v-9bcdcfd3]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6366f180}.export-btn[data-v-9bcdcfd3]:active:not(:disabled){transform:translateY(0)}.export-btn[data-v-9bcdcfd3]:disabled{cursor:not-allowed}.export-btn.exporting[data-v-9bcdcfd3]{background:linear-gradient(135deg,#6366f1,#4f46e5)}.btn-content[data-v-9bcdcfd3]{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:1}.btn-icon[data-v-9bcdcfd3]{width:20px;height:20px;flex-shrink:0}.btn-icon.spinning[data-v-9bcdcfd3]{animation:spin-9bcdcfd3 1s linear infinite}@keyframes spin-9bcdcfd3{to{transform:rotate(360deg)}}.btn-text[data-v-9bcdcfd3]{white-space:nowrap}.progress-container[data-v-9bcdcfd3]{display:flex;flex-direction:column;gap:8px}.progress-bar[data-v-9bcdcfd3]{height:6px;background:var(--color-border-light);border-radius:3px;overflow:hidden}.progress-fill[data-v-9bcdcfd3]{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-success) 100%);transition:width .3s ease;border-radius:3px}.progress-info[data-v-9bcdcfd3]{display:flex;justify-content:space-between;align-items:center}.progress-stage[data-v-9bcdcfd3]{font-size:12px;color:var(--color-text-secondary)}.progress-time[data-v-9bcdcfd3]{font-size:11px;color:var(--color-text-secondary);opacity:.7}.export-tips[data-v-9bcdcfd3]{display:flex;align-items:center;gap:8px;padding:12px;background:var(--color-primary-light);border-radius:var(--radius-sm);font-size:12px;color:var(--color-primary-hover)}.export-tips svg[data-v-9bcdcfd3]{width:16px;height:16px;flex-shrink:0}.progress-slide-enter-active[data-v-9bcdcfd3],.progress-slide-leave-active[data-v-9bcdcfd3]{transition:all .3s ease}.progress-slide-enter-from[data-v-9bcdcfd3],.progress-slide-leave-to[data-v-9bcdcfd3]{opacity:0;transform:translateY(-10px)}.error-message[data-v-9bcdcfd3]{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-sm);font-size:13px;color:#dc2626}.error-message svg[data-v-9bcdcfd3]{width:18px;height:18px;flex-shrink:0;color:#dc2626}.error-shake-enter-active[data-v-9bcdcfd3]{animation:shake-9bcdcfd3 .5s ease}.error-shake-leave-active[data-v-9bcdcfd3]{transition:all .3s ease}.error-shake-leave-to[data-v-9bcdcfd3]{opacity:0;transform:translateY(-10px)}@keyframes shake-9bcdcfd3{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@font-face{font-family:HONOR-Sans-CN;font-weight:200;src:url(/fonts/HONORSansCN-Light.ttf) format("truetype");font-display:swap}@font-face{font-family:HONOR-Sans-CN;font-weight:800;src:url(/fonts/HONORSansCN-ExtraBold.ttf) format("truetype");font-display:swap}.template-root{width:400px;height:200px;background-image:url(/assets/BG.jpg);background-size:cover;background-position:center;position:relative;overflow:hidden;font-family:思源黑体,sans-serif;border-radius:0}.template-root.capturing .product-img,.template-root.capturing .tuquA img,.template-root.capturing .tuqu2 img,.template-root.js-animation .tuquA img,.template-root.js-animation .tuqu2 img{animation:none!important;transition:none!important}.left-half{width:60%;height:100%;position:relative;display:flex;padding:1px}.image-container{width:114px;height:180px;overflow:hidden;position:relative;border-radius:16px}.image-container:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:-1}.product-img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;animation-iteration-count:infinite}.tuquA{margin-top:14px;margin-left:6px;position:relative;overflow:hidden;width:112px;height:178px}.tuquA img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:1;animation:carouselSlide 4s infinite;animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-play-state:paused}.tuquA img:first-child{opacity:1;animation:slideSequenceA1 4s infinite;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:translate(0)}.tuquA img:nth-child(2){animation:slideSequenceA2 4s infinite;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:translate(-114px)}.tuqu2{margin-left:5px;margin-top:4px;position:relative;overflow:hidden;width:112px;height:178px}.tuqu2 img:first-child{opacity:1;animation:slideSequenceB1 4s infinite;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:translate(0)}.tuqu2 img:nth-child(2){animation:slideSequenceB2 4s infinite;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:translate(114px)}.start-animation img,.start-animation .tuquA img,.start-animation .tuqu2 img{animation-play-state:running}@keyframes slideSequenceA1{0%{transform:translate(0);opacity:1}15%{transform:translate(114px);opacity:1}62%{transform:translate(114px);opacity:1}77%{transform:translate(-114px);opacity:1}to{transform:translate(0);opacity:1}}@keyframes slideSequenceA2{0%{transform:translate(-114px);opacity:1}15%{transform:translate(0);opacity:1}62%{transform:translate(0);opacity:1}77%{transform:translate(0);opacity:1}to{transform:translate(114px);opacity:1}}@keyframes slideSequenceB1{0%{transform:translate(0);opacity:1}15%{transform:translate(-114px);opacity:1}62%{transform:translate(-114px);opacity:1}77%{transform:translate(114px);opacity:1}to{transform:translate(0);opacity:1}}@keyframes slideSequenceB2{0%{transform:translate(114px);opacity:1}15%{transform:translate(0);opacity:1}62%{transform:translate(0);opacity:1}77%{transform:translate(0);opacity:1}to{transform:translate(-114px);opacity:1}}.text-wrap{position:absolute;right:0;top:45%;transform:translateY(-50%);z-index:10;pointer-events:none;text-align:left;width:155px}.shop-name{font-size:36px;color:#fff;font-weight:800;margin:0 0 8px;line-height:1.2;font-family:HONOR-Sans-CN,思源黑体,sans-serif}.shop-name.small{font-size:30px}.qq,.contact-phone{font-size:16px;color:#fff;margin:0 0 6px;line-height:1;font-family:HONOR-Sans-CN,思源黑体,sans-serif;font-weight:200;display:flex;align-items:center}.qq .prefix,.contact-phone .prefix{display:inline-block;color:#333;width:42px;flex-shrink:0;text-align:justify;text-align-last:justify;white-space:nowrap;overflow:hidden}.qq .prefix:after,.contact-phone .prefix:after{content:"";display:inline-block;width:100%}.qq .value,.contact-phone .value{flex:1}.button-text{display:inline-block;background:var(--shop-name-color, #b1a283);color:#fff;border-radius:4px;font-size:12px;z-index:3;width:82px;height:20px;position:absolute;bottom:36px;right:73px;text-align:center;pointer-events:none}:root{--color-bg: #fafbfc;--color-surface: #ffffff;--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-primary-light: #e0e7ff;--color-success: #10b981;--color-text: #1f2937;--color-text-secondary: #6b7280;--color-border: #e5e7eb;--color-border-light: #f3f4f6;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-smooth: .4s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,HONOR-Sans-CN,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh;padding:12px;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:12px;animation:fadeInDown .6s ease}.header-left{display:flex;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-normal);cursor:pointer;background:#fff}.brand-icon img{width:100%;height:100%;object-fit:contain;display:block}.brand-icon:hover{transform:scale(1.05) rotate(5deg);box-shadow:var(--shadow-md)}.brand-icon:active{transform:scale(.95)}.brand-text h1{font-family:HONOR-Sans-CN,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;font-size:20px;color:var(--color-text);letter-spacing:-.5px;margin:0;line-height:1.2}.brand-tag{font-size:12px;color:var(--color-text-secondary);font-weight:500}.header-nav{display:flex;align-items:center;gap:4px;background:var(--color-border-light);padding:4px;border-radius:var(--radius-md)}.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:500;color:var(--color-text-secondary);transition:all var(--transition-fast);position:relative;overflow:hidden}.nav-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-primary);opacity:0;transition:opacity var(--transition-fast)}.nav-item:hover{color:var(--color-text);background:#ffffff80;transform:translateY(-1px)}.nav-item:active{transform:translateY(0)}.nav-item.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}.nav-item.active:before{opacity:.05}.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center}.nav-icon :deep(svg){width:100%;height:100%}.nav-label{white-space:nowrap}.header-right{display:flex;align-items:center;gap:8px}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:13px;font-weight:500;color:var(--color-text);transition:all var(--transition-fast);position:relative;overflow:hidden}.action-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-primary);opacity:0;transition:opacity var(--transition-fast)}.action-btn:hover{background:var(--color-border-light);border-color:var(--color-text-secondary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.action-btn:active{transform:translateY(0)}.action-btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.action-btn.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:var(--shadow-md)}.action-btn.primary:before{opacity:.1}.action-btn svg{width:18px;height:18px}.subtitle{font-size:13px;color:var(--color-text-secondary)}.main-container{display:grid;grid-template-columns:380px 1fr;gap:12px;align-items:start;flex:1;min-height:0;animation:fadeInUp .6s ease .1s both}.editor-panel{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column}.preview-panel{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px;position:relative;min-height:400px;display:flex;flex-direction:column}.preview-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 20%,rgba(99,102,241,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(16,185,129,.03) 0%,transparent 50%);pointer-events:none;border-radius:var(--radius-lg);z-index:0}.preview-wrapper{display:flex;flex-direction:column;align-items:center;gap:24px;flex:1;justify-content:center;min-height:0;position:relative;z-index:1}.export-section{width:100%;max-width:400px;padding-top:16px;border-top:1px solid var(--color-border-light)}.toast-message{position:fixed;bottom:32px;left:50%;transform:translate(-50%);background:var(--color-text);color:#fff;padding:14px 24px;border-radius:var(--radius-md);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);z-index:9999}.toast-icon{width:20px;height:20px;color:var(--color-success)}.toast-enter-active,.toast-leave-active{transition:all .3s ease}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%) translateY(20px)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 900px){#app{padding:8px}.app-header{padding:8px 12px;margin-bottom:8px;flex-wrap:wrap;gap:8px}.header-left{gap:8px}.brand-icon{width:32px;height:32px}.brand-icon svg{width:20px;height:20px}.brand-text h1{font-size:16px}.brand-tag{font-size:11px}.header-nav{order:3;width:100%;justify-content:center}.nav-item{padding:6px 12px;font-size:12px}.nav-label{display:none}.header-right{gap:6px}.action-btn{padding:6px 12px;font-size:12px}.action-btn span{display:none}.main-container{grid-template-columns:1fr;gap:8px}.editor-panel{position:static;max-height:none}.preview-panel{padding:12px;min-height:300px}.export-section{max-width:100%}}@media (min-width: 1400px){.main-container{grid-template-columns:420px 1fr;gap:16px}.app-header{padding:14px 20px}.brand-icon{width:44px;height:44px}.brand-icon svg{width:26px;height:26px}.brand-text h1{font-size:22px}.brand-tag{font-size:13px}.nav-item,.action-btn{padding:10px 18px;font-size:14px}.preview-panel{padding:20px}}@media (min-width: 1800px){.main-container{grid-template-columns:480px 1fr;gap:20px}.app-header{padding:16px 24px}.brand-icon{width:48px;height:48px}.brand-icon svg{width:28px;height:28px}.brand-text h1{font-size:24px}.brand-tag{font-size:14px}.nav-item,.action-btn{padding:12px 20px;font-size:14px}.preview-panel{padding:24px}}@media (min-width: 2400px){.main-container{grid-template-columns:540px 1fr;gap:24px}.app-header{padding:18px 28px}.brand-icon{width:52px;height:52px}.brand-icon svg{width:30px;height:30px}.brand-text h1{font-size:26px}.brand-tag{font-size:15px}.nav-item,.action-btn{padding:14px 22px;font-size:15px}.preview-panel{padding:28px}}.app-footer{text-align:center;padding:8px 0 4px;margin-top:8px}.app-footer p{font-size:11px;color:var(--color-text-secondary);opacity:.6;transition:opacity var(--transition-fast)}.app-footer p:hover{opacity:1}@media (max-width: 480px){#app{padding:6px}.app-header{padding:6px 10px;margin-bottom:6px;gap:6px}.header-left{gap:6px}.brand-icon{width:28px;height:28px}.brand-icon svg{width:18px;height:18px}.brand-text h1{font-size:14px}.brand-tag{font-size:10px}.header-nav{order:3;width:100%;justify-content:center;gap:2px}.nav-item{padding:5px 10px;font-size:11px;gap:4px}.nav-icon{width:16px;height:16px}.nav-label{display:none}.header-right{gap:4px}.action-btn{padding:5px 10px;font-size:11px;gap:4px}.action-btn svg{width:16px;height:16px}.action-btn span{display:none}.preview-panel{padding:10px;border-radius:var(--radius-md);min-height:250px}}