@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg: #0d0d12;--surface: #141419;--surface-elevated: #1a1a22;--surface-hover: #1f1f27;--surface-high: #26262e;--border: #26262e;--border-strong: #3a3a44;--border-focus: #9b60aa;--text: #fafafa;--text-secondary: #c4c4cc;--text-muted: #93939f;--text-dim: #5c5c66;--accent: #1863dc;--accent-hover: #2972f0;--accent-dim: #144fb0;--accent-ring: rgba(76, 110, 230, .5);--purple: #9b60aa;--blue: #1863dc;--green: #22c55e;--green-dim: #16a34a;--red: #ef4444;--yellow: #eab308;--r-xs: 4px;--r-sm: 8px;--r: 16px;--r-md: 20px;--r-lg: 22px;--r-pill: 9999px;--surface2: var(--surface-elevated);--surface3: var(--surface-hover);--border-active: var(--border-strong);--text2: var(--text-secondary);--text3: var(--text-muted);--sp-01: 2px;--sp-02: 4px;--sp-03: 8px;--sp-04: 12px;--sp-05: 16px;--sp-06: 20px;--sp-07: 24px;--sp-08: 32px;--sp-09: 40px;--sp-10: 56px;--shadow-raised: 0 4px 24px rgba(0,0,0,.5);--shadow-modal: 0 20px 60px rgba(0,0,0,.7);--inset: none}[data-theme=light]{--bg: #ffffff;--surface: #fafafa;--surface-elevated: #f4f4f4;--surface-hover: #e8e8e8;--surface-high: #e0e0e0;--border: #f2f2f2;--border-strong: #d9d9dd;--border-focus: #9b60aa;--text: #0d0d12;--text-secondary: #3a3a44;--text-muted: #6f6f7a;--text-dim: #a3a3ad;--accent: #1863dc;--accent-hover: #0043ce;--accent-dim: #002d9c;--shadow-raised: 0 4px 24px rgba(0,0,0,.08);--shadow-modal: 0 20px 60px rgba(0,0,0,.15)}[data-theme=light] .canvas-item{background:#fafafa;background-image:radial-gradient(circle,#d9d9dd 1px,transparent 1px)}[data-theme=light] .modal-backdrop{background:#0d0d1266}[data-theme=light] .rich-text-editor,[data-theme=light] .rich-text-editor *{color:#0d0d12!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}.display{font-family:Space Grotesk,ui-sans-serif,system-ui,sans-serif;font-weight:500;letter-spacing:-.02em}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-pill)}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}.canvas-wrap{display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;padding:var(--sp-07)}.canvas-item{position:relative;background:var(--surface);background-image:radial-gradient(circle,#24242c 1px,transparent 1px);background-size:20px 20px;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg)}.canvas-item.selected{border-color:var(--border-strong)}.topbar{display:flex;justify-content:space-between;align-items:center;padding:0 16px;border-bottom:1px solid var(--border);background:var(--bg);height:48px;flex-shrink:0}.topbar-group{display:flex;align-items:center;gap:var(--sp-04)}.logo{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--text)}.seg-ctrl{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;gap:2px}.seg-btn{padding:0 var(--sp-05);height:30px;border:none;background:transparent;color:var(--text-muted);font-family:Inter,sans-serif;font-size:13px;font-weight:500;cursor:pointer;border-radius:var(--r-pill);transition:all .15s ease}.seg-btn:hover:not(.active){color:var(--text)}.seg-btn.active{background:var(--surface-high);color:var(--text)}.sidebar{width:272px;background:var(--bg);border-left:1px solid var(--border);height:100vh;overflow:hidden;flex-shrink:0}.panel{padding:12px 14px;border-bottom:1px solid var(--border)}.panel-title{font-size:10px;font-weight:500;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;height:32px;border:1px solid var(--border-strong);background:var(--surface-elevated);color:var(--text);font-family:Inter,sans-serif;font-size:12px;font-weight:500;letter-spacing:-.01em;cursor:pointer;border-radius:var(--r-pill);transition:all .15s ease;white-space:nowrap}.btn:hover{background:var(--surface-hover);border-color:var(--text-muted)}.btn:active{transform:translateY(.5px)}.btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}.btn:disabled{background:var(--surface);color:var(--text-dim);cursor:not-allowed;border-color:var(--border)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn.primary:active{background:var(--accent-dim)}.btn.secondary{background:var(--surface-elevated);color:var(--text);border-color:var(--border-strong)}.btn.tertiary{background:transparent;color:var(--accent);border-color:var(--accent)}.btn.tertiary:hover{background:var(--accent);color:#fff}.btn.ghost{background:transparent;color:var(--text-secondary);border-color:transparent}.btn.ghost:hover{background:var(--surface-elevated);color:var(--text)}.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.danger:hover{background:#dc2626;border-color:#dc2626}.btn-sm{height:26px;padding:0 10px;font-size:11px}.btn-icon{width:32px;height:32px;padding:0;background:transparent;border:1px solid transparent;color:var(--text-secondary);border-radius:var(--r-pill)}.btn-icon:hover{background:var(--surface-elevated);color:var(--text);border-color:transparent}.input-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.input-label{font-size:10px;font-weight:500;color:var(--text-muted);letter-spacing:.04em;min-width:36px;text-transform:uppercase}.slider{flex:1;-webkit-appearance:none;height:2px;background:var(--border-strong);outline:none;border-radius:var(--r-pill)}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--text);border-radius:50%;cursor:pointer;transition:all .15s ease}.slider::-webkit-slider-thumb:hover{background:var(--accent);transform:scale(1.15)}.input-num{width:52px;height:28px;padding:0 var(--sp-03);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text);font-family:IBM Plex Mono,monospace;font-size:12px;text-align:center;border-radius:var(--r-sm);-moz-appearance:textfield;transition:border-color .15s ease}.input-num:focus{outline:none;border-color:var(--accent)}.input-num::-webkit-inner-spin-button,.input-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field{width:100%;height:36px;padding:0 var(--sp-05);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text);font-family:Inter,sans-serif;font-size:13px;border-radius:var(--r-sm);transition:border-color .15s ease}.field:focus{outline:none;border-color:var(--accent)}.field::placeholder{color:var(--text-muted)}.field-textarea{width:100%;padding:var(--sp-04) var(--sp-05);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text);font-family:Inter,sans-serif;font-size:13px;line-height:1.6;border-radius:var(--r-sm);resize:vertical;transition:border-color .15s ease}.field-textarea:focus{outline:none;border-color:var(--accent)}.field-select{height:28px;padding:0 var(--sp-04);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text);font-family:Inter,sans-serif;font-size:12px;border-radius:var(--r-sm);cursor:pointer}.field-select:focus{outline:none;border-color:var(--accent)}.color-row{display:flex;gap:var(--sp-03)}.color-swatch{width:28px;height:28px;cursor:pointer;border:2px solid transparent;border-radius:var(--r-pill);transition:all .15s ease}.color-swatch:hover,.color-swatch.active{border-color:var(--accent);transform:scale(1.08)}.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-03)}.upload-btn{padding:var(--sp-05);background:var(--surface-elevated);border:1px solid var(--border);cursor:pointer;text-align:center;font-size:12px;color:var(--text-secondary);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;gap:var(--sp-02);transition:all .15s ease}.upload-btn:hover{background:var(--surface-hover);border-color:var(--accent);color:var(--text)}.tpl-btn{padding:var(--sp-02) var(--sp-04);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;border-radius:var(--r-pill);transition:all .15s ease;white-space:nowrap}.tpl-btn:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong)}.fx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-02);margin-top:var(--sp-03)}.fx-btn{padding:var(--sp-03) var(--sp-02);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text-secondary);font-size:11px;cursor:pointer;border-radius:var(--r-sm);transition:all .15s ease}.fx-btn:hover{background:var(--surface-hover);color:var(--text)}.fx-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.txt-toolbar{display:flex;gap:var(--sp-02);margin-bottom:var(--sp-04)}.txt-toolbar .btn{width:32px;height:32px;padding:0;border-radius:var(--r-sm);background:var(--surface-elevated);border-color:var(--border);color:var(--text)}.txt-toolbar .btn:hover{background:var(--surface-hover)}.txt-toolbar .btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.rich-text-editor{width:100%;min-height:80px;max-height:160px;background:var(--surface-elevated);border:1px solid var(--border);color:#fff!important;padding:var(--sp-04) var(--sp-05);font-size:14px;line-height:1.6;overflow-y:auto;margin-bottom:var(--sp-04);border-radius:var(--r-sm);font-family:Space Grotesk,sans-serif;transition:border-color .15s ease}.rich-text-editor *{color:#fff!important}.rich-text-editor:focus{outline:none;border-color:var(--accent)}.rich-text-editor[contenteditable]:empty:before{content:attr(placeholder);color:var(--text-muted)}.rich-toolbar{display:flex;gap:var(--sp-02);margin-bottom:var(--sp-04);align-items:center}.rich-toolbar select,.rich-toolbar input[type=number]{height:28px;padding:0 var(--sp-03);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text);font-size:12px;border-radius:var(--r-sm)}.rich-toolbar select:focus,.rich-toolbar input[type=number]:focus{outline:none;border-color:var(--accent)}.rich-toolbar input[type=number]{width:52px;font-family:IBM Plex Mono,monospace;text-align:center}.rich-toolbar input[type=color]{width:28px;height:28px;border:none;cursor:pointer;padding:0;background:transparent;border-radius:var(--r-sm)}.color-input-row{display:flex;gap:var(--sp-03);align-items:center;margin-top:var(--sp-04)}.hex-input{flex:1;height:32px;padding:0 var(--sp-04);background:var(--surface-elevated);border:1px solid var(--border);color:var(--text);font-size:12px;font-family:IBM Plex Mono,monospace;border-radius:var(--r-sm)}.hex-input:focus{outline:none;border-color:var(--accent)}.color-picker{width:32px;height:32px;border:none;cursor:pointer;padding:0;background:transparent;border-radius:var(--r-sm)}.layer{position:absolute;cursor:move;-webkit-user-select:none;user-select:none}.layer.selected{outline:2px solid var(--accent);outline-offset:2px}.layer:hover .del-btn{opacity:1}.del-btn{position:absolute;top:-10px;right:-10px;width:22px;height:22px;background:var(--red);color:#fff;border:none;font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s ease;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:var(--r-pill)}.resize-h{position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;background:var(--accent);cursor:se-resize;z-index:10;border-radius:2px}.text-content{white-space:pre;pointer-events:none}.fx-shadow{text-shadow:3px 3px 0 rgba(0,0,0,.3)}.fx-lift{text-shadow:0 6px 12px rgba(0,0,0,.4)}.fx-apple{text-shadow:0 0 60px rgba(255,255,255,.2),0 0 120px rgba(255,255,255,.1),0 0 200px rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.2);letter-spacing:-.03em;font-weight:600!important}.fx-hollow{-webkit-text-stroke:1.5px currentColor;color:transparent!important}.fx-splice{text-shadow:2px 2px 0 #0ff,-2px -2px 0 #f0f}.fx-outline{-webkit-text-stroke:2px currentColor;paint-order:stroke fill}.fx-echo{text-shadow:2px 2px 0 rgba(0,0,0,.2),4px 4px 0 rgba(0,0,0,.15),6px 6px 0 rgba(0,0,0,.1)}.fx-glitch{text-shadow:2px 0 #0ff,-2px 0 #f0f}.fx-neon{text-shadow:0 0 5px currentColor,0 0 10px currentColor,0 0 20px currentColor}.fx-bg{background:#0009;padding:4px 10px;display:inline-block;border-radius:var(--r-sm)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scale-handle{position:absolute;width:10px;height:10px;background:var(--accent);z-index:20;pointer-events:auto;transition:transform .15s ease;border-radius:2px}.scale-handle:hover{transform:scale(1.4)}.scale-handle.tl{top:-5px;left:-5px;cursor:nw-resize}.scale-handle.tr{top:-5px;right:-5px;cursor:ne-resize}.scale-handle.bl{bottom:-5px;left:-5px;cursor:sw-resize}.scale-handle.br{bottom:-5px;right:-5px;cursor:se-resize}.scale-outline{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid var(--accent);pointer-events:none;z-index:19;border-radius:var(--r-sm)}.pill{display:inline-flex;align-items:center;gap:var(--sp-02);padding:4px var(--sp-04);font-size:11px;font-weight:500;letter-spacing:-.01em;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface-elevated);color:var(--text-secondary);cursor:pointer;transition:all .15s ease;white-space:nowrap}.pill:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text)}.pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-07)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#0d0d12e0;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;overflow:hidden}.modal-header{padding:var(--sp-06) var(--sp-07);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.modal-header-title{font-family:Space Grotesk,sans-serif;font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--text)}.modal-body{flex:1;overflow:auto}.modal-footer{padding:var(--sp-05) var(--sp-07);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--sp-03);flex-shrink:0}.notification{padding:var(--sp-04) var(--sp-05);background:var(--surface-elevated);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);display:flex;align-items:center;gap:var(--sp-03);font-size:13px}.notification.error{border-left-color:var(--red)}.notification.success{border-left-color:var(--green)}.fab-pill{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:10px 18px;display:inline-flex;align-items:center;gap:var(--sp-03);cursor:pointer;box-shadow:var(--shadow-raised);font-size:13px;font-weight:500;color:var(--text);transition:all .15s ease}.fab-pill:hover{background:var(--surface-elevated);border-color:var(--text-muted);transform:translateY(-1px)}