:root{--font-inter:"Inter", system-ui, -apple-system, sans-serif;--bg-primary:#09090b;--bg-secondary:#121218;--bg-panel:#121218bf;--bg-panel-hover:#1a1a24d9;--border-color:#ffffff14;--border-color-active:#8b5cf680;--text-primary:#f4f4f5;--text-secondary:#a1a1aa;--text-muted:#71717a;--accent:#8b5cf6;--accent-light:#a78bfa;--accent-dark:#6d28d9;--accent-gradient:linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000004d, 0 4px 6px -2px #00000026;--shadow-xl:0 20px 25px -5px #00000080, 0 10px 10px -5px #0000004d;--shadow-glass:0 8px 32px 0 #00000080;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-inter);background-color:var(--bg-primary);color:var(--text-primary);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.glass{background:var(--bg-panel);backdrop-filter:blur(16px);border:1px solid var(--border-color)}.glass-card{backdrop-filter:blur(12px);border-radius:var(--radius-lg);background:#ffffff0d;border:1px solid #ffffff1a}.app-header{border-bottom:1px solid var(--border-color);z-index:50;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex}.logo-container{align-items:center;gap:12px;display:flex}.logo-icon{background:var(--accent-gradient);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;font-weight:800;display:flex}.logo-text{letter-spacing:-.5px;background:linear-gradient(90deg,#fff,#a1a1aa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:700}.app-container{flex:1;height:calc(100vh - 64px);display:flex;position:relative;overflow:hidden}.sidebar{border-right:1px solid var(--border-color);z-index:30;flex-direction:column;width:340px;height:100%;transition:width .3s;display:flex;overflow-y:auto}.sidebar-right{border-right:none;border-left:1px solid var(--border-color);width:360px}.sidebar-section{border-bottom:1px solid var(--border-color);padding:20px}.sidebar-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:16px;font-size:12px;font-weight:600;display:flex}.workspace{background-color:#0b0b0f;background-image:radial-gradient(#ffffff08 1px,#0000 0);background-size:24px 24px;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.canvas-viewport{flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative;overflow:auto}.canvas-container{transform-origin:50%;background:0 0;flex-direction:row;flex-shrink:0;gap:80px;padding:20px;display:flex;position:relative;overflow:visible}.safe-zone-guide{pointer-events:none;z-index:45;border:1.5px dashed #8b5cf666;width:90%;height:90%;display:none;position:absolute;top:5%;left:5%}.safe-zone-guide.visible{display:block}.slide-canvas{box-shadow:var(--shadow-xl);border-radius:var(--radius-sm);box-sizing:border-box;user-select:none;background:#000;border:6px solid #0000;flex-direction:column;flex-shrink:0;align-items:center;transition:border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.slide-canvas.active{border-color:var(--accent);box-shadow:0 0 0 10px #8b5cf640, var(--shadow-xl)}.canvas-text-wrapper{z-index:20;pointer-events:auto;cursor:pointer;flex-direction:column;width:90%;display:flex;position:absolute;top:80px;left:5%}.canvas-title{word-wrap:break-word;white-space:pre-wrap;margin-bottom:12px}.canvas-subtitle{word-wrap:break-word;white-space:pre-wrap}.canvas-element{transform-origin:50%;cursor:move;z-index:10;position:absolute}.canvas-element.locked{cursor:not-allowed}.device-mockup{box-sizing:border-box;background:#000;border-radius:40px;justify-content:center;align-items:center;display:flex;position:absolute;overflow:visible}.iphone-frame{background:#000;border:12px solid #1a1a1a;border-radius:44px;width:100%;height:100%;position:relative;box-shadow:inset 0 0 4px 2px #ffffff26,0 15px 35px -5px #0009}.dynamic-island{z-index:10;background:#000;border:1px solid #ffffff14;border-radius:20px;width:110px;height:28px;position:absolute;top:15px;left:50%;transform:translate(-50%)}.dynamic-island:after{content:"";background:#11111a;border-radius:50%;width:10px;height:10px;position:absolute;top:9px;right:25px;box-shadow:inset 0 0 2px #fff6}.android-frame{background:#000;border:8px solid #222;border-radius:36px;width:100%;height:100%;position:relative;box-shadow:inset 0 0 3px #fff3,0 15px 35px -5px #0009}.android-camera{z-index:10;background:#111;border:1px solid #ffffff1a;border-radius:50%;width:14px;height:14px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.device-screen{border-radius:inherit;background:#1e1e24;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0;overflow:hidden}.screenshot-img-container{cursor:grab;width:100%;height:100%;position:relative;overflow:hidden}.screenshot-img-container:active{cursor:grabbing}.screenshot-img{object-fit:cover;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute}.device-placeholder{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;padding:20px;font-size:14px;display:flex}.device-placeholder svg{width:48px;height:48px;color:var(--text-muted);opacity:.5}.decoration-element{position:absolute}.decoration-element>*{pointer-events:none}.decoration-element.device-mockup *{pointer-events:auto}.decoration-blob{background:radial-gradient(circle, var(--deco-color,var(--accent)) 0%, transparent 70%);filter:blur(40px)}.decoration-circle{border:4px solid var(--deco-color,#fff);border-radius:50%}.decoration-glow{background:radial-gradient(circle, var(--deco-color,#8b5cf666) 0%, #0000 70%);filter:blur(60px)}.decoration-glass-card{backdrop-filter:blur(12px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0000005e}.decoration-shape svg{width:100%;height:100%}.decoration-shape:not(.preserve-colors) svg path:not([fill=none]):not([fill=transparent]),.decoration-shape:not(.preserve-colors) svg rect:not([fill=none]):not([fill=transparent]),.decoration-shape:not(.preserve-colors) svg circle:not([fill=none]):not([fill=transparent]),.decoration-shape:not(.preserve-colors) svg polygon:not([fill=none]):not([fill=transparent]),.decoration-shape:not(.preserve-colors) svg ellipse:not([fill=none]):not([fill=transparent]),.decoration-shape:not(.preserve-colors) svg polyline:not([fill=none]):not([fill=transparent]),.decoration-shape:not(.preserve-colors) svg [fill]:not([fill=none]):not([fill=transparent]){fill:var(--deco-color,currentColor)!important}.decoration-shape:not(.preserve-colors) svg [stroke]:not([stroke=none]):not([stroke=transparent]),.decoration-shape:not(.preserve-colors) svg path[stroke]:not([stroke=none]),.decoration-shape:not(.preserve-colors) svg circle[stroke]:not([stroke=none]),.decoration-shape:not(.preserve-colors) svg polyline[stroke]:not([stroke=none]),.decoration-shape:not(.preserve-colors) svg line[stroke]:not([stroke=none]){stroke:var(--deco-color,currentColor)!important}.iconify-grid-btn{aspect-ratio:1;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-primary);background:#ffffff05;justify-content:center;align-items:center;padding:6px;transition:background-color .2s,border-color .2s;display:flex}.iconify-grid-btn:hover{background:#8b5cf626;border-color:#8b5cf666}.iconify-grid-btn svg{width:100%;height:100%;display:block}.decoration-text-box{word-break:break-word;cursor:move;white-space:pre-wrap;user-select:none;outline:none;justify-content:center;align-items:center;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.decoration-text-box.editing{cursor:text;user-select:text;caret-color:currentColor;outline:none}.canvas-element.decoration-element:has(.decoration-text-box){background:0 0}.canvas-element.decoration-element:has(.decoration-text-box):hover:not([data-editing=true]){outline-offset:2px;outline:1px dashed #8b5cf680}.selection-box{border:calc(2px / var(--zoom-level,1)) solid var(--accent);pointer-events:none;z-index:100;display:none;position:absolute}.selection-box.active{display:block}.resize-handle{width:calc(10px / var(--zoom-level,1));height:calc(10px / var(--zoom-level,1));border:calc(2px / var(--zoom-level,1)) solid var(--accent);pointer-events:auto;box-shadow:0 calc(1.5px / var(--zoom-level,1)) calc(4px / var(--zoom-level,1)) #0003;background:#fff;border-radius:50%;position:absolute}.resize-handle.top-left{top:calc(-5px / var(--zoom-level,1));left:calc(-5px / var(--zoom-level,1));cursor:nwse-resize}.resize-handle.top-right{top:calc(-5px / var(--zoom-level,1));right:calc(-5px / var(--zoom-level,1));cursor:nesw-resize}.resize-handle.bottom-left{bottom:calc(-5px / var(--zoom-level,1));left:calc(-5px / var(--zoom-level,1));cursor:nesw-resize}.resize-handle.bottom-right{bottom:calc(-5px / var(--zoom-level,1));right:calc(-5px / var(--zoom-level,1));cursor:nwse-resize}.rotate-handle{bottom:calc(-36px / var(--zoom-level,1));width:calc(26px / var(--zoom-level,1));height:calc(26px / var(--zoom-level,1));border:calc(2px / var(--zoom-level,1)) solid var(--accent);cursor:grab;pointer-events:auto;font-size:calc(13px / var(--zoom-level,1));box-shadow:0 calc(2px / var(--zoom-level,1)) calc(6px / var(--zoom-level,1)) #8b5cf659;user-select:none;background:#fff;border-radius:50%;justify-content:center;align-items:center;line-height:1;transition:transform .15s,box-shadow .15s;display:flex;position:absolute;left:50%;transform:translate(-50%)}.rotate-handle svg{width:calc(13px / var(--zoom-level,1))!important;height:calc(13px / var(--zoom-level,1))!important}.rotate-handle:hover{box-shadow:0 calc(4px / var(--zoom-level,1)) calc(12px / var(--zoom-level,1)) #8b5cf680;transform:translate(-50%)scale(1.15)}.rotate-handle:active{cursor:grabbing;transform:translate(-50%)scale(.95)}.rotate-handle:before{content:"";top:calc(-10px / var(--zoom-level,1));width:calc(2px / var(--zoom-level,1));height:calc(10px / var(--zoom-level,1));background:var(--accent);position:absolute;left:50%;transform:translate(-50%)}.smart-guide{z-index:99;pointer-events:none;background:#ec4899;display:none;position:absolute}.smart-guide.vertical{width:1.5px;height:100%;top:0}.smart-guide.horizontal{width:100%;height:1.5px;left:0}.timeline-bar{border-top:1px solid var(--border-color);background:var(--bg-panel);z-index:30;align-items:center;gap:16px;height:120px;padding:0 24px;display:flex;overflow-x:auto}.thumbnails-list{align-items:center;gap:12px;height:100%;display:flex}.thumbnail-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;user-select:none;flex-direction:column;flex-shrink:0;justify-content:space-between;width:60px;height:90px;padding:4px;transition:all .2s;display:flex;position:relative;overflow:hidden}.thumbnail-card.active{border-color:var(--accent);box-shadow:0 0 8px #8b5cf666}.thumbnail-preview{background-position:50%;background-size:cover;border-radius:2px;flex:1;width:100%;position:relative;overflow:hidden}.thumbnail-number{color:var(--text-muted);text-align:center;margin-top:2px;font-size:10px;font-weight:700}.thumbnail-card.active .thumbnail-number{color:var(--accent-light)}.thumbnail-delete-btn{color:#fff;cursor:pointer;background:#ef4444e6;border:none;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;display:none;position:absolute;top:2px;right:2px}.thumbnail-card:hover .thumbnail-delete-btn{display:flex}.add-slide-btn{border:2px dashed var(--border-color);border-radius:var(--radius-sm);width:60px;height:90px;color:var(--text-muted);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.add-slide-btn:hover{border-color:var(--accent);color:var(--text-primary);background:#8b5cf60d}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:500;display:block}.form-row{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.form-row-three{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.form-input,.form-select{border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;height:38px;color:var(--text-primary);font-family:var(--font-inter);background:#ffffff0a;outline:none;padding:0 12px;font-size:13px;transition:border-color .2s}.form-input:focus,.form-select:focus{border-color:var(--accent)}.color-picker-wrapper{align-items:center;gap:8px;display:flex}.color-swatch{border-radius:var(--radius-md);border:1px solid var(--border-color);cursor:pointer;width:38px;height:38px;position:relative;overflow:hidden}.color-swatch input[type=color]{cursor:pointer;border:none;width:56px;height:56px;position:absolute;top:-8px;left:-8px}.btn{border-radius:var(--radius-md);cursor:pointer;height:38px;font-size:13px;font-weight:600;font-family:var(--font-inter);border:none;justify-content:center;align-items:center;gap:8px;padding:0 16px;transition:all .2s;display:inline-flex}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 12px #8b5cf640}.btn-primary:hover{opacity:.95;transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf659}.btn-secondary{border:1px solid var(--border-color);color:var(--text-primary);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a}.btn-danger{color:#ef4444;background:#ef44441a;border:1px solid #ef444433}.btn-danger:hover{background:#ef444433}.btn-icon{border-radius:var(--radius-md);border:1px solid var(--border-color);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all .2;background:#ffffff0a;justify-content:center;align-items:center;padding:0;display:inline-flex}.btn-icon:hover{color:var(--text-primary);background:#ffffff14}.btn-icon.active{border-color:var(--accent);color:var(--accent-light);background:#8b5cf626}.tabs-header{border-bottom:1px solid var(--border-color);background:#0003;display:flex}.tab-btn{height:48px;color:var(--text-secondary);cursor:pointer;transition:all .2;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;font-size:13px;font-weight:600}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--accent-light);border-bottom-color:var(--accent);background:#ffffff03}.tab-content{display:none}.tab-content.active{display:block}.templates-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.template-card{border-radius:var(--radius-md);border:1px solid var(--border-color);aspect-ratio:9/16;cursor:pointer;background-position:50%;background-size:cover;transition:all .2s;position:relative;overflow:hidden}.template-card:hover{border-color:var(--accent);transform:scale(1.02)}.template-name{color:#fff;text-align:center;background:linear-gradient(#0000,#000c);width:100%;padding:6px;font-size:10px;font-weight:600;position:absolute;bottom:0;left:0}.layers-list{flex-direction:column;gap:8px;display:flex}.layer-item{border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;user-select:none;background:#ffffff08;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.layer-item:hover{background:#ffffff0f}.layer-item.active{border-color:var(--border-color-active);background:#8b5cf61a}.layer-name-wrapper{flex:1;align-items:center;gap:8px;font-size:13px;display:flex}.layer-actions{gap:4px;display:flex}.layer-action-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:2px}.layer-action-btn:hover{color:var(--text-primary)}.layer-action-btn.active{color:var(--accent-light)}.zoom-controls{z-index:40;border-radius:var(--radius-md);align-items:center;gap:8px;padding:4px;display:flex;position:absolute;bottom:24px;right:24px}.zoom-text{color:var(--text-secondary);padding:0 8px;font-size:12px;font-weight:600}.history-controls{gap:4px;display:flex}.brand-kit-grid{flex-direction:column;gap:12px;display:flex}.brand-kit-card{border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;background:#ffffff05;padding:12px;transition:all .2s}.brand-kit-card:hover{border-color:var(--accent);background:#ffffff0d}.brand-kit-title{margin-bottom:8px;font-size:13px;font-weight:700}.brand-kit-colors{gap:6px;margin-bottom:8px;display:flex}.brand-kit-color-dot{border:1px solid #ffffff1a;border-radius:50%;width:24px;height:24px}.brand-kit-fonts{color:var(--text-muted);justify-content:space-between;font-size:11px;display:flex}@media (width<=1024px){.sidebar{width:280px}}.slider-container{flex-direction:column;align-items:center;gap:6px;width:100%;display:flex}.custom-slider{appearance:none;background:#ffffff1a;border-radius:3px;outline:none;width:100%;height:6px;margin:8px 0;transition:background .2s}.custom-slider:hover{background:#ffffff26}.custom-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:transform .1s,background-color .2s;box-shadow:0 0 8px #8b5cf666}.custom-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.custom-slider::-webkit-slider-thumb:active{transform:scale(.9)}.custom-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;transition:transform .1s,background-color .2s;box-shadow:0 0 8px #8b5cf666}.custom-slider::-moz-range-thumb:hover{transform:scale(1.2)}.custom-slider::-moz-range-thumb:active{transform:scale(.9)}.custom-slider::-moz-range-track{background:0 0;border:none}.slider-number-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);width:52px;height:22px;color:var(--text-primary);text-align:center;font-family:var(--font-inter);-webkit-appearance:none;-moz-appearance:textfield;background:#ffffff0d;outline:none;padding:0;font-size:11px;font-weight:500;transition:border-color .2s,background-color .2s}.slider-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.slider-number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.slider-number-input:focus{border-color:var(--accent);background:#8b5cf60d}.context-menu{z-index:10000;backdrop-filter:blur(12px);border-radius:var(--radius-md);background:#120c22f2;border:1px solid #ffffff14;flex-direction:column;gap:2px;min-width:170px;padding:6px;display:flex;position:fixed;box-shadow:0 10px 30px #00000080}.context-menu-item{color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;padding:8px 12px;font-family:inherit;font-size:12px;transition:background .15s,color .15s;display:flex}.context-menu-item:hover{background:var(--accent);color:#fff}.context-menu-item.context-menu-danger:hover{background:#ef4444}.context-menu-shortcut{color:var(--text-muted);opacity:.8;margin-left:12px;font-size:10px}.context-menu-item:hover .context-menu-shortcut{color:#fffc}.context-menu-divider{background:#ffffff14;height:1px;margin:4px 6px}