:root{--bg-base:#0a0a14;--bg-surface:#0f0f1e;--bg-elevated:#141428;--bg-overlay:#1a1a30;--bg-hover:#7c3aed1a;--bg-active:#7c3aed2e;--accent:#7c3aed;--accent-light:#9b5dff;--accent-glow:#7c3aed59;--accent-amber:#f59e0b;--accent-teal:#14b8a6;--accent-rose:#f43f5e;--accent-sky:#38bdf8;--text-primary:#ede8ff;--text-secondary:#8b85b8;--text-muted:#524e72;--text-inverse:#0a0a14;--border-subtle:hsla(0,0%,100%,.055);--border-normal:#ffffff1a;--border-strong:#ffffff2e;--border-accent:#7c3aed80;--shadow-sm:0 2px 8px #0006;--shadow-md:0 4px 20px #00000080;--shadow-lg:0 8px 40px #0009;--shadow-accent:0 0 30px #7c3aed40;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;--topbar-h:52px;--statusbar-h:32px;--left-w:220px;--right-w:256px;--ease:cubic-bezier(0.22,1,0.36,1);--ease-fast:cubic-bezier(0.4,0,0.2,1)}.app{background:#0a0a14;background:var(--bg-base);grid-template-columns:1fr;grid-template-rows:52px 1fr 32px;grid-template-rows:var(--topbar-h) 1fr var(--statusbar-h);height:100vh;-webkit-user-select:none;user-select:none;width:100vw}.app,.workspace{display:grid;overflow:hidden}.workspace{border-top:1px solid hsla(0,0%,100%,.055);border-top:1px solid var(--border-subtle);grid-template-columns:220px 1fr 256px;grid-template-columns:var(--left-w) 1fr var(--right-w)}.topbar,.workspace{border-bottom:1px solid hsla(0,0%,100%,.055);border-bottom:1px solid var(--border-subtle)}.topbar{background:#0f0f1e;background:var(--bg-surface);gap:0;padding:0 16px;position:relative;z-index:100}.topbar,.topbar-brand{align-items:center;display:flex}.topbar-brand{flex-shrink:0;gap:9px;margin-right:20px}.topbar-logo{align-items:center;background:linear-gradient(135deg,#7c3aed,#9b5dff);background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:8px;box-shadow:0 0 16px #7c3aed59;box-shadow:0 0 16px var(--accent-glow);display:flex;font-size:14px;height:28px;justify-content:center;width:28px}.topbar-title{color:#ede8ff;color:var(--text-primary);font-family:Syne,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em}.topbar-title span{color:#524e72;color:var(--text-muted);font-weight:400}.topbar-divider{background:hsla(0,0%,100%,.055);background:var(--border-subtle);flex-shrink:0;height:24px;margin:0 14px;width:1px}.topbar-group{gap:3px}.topbar-btn,.topbar-group{align-items:center;display:flex}.topbar-btn{background:#0000;border:none;border-radius:6px;border-radius:var(--radius-sm);color:#8b85b8;color:var(--text-secondary);cursor:pointer;font-family:DM Sans,sans-serif;font-size:13px;font-weight:500;gap:6px;padding:6px 10px;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all .15s var(--ease-fast);white-space:nowrap}.topbar-btn:hover:not(:disabled){background:#7c3aed1a;background:var(--bg-hover);color:#ede8ff;color:var(--text-primary)}.topbar-btn:active:not(:disabled){background:#7c3aed2e;background:var(--bg-active)}.topbar-btn:disabled{cursor:not-allowed;opacity:.3}.topbar-btn.danger:hover:not(:disabled){background:#f43f5e1f;color:#f43f5e;color:var(--accent-rose)}.topbar-btn.active{background:#7c3aed2e;background:var(--bg-active);color:#9b5dff;color:var(--accent-light)}.topbar-icon{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.topbar-spacer{flex:1 1}.zoom-controls{align-items:center;background:#141428;background:var(--bg-elevated);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:6px;border-radius:var(--radius-sm);display:flex;gap:2px;padding:3px}.zoom-value{border-radius:4px;color:#8b85b8;color:var(--text-secondary);cursor:pointer;font-size:12px;font-weight:600;min-width:44px;padding:4px 6px;text-align:center;transition:all .15s}.zoom-value:hover{background:#7c3aed1a;background:var(--bg-hover);color:#ede8ff;color:var(--text-primary)}.left-panel{background:#0f0f1e;background:var(--bg-surface);border-right:1px solid hsla(0,0%,100%,.055);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow:hidden}.panel-header{color:#524e72;color:var(--text-muted);font-family:Syne,sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;padding:14px 14px 10px;text-transform:uppercase}.shape-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:1fr 1fr;padding:0 10px 12px}.shape-card{align-items:center;background:#141428;background:var(--bg-elevated);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:14px;border-radius:var(--radius-lg);cursor:pointer;display:flex;flex-direction:column;gap:8px;justify-content:center;overflow:hidden;padding:16px 8px 12px;position:relative;transition:all .2s cubic-bezier(.22,1,.36,1);transition:all .2s var(--ease)}.shape-card:before{background:linear-gradient(135deg,#7c3aed00,#7c3aed1f);content:"";inset:0;opacity:0;position:absolute;transition:opacity .2s}.shape-card:hover{border-color:#7c3aed80;border-color:var(--border-accent);box-shadow:0 8px 24px #0006,0 0 30px #7c3aed40;box-shadow:0 8px 24px #0006,var(--shadow-accent);transform:translateY(-2px)}.shape-card:hover:before{opacity:1}.shape-card:active{transform:translateY(0) scale(.97)}.shape-preview{align-items:center;display:flex;height:48px;justify-content:center;position:relative;width:48px}.shape-preview svg{filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));transition:transform .2s cubic-bezier(.22,1,.36,1);transition:transform .2s var(--ease)}.shape-card:hover .shape-preview svg{transform:scale(1.08)}.shape-label{color:#8b85b8;color:var(--text-secondary);font-size:11px;font-weight:600;letter-spacing:.02em;transition:color .2s}.shape-card:hover .shape-label{color:#ede8ff;color:var(--text-primary)}.shape-hotkey{background:#1a1a30;background:var(--bg-overlay);border-radius:4px;color:#524e72;color:var(--text-muted);font-family:DM Sans,monospace;font-size:9px;font-weight:700;letter-spacing:.03em;padding:1px 4px;position:absolute;right:7px;top:6px}.left-panel-divider{background:hsla(0,0%,100%,.055);background:var(--border-subtle);height:1px;margin:4px 10px 12px}.panel-section{padding:0 10px 12px}.preset-colors{grid-gap:6px;display:grid;gap:6px;grid-template-columns:repeat(4,1fr);margin-top:6px}.preset-color-btn{aspect-ratio:1;border:1.5px solid #0000;border-radius:6px;border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:all .15s cubic-bezier(.22,1,.36,1);transition:all .15s var(--ease);width:100%}.preset-color-btn:hover{border-color:#ffffff4d;box-shadow:0 4px 12px #0006;transform:scale(1.12)}.tips-section{border-top:1px solid hsla(0,0%,100%,.055);border-top:1px solid var(--border-subtle);margin-top:auto;padding:10px}.tip-item{align-items:center;color:#524e72;color:var(--text-muted);display:flex;font-size:11px;gap:6px;line-height:1.3;padding:5px 4px}.tip-key{background:#1a1a30;background:var(--bg-overlay);border:1px solid #ffffff1a;border:1px solid var(--border-normal);border-radius:3px;color:#8b85b8;color:var(--text-secondary);display:inline-flex;flex-shrink:0;font-size:9px;font-weight:700;height:16px;min-width:20px;padding:0 4px}.canvas-area,.tip-key{align-items:center;justify-content:center}.canvas-area{background:#0a0a14;background:var(--bg-base);display:flex}.canvas-area,.canvas-frame{overflow:hidden;position:relative}.canvas-frame{background:#f7f6ff;border-radius:4px;box-shadow:0 0 0 1px #ffffff14,0 20px 60px #0009,0 4px 16px #0006;transition:box-shadow .3s cubic-bezier(.22,1,.36,1);transition:box-shadow .3s var(--ease)}.canvas-frame:has(.konvajs-content:focus-within){box-shadow:0 0 0 2px #7c3aed,0 20px 60px #0009;box-shadow:0 0 0 2px var(--accent),0 20px 60px #0009}.canvas-grid{background-image:linear-gradient(#7c3aed0f 1px,#0000 0),linear-gradient(90deg,#7c3aed0f 1px,#0000 0);background-size:24px 24px;inset:0;pointer-events:none;position:absolute;z-index:0}.canvas-grid.hidden{display:none}.canvas-empty-hint{align-items:center;display:flex;flex-direction:column;gap:10px;inset:0;justify-content:center;opacity:.5;pointer-events:none;position:absolute;transition:opacity .3s}.canvas-empty-hint.hidden{opacity:0}.canvas-empty-icon{font-size:40px;opacity:.4}.canvas-empty-text{font-family:Syne,sans-serif;font-size:14px;font-weight:600;text-align:center}.canvas-empty-sub,.canvas-empty-text{color:#524e72;color:var(--text-muted)}.canvas-empty-sub{font-size:12px;opacity:.6}.right-panel{background:#0f0f1e;background:var(--bg-surface);border-left:1px solid hsla(0,0%,100%,.055);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}.right-panel-empty{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:10px;justify-content:center;padding:20px;text-align:center}.right-panel-empty-icon{font-size:32px;opacity:.3}.right-panel-empty-text{color:#524e72;color:var(--text-muted);font-size:12px;line-height:1.5}.prop-section{border-bottom:1px solid hsla(0,0%,100%,.055);border-bottom:1px solid var(--border-subtle);padding:12px 14px}.prop-section:last-of-type{border-bottom:none}.prop-section-title{color:#524e72;color:var(--text-muted);font-family:Syne,sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;margin-bottom:10px;text-transform:uppercase}.prop-row{align-items:center;display:flex;gap:8px;margin-bottom:8px}.prop-row:last-child{margin-bottom:0}.prop-label{color:#8b85b8;color:var(--text-secondary);flex-shrink:0;font-size:12px;width:52px}.prop-value{background:#141428;background:var(--bg-elevated);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:6px;border-radius:var(--radius-sm);color:#ede8ff;color:var(--text-primary);cursor:default;flex:1 1;font-size:12px;font-weight:600;min-width:0;padding:5px 8px;text-align:right}.prop-slider-wrap{align-items:center;display:flex;flex:1 1;gap:8px}.prop-slider{-webkit-appearance:none;background:#1a1a30;background:var(--bg-overlay);border-radius:2px;cursor:pointer;flex:1 1;height:4px;outline:none}.prop-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#9b5dff;background:var(--accent-light);border-radius:50%;box-shadow:0 0 8px #7c3aed59;box-shadow:0 0 8px var(--accent-glow);cursor:pointer;height:14px;-webkit-transition:transform .15s;transition:transform .15s;width:14px}.prop-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.prop-number{color:#8b85b8;color:var(--text-secondary);font-size:11px;font-weight:600;min-width:36px;text-align:right}.color-swatches{grid-gap:5px;display:grid;gap:5px;grid-template-columns:repeat(4,1fr);margin-bottom:8px}.color-swatch{aspect-ratio:1;border:2px solid #0000;border-radius:6px;cursor:pointer;transition:all .15s cubic-bezier(.22,1,.36,1);transition:all .15s var(--ease)}.color-swatch:hover{border-color:#ffffff4d;transform:scale(1.1)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 0 3px #fff3}.color-picker-row{align-items:center;display:flex;gap:8px;margin-top:6px}.color-picker-input{background:none;border:2px solid #ffffff1a;border:2px solid var(--border-normal);border-radius:8px;cursor:pointer;flex-shrink:0;height:32px;overflow:hidden;padding:0;width:32px}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:none;border-radius:6px}.color-hex{background:#141428;background:var(--bg-elevated);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:6px;border-radius:var(--radius-sm);color:#ede8ff;color:var(--text-primary);flex:1 1;font-family:DM Sans,monospace;font-size:12px;font-weight:600;padding:6px 8px;text-transform:uppercase}.rotation-wheel{gap:8px}.rot-btn,.rotation-wheel{align-items:center;display:flex}.rot-btn{background:#141428;background:var(--bg-elevated);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:6px;border-radius:var(--radius-sm);color:#8b85b8;color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-size:15px;height:30px;justify-content:center;transition:all .15s;width:30px}.rot-btn:hover{background:#7c3aed1a;background:var(--bg-hover);border-color:#7c3aed80;border-color:var(--border-accent);color:#9b5dff;color:var(--accent-light)}.rotation-input{background:#141428;background:var(--bg-elevated);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:6px;border-radius:var(--radius-sm);color:#ede8ff;color:var(--text-primary);flex:1 1;font-family:DM Sans,sans-serif;font-size:12px;font-weight:600;outline:none;padding:5px 8px;text-align:center}.rotation-input:focus{border-color:#7c3aed80;border-color:var(--border-accent)}.prop-actions{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.action-btn{align-items:center;background:#141428;background:var(--bg-elevated);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:10px;border-radius:var(--radius-md);color:#8b85b8;color:var(--text-secondary);cursor:pointer;display:flex;font-family:DM Sans,sans-serif;font-size:13px;font-weight:500;gap:8px;padding:9px 12px;text-align:left;transition:all .15s cubic-bezier(.22,1,.36,1);transition:all .15s var(--ease);width:100%}.action-btn:hover{background:#7c3aed1a;background:var(--bg-hover);color:#ede8ff;color:var(--text-primary)}.action-btn.primary,.action-btn:hover{border-color:#7c3aed80;border-color:var(--border-accent)}.action-btn.primary{background:#7c3aed2e;background:var(--bg-active);color:#9b5dff;color:var(--accent-light)}.action-btn.primary:hover{background:#7c3aed40;box-shadow:0 0 20px #7c3aed59;box-shadow:0 0 20px var(--accent-glow)}.action-btn.danger:hover{background:#f43f5e1f;border-color:#f43f5e66;color:#f43f5e;color:var(--accent-rose)}.action-btn-icon{flex-shrink:0;font-size:15px}.action-btn-kb{background:#1a1a30;background:var(--bg-overlay);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:4px;color:#524e72;color:var(--text-muted);font-size:10px;font-weight:700;margin-left:auto;padding:2px 5px}.shape-identity{padding:14px 14px 0}.shape-badge{align-items:center;background:#7c3aed2e;background:var(--bg-active);border:1px solid #7c3aed80;border:1px solid var(--border-accent);border-radius:10px;border-radius:var(--radius-md);display:flex;gap:10px;margin-bottom:4px;padding:10px 12px}.shape-badge-icon{font-size:22px;line-height:1}.shape-badge-info{display:flex;flex-direction:column;gap:2px}.shape-badge-name{color:#ede8ff;color:var(--text-primary);font-family:Syne,sans-serif;font-size:13px;font-weight:700;text-transform:capitalize}.shape-badge-id{font-family:monospace;font-size:10px}.shape-badge-id,.statusbar{color:#524e72;color:var(--text-muted)}.statusbar{background:#0f0f1e;background:var(--bg-surface);border-top:1px solid hsla(0,0%,100%,.055);border-top:1px solid var(--border-subtle);font-size:11px;gap:0;padding:0 16px}.status-item,.statusbar{align-items:center;display:flex}.status-item{border-right:1px solid hsla(0,0%,100%,.055);border-right:1px solid var(--border-subtle);gap:5px;height:100%;padding:0 10px}.status-item:first-child{padding-left:0}.status-item:last-child{border-right:none}.status-dot{background:#14b8a6;background:var(--accent-teal);border-radius:50%;box-shadow:0 0 6px #14b8a6;box-shadow:0 0 6px var(--accent-teal);flex-shrink:0;height:6px;width:6px}.status-dot.warn{background:#f59e0b;background:var(--accent-amber);box-shadow:0 0 6px #f59e0b;box-shadow:0 0 6px var(--accent-amber)}.status-accent{color:#9b5dff;color:var(--accent-light);font-weight:600}.status-spacer{flex:1 1}.toast-container{bottom:48px;flex-direction:column;gap:6px;left:50%;pointer-events:none;position:fixed;transform:translateX(-50%);z-index:9999}.toast,.toast-container{align-items:center;display:flex}.toast{animation:toast-in .3s cubic-bezier(.22,1,.36,1) forwards;animation:toast-in .3s var(--ease) forwards;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1a1a30;background:var(--bg-overlay);border:1px solid #ffffff1a;border:1px solid var(--border-normal);border-radius:9999px;border-radius:var(--radius-full);box-shadow:0 8px 40px #0009;box-shadow:var(--shadow-lg);color:#ede8ff;color:var(--text-primary);font-size:12px;font-weight:500;gap:8px;padding:9px 16px;white-space:nowrap}.toast.exit{animation:toast-out .25s cubic-bezier(.4,0,.2,1) forwards;animation:toast-out .25s var(--ease-fast) forwards}.toast-icon{font-size:14px}@keyframes toast-in{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(6px) scale(.96)}}.context-menu{animation:ctx-in .15s cubic-bezier(.22,1,.36,1) forwards;animation:ctx-in .15s var(--ease) forwards;background:#141428;background:var(--bg-elevated);border:1px solid #ffffff1a;border:1px solid var(--border-normal);border-radius:10px;border-radius:var(--radius-md);box-shadow:0 8px 40px #0009;box-shadow:var(--shadow-lg);min-width:180px;padding:5px;position:fixed;z-index:9990}@keyframes ctx-in{0%{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.ctx-item{align-items:center;background:none;border:none;border-radius:6px;border-radius:var(--radius-sm);color:#8b85b8;color:var(--text-secondary);cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;padding:8px 10px;text-align:left;transition:all .1s;width:100%}.ctx-item:hover{background:#7c3aed1a;background:var(--bg-hover);color:#ede8ff;color:var(--text-primary)}.ctx-item.danger:hover{background:#f43f5e1a;color:#f43f5e;color:var(--accent-rose)}.ctx-item-icon{font-size:14px;text-align:center;width:16px}.ctx-item-kb{background:#1a1a30;background:var(--bg-overlay);border:1px solid hsla(0,0%,100%,.055);border:1px solid var(--border-subtle);border-radius:4px;color:#524e72;color:var(--text-muted);font-size:10px;font-weight:700;margin-left:auto;padding:1px 5px}.ctx-divider{background:hsla(0,0%,100%,.055);background:var(--border-subtle);height:1px;margin:4px 0}.hidden{display:none!important}.canvas-area:active{cursor:crosshair}
/*# sourceMappingURL=main.3509d9e5.css.map*/