*,*:before,*:after{box-sizing:border-box}:root{--bg: #f4f5f7;--surface: #ffffff;--surface-2: #fafbfc;--line: #e5e7eb;--line-strong: #d1d5db;--text: #1f2430;--muted: #6b7280;--faint: #9ca3af;--primary: #2563eb;--primary-hover: #1d4ed8;--primary-soft: #eff4ff;--danger: #ef4444;--radius: 10px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);--shadow-md: 0 4px 12px rgba(16, 24, 40, .1);--shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--toolbar-h: 60px;--toolbar-total-h: calc(var(--toolbar-h) + var(--safe-b))}.pressable{transition:transform .12s ease,background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.pressable:active{transform:scale(.94)}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,Roboto,sans-serif;font-size:14px;-webkit-tap-highlight-color:transparent}.app{height:100%;display:flex;flex-direction:column}.appbar{height:calc(56px + var(--safe-t));flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:var(--safe-t) calc(18px + var(--safe-r)) 0 calc(18px + var(--safe-l));background:var(--surface);border-bottom:1px solid var(--line);z-index:20}.appbar-left,.appbar-right{display:flex;align-items:center;gap:18px}.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}.logo-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--primary);color:#fff;font-size:15px}.steps{display:flex;align-items:center;gap:6px}.step{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:13px;font-weight:500}.step-dot{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font-size:11px;font-style:normal}.step.active{color:var(--primary)}.step.done{color:#16a34a}.step-line{width:26px;height:1.5px;background:var(--line-strong)}.step-dot svg{display:block}.steps-dots{display:none;align-items:center;gap:6px}.steps-dots .dot{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:.2s}.steps-dots .dot.active{width:16px;border-radius:3px;background:var(--primary)}.steps-dots .dot.done{background:#16a34a}.btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:.15s}.btn:hover{background:var(--surface-2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.btn.primary:hover{background:var(--primary-hover)}.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}.btn.ghost:hover{background:var(--surface-2);color:var(--text)}.btn.subtle{background:var(--surface-2);border-color:var(--line);color:var(--muted);height:34px}.btn.subtle:hover{color:var(--primary);border-color:var(--primary)}.btn.block{width:100%;justify-content:center}.btn .arrow{font-size:15px}.stage-transition{display:contents}.stage-transition>*{animation:stage-in .32s cubic-bezier(.4,0,.2,1) both}@keyframes stage-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#f4f5f7db;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fade-in .15s ease both}@keyframes fade-in{0%{opacity:0}}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--primary);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--muted);font-size:13px}.upload-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px}.dropzone{width:min(560px,92vw);padding:56px 24px;border:2px dashed var(--line-strong);border-radius:18px;background:var(--surface);text-align:center;cursor:pointer;transition:.2s;box-shadow:var(--shadow-sm)}.dropzone:hover,.dropzone.over{border-color:var(--primary);background:var(--primary-soft)}.dz-icon{display:flex;justify-content:center;color:var(--primary)}.dz-title{margin-top:12px;font-size:19px;font-weight:600}.dz-sub{margin-top:6px;color:var(--muted)}.dz-btn{display:inline-block;margin-top:20px;padding:10px 22px;border-radius:var(--radius);background:var(--primary);color:#fff;font-weight:600}.upload-tips{display:flex;gap:28px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px;flex-wrap:wrap;justify-content:center}.workspace{flex:1;display:grid;grid-template-columns:60px 1fr 320px;min-height:0}.toolbar{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0}.tool-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;transition:.15s}.tool-btn:hover{background:var(--surface-2);color:var(--text)}.tool-btn.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}.tool-btn:disabled{opacity:.4;cursor:not-allowed}.tool-sep{width:26px;height:1px;background:var(--line);margin:4px 0}.canvas-viewport{position:relative;overflow:hidden;touch-action:none;background:var(--bg);background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);background-size:22px 22px}.canvas-viewport.drawing{cursor:crosshair}.canvas-viewport.grab{cursor:grab}.canvas-viewport.grabbing{cursor:grabbing}.stage-shell{position:absolute;top:0;left:0;transform-origin:top left;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="10" height="10" fill="%23eef0f3"/><rect x="10" y="10" width="10" height="10" fill="%23eef0f3"/></svg>');box-shadow:var(--shadow-lg);flex-shrink:0}.draw-tip{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:10;background:#1f2430eb;color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;box-shadow:var(--shadow-md);pointer-events:none}.zoombar{position:absolute;right:20px;bottom:18px;display:flex;align-items:center;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-md)}.zbtn{width:30px;height:30px;display:grid;place-items:center;border:none;background:transparent;border-radius:50%;color:var(--muted);cursor:pointer}.zbtn:hover{background:var(--surface-2);color:var(--text)}.zval{min-width:48px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--text)}.inspector{background:var(--surface);border-left:1px solid var(--line);overflow-y:auto}.props-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-weight:700;background:var(--surface);border-bottom:1px solid var(--line)}.icon-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}.icon-btn.danger:hover{border-color:var(--danger);background:#fef2f2}.isect{padding:14px 16px;border-bottom:1px solid var(--line)}.isect-title{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);margin-bottom:12px}.isect-body{display:flex;flex-direction:column;gap:12px}.field{display:flex;align-items:center;gap:10px}.field-label{width:52px;flex-shrink:0;color:var(--muted);font-size:13px}.field-ctrl{flex:1;display:flex;align-items:center;min-width:0}.ta,.select{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:9px 10px;font-size:14px;color:var(--text);background:var(--surface);font-family:inherit;outline:none;transition:.15s}.ta:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.ta{resize:vertical}.slider{display:flex;align-items:center;gap:10px;width:100%}.slider input[type=range]{flex:1;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--line-strong);outline:none}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);border:2px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer}.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);border:2px solid #fff;cursor:pointer}.slider-val{min-width:40px;text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.segmented{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}.seg{padding:7px 14px;border:none;background:var(--surface);color:var(--muted);cursor:pointer;font-size:13px;border-left:1px solid var(--line-strong)}.seg:first-child{border-left:none}.seg.active{background:var(--primary);color:#fff}.btn-group{display:inline-flex;gap:8px}.chip{width:36px;height:34px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);cursor:pointer;font-size:15px;color:var(--text)}.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}.color-ctrl{display:flex;align-items:center;gap:10px}input[type=color]{width:38px;height:32px;padding:2px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);cursor:pointer}input[type=color]:disabled{opacity:.5}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted);text-transform:uppercase}.switch{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.empty{padding:40px 24px;text-align:center}.empty-icon{font-size:40px;color:var(--faint)}.empty-title{margin-top:10px;font-weight:600}.empty-sub{margin:8px 0 20px;color:var(--muted);font-size:13px;line-height:1.6}.layers{padding:16px}.section-title{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);margin-bottom:10px;display:flex;align-items:center;gap:8px}.count{background:var(--line);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:11px}.layer-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.layer-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;text-align:left;transition:.15s}.layer-item:hover{border-color:var(--primary);background:var(--primary-soft)}.layer-swatch{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.layer-text{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-stage{flex:1;display:flex;flex-direction:column;min-height:0}.preview-canvas{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;overflow:auto;background:var(--bg);background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);background-size:22px 22px}.preview-img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:var(--shadow-lg);background:#fff;animation:preview-in .35s cubic-bezier(.4,0,.2,1) both}@keyframes preview-in{0%{opacity:0;transform:scale(.97)}}.preview-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--surface);border-top:1px solid var(--line);flex-wrap:wrap}.preview-meta{color:var(--muted);font-size:13px}.preview-actions{display:flex;gap:10px}.inline-editor{margin:0;padding:0;border:1px dashed var(--primary);background:#2563eb0f;outline:none;overflow:hidden;resize:none;white-space:pre;z-index:50}.toast{position:fixed;bottom:calc(28px + var(--safe-b));left:50%;transform:translate(-50%);background:#1f2430;color:#fff;padding:11px 20px;border-radius:999px;font-size:14px;box-shadow:var(--shadow-lg);z-index:100;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:38;background:#0f121a52;opacity:0;pointer-events:none;transition:opacity .25s ease}.sheet-backdrop.show{opacity:1;pointer-events:auto}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:39;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;padding-left:var(--safe-l);padding-right:var(--safe-r);touch-action:none}.sheet:not(.dragging){transition:transform .28s cubic-bezier(.4,0,.2,1)}.sheet.sheet--full{z-index:41}.sheet-handle{flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:10px 16px 8px;cursor:grab;touch-action:none}.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin-bottom:10px}.sheet-summary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;color:var(--text)}.sheet-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--toolbar-total-h) + 12px)}.sheet .field{min-height:40px}.sheet .slider input[type=range]::-webkit-slider-thumb{width:20px;height:20px}.sheet .chip,.sheet .seg{min-height:38px}@media (max-width: 900px){.steps{display:none}.steps-dots{display:flex}.workspace{grid-template-columns:1fr;grid-template-rows:1fr auto}.canvas-viewport{grid-row:1}.toolbar{grid-row:2;position:relative;z-index:40;flex-direction:row;justify-content:center;align-items:center;gap:var(--space-4);height:var(--toolbar-h);padding:0 0 var(--safe-b);border-right:none;border-top:1px solid var(--line)}.tool-btn{width:44px;height:44px;font-size:20px}.tool-sep{width:1px;height:24px;margin:0 4px}.upload-tips{flex-direction:column;gap:8px;text-align:center}.preview-bar{flex-direction:column;align-items:stretch;padding-bottom:calc(14px + var(--safe-b))}.preview-meta{text-align:center}.preview-actions{flex-direction:column-reverse;gap:8px}.preview-actions .btn{width:100%;justify-content:center}.preview-actions .btn.primary{height:46px;font-size:15px}}