:root{--z-dropdown: 100;--z-sticky: 200;--z-overlay: 500;--z-modal: 1000;--z-popover: 1500;--z-tooltip: 2000;--z-toast: 3000;--z-max: 9999;--designer-sidebar: 270px;--designer-props: 300px;--designer-toolbar: 50px;--designer-canvas-bg: #16161e;--designer-canvas-bg: oklch(10% .004 265);--designer-panel-bg: #1e1e28;--designer-panel-bg: oklch(13% .007 265);--designer-border: rgba(42, 42, 56, .5);--designer-border: oklch(20% .012 265 / .5);--designer-hover: #32323e;--designer-hover: oklch(22% .015 265);--designer-selected: rgba(88, 78, 168, .12);--designer-selected: oklch(50% .17 265 / .12);--cat-layout: #6a5acd;--cat-layout: oklch(62% .18 265);--cat-typo: #d4a055;--cat-typo: oklch(75% .16 45);--cat-interactive: #3dbd8d;--cat-interactive: oklch(70% .18 160);--cat-data: #c86abd;--cat-data: oklch(68% .2 330);--cat-nav: #4da8b5;--cat-nav: oklch(68% .16 200);--cat-feedback: #d47a50;--cat-feedback: oklch(70% .18 25);--cat-media: #8a5cc6;--cat-media: oklch(65% .2 300);--spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-smooth: cubic-bezier(.25, .1, .25, 1);--text-primary: #f0f0f5;--text-secondary: #a0a0b0;--text-muted: #8888a0;--text-1: var(--text-primary);--text-2: var(--text-secondary);--text-3: var(--text-muted);--bg-elevated: #1a1a2e;--surface-1: #0f1118;--surface-2: #1e1e30;--primary-6: #4f46e5;--primary-9: #818cf8;--border: rgba(255, 255, 255, .08)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-darkest, #0a0a0f);color:var(--text-primary, #f0f0f5);overflow:hidden;-webkit-font-smoothing:antialiased}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 0 var(--glow-color, oklch(50% .17 265 / .3))}50%{box-shadow:0 0 16px 4px var(--glow-color, oklch(50% .17 265 / .15))}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes dropPulse{0%{outline-color:#31aa4099}50%{outline-color:#31aa4033}to{outline-color:#31aa4099}}@keyframes nodeAppear{0%{opacity:.7;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes spinner-pulse{0%,to{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}@keyframes skeletonPulse{0%,to{opacity:.4}50%{opacity:.15}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideLeft{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideRight{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes scaleUp{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleDown{0%{transform:scale(1.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateY(0)}40%,43%{transform:translateY(-15px)}70%{transform:translateY(-7px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes insertionLineExpand{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes zoomInDown{0%{opacity:0;transform:scale(.5) translateY(-60px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes rollIn{0%{opacity:0;transform:translate(-100%) rotate(-120deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}to{opacity:1;transform:perspective(400px) rotateY(0)}}@keyframes lightSpeedIn{0%{opacity:0;transform:translate(100%) skew(-30deg)}60%{opacity:1;transform:translate(-5%) skew(10deg)}80%{transform:translate(2%) skew(-5deg)}to{opacity:1;transform:translate(0) skew(0)}}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes backInUp{0%{opacity:0;transform:translateY(80px) scale(.7)}80%{opacity:.7;transform:translateY(0) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes blur{0%{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}@keyframes morphIn{0%{opacity:0;border-radius:50%;transform:scale(.5)}to{opacity:1;border-radius:inherit;transform:scale(1)}}@keyframes expandUp{0%{opacity:0;max-height:0;transform:scaleY(0);transform-origin:bottom}to{opacity:1;max-height:1000px;transform:scaleY(1)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.3)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes slideOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes slideOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes flipX{0%{transform:perspective(400px) rotateX(0)}50%{transform:perspective(400px) rotateX(180deg)}to{transform:perspective(400px) rotateX(360deg)}}@keyframes flipY{0%{transform:perspective(400px) rotateY(0)}50%{transform:perspective(400px) rotateY(180deg)}to{transform:perspective(400px) rotateY(360deg)}}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px);filter:hue-rotate(90deg)}40%{transform:translate(2px,-2px);filter:hue-rotate(180deg)}60%{transform:translate(-1px,-1px);filter:hue-rotate(270deg)}80%{transform:translate(1px,1px);filter:hue-rotate(360deg)}}@keyframes neon{0%,to{text-shadow:0 0 4px rgba(99,102,241,.6),0 0 12px rgba(99,102,241,.4),0 0 24px rgba(99,102,241,.2)}50%{text-shadow:0 0 8px rgba(99,102,241,.8),0 0 20px rgba(99,102,241,.5),0 0 40px rgba(99,102,241,.3)}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}@keyframes jello{0%,to{transform:skew(0) skewY(0)}22%{transform:skew(-12.5deg) skewY(-12.5deg)}33%{transform:skew(6.25deg) skewY(6.25deg)}44%{transform:skew(-3.125deg) skewY(-3.125deg)}55%{transform:skew(1.5625deg) skewY(1.5625deg)}}@keyframes rubberBand{0%,to{transform:scaleX(1) scaleY(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}}@keyframes swing{0%,to{transform:rotate(0);transform-origin:top center}20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}}@keyframes tada{0%,to{transform:scale(1) rotate(0)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}}@keyframes wobble{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-25%) rotate(-5deg)}30%{transform:translate(20%) rotate(3deg)}45%{transform:translate(-15%) rotate(-3deg)}60%{transform:translate(10%) rotate(2deg)}75%{transform:translate(-5%) rotate(-1deg)}}@keyframes headShake{0%,50%,to{transform:translate(0)}6.5%{transform:translate(-6px) rotateY(-9deg)}18.5%{transform:translate(5px) rotateY(7deg)}31.5%{transform:translate(-3px) rotateY(-5deg)}43.5%{transform:translate(2px) rotateY(3deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes breathe{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(20deg)}75%{transform:rotate(-15deg)}}@keyframes morphBg{0%,to{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}25%{border-radius:58% 42% 75% 25%/76% 46% 54% 24%}50%{border-radius:50% 50% 33% 67%/55% 27% 73% 45%}75%{border-radius:33% 67% 58% 42%/63% 68% 32% 37%}}.designer-shell{display:flex;flex-direction:column;height:calc(100vh - 60px);overflow:hidden;animation:fadeIn .3s var(--ease-out-expo)}.designer-toolbar{display:flex;align-items:center;gap:6px;height:var(--designer-toolbar);padding:0 16px;background:var(--designer-panel-bg);border-bottom:1px solid var(--designer-border);flex-shrink:0;z-index:20;backdrop-filter:blur(12px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}.designer-toolbar.scroll-end:not(.scroll-start){mask-image:linear-gradient(to right,black calc(100% - 32px),transparent 100%);-webkit-mask-image:linear-gradient(to right,black calc(100% - 32px),transparent 100%)}.designer-toolbar.scroll-start:not(.scroll-end){mask-image:linear-gradient(to right,transparent 0px,black 32px);-webkit-mask-image:linear-gradient(to right,transparent 0px,black 32px)}.designer-toolbar.scroll-start.scroll-end{mask-image:linear-gradient(to right,transparent 0px,black 32px,black calc(100% - 32px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black 32px,black calc(100% - 32px),transparent 100%)}.designer-toolbar::-webkit-scrollbar{display:none}.designer-toolbar>*{flex-shrink:0}.toolbar-group{display:flex;align-items:center;gap:3px}.toolbar-sep{width:1px;height:26px;background:var(--designer-border);margin:0 6px}.toolbar-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary, #a0a0b0);cursor:pointer;font-size:15px;transition:background .2s var(--ease-smooth),color .2s var(--ease-smooth),transform .15s var(--ease-smooth);position:relative}.toolbar-btn:hover{background:var(--designer-hover);color:#fff;transform:translateY(-1px)}.toolbar-btn:active{transform:translateY(0) scale(.95)}.toolbar-btn.active{background:var(--designer-selected);color:var(--cat-layout)}.toolbar-btn[disabled]{opacity:.25;pointer-events:none}.toolbar-btn .tooltip{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);font-size:10px;white-space:nowrap;padding:3px 8px;border-radius:4px;background:#14161b;color:var(--text-secondary);pointer-events:none;opacity:0;transition:opacity .15s}.toolbar-btn:hover .tooltip{opacity:1}.toolbar-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-right:auto;display:flex;align-items:center;gap:10px}.toolbar-title i{font-size:20px;background:linear-gradient(135deg,var(--cat-layout),var(--cat-media));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.toolbar-node-count{font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;background:#3c68d926;color:oklch(75% .15 265);font-variant-numeric:tabular-nums}.toolbar-label{font-size:11px;color:var(--text-muted, #707080);padding:5px 12px;background:var(--bg-elevated, #1a1a2e);border-radius:8px;font-weight:500;font-variant-numeric:tabular-nums}.viewport-switcher{display:flex;gap:2px;background:#0c0d11;border-radius:8px;padding:2px}.responsive-toolbar{display:flex;gap:6px;align-items:center;padding:0 10px;height:34px;background:#0f1216;border-radius:8px;border:1px solid var(--designer-border);flex-shrink:0;overflow-x:auto}.responsive-toolbar-bp{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}.responsive-toolbar-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.responsive-toolbar-sep{width:1px;height:18px;background:var(--designer-border);flex-shrink:0}.responsive-preset-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;background:#0c0d11;border:1px solid var(--designer-border);cursor:pointer;font-size:11px;color:var(--text-2, #b0b0c0);transition:all .15s;white-space:nowrap;flex-shrink:0}.responsive-preset-btn:hover{background:#507ef11f;border-color:#507ef159;color:var(--text-1, #e0e0f0)}.responsive-preset-btn.active{background:#507ef12e;border-color:#507ef180;color:oklch(75% .16 265)}.responsive-preset-btn i{font-size:12px}.palette-layout-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-radius:6px;transition:background .12s}.palette-layout-item:hover{background:oklch(65% .18 220 / .1)}.palette-layout-item i{font-size:16px;color:oklch(65% .18 220);flex-shrink:0}.designer-main{display:flex;flex:1;overflow:hidden;position:relative}.sidebar-left{display:flex;flex-direction:column;width:var(--designer-sidebar);flex-shrink:0;border-right:1px solid var(--designer-border);overflow:hidden;overflow-y:auto;transition:width .28s var(--ease-out-expo),opacity .2s;will-change:width}.sidebar-left.closed{width:0;opacity:0;pointer-events:none;border-right:none}.sidebar-right{display:flex;flex-direction:column;width:var(--designer-props);flex-shrink:0;overflow:hidden;overflow-y:auto;transition:width .28s var(--ease-out-expo),opacity .2s;will-change:width}.sidebar-right.closed{width:0;opacity:0;pointer-events:none}.canvas-center{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.sidebar-toggle{position:relative}.sidebar-toggle.active{color:var(--cat-layout)!important}.sidebar-overlay{display:none}.palette-panel{width:var(--designer-sidebar);background:var(--designer-panel-bg);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;flex:1;min-height:0;animation:slideInLeft .35s var(--ease-out-expo)}.palette-search{padding:10px 12px;border-bottom:1px solid var(--designer-border);flex-shrink:0}.palette-search input{width:100%;padding:9px 12px 9px 34px;border-radius:9px;border:1px solid var(--designer-border);background:var(--bg-elevated, #1a1a2e);color:var(--text-primary);font-size:12.5px;font-family:inherit;outline:none;transition:all .2s var(--ease-smooth)}.palette-search input:focus{border-color:var(--cat-layout);box-shadow:0 0 0 3px #507ef11a}.palette-search input::placeholder{color:var(--text-muted)}.palette-search-wrap{position:relative}.palette-search-wrap i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text-muted);pointer-events:none}.palette-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0;min-height:0;-webkit-overflow-scrolling:touch}.palette-category{padding:0 10px;margin-bottom:2px}.palette-category-header{display:flex;align-items:center;gap:8px;padding:8px 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;user-select:none;border-radius:6px;transition:background .15s}.palette-category-header:hover{background:#0f121680}.palette-category-header i.cat-icon{font-size:13px}.palette-category-header .cat-label{flex:1}.palette-category-header .cat-count{font-size:10px;font-weight:500;opacity:.5;font-variant-numeric:tabular-nums}.palette-category-header .caret{font-size:10px;transition:transform .25s var(--spring);margin-left:4px}.palette-category[data-cat=Layout] .palette-category-header{color:var(--cat-layout)}.palette-category[data-cat=Typography] .palette-category-header{color:var(--cat-typo)}.palette-category[data-cat=Interactive] .palette-category-header{color:var(--cat-interactive)}.palette-category[data-cat="Data Display"] .palette-category-header{color:var(--cat-data)}.palette-category[data-cat=Navigation] .palette-category-header{color:var(--cat-nav)}.palette-category[data-cat=Feedback] .palette-category-header{color:var(--cat-feedback)}.palette-category[data-cat=Media] .palette-category-header{color:var(--cat-media)}.palette-items{overflow:hidden}.palette-items.collapsed{max-height:0;opacity:0;transition:all .25s var(--ease-out-expo)}.palette-items.expanded{max-height:2000px;opacity:1;transition:all .3s var(--ease-out-expo)}.palette-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:grab;font-size:12.5px;color:var(--text-secondary);transition:all .18s var(--ease-smooth);user-select:none;border:1px solid transparent;position:relative;touch-action:none;animation:fadeUp .2s var(--ease-out-expo) backwards}.palette-item:nth-child(1){animation-delay:.02s}.palette-item:nth-child(2){animation-delay:.04s}.palette-item:nth-child(3){animation-delay:.06s}.palette-item:nth-child(4){animation-delay:.08s}.palette-item:nth-child(5){animation-delay:.1s}.palette-item:hover{background:var(--item-hover-bg, var(--designer-hover));color:var(--text-primary);border-color:var(--item-border, transparent);transform:translate(3px)}.palette-item:active{cursor:grabbing;transform:scale(.97)}.palette-item i{font-size:14px;width:20px;text-align:center}.palette-category[data-cat=Layout] .palette-item i{color:var(--cat-layout)}.palette-category[data-cat=Layout] .palette-item{--item-hover-bg: oklch(62% .18 265 / .06);--item-border: oklch(62% .18 265 / .12)}.palette-category[data-cat=Typography] .palette-item i{color:var(--cat-typo)}.palette-category[data-cat=Typography] .palette-item{--item-hover-bg: oklch(75% .16 45 / .06);--item-border: oklch(75% .16 45 / .12)}.palette-category[data-cat=Interactive] .palette-item i{color:var(--cat-interactive)}.palette-category[data-cat=Interactive] .palette-item{--item-hover-bg: oklch(70% .18 160 / .06);--item-border: oklch(70% .18 160 / .12)}.palette-category[data-cat="Data Display"] .palette-item i{color:var(--cat-data)}.palette-category[data-cat="Data Display"] .palette-item{--item-hover-bg: oklch(68% .2 330 / .06);--item-border: oklch(68% .2 330 / .12)}.palette-category[data-cat=Navigation] .palette-item i{color:var(--cat-nav)}.palette-category[data-cat=Navigation] .palette-item{--item-hover-bg: oklch(68% .16 200 / .06);--item-border: oklch(68% .16 200 / .12)}.palette-category[data-cat=Feedback] .palette-item i{color:var(--cat-feedback)}.palette-category[data-cat=Feedback] .palette-item{--item-hover-bg: oklch(70% .18 25 / .06);--item-border: oklch(70% .18 25 / .12)}.palette-category[data-cat=Media] .palette-item i{color:var(--cat-media)}.palette-category[data-cat=Media] .palette-item{--item-hover-bg: oklch(65% .2 300 / .06);--item-border: oklch(65% .2 300 / .12)}.drag-ghost{position:fixed;pointer-events:none;z-index:var(--z-max);padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;background:#507ef1eb;color:#fff;backdrop-filter:blur(12px) saturate(1.2);opacity:.7;box-shadow:0 12px 32px #0006,0 4px 12px #0003,0 0 0 1px #507ef14d;display:flex;align-items:center;gap:8px;transform:translate(-50%,-100%) translateY(-12px);animation:fadeScale .1s ease;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drag-ghost i{font-size:14px}.drag-ghost-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:11px;font-weight:800;background:#ffffff26;flex-shrink:0}.touch-drag-ghost{position:fixed;pointer-events:none;z-index:var(--z-max);padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;background:#3c68d9f2;color:#fff;backdrop-filter:blur(12px);box-shadow:0 8px 32px #0006;display:flex;align-items:center;gap:8px;transform:translate(-50%,-120%);animation:fadeScale .15s ease;will-change:transform}.touch-drag-ghost i{font-size:14px}.canvas-node[data-touch-drop=before]{box-shadow:0 -2px #43c251,0 -6px 12px -4px #43c2514d!important}.canvas-node[data-touch-drop=after]{box-shadow:0 2px #43c251,0 6px 12px -4px #43c2514d!important}.canvas-node[data-touch-drop=inside]{outline:2px dashed oklch(62% .18 265 / .6)!important;background-color:#507ef10a!important;box-shadow:inset 0 0 20px #507ef10f}.canvas-node[data-mouse-drop=before]{box-shadow:0 -4px oklch(82% .26 145),0 -12px 24px -4px #19c63cb3!important;outline-color:#19c63c99!important}.canvas-node[data-mouse-drop=after]{box-shadow:0 4px oklch(82% .26 145),0 12px 24px -4px #19c63cb3!important;outline-color:#19c63c99!important}.canvas-node[data-mouse-drop=left]{box-shadow:-4px 0 oklch(82% .26 145),-12px 0 24px -4px #19c63cb3!important;outline-color:#19c63c99!important}.canvas-node[data-mouse-drop=right]{box-shadow:4px 0 oklch(82% .26 145),12px 0 24px -4px #19c63cb3!important;outline-color:#19c63c99!important}.canvas-node[data-mouse-drop=inside]{outline:3px dashed oklch(72% .26 265 / .9)!important;outline-offset:4px;background-color:#507ef11a!important;box-shadow:inset 0 0 30px #507ef126,0 0 24px #507ef133!important}.canvas-node[data-mouse-drop=before]:after,.canvas-node[data-mouse-drop=after]:after{content:"";position:absolute;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,oklch(78% .24 145),oklch(78% .24 145),transparent);border-radius:2px;z-index:50;pointer-events:none;animation:dropLineGlow .6s ease infinite alternate}.canvas-node[data-mouse-drop=before]:after{top:-3px}.canvas-node[data-mouse-drop=after]:after{bottom:-3px}.canvas-node[data-mouse-drop=left]:after,.canvas-node[data-mouse-drop=right]:after{content:"";position:absolute;top:0;bottom:0;width:4px;background:linear-gradient(180deg,transparent,oklch(78% .24 145),oklch(78% .24 145),transparent);border-radius:2px;z-index:50;pointer-events:none;animation:dropLineGlow .6s ease infinite alternate}.canvas-node[data-mouse-drop=left]:after{left:-2px}.canvas-node[data-mouse-drop=right]:after{right:-2px}.canvas-node[data-mouse-drop=inside]:before{content:"⬇ Drop inside";position:absolute;top:4px;left:50%;transform:translate(-50%);font-size:10px;font-weight:700;color:oklch(70% .18 265);background:#081431e6;padding:2px 10px;border-radius:4px;z-index:51;pointer-events:none;white-space:nowrap;animation:dropLabelPulse .8s ease-in-out infinite alternate}@keyframes dropLabelPulse{0%{opacity:.7}to{opacity:1}}@keyframes dropLineGlow{0%{box-shadow:0 0 4px #19c63c66}to{box-shadow:0 0 12px #19c63cb3}}.canvas-node[data-mouse-drop]{transition:box-shadow .1s ease,outline-color .1s ease}.canvas-node[data-mouse-drop=before]:after,.canvas-node[data-mouse-drop=after]:after,.canvas-node[data-mouse-drop=left]:after,.canvas-node[data-mouse-drop=right]:after{animation:dropLineGlow .6s ease-in-out infinite alternate}@keyframes dropFlash{0%{outline:3px solid oklch(82% .26 145 / .9);outline-offset:2px}to{outline:3px solid transparent;outline-offset:8px}}.canvas-node.just-dropped{animation:dropFlash .4s ease-out forwards}.drag-insertion-line{position:fixed;pointer-events:none;z-index:9999;background:#6366f1;border-radius:1px;transition:top .06s ease-out,left .06s ease-out,width .06s ease-out,height .06s ease-out;box-shadow:0 0 6px #6366f180,0 0 2px #6366f1cc}.drag-insertion-line:before,.drag-insertion-line:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#6366f1;box-shadow:0 0 4px #6366f180}.drag-insertion-line.horizontal:before{top:-3px;left:-4px}.drag-insertion-line.horizontal:after{top:-3px;right:-4px}.drag-insertion-line.vertical:before{left:-3px;top:-4px}.drag-insertion-line.vertical:after{left:-3px;bottom:-4px}.drag-target-valid{outline:2px dashed #22c55e!important;outline-offset:2px;background:#22c55e0d!important;box-shadow:0 0 8px #22c55e26!important}.drag-target-invalid{outline:2px dashed #ef4444!important;outline-offset:2px;background:#ef44440d!important;box-shadow:0 0 10px #ef444426!important;opacity:.55}.drag-target-inside{outline:2px dashed #6366f1!important;outline-offset:4px;background-color:#6366f10d!important;box-shadow:inset 0 0 20px #6366f114,0 0 16px #6366f11f!important}.drag-ghost-type{font-size:9px;font-weight:500;opacity:.65;padding:1px 5px;background:#ffffff1f;border-radius:3px;margin-left:-2px}.align-guide{position:fixed;pointer-events:none;z-index:var(--z-max);opacity:0;animation:guide-appear .15s ease-out forwards}.align-guide.vertical{width:1px;background:#6366f1;box-shadow:0 0 6px #6366f166}.align-guide.horizontal{height:1px;background:#6366f1;box-shadow:0 0 6px #6366f166}.align-guide.center{background:#ef4444;box-shadow:0 0 6px #ef444466}.align-guide.vertical:before,.align-guide.vertical:after{content:"";position:absolute;left:-2px;width:5px;height:5px;background:#6366f1;border-radius:50%}.align-guide.center.vertical:before,.align-guide.center.vertical:after{background:#ef4444}.align-guide.vertical:before{top:0}.align-guide.vertical:after{bottom:0}.align-guide.horizontal:before,.align-guide.horizontal:after{content:"";position:absolute;top:-2px;width:5px;height:5px;background:#6366f1;border-radius:50%}.align-guide.center.horizontal:before,.align-guide.center.horizontal:after{background:#ef4444}.align-guide.horizontal:before{left:0}.align-guide.horizontal:after{right:0}@keyframes guide-appear{0%{opacity:0}to{opacity:.85}}.smart-guide{position:absolute;pointer-events:none;z-index:9999}.smart-guide.vertical{width:1px;top:0;bottom:0;background:#6366f1;box-shadow:0 0 4px #6366f14d}.smart-guide.horizontal{height:1px;left:0;right:0;background:#6366f1;box-shadow:0 0 4px #6366f14d}.smart-guide.center{background:#ef4444;box-shadow:0 0 4px #ef44444d}.grid-dots{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,rgba(99,102,241,.2) 1px,transparent 1px);background-size:8px 8px;opacity:.6}.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--designer-canvas-bg);position:relative}.smart-suggestions-bar{display:flex;align-items:center;gap:10px;padding:6px 16px;flex-shrink:0;background:#06090ff2;border-top:1px solid oklch(25% .02 265 / .6);backdrop-filter:blur(12px);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.suggestion-label{font-size:10px;font-weight:600;color:#6b8dd8;white-space:nowrap;display:flex;align-items:center;gap:4px}.suggestion-label .bi{font-size:11px;color:oklch(75% .18 80)}.suggestion-chips{display:flex;gap:6px;flex-wrap:nowrap}.suggestion-chip{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;background:#12161f;border:1px solid oklch(30% .04 265);color:#a5bdf2;font-size:10px;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s var(--ease-smooth)}.suggestion-chip:hover{background:#507ef126;border-color:#507ef166;color:oklch(85% .12 265);transform:translateY(-1px)}.suggestion-chip .bi{font-size:10px;opacity:.7}.canvas-viewport{flex:1;overflow:auto;padding:32px;display:flex;justify-content:center;align-items:flex-start;position:relative;transition:padding .3s var(--ease-out-expo);outline:none;background:#040407}.canvas-grid-overlay{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,oklch(30% .02 265 / .25) 1px,transparent 1px);background-size:20px 20px;opacity:0;transition:opacity .35s var(--ease-smooth)}.canvas-grid-overlay.visible{opacity:1}.canvas-frame{padding:24px;background:#0b0d12;border-radius:12px;min-height:400px;width:100%;border:1px solid oklch(25% .02 265);position:relative;z-index:1;box-shadow:0 0 0 1px #12161f,0 4px 32px #0000004d,0 0 120px #385db808;transition:max-width .4s var(--ease-out-expo),box-shadow .3s;box-sizing:border-box;overflow-x:hidden}.canvas-frame *{box-sizing:border-box}.canvas-frame.desktop{max-width:100%}.canvas-frame.tablet{max-width:768px}.canvas-frame.mobile{max-width:375px}.canvas-frame.mobile .device-frame-content .canvas-node[data-container]{flex-direction:column!important;flex-wrap:wrap!important;overflow-x:hidden!important}.canvas-frame.mobile .device-frame-content .canvas-node[data-container]>.canvas-node{flex:1 1 auto!important;max-width:100%!important;min-width:0!important;width:100%!important}.canvas-frame.mobile .device-frame-content .canvas-node[data-type=Sidebar]{flex-direction:row!important;width:100%!important;overflow-x:auto!important;padding:6px 8px!important;gap:4px!important;max-height:50px!important}.canvas-frame.mobile .device-frame-content .canvas-node[data-type=Sidebar] .canvas-node{font-size:10px!important;padding:3px 8px!important;white-space:nowrap}.canvas-frame.mobile .device-frame-content .canvas-node[data-type=Grid],.canvas-frame.mobile .device-frame-content .canvas-node[data-type=FlexRow],.canvas-frame.mobile .device-frame-content .canvas-node[data-type=Row]{display:flex!important;flex-direction:column!important;grid-template-columns:1fr!important}.canvas-frame.mobile .device-frame-content .canvas-node{overflow-x:hidden!important;max-width:100%!important}.canvas-frame.tablet .canvas-node[data-container]{flex-wrap:wrap!important}.canvas-frame.tablet .canvas-node[data-type=Grid]{grid-template-columns:repeat(2,1fr)!important}.canvas-frame.tablet .canvas-node[data-type=FlexRow]>.canvas-node,.canvas-frame.tablet .canvas-node[data-type=Row]>.canvas-node{flex:0 0 calc(50% - 8px)!important;max-width:calc(50% - 8px)!important}.canvas-frame.tablet .canvas-node[data-type=Sidebar]{max-width:60px!important;overflow:hidden!important}.canvas-frame.tablet .canvas-node[data-type=Sidebar] .canvas-node{font-size:11px!important;padding:6px 4px!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.canvas-frame.mobile>.canvas-node[data-container]{flex-direction:column!important;flex-wrap:wrap!important;overflow-x:hidden!important}.canvas-frame.mobile>.canvas-node[data-container]>.canvas-node{flex:1 1 auto!important;max-width:100%!important;width:100%!important}.canvas-frame.drag-active,.canvas-frame.touch-drag-over{box-shadow:0 0 120px #507ef11a,0 0 40px #507ef10f;border-color:#507ef14d}.canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:var(--text-muted);gap:16px;animation:fadeUp .5s var(--ease-out-expo)}.canvas-empty i{font-size:56px;opacity:.2;background:linear-gradient(135deg,var(--cat-layout),var(--cat-data));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.canvas-empty p{font-size:15px;font-weight:500}.canvas-empty .hint{font-size:12px;opacity:.4}.canvas-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;gap:12px;color:var(--text-muted);animation:fadeUp .5s var(--ease-out-expo)}.canvas-empty-state .empty-icon{width:72px;height:72px;border-radius:20px;background:#0f1216;display:flex;align-items:center;justify-content:center;font-size:28px;animation:pulse 3s ease-in-out infinite}.canvas-empty-state .empty-icon i{background:linear-gradient(135deg,var(--cat-layout),var(--cat-data));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.canvas-empty-state h3{font-size:18px;font-weight:700;color:var(--text-primary, #fff);margin:8px 0 0}.canvas-empty-state p{font-size:13px;color:var(--text-secondary, #a0a0b0);margin:0}.canvas-empty-state p kbd{display:inline-block;padding:1px 6px;border-radius:4px;background:#14161b;border:1px solid oklch(28% .015 265);font-size:11px;font-family:JetBrains Mono,monospace}.canvas-empty-state .empty-quick-actions{display:flex;gap:8px;margin-top:12px}.canvas-empty-state .empty-quick-actions button{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;background:#14161b;border:1px solid oklch(28% .015 265);color:var(--text-secondary, #a0a0b0);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}.canvas-empty-state .empty-quick-actions button:hover{background:#507ef126;border-color:#507ef166;color:var(--text-primary, #fff)}.canvas-empty-state .empty-page-templates{margin-top:8px;width:100%;max-width:640px}.canvas-empty-state .empty-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted, #707080);margin-bottom:10px;text-align:center}.canvas-empty-state .empty-page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.canvas-empty-state .empty-page-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;border-radius:10px;background:#0b0d12;border:1px solid oklch(25% .015 265);cursor:pointer;transition:all .2s ease;text-align:center}.canvas-empty-state .empty-page-card:hover{background:#507ef11f;border-color:#507ef166;transform:translateY(-2px);box-shadow:0 4px 12px #507ef11a}.canvas-empty-state .empty-page-card i{font-size:22px;color:oklch(72% .15 265)}.canvas-empty-state .empty-page-card .empty-page-name{font-size:13px;font-weight:700;color:var(--text-primary, #fff)}.canvas-empty-state .empty-page-card .empty-page-desc{font-size:10px;color:var(--text-muted, #707080);line-height:1.3}.canvas-empty-state .empty-divider-row{display:flex;align-items:center;gap:12px;width:100%;max-width:400px;margin:8px 0 0}.canvas-empty-state .empty-divider-line{flex:1;height:1px;background:#1e2229}.canvas-empty-state .empty-divider-text{font-size:10px;color:var(--text-muted, #707080);white-space:nowrap}.canvas-node{position:relative;outline:1px solid oklch(35% .04 265 / .3);outline-offset:0px;border-radius:6px;transition:outline-color .15s,outline-offset .15s,box-shadow .2s,opacity .15s;min-height:24px;animation:nodeAppear .15s ease-out;cursor:grab;user-select:none}.canvas-node:active:not(.preview-mode){cursor:grabbing}.canvas-node.preview-mode{cursor:default}.canvas-node:not(.preview-mode):not([data-container])>*:not(.canvas-node-label):not(.inline-text-edit):not(.drop-zone):not(.drag-handle){pointer-events:none}.canvas-node.preview-mode *{pointer-events:auto}.canvas-node:hover{outline-color:#496dc399;outline-offset:1px;box-shadow:0 0 0 1px #496dc333}.canvas-node:hover:not(.selected):not(.preview-mode){outline:1px dashed rgba(99,102,241,.4)}.canvas-node:has(.canvas-node:hover){outline-color:transparent;box-shadow:none}.canvas-node.selected{outline:2px solid #6366f1;outline-offset:2px;box-shadow:0 0 0 3px #6366f133,0 0 12px #6366f12e,0 2px 8px #00000026;animation:none;transition:outline-color .15s,outline-offset .15s,box-shadow .3s,opacity .15s}.canvas-node.drop-target{outline:2px dashed oklch(65% .22 145 / .8);outline-offset:2px;animation:dropPulse 1s ease-in-out infinite;background:#31aa400d}.canvas-node.drop-beside-before:before{content:"";position:absolute;top:-3px;left:0;right:0;height:4px;background:oklch(65% .22 265);border-radius:2px;z-index:var(--z-dropdown);box-shadow:0 0 8px oklch(65% .22 265 / .5);animation:dropPulse 1s ease-in-out infinite}.canvas-node.drop-beside-after:after{content:"";position:absolute;bottom:-3px;left:0;right:0;height:4px;background:oklch(65% .22 265);border-radius:2px;z-index:var(--z-dropdown);box-shadow:0 0 8px oklch(65% .22 265 / .5);animation:dropPulse 1s ease-in-out infinite}body.canvas-dragging,body.canvas-dragging *{cursor:grabbing!important}body.canvas-dragging .canvas-node:not(.dragging){pointer-events:auto}.canvas-node.dragging{opacity:.35;outline:2px dashed oklch(55% .15 265 / .4)!important;transition:opacity .12s ease;pointer-events:none}.canvas-node.dragging:not(:active){animation:drag-recovery .3s ease 2s forwards}@keyframes drag-recovery{0%{opacity:.35;filter:blur(2px)}to{opacity:1;filter:none}}.canvas-node{transition:transform .2s cubic-bezier(.2,0,0,1),opacity .15s ease}.canvas-node.just-dropped{animation:dropSettle .3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes dropSettle{0%{transform:scale(1.03);box-shadow:0 8px 24px #6366f140}60%{transform:scale(.99)}to{transform:scale(1);box-shadow:none}}.canvas-node.shifting-down{animation:shiftDown .2s cubic-bezier(.2,0,0,1) forwards}.canvas-node.shifting-up{animation:shiftUp .2s cubic-bezier(.2,0,0,1) forwards}@keyframes shiftDown{0%{transform:translateY(-4px);opacity:.8}to{transform:translateY(0);opacity:1}}@keyframes shiftUp{0%{transform:translateY(4px);opacity:.8}to{transform:translateY(0);opacity:1}}.canvas-node.dragging{cursor:grabbing!important}.canvas-node[data-invalid-drop=true]{cursor:not-allowed!important}.canvas-frame.drag-active{cursor:grabbing}.canvas-viewport.scroll-hint-top:before{content:"";position:sticky;top:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,oklch(62% .18 265 / .15),transparent);pointer-events:none;z-index:50;display:block;animation:scrollHintPulse 1s ease-in-out infinite}.canvas-viewport.scroll-hint-bottom:after{content:"";position:sticky;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to top,oklch(62% .18 265 / .15),transparent);pointer-events:none;z-index:50;display:block;animation:scrollHintPulse 1s ease-in-out infinite}@keyframes scrollHintPulse{0%,to{opacity:.5}50%{opacity:1}}.canvas-node.hidden-node{opacity:.15;pointer-events:none}.canvas-node.locked-node{opacity:.7}.canvas-node.locked-node:after{content:"🔒";position:absolute;top:2px;right:4px;font-size:10px;pointer-events:none}.canvas-node.preview-mode{outline:none!important;cursor:default;user-select:auto}.canvas-node.preview-mode:hover{outline:none!important}.canvas-node.preview-mode.selected,.canvas-node.preview-mode.multi-selected{outline:none!important;box-shadow:none!important}.canvas-node.preview-mode:not([data-container])>*:not(.canvas-node-label){pointer-events:auto}.canvas-node.preview-mode input,.canvas-node.preview-mode textarea,.canvas-node.preview-mode select{user-select:text;pointer-events:auto;cursor:text}.canvas-node.preview-mode select{cursor:pointer}.canvas-node.preview-mode input:focus,.canvas-node.preview-mode textarea:focus{outline:none;box-shadow:0 0 0 2px #6366f166,0 0 12px #6366f11a;border-color:#6366f180!important;transition:box-shadow .2s,border-color .2s}.canvas-node.preview-mode input::placeholder,.canvas-node.preview-mode textarea::placeholder{transition:opacity .2s,transform .2s}.canvas-node.preview-mode input:focus::placeholder,.canvas-node.preview-mode textarea:focus::placeholder{opacity:.4;transform:translate(4px)}.canvas-node.preview-mode .canvas-toggle-track,.canvas-node.preview-mode .canvas-checkbox-box,.canvas-node.preview-mode.has-interactions{cursor:pointer}.canvas-node.preview-mode.has-interactions:hover{box-shadow:0 0 0 2px #54bf5c66;transition:box-shadow .15s}.canvas-node.preview-mode.auto-hover-btn{transition:transform .18s cubic-bezier(.22,1,.36,1),filter .18s ease,box-shadow .18s ease;cursor:pointer}.canvas-node.preview-mode.auto-hover-btn:hover{transform:translateY(-1px) scale(1.03);filter:brightness(1.15);box-shadow:0 4px 16px #6366f140}.canvas-node.preview-mode.auto-hover-btn:active{transform:translateY(0) scale(.98);filter:brightness(.95);transition-duration:.06s}.canvas-node.preview-mode.auto-hover-card{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}.canvas-node.preview-mode.auto-hover-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0000004d,0 0 0 1px #6366f126}.preview-mode input[type=text],.preview-mode input[type=email],.preview-mode input[type=password],.preview-mode input[type=search],.preview-mode input[type=number],.preview-mode textarea,.preview-mode select{transition:border-color .2s,box-shadow .2s,outline .15s}.preview-mode input[type=text]:focus,.preview-mode input[type=email]:focus,.preview-mode input[type=password]:focus,.preview-mode input[type=search]:focus,.preview-mode input[type=number]:focus,.preview-mode textarea:focus{border-color:var(--primary-9, #818cf8)!important;box-shadow:0 0 0 3px #818cf833;outline:none}.preview-mode select:focus{border-color:var(--primary-9, #818cf8)!important;box-shadow:0 0 0 3px #818cf833;outline:none}.canvas-checkbox-box{transition:transform .15s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s!important}.canvas-checkbox-box:active{transform:scale(.85)}.canvas-checkbox-box[data-checked=true]{animation:checkPop .25s cubic-bezier(.22,1,.36,1)}@keyframes checkPop{0%{transform:scale(.8)}50%{transform:scale(1.15)}to{transform:scale(1)}}.canvas-toggle-track{transition:background .25s,box-shadow .2s!important}.canvas-toggle-track:active{box-shadow:0 0 0 3px #818cf833}.canvas-accordion-header:hover{background:#ffffff0a!important}.canvas-accordion-body{transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s,padding .25s;overflow:hidden}.canvas-node.preview-mode [style*=borderBottom]:hover{filter:brightness(1.1)}.canvas-node.preview-mode.auto-hover-btn:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),rgba(255,255,255,.25) 0%,transparent 60%);opacity:0;pointer-events:none;transition:opacity .4s}.canvas-node.preview-mode.auto-hover-btn:active:after{opacity:1;transition-duration:.06s}.canvas-node.preview-mode input[type=text],.canvas-node.preview-mode input[type=email],.canvas-node.preview-mode input[type=password],.canvas-node.preview-mode input[type=search],.canvas-node.preview-mode input[type=url],.canvas-node.preview-mode textarea,.canvas-node.preview-mode select{transition:border-color .25s ease,box-shadow .25s ease,outline .15s ease}.canvas-node.preview-mode input[type=text]:focus,.canvas-node.preview-mode input[type=email]:focus,.canvas-node.preview-mode input[type=password]:focus,.canvas-node.preview-mode input[type=search]:focus,.canvas-node.preview-mode input[type=url]:focus,.canvas-node.preview-mode textarea:focus,.canvas-node.preview-mode select:focus{border-color:#6366f199!important;box-shadow:0 0 0 3px #6366f126,0 1px 3px #00000026;outline:none}.canvas-switch-track{transition:background .25s cubic-bezier(.22,1,.36,1)!important}.canvas-switch-thumb{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease!important}.canvas-switch-track:active .canvas-switch-thumb{box-shadow:0 0 0 4px #6366f133}.canvas-node.preview-mode[data-type=Link]:hover{text-decoration-color:currentColor!important}.canvas-node.preview-mode[data-type=Link]{text-decoration:underline transparent;text-underline-offset:3px;transition:text-decoration-color .25s ease,color .2s ease}.canvas-node.preview-mode[data-type=Badge]:hover{transform:scale(1.05);filter:brightness(1.1)}.canvas-node.preview-mode[data-type=Badge]{transition:transform .2s ease,filter .2s ease}.preview-mode input[type=range]::-webkit-slider-thumb{transition:box-shadow .2s,transform .15s}.preview-mode input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 0 4px #818cf84d}.canvas-node.preview-mode img{animation:fadeInImg .4s ease-out}@keyframes fadeInImg{0%{opacity:.6;filter:blur(2px)}to{opacity:1;filter:blur(0)}}.canvas-node.preview-mode .counter-value{transition:transform .3s cubic-bezier(.22,1,.36,1)}.canvas-node.preview-mode .counter-btn:hover{filter:brightness(1.2);transform:scale(1.08)}.canvas-node.preview-mode .counter-btn:active{transform:scale(.92)}.progress-bar-fill-animate{animation:progressFill 1.2s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes progressFill{0%{width:0%!important}}.canvas-node.scroll-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}.canvas-node.scroll-reveal.revealed{opacity:1;transform:translateY(0)}.canvas-node.scroll-reveal:nth-child(2){transition-delay:.08s}.canvas-node.scroll-reveal:nth-child(3){transition-delay:.16s}.canvas-node.scroll-reveal.revealed>.canvas-node{transition:opacity .5s ease,transform .5s ease}.canvas-node.scroll-reveal.revealed>.canvas-node:nth-child(1){transition-delay:.05s}.canvas-node.scroll-reveal.revealed>.canvas-node:nth-child(2){transition-delay:.1s}.canvas-node.scroll-reveal.revealed>.canvas-node:nth-child(3){transition-delay:.15s}.canvas-node.scroll-reveal.revealed>.canvas-node:nth-child(4){transition-delay:.2s}.canvas-node.scroll-reveal.revealed>.canvas-node:nth-child(5){transition-delay:.25s}.canvas-node.scroll-reveal.revealed>.canvas-node:nth-child(6){transition-delay:.3s}.canvas-node.scroll-reveal:nth-child(4){transition-delay:.24s}.canvas-node.scroll-reveal:nth-child(5){transition-delay:.32s}.canvas-node.scroll-reveal:nth-child(6){transition-delay:.4s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar{animation:chartBarGrow .8s cubic-bezier(.22,1,.36,1) both;transform-origin:bottom}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(1){animation-delay:0s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(2){animation-delay:.06s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(3){animation-delay:.12s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(4){animation-delay:.18s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(5){animation-delay:.24s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(6){animation-delay:.3s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(7){animation-delay:.36s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(8){animation-delay:.42s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(9){animation-delay:.48s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(10){animation-delay:.54s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(11){animation-delay:.6s}.canvas-node.preview-mode [data-chart-type=bar] .chart-bar:nth-child(12){animation-delay:.66s}@keyframes chartBarGrow{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes chartLineReveal{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes chartDotPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes chartSliceFade{0%{opacity:0;transform:scale(.8)}to{opacity:.9;transform:scale(1)}}@keyframes counterTick{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.canvas-node.scroll-reveal-left{opacity:0;transform:translate(-40px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}.canvas-node.scroll-reveal-left.revealed{opacity:1;transform:translate(0)}.canvas-node.scroll-reveal-right{opacity:0;transform:translate(40px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}.canvas-node.scroll-reveal-right.revealed{opacity:1;transform:translate(0)}.canvas-node.scroll-reveal-zoom{opacity:0;transform:scale(.92);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}.canvas-node.scroll-reveal-zoom.revealed{opacity:1;transform:scale(1)}.canvas-frame>.canvas-node.scroll-reveal:nth-child(4n+2){transform:translate(-30px)}.canvas-frame>.canvas-node.scroll-reveal:nth-child(4n+2).revealed{transform:translate(0)}.canvas-frame>.canvas-node.scroll-reveal:nth-child(4n+4){transform:translate(30px)}.canvas-frame>.canvas-node.scroll-reveal:nth-child(4n+4).revealed{transform:translate(0)}.canvas-node.preview-mode .btn-ripple{position:relative;overflow:hidden}.canvas-node.preview-mode .btn-ripple:after{content:"";position:absolute;width:200%;height:200%;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 60%);border-radius:50%;transition:transform .5s ease;pointer-events:none}.canvas-node.preview-mode .btn-ripple:active:after{transform:translate(-50%,-50%) scale(1);transition:transform 0s}.canvas-node.preview-mode.auto-hover-card{perspective:800px}.canvas-node.preview-mode.auto-hover-card:hover{transform:translateY(-4px) rotateX(2deg);box-shadow:0 12px 40px #00000040,0 0 0 1px #ffffff0d}@keyframes countUp{0%{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.canvas-node.preview-mode [data-stat-value]{animation:countUp .8s cubic-bezier(.22,1,.36,1) both}.canvas-node.preview-mode [data-stat-value]:nth-of-type(2){animation-delay:.15s}.canvas-node.preview-mode [data-stat-value]:nth-of-type(3){animation-delay:.3s}.canvas-node.preview-mode [data-stat-value]:nth-of-type(4){animation-delay:.45s}.carousel-arrow{transition:background .2s,transform .2s!important}.carousel-arrow:hover{background:#000000b3!important;transform:translateY(-50%) scale(1.1)!important}.carousel-dot{transition:all .3s cubic-bezier(.22,1,.36,1)!important}.carousel-dot.active{box-shadow:0 0 8px #ffffff4d}.canvas-accordion-content{transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .3s ease,padding .3s ease;overflow:hidden}.canvas-accordion-header{transition:background .2s,color .2s}.canvas-accordion-header[aria-expanded=true] .accordion-chevron{transform:rotate(180deg)}.accordion-chevron{transition:transform .3s cubic-bezier(.22,1,.36,1)}[data-interactive=tabs] [role=tab]{transition:all .2s ease!important}[data-interactive=tabs] [role=tab]:hover{color:var(--text-primary)!important;background:#ffffff08}[data-interactive=tabs] [role=tabpanel]{animation:tabFadeIn .25s ease}.canvas-toggle-track{transition:background .3s cubic-bezier(.22,1,.36,1);cursor:pointer}.canvas-toggle-thumb{transition:left .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}.canvas-toggle-track:hover .canvas-toggle-thumb{box-shadow:0 0 0 4px #6366f126}.canvas-toggle-track[data-on=true]{background:var(--primary-6, #6366f1)!important}[data-interactive=stepper] .stepper-step{transition:all .3s cubic-bezier(.22,1,.36,1)}[data-interactive=stepper] .stepper-step:hover{transform:scale(1.08)}.page-tab{transition:all .2s cubic-bezier(.22,1,.36,1)!important}.page-tab:hover:not(.page-tab-active){background:#ffffff0f!important}.preview-mode-btn.active{background:#54bf5c33!important;color:#7fea85!important;border-color:#54bf5c66}.preview-exit-banner{position:fixed;top:12px;right:12px;z-index:10000;padding:8px 16px;background:#6366f1e6;color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px #0000004d;transition:all .2s ease;pointer-events:auto}.preview-exit-banner kbd{background:#fff3;padding:1px 6px;border-radius:4px;font-family:inherit;font-size:11px}.preview-exit-banner:hover{background:#6366f1;transform:translateY(-1px)}.preview-floating-toolbar{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:var(--z-max, 99999);padding:6px 12px;border-radius:12px;background:#141423eb;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px;box-shadow:0 8px 32px #0006;animation:slideUp .3s ease;pointer-events:auto;font-size:12px;color:#c4c4cc}.preview-toolbar-group{display:flex;align-items:center;gap:4px;padding:0 4px;border-right:1px solid rgba(255,255,255,.08);margin-right:4px}.preview-toolbar-btn{background:transparent;border:1px solid rgba(255,255,255,.08);color:#c4c4cc;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:4px;transition:all .15s}.preview-toolbar-btn:hover{background:#ffffff14;color:#fff}.preview-toolbar-page{font-weight:600;color:#e4e4e7;padding:0 6px;min-width:60px;text-align:center}.preview-toolbar-viewport{font-family:SF Mono,monospace;font-size:11px;opacity:.5;padding-left:8px;border-left:1px solid rgba(255,255,255,.08)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.live-preview-page-nav{display:flex;align-items:center;gap:4px;border-left:1px solid rgba(255,255,255,.1);padding-left:8px;margin-left:4px}.live-preview-page-indicator{font-size:12px;font-weight:600;color:var(--text-primary, #e4e4e7);min-width:50px;text-align:center}.designer-shell.preview-active .designer-toolbar{display:none}.designer-shell.preview-active .sidebar-left,.designer-shell.preview-active .designer-left-panel,.designer-shell.preview-active .sidebar-right,.designer-shell.preview-active .designer-right-panel{width:0;opacity:0;pointer-events:none;overflow:hidden;border:none;transition:width .32s cubic-bezier(.22,1,.36,1),opacity .24s ease}.designer-shell.preview-active .canvas-area{width:100%!important;max-width:100%!important;flex:1 1 100%}.designer-shell.preview-active .designer-main{top:0}.designer-shell.preview-active .canvas-center{border-left:none;border-right:none}.designer-shell.preview-active .canvas-grid-overlay,.designer-shell.preview-active .quick-actions-bar,.designer-shell.preview-active .code-panel,.designer-shell.preview-active .live-code-editor,.designer-shell.preview-active .minimap-wrapper,.designer-shell.preview-active .canvas-empty-state,.designer-shell.preview-active .add-section-bar,.designer-shell.preview-active .mobile-bottom-nav,.designer-shell.preview-active .breadcrumb-path-bar,.designer-shell.preview-active .canvas-node-label,.designer-shell.preview-active .drag-handle,.designer-shell.preview-active .resize-handle,.designer-shell.preview-active .column-resize-handle,.designer-shell.preview-active .container-drop-zone,.designer-shell.preview-active .drop-zone,.designer-shell.preview-active .smart-suggestions{display:none}.designer-shell.preview-active .canvas-node{outline:none!important;border-radius:0;cursor:default;animation:none}.designer-shell.preview-active .canvas-node:not(.auto-hover-btn):not(.auto-hover-card):not(.has-hover-effect){box-shadow:none!important}.designer-shell.preview-active .canvas-node:hover:not(.auto-hover-btn):not(.auto-hover-card):not(.has-hover-effect){outline:none!important;box-shadow:none!important}.canvas-node.has-hover-effect{transition:transform var(--hover-speed, .2s) ease,filter var(--hover-speed, .2s) ease,box-shadow var(--hover-speed, .2s) ease,background var(--hover-speed, .2s) ease,color var(--hover-speed, .2s) ease}.canvas-node.has-hover-effect:hover{transform:scale(var(--hover-scale, 1)) translateY(var(--hover-lift, 0px)) rotate(var(--hover-rotate, 0deg))!important;filter:brightness(var(--hover-brightness, 1));background:var(--hover-bg)!important;color:var(--hover-color)!important}.canvas-node.has-hover-effect.hover-glow-subtle:hover{box-shadow:0 4px 16px #6366f126!important}.canvas-node.has-hover-effect.hover-glow-medium:hover{box-shadow:0 6px 24px #6366f140!important}.canvas-node.has-hover-effect.hover-glow-strong:hover{box-shadow:0 8px 32px #6366f166!important}.canvas-node.has-hover-effect.hover-glow-neon:hover{box-shadow:0 0 12px #6366f199,0 0 24px #6366f14d,0 0 48px #6366f126!important}.designer-shell.preview-active .canvas-frame{background:transparent;border:none;box-shadow:none;padding:0;border-radius:0;scroll-behavior:smooth}.designer-shell.preview-active .canvas-viewport{padding:0;background:#0a0a12;scroll-behavior:smooth}.designer-shell.preview-active .preview-exit-banner{top:12px;right:12px}.designer-shell.preview-active .canvas-node[data-type=Navbar],.designer-shell.preview-active .canvas-node[data-type=Topbar]{position:sticky!important;top:0!important;z-index:100!important}.designer-shell.preview-active .canvas-node[data-type=Section],.designer-shell.preview-active .canvas-node[data-type=Container]{animation:previewFadeUp .5s ease-out both}.designer-shell.preview-active .canvas-node[data-type=Section]:nth-child(2){animation-delay:.08s}.designer-shell.preview-active .canvas-node[data-type=Section]:nth-child(3){animation-delay:.16s}.designer-shell.preview-active .canvas-node[data-type=Section]:nth-child(4){animation-delay:.24s}.designer-shell.preview-active .canvas-node[data-type=Section]:nth-child(5){animation-delay:.32s}.designer-shell.preview-active .canvas-node[data-type=Section]:nth-child(n+6){animation-delay:.4s}.designer-shell.preview-active .canvas-node[data-type=Card],.designer-shell.preview-active .canvas-node[data-type=MetricCard]{transition:transform .2s ease,box-shadow .2s ease!important}.designer-shell.preview-active .canvas-node[data-type=Card]:hover,.designer-shell.preview-active .canvas-node[data-type=MetricCard]:hover{transform:translateY(-2px)!important;box-shadow:0 8px 24px #0000004d!important}.designer-shell.preview-active .canvas-node[data-type=Button]:hover{filter:brightness(1.1)!important;transform:translateY(-1px);transition:all .15s ease!important}.designer-shell.preview-active .canvas-node[data-type=Button]:active{transform:translateY(0) scale(.98)}@keyframes previewFadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%)}to{transform:translate(-50%) translateY(0)}}.canvas-node-label{position:absolute;top:-20px;left:0;font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px 4px 0 0;color:#fff;opacity:0;pointer-events:auto;cursor:grab;transition:opacity .12s ease;white-space:nowrap;display:flex;align-items:center;gap:3px;line-height:1.5;z-index:2;user-select:none;-webkit-user-drag:element}.canvas-node:hover>.canvas-node-label{opacity:.85;cursor:grab}.canvas-node:has(.canvas-node:hover)>.canvas-node-label{opacity:0;pointer-events:none}.canvas-node.selected>.canvas-node-label{opacity:1;z-index:3}.canvas-node-label:active{cursor:grabbing}.canvas-node-label[data-cat=Layout]{background:var(--cat-layout)}.canvas-node-label[data-cat=Typography]{background:var(--cat-typo);color:#1a1a2e}.canvas-node-label[data-cat=Interactive]{background:var(--cat-interactive);color:#1a1a2e}.canvas-node-label[data-cat="Data Display"]{background:var(--cat-data)}.canvas-node-label[data-cat=Navigation]{background:var(--cat-nav)}.canvas-node-label[data-cat=Feedback]{background:var(--cat-feedback)}.canvas-node-label[data-cat=Media]{background:var(--cat-media)}.drop-zone{height:0;border-radius:2px;margin:0;background:transparent;transition:all .2s var(--spring);position:relative;overflow:hidden}.drop-zone.active.vertical{height:8px;background:#31aa4026;margin:2px 0}.drop-zone.active.vertical:after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:#31aa40e6;border-radius:2px;transform:translateY(-50%) scaleX(0);box-shadow:0 0 12px #31aa4080;animation:insertionLineExpand .25s var(--spring) forwards}.drop-zone.active.horizontal{width:8px;min-height:100%;background:oklch(55% .22 200 / .15);display:inline-block;flex-shrink:0;border-radius:2px;align-self:stretch;margin:0 2px}.drop-zone.active.horizontal:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;background:oklch(55% .22 200 / .9);border-radius:2px;transform:translate(-50%) scaleY(0);box-shadow:0 0 12px oklch(55% .22 200 / .5);animation:insertionLineExpand .25s var(--spring) forwards}.canvas-node[data-drop=before]{box-shadow:0 -2px #43c251,0 -6px 12px -4px #43c2514d!important}.canvas-node[data-drop=after]{box-shadow:0 2px #43c251,0 6px 12px -4px #43c2514d!important}.canvas-node[data-drop=inside]{outline:2px dashed oklch(65% .19 265 / .6)!important;outline-offset:0px;background-color:oklch(65% .19 265 / .04)!important;box-shadow:inset 0 0 20px oklch(65% .19 265 / .05),0 0 0 3px oklch(65% .19 265 / .12)}.canvas-node[data-drop=left]{box-shadow:-2px 0 oklch(65% .22 200),-6px 0 12px -4px oklch(65% .22 200 / .3)!important}.canvas-node[data-drop=right]{box-shadow:2px 0 oklch(65% .22 200),6px 0 12px -4px oklch(65% .22 200 / .3)!important}.canvas-node[data-drop=inside]:before{content:"◆ INSIDE";position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:4px;pointer-events:none;background:#507ef1d9;color:#fff;backdrop-filter:blur(4px)}.canvas-node[data-direction=row]{display:flex;flex-direction:row}.canvas-node[data-direction=grid]{display:grid}.container-drop-zone{padding:20px 16px;border:1.5px dashed oklch(40% .06 265 / .25);border-radius:8px;text-align:center;font-size:11px;color:#58637b80;opacity:.5;min-height:48px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;transition:all .2s var(--spring);background:repeating-linear-gradient(45deg,transparent,transparent 8px,oklch(50% .02 265 / .02) 8px,oklch(50% .02 265 / .02) 16px)}.canvas-node.selected>.container-drop-zone{opacity:.8;border-color:#6b8dd866}.container-drop-zone.horizontal{flex-direction:row;gap:8px}.container-drop-zone.active{opacity:1;border-color:#31aa4080;background:#31aa400d}.container-drop-zone.active:after{content:"Drop here";font-size:11px;font-weight:600;color:#31aa40b3;letter-spacing:.02em}.props-panel{width:var(--designer-props);background:var(--designer-panel-bg);border-left:1px solid var(--designer-border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;flex:1;min-height:0;max-height:100dvh;animation:slideInRight .35s var(--ease-out-expo)}.props-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--designer-border);font-size:13px;font-weight:600;flex-shrink:0}.props-header i{font-size:16px}.props-tabs{display:flex;border-bottom:1px solid var(--designer-border);flex-shrink:0}.props-tab{flex:1;padding:9px 0;font-size:11px;font-weight:600;text-align:center;cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;transition:all .2s;text-transform:uppercase;letter-spacing:.04em}.props-tab:hover{color:var(--text-secondary)}.props-tab.active{color:var(--text-primary);border-bottom-color:var(--cat-layout)}.props-body{flex:1;overflow-y:auto;padding:12px;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.props-body::-webkit-scrollbar{width:5px}.props-body::-webkit-scrollbar-track{background:transparent}.props-body::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.props-body::-webkit-scrollbar-thumb:hover{background:#fff3}.props-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:220px;color:var(--text-muted);font-size:13px;text-align:center;gap:10px;animation:fadeUp .3s var(--ease-out-expo)}.props-empty i{font-size:32px;opacity:.2}.prop-group{margin-bottom:18px;animation:fadeUp .2s var(--ease-out-expo)}.prop-group-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px;padding:0 4px;display:flex;align-items:center;gap:6px}.prop-group-title i{font-size:12px;opacity:.6}.quick-style-chips{display:flex;flex-wrap:wrap;gap:6px}.quick-style-chip{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:#0f1216;border:1px solid oklch(28% .03 265);color:#a5b7df;font-size:10.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}.quick-style-chip:hover{background:#507ef11f;border-color:#507ef14d;color:oklch(88% .08 265);transform:translateY(-1px)}.prop-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}.prop-label{font-size:11.5px;color:var(--text-secondary);width:72px;flex-shrink:0}.prop-input{flex:1;padding:7px 10px;border-radius:7px;border:1px solid var(--designer-border);background:var(--bg-elevated, #1a1a2e);color:var(--text-primary);font-size:12px;font-family:JetBrains Mono,monospace;outline:none;transition:all .2s var(--ease-smooth)}.prop-input:focus{border-color:var(--cat-layout);box-shadow:0 0 0 3px #507ef114}select.prop-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23707080' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}.prop-color-row{display:flex;align-items:center;gap:6px}.prop-color-swatch{width:30px;height:30px;border-radius:7px;border:2px solid var(--designer-border);cursor:pointer;flex-shrink:0;transition:transform .15s var(--spring),box-shadow .15s}.prop-color-swatch:hover{transform:scale(1.1);box-shadow:0 0 12px var(--swatch-color, transparent)}.advanced-toggle{display:flex;align-items:center;gap:6px;padding:8px 10px;margin:4px 0 12px;border-radius:8px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--text-muted);background:transparent;border:1px solid transparent;transition:all .15s ease}.advanced-toggle:hover{background:#14161b;border-color:var(--designer-border);color:var(--text-secondary)}.advanced-toggle-chevron{display:inline-block;font-size:10px;transition:transform .2s var(--spring)}.advanced-toggle.open .advanced-toggle-chevron{transform:rotate(90deg)}.advanced-fields{animation:fadeUp .2s var(--ease-out-expo)}.box-model{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px;font-size:10px;font-family:JetBrains Mono,monospace}.box-model-layer{display:flex;align-items:center;justify-content:center;border:1px dashed;border-radius:6px;padding:8px;position:relative;min-width:100%;transition:border-color .2s}.box-model-margin{border-color:#fa686366;background:#fa686308}.box-model-padding{border-color:oklch(70% .18 160 / .4);background:oklch(70% .18 160 / .03)}.box-model-content{border-color:#507ef166;background:#507ef10f;min-height:24px}.box-model-label{position:absolute;top:-8px;left:8px;font-size:9px;font-weight:600;padding:0 4px;text-transform:uppercase;letter-spacing:.04em}.box-model-margin .box-model-label{color:#fa6863;background:var(--designer-panel-bg)}.box-model-padding .box-model-label{color:oklch(70% .18 160);background:var(--designer-panel-bg)}.box-model-content .box-model-label{color:#507ef1;background:var(--designer-panel-bg)}.box-model-value{font-size:10px;color:var(--text-muted);cursor:pointer;padding:1px 4px;border-radius:3px;transition:background .15s}.box-model-value:hover{background:#1f2227;color:var(--text-primary)}.layout-quick{border:1px solid oklch(62% .18 265 / .12);border-radius:10px;padding:10px;margin-bottom:10px;background:#507ef105}.layout-toggle-row{display:flex;gap:4px;margin-bottom:8px}.layout-toggle-btn{flex:1;padding:6px 8px;border-radius:8px;font-size:11px;font-weight:600;border:1px solid var(--designer-border);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s var(--spring)}.layout-toggle-btn:hover{border-color:#507ef14d;color:var(--text-secondary)}.layout-toggle-btn.active{background:#507ef11f;border-color:#507ef14d;color:oklch(75% .18 265);box-shadow:0 0 8px #507ef114}.layout-toggle-btn i{font-size:12px}.layout-toggle-btn span{font-size:10px}.align-picker{display:flex;gap:2px;flex:1}.align-btn{flex:1;padding:4px;border-radius:5px;font-size:10px;border:1px solid var(--designer-border);background:transparent;color:var(--text-muted);cursor:pointer;text-align:center;transition:all .15s ease}.align-btn:hover{border-color:#507ef140;color:var(--text-secondary)}.align-btn.active{background:#507ef11f;border-color:#507ef159;color:oklch(75% .18 265)}.grid-preset-row{display:flex;gap:4px;flex-wrap:wrap}.grid-preset-btn{padding:4px 8px;border-radius:6px;background:#0b0d12;border:1px solid oklch(26% .02 265);color:#8c9ec5;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}.grid-preset-btn:hover{background:#507ef11a;border-color:#507ef14d;color:oklch(80% .12 265)}.grid-preset-btn.active{background:#507ef126;border-color:#507ef166;color:oklch(85% .18 265)}.prop-input.active-toggle{background:oklch(55% .18 145 / .12);border-color:oklch(55% .18 145 / .3);color:#31aa40}.anim-designer{padding:12px}.anim-preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:16px}.anim-preset{padding:8px 10px;border-radius:8px;font-size:11px;font-weight:500;border:1px solid var(--designer-border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s var(--ease-smooth);text-align:center}.anim-preset:hover{border-color:var(--cat-media);color:var(--text-primary);background:#a46bf50f}.anim-preset.active{border-color:var(--cat-media);background:#a46bf51a;color:#fff}.anim-timeline{background:#030304;border:1px solid var(--designer-border);border-radius:10px;padding:12px;margin-top:12px}.anim-timeline-header{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:10px}.anim-track{height:32px;background:#08090c;border-radius:6px;position:relative;overflow:hidden}.anim-track-fill{position:absolute;top:2px;bottom:2px;border-radius:4px;background:linear-gradient(90deg,var(--cat-media),oklch(70% .18 265));transition:width .2s}.anim-keyframe{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:3px;background:#fff;border:2px solid var(--cat-media);cursor:grab;z-index:2;transition:transform .15s var(--spring)}.anim-keyframe:hover{transform:translate(-50%,-50%) scale(1.3)}.easing-preview{width:100%;height:60px;margin-top:8px;border:1px solid var(--designer-border);border-radius:8px;background:#030304;position:relative}.easing-curve{stroke:var(--cat-media);stroke-width:2;fill:none}.easing-grid{stroke:#14161b;stroke-width:.5}.code-panel{border-top:1px solid var(--designer-border);background:var(--designer-panel-bg);overflow:hidden;display:flex;flex-direction:column;transition:max-height .3s var(--ease-out-expo)}.code-header{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:12px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--designer-border);cursor:pointer;user-select:none;transition:background .15s}.code-header:hover{background:#0c0d11}.code-header i.code-icon{background:linear-gradient(135deg,var(--cat-interactive),var(--cat-nav));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.code-header .toggle{margin-left:8px;font-size:10px;transition:transform .2s}.code-header .toggle.open{transform:rotate(180deg)}.code-action-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:3px 6px;border-radius:5px;transition:all .15s;display:flex;align-items:center;justify-content:center}.code-action-btn:hover{color:var(--text-primary);background:#1f2227}.code-body{flex:1;overflow:auto;padding:12px 16px}.code-body pre{margin:0;font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.7;color:var(--text-secondary);white-space:pre-wrap;word-break:break-all}.code-body .kw{color:#b180fc}.code-body .str{color:#5bb661}.code-body .tag{color:#fa6863}.code-body .attr{color:#d6a62e}.code-body .punc{color:var(--text-muted)}.code-body .comment{color:#505561;font-style:italic}.layer-panel{border-top:1px solid var(--designer-border);min-height:120px;max-height:280px;overflow-y:auto;flex-shrink:0}.layer-header{padding:9px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--designer-border);display:flex;align-items:center;gap:6px;position:sticky;top:0;background:var(--designer-panel-bg);z-index:2}.layer-header i{font-size:13px}.layer-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .12s;border-left:2px solid transparent;touch-action:none}.layer-item:hover{background:var(--designer-hover)}.layer-item.selected{background:var(--designer-selected);color:var(--text-primary)}.layer-item i.layer-icon{font-size:12px;width:16px;text-align:center;opacity:.6}.layer-item .layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-rename-input{flex:1;background:var(--designer-canvas-bg);color:var(--text-primary, #f0f0f5);border:1px solid var(--cat-layout, #6a5acd);border-radius:4px;padding:1px 4px;font-size:12px;width:100%;outline:none;font-family:inherit}.layer-item[data-cat=Layout]{border-left-color:var(--cat-layout)}.layer-item[data-cat=Typography]{border-left-color:var(--cat-typo)}.layer-item[data-cat=Interactive]{border-left-color:var(--cat-interactive)}.layer-item[data-cat="Data Display"]{border-left-color:var(--cat-data)}.layer-item[data-cat=Navigation]{border-left-color:var(--cat-nav)}.layer-item[data-cat=Feedback]{border-left-color:var(--cat-feedback)}.layer-item[data-cat=Media]{border-left-color:var(--cat-media)}.layer-actions{display:flex;gap:2px;margin-left:auto;opacity:0;transition:opacity .12s}.layer-item:hover .layer-actions,.layer-item.selected .layer-actions{opacity:1}.layer-action-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:4px;transition:all .12s}.layer-action-btn:hover{background:#1f2227;color:var(--text-primary)}.layer-action-btn.delete:hover{color:#f94144;background:#f941441a}.skeleton-block{background:linear-gradient(90deg,#0f1216,#181b1f,#0f1216);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:6px}.designer-spinner{border:3px solid oklch(20% .01 265);border-top-color:var(--primary-9);border-radius:50%;animation:spin .7s linear infinite}.variant-state-bar{padding:6px 10px;border-bottom:1px solid oklch(22% .01 265);display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex-shrink:0}.variant-state-label{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:4px}.variant-state-pills{display:flex;flex-wrap:wrap;gap:3px}.variant-state-pill{padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;border:1px solid oklch(28% .01 265);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s;font-family:JetBrains Mono,monospace}.variant-state-pill:hover{border-color:#374c79;color:var(--text-primary)}.variant-state-pill.active{background:#1b3fad33;border-color:#3c68d9;color:oklch(70% .16 265)}.variant-state-hint{font-size:10px;color:#426bce;width:100%;margin-top:2px}.variant-override-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#4a78ea;margin-right:3px}.prop-variant-active .prop-label{color:#5e8af0}.color-field-wrap{display:flex;align-items:center;gap:4px;flex:1;position:relative}.token-picker-dropdown{position:absolute;top:100%;left:0;right:0;background:#0b0d12;border:1px solid oklch(26% .02 265);border-radius:8px;padding:8px;z-index:var(--z-modal);box-shadow:0 8px 24px #0006;animation:fadeUp .15s ease-out}.token-picker-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px}.token-swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.token-swatch{width:100%;aspect-ratio:1;border-radius:6px;border:2px solid transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:2px;transition:all .15s;position:relative}.token-swatch:hover{border-color:#ffffff4d;transform:scale(1.08)}.token-swatch-label{font-size:8px;font-weight:700;color:#ffffffd9;text-shadow:0 1px 3px rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:.03em}.token-picker-hint{font-size:10px;color:var(--text-muted);margin-top:6px;text-align:center}.token-picker-hint code{background:#181b1f;padding:1px 4px;border-radius:3px;font-size:9px}.auto-layout-btn{background:oklch(25% .08 145 / .15)!important;border-color:#1e66264d!important;color:#51a556!important}.auto-layout-btn:hover{background:oklch(35% .12 145 / .25)!important;border-color:#1c882d!important}.export-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;color:#fff;z-index:var(--z-max);pointer-events:none;box-shadow:0 12px 40px #0006;animation:fadeUp .3s var(--spring)}.export-toast.success{background:oklch(55% .18 145)}.export-toast.info{background:#426bce}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#242933;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3b4253}@media (max-width: 1100px){:root{--designer-sidebar: 230px;--designer-props: 250px}}@media (max-width: 768px){:root{--designer-sidebar: 260px;--designer-props: 280px;--designer-toolbar: 44px}.designer-shell{height:calc(100vh - 50px)}.designer-toolbar{gap:3px;height:var(--designer-toolbar);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important;white-space:nowrap;padding:4px 8px}.designer-toolbar::-webkit-scrollbar{display:none}.designer-toolbar .toolbar-btn{flex-shrink:0}.designer-toolbar .toolbar-tip{display:none!important}.designer-toolbar .toolbar-sep{margin:0 4px}.toolbar-scroll-wrap{position:relative}.toolbar-scroll-wrap:before,.toolbar-scroll-wrap:after{content:"";position:absolute;top:0;bottom:0;width:24px;z-index:2;pointer-events:none}.toolbar-scroll-wrap:before{left:0;background:linear-gradient(90deg,var(--designer-panel-bg),transparent)}.toolbar-scroll-wrap:after{right:0;background:linear-gradient(-90deg,var(--designer-panel-bg),transparent)}.toolbar-sep{display:none}.toolbar-btn{width:36px;height:36px;font-size:14px;border-radius:7px;min-width:44px;min-height:44px}.toolbar-label{font-size:10px;padding:3px 8px}.toolbar-title{gap:6px}.toolbar-title i{font-size:16px}.designer-main{position:relative}.sidebar-overlay{display:block;position:absolute;inset:0;z-index:99;background:#0000008c;backdrop-filter:blur(4px);animation:fadeIn .15s ease}.sidebar-left{position:absolute;top:0;left:0;bottom:0;z-index:var(--z-dropdown);width:var(--designer-sidebar);background:var(--designer-panel-bg);box-shadow:4px 0 24px #00000080;border-right:1px solid var(--designer-border);transition:transform .28s var(--ease-out-expo),opacity .2s;transform:translate(0);display:flex;flex-direction:column;max-height:calc(100vh - 114px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sidebar-left.closed{transform:translate(-100%);width:var(--designer-sidebar);opacity:0;pointer-events:none}.sidebar-right{position:absolute;top:0;right:0;bottom:0;z-index:var(--z-dropdown);width:var(--designer-props);background:var(--designer-panel-bg);box-shadow:-4px 0 24px #00000080;border-left:1px solid var(--designer-border);transition:transform .28s var(--ease-out-expo),opacity .2s;transform:translate(0);display:flex;flex-direction:column;max-height:calc(100vh - 114px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sidebar-right.closed{transform:translate(100%);width:var(--designer-props);opacity:0;pointer-events:none}.canvas-center{width:100%}.palette-panel{max-height:calc(100vh - 102px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.palette-list{max-height:calc(100vh - 152px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.palette-search{padding:6px 8px}.palette-search input{padding:7px 10px 7px 30px;font-size:12px}.palette-category{padding:0 6px}.palette-category-header{padding:6px 4px;font-size:10px}.palette-item{padding:8px;font-size:11.5px;gap:8px;min-height:40px}.palette-item i{font-size:13px;width:18px}.layer-panel{max-height:200px;min-height:80px}.layer-header{padding:6px 8px;font-size:10px}.layer-item{padding:4px 8px;font-size:11px;gap:6px}.layer-actions{opacity:1}.props-panel{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.props-header{padding:8px 12px;font-size:12px}.props-tab{padding:7px 0;font-size:10px}.props-body{padding:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:calc(100vh - 204px)}.prop-row{gap:6px;margin-bottom:4px}.prop-label{font-size:10.5px;width:60px}.prop-input{padding:6px 8px;font-size:11px}.prop-group{margin-bottom:12px}.prop-group-title{font-size:9.5px;margin-bottom:6px}.canvas-viewport{padding:12px}.canvas-frame{padding:16px;border-radius:10px;min-height:350px}.canvas-empty{height:280px}.canvas-empty i{font-size:40px}.canvas-empty p{font-size:13px}.canvas-empty-state{min-height:280px}.canvas-empty-state .empty-quick-actions{flex-wrap:wrap;justify-content:center}.code-header{padding:6px 12px;font-size:11px}.code-body{padding:8px 12px}.code-body pre{font-size:10.5px;line-height:1.6}.designer-shell.mobile{padding-bottom:64px}.mobile-bottom-tabs{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-max);display:flex;height:auto;background:#010203fa;backdrop-filter:blur(20px) saturate(1.5);border-top:1px solid oklch(25% .02 265 / .6);padding:6px 8px calc(env(safe-area-inset-bottom,0px) + 4px)}.mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;color:#526386;font-size:10px;font-weight:600;font-family:inherit;cursor:pointer;min-height:48px;min-width:48px;border-radius:10px;position:relative;transition:color .2s,transform .15s;-webkit-tap-highlight-color:transparent}.mobile-tab i{font-size:20px;transition:transform .2s var(--spring)}.mobile-tab.active{color:oklch(75% .2 265)}.mobile-tab.active i{transform:scale(1.1)}.mobile-tab:active{animation:tapBounce .3s var(--spring)}.mobile-tab-indicator{position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:20px;height:3px;border-radius:2px;background:oklch(72% .2 265);animation:tabIndicatorIn .25s var(--spring)}@keyframes tapBounce{0%{transform:scale(1)}40%{transform:scale(.88)}70%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes tabIndicatorIn{0%{width:0;opacity:0}to{width:20px;opacity:1}}.smart-suggestions-bar{padding:4px 8px}.suggestion-label{display:none}.drag-handle{opacity:.4!important}.canvas-node:hover>.drag-handle{opacity:.7!important}}@media (max-width: 480px){:root{--designer-sidebar: 240px;--designer-props: 260px;--designer-toolbar: 40px}.toolbar-btn{width:34px;height:34px;font-size:13px;border-radius:6px;min-width:44px;min-height:44px}.toolbar-label{display:none}.toolbar-title i{font-size:14px}.canvas-viewport{padding:8px}.canvas-frame{padding:12px;border-radius:8px;min-height:280px}.import-dialog{width:100vw!important;max-width:100vw!important;max-height:85vh;border-radius:16px 16px 0 0;margin-top:auto}.import-dialog-overlay{align-items:flex-end}.import-dialog-body{flex-direction:column}.import-dialog-left{border-right:none;border-bottom:1px solid oklch(22% .015 265);max-height:45vh}.import-dialog-right{max-height:40vh}.project-manager{width:100vw!important;max-width:100vw!important;max-height:85vh;border-radius:16px 16px 0 0}.project-manager-overlay{align-items:flex-end}.file-browser-modal{width:100vw!important;max-width:100vw!important;max-height:90vh;border-radius:16px 16px 0 0}}@media (hover: none) and (pointer: coarse){.palette-item{padding:10px 12px;min-height:44px}.toolbar-btn{min-width:44px;min-height:44px}.layer-item{padding:8px 12px;min-height:44px}.layer-actions{opacity:1}.ctx-item{padding:10px 12px;min-height:44px}.props-body{touch-action:pan-y}.prop-input{touch-action:manipulation}}.ctx-menu{position:fixed;z-index:var(--z-max);min-width:240px;max-width:300px;background:#06070bf7;backdrop-filter:blur(24px) saturate(1.4);border:1px solid oklch(28% .02 265 / .5);border-radius:12px;padding:5px;box-shadow:0 16px 56px #0000008c,0 4px 12px #00000059,inset 0 1px #292e3826;animation:ctxAppear .14s var(--spring);user-select:none;max-height:85vh;overflow-y:auto;overflow-x:visible;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:oklch(30% .02 265) transparent}.ctx-menu::-webkit-scrollbar-track{background:transparent}.ctx-menu::-webkit-scrollbar-thumb:hover{background:#424853}.ctx-submenu{position:fixed;z-index:var(--z-max);min-width:200px;max-width:260px;background:#06070bf7;backdrop-filter:blur(24px) saturate(1.4);border:1px solid oklch(28% .02 265 / .5);border-radius:10px;padding:5px;box-shadow:0 12px 48px #00000080,0 2px 8px #0000004d;animation:ctxSubAppear .12s var(--ease-out-expo);max-height:70vh;overflow-y:auto;overflow-x:visible;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:oklch(30% .02 265) transparent}.ctx-submenu::-webkit-scrollbar-track{background:transparent}.ctx-submenu::-webkit-scrollbar-thumb:hover{background:#424853}@keyframes ctxSubAppear{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.ctx-section-header{padding:5px 10px 3px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);border-radius:6px;display:flex;align-items:center;gap:6px;margin:2px 0 1px}.ctx-section-header i{font-size:11px;opacity:.8}.ctx-divider{height:1px;margin:4px 8px;background:#2429334d}.ctx-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 10px;border:none;border-radius:7px;background:transparent;color:var(--text-secondary);font-size:12.5px;font-weight:500;cursor:pointer;transition:background .1s ease,color .1s ease;text-align:left;font-family:inherit;position:relative}.ctx-item:hover,.ctx-item.focused{background:#507ef11a;color:var(--text-primary)}.ctx-item:active:not(.disabled){background:#507ef12e;transform:scale(.98)}.ctx-item.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.ctx-item.danger:hover,.ctx-item.danger.focused{background:#e62b341f;color:oklch(72% .22 25)}.ctx-item.danger:hover i{color:oklch(72% .22 25)}.ctx-item.ctx-active{color:oklch(75% .15 265)}.ctx-item.ctx-active:before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:2px;background:#507ef1}.ctx-item.has-sub{padding-right:6px}.ctx-item.has-sub:after{content:"";position:absolute;top:-4px;right:-12px;width:16px;height:calc(100% + 8px);background:transparent}.ctx-item i{font-size:13px;width:18px;text-align:center;flex-shrink:0;opacity:.6;transition:opacity .1s}.ctx-item:hover i,.ctx-item.focused i{opacity:1}.ctx-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ctx-kbd{font-size:9.5px;color:var(--text-muted);font-family:JetBrains Mono,monospace;background:#0f1216;border:1px solid oklch(28% .015 265);border-radius:4px;padding:1px 5px;flex-shrink:0;box-shadow:0 1px 1px #0003}.ctx-arrow{font-size:10px!important;width:14px!important;opacity:.35!important;margin-left:auto}.ctx-item:hover .ctx-arrow{opacity:.7!important}.ctx-badge{font-size:9px;color:oklch(75% .18 265);line-height:1;flex-shrink:0}.ctx-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}.ctx-hint{display:flex;align-items:center;gap:8px;padding:6px 10px 4px;font-size:11px;font-weight:600;color:#79a1fc;letter-spacing:.01em}.ctx-hint i{font-size:13px;opacity:.6}.ctx-depth-warn{font-size:9px;color:#f6722b;background:#f6722b1a;padding:1px 5px;border-radius:3px;font-weight:700}.ctx-item.suggested{color:#2acc8a}.ctx-item.suggested i{color:oklch(70% .18 160)}.ctx-item.suggested:hover,.ctx-item.suggested.focused{background:oklch(65% .18 160 / .08);color:#43dd9a}.ctx-inline-row{display:flex;align-items:center;gap:8px;padding:4px 10px}.ctx-inline-label{font-size:10.5px;font-weight:600;color:var(--text-muted);width:48px;flex-shrink:0}.ctx-inline-buttons{display:flex;gap:3px;flex:1}.ctx-inline-btn{flex:1;padding:5px;border-radius:6px;font-size:12px;border:1px solid oklch(25% .015 265);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s ease}.ctx-inline-btn:hover{border-color:#4160a74d;color:var(--text-secondary);background:#14161b}.ctx-inline-btn.active{background:#507ef11f;border-color:#507ef14d;color:oklch(75% .18 265)}.ctx-inline-btn i{font-size:12px}.cmd-palette-overlay{position:fixed;inset:0;z-index:var(--z-max);background:#00000080;backdrop-filter:blur(4px);display:flex;justify-content:center;padding-top:15vh;animation:fadeIn .1s ease}.cmd-palette{width:min(480px,90vw);max-height:420px;background:#07090df7;backdrop-filter:blur(20px) saturate(1.3);border:1px solid oklch(30% .02 265 / .5);border-radius:16px;box-shadow:0 24px 80px #0009,0 4px 16px #0000004d;animation:fadeScale .15s var(--spring);display:flex;flex-direction:column;overflow:hidden}.cmd-search{padding:16px;border-bottom:1px solid var(--designer-border)}.cmd-search input{width:100%;padding:12px 16px;border-radius:10px;border:1px solid oklch(30% .02 265 / .3);background:#030304;color:var(--text-primary);font-size:14px;font-family:inherit;outline:none}.cmd-search input:focus{border-color:var(--cat-layout);box-shadow:0 0 12px #507ef126;background:#050608}.cmd-search input::placeholder{color:var(--text-muted)}.cmd-results{flex:1;overflow-y:auto;padding:8px}.cmd-section-label{padding:6px 10px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);opacity:.6}.cmd-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:background .1s;font-size:13px;color:var(--text-secondary)}.cmd-item:hover{background:#507ef114;color:var(--text-primary)}.cmd-item.focused{background:#507ef124;color:var(--text-primary);outline:1px solid oklch(62% .18 265 / .2);outline-offset:-1px}.cmd-item i{font-size:15px;width:20px;text-align:center;opacity:.6}.cmd-item:hover i,.cmd-item.focused i{opacity:1}.cmd-item .cmd-label{flex:1}.cmd-item .cmd-shortcut{font-size:10px;color:var(--text-muted);font-family:JetBrains Mono,monospace;opacity:.5}.cmd-item .cmd-cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.cmd-hint{padding:8px 16px;border-top:1px solid var(--designer-border);font-size:10px;color:var(--text-muted);display:flex;gap:16px}.cmd-hint kbd{display:inline-block;padding:1px 5px;border-radius:4px;background:#14161b;border:1px solid oklch(30% .02 265 / .3);font-family:inherit;font-size:9px;margin-right:3px}.shortcuts-overlay{position:fixed;inset:0;z-index:var(--z-max);background:#0009;backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;animation:fadeIn .15s ease}.shortcuts-modal{width:680px;max-width:90vw;background:#07090df7;backdrop-filter:blur(20px);border:1px solid oklch(30% .02 265 / .5);border-radius:16px;padding:28px;box-shadow:0 24px 80px #0009;animation:fadeScale .2s var(--spring)}.shortcuts-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:20px;display:flex;align-items:center;gap:10px}.shortcuts-title i{background:linear-gradient(135deg,var(--cat-layout),var(--cat-media));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.shortcuts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.shortcuts-section h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:12px}.shortcut-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;color:var(--text-secondary)}.shortcut-keys{display:inline-flex;gap:3px;min-width:60px}.shortcut-row kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:5px;font-size:10.5px;font-weight:600;background:#0f1216;border:1px solid oklch(28% .015 265);color:var(--text-primary);font-family:JetBrains Mono,monospace;box-shadow:0 1px 2px #0003}.shortcuts-close{margin-top:16px;text-align:center;font-size:11px;color:var(--text-muted)}.shortcuts-close kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:600;background:#0f1216;border:1px solid oklch(28% .015 265);color:var(--text-primary);font-family:JetBrains Mono,monospace;margin:0 2px}.import-dialog-overlay{position:fixed;inset:0;z-index:var(--z-max);background:#000000a6;backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;animation:fadeIn .15s ease}.import-dialog{width:min(90vw,900px);max-height:80vh;background:#040609fa;border:1px solid oklch(25% .02 265);border-radius:16px;display:flex;flex-direction:column;box-shadow:0 24px 80px #00000080;animation:ctxAppear .2s var(--spring)}.import-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid oklch(22% .015 265)}.import-dialog-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-primary)}.import-dialog-title i{font-size:18px;color:oklch(72% .18 265)}.import-dialog-close{width:28px;height:28px;border-radius:8px;border:none;background:#14161b;color:var(--text-secondary);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}.import-dialog-close:hover{background:#2b2e33}.import-dialog-body{display:flex;flex:1;overflow:hidden;min-height:0}.import-dialog-left{flex:1;display:flex;flex-direction:column;padding:16px;border-right:1px solid oklch(22% .015 265)}.import-url-row{display:flex;gap:6px;margin-bottom:10px}.import-url-input{flex:1;padding:8px 12px;border-radius:8px;background:#010202;border:1px solid oklch(25% .02 265);color:var(--text-primary);font-size:12px;font-family:inherit}.import-url-input:focus{outline:none;border-color:#3c68d9}.import-url-input::placeholder{color:var(--text-muted)}.import-url-btn{padding:8px 12px;border-radius:8px;border:none;background:#3c68d926;color:oklch(75% .18 265);cursor:pointer;font-size:14px;transition:all .15s}.import-url-btn:hover{background:#3c68d940}.import-url-btn:disabled{opacity:.4;cursor:default}.import-url-btn .spin{animation:spin .8s linear infinite}.import-fetch-progress{padding:8px 12px;font-size:12px;color:var(--text-secondary);display:flex;align-items:center}.import-fetch-result{padding:8px 12px;display:flex;flex-direction:column;gap:8px}.import-fetch-summary{font-size:12px;color:var(--text-secondary);display:flex;align-items:center}.import-fetch-import-btn{align-self:flex-start;font-size:12px;padding:6px 14px}.import-dialog-right{width:min(280px,100%);display:flex;flex-direction:column;padding:16px}.import-code-label,.import-preview-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}.import-code-input{flex:1;resize:none;border-radius:10px;background:#010202;border:1px solid oklch(25% .02 265);color:var(--text-primary);padding:12px 16px;font-size:12px;line-height:1.6;font-family:JetBrains Mono,monospace;min-height:200px}.import-code-input:focus{outline:none;border-color:#3c68d9}.import-examples{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}.import-examples-label{font-size:10px;color:var(--text-muted);font-weight:600}.import-example-btn{padding:4px 10px;border-radius:12px;background:#0f1216;border:1px solid oklch(28% .02 265);color:#80a3f0;font-size:10px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}.import-example-btn:hover{background:#507ef11f;border-color:#507ef14d}.import-preview{flex:1;overflow-y:auto;border-radius:10px;background:#010202;border:1px solid oklch(22% .015 265);padding:10px}.import-tree-item{display:flex;align-items:center;gap:6px;padding:3px 4px;font-size:11px;color:var(--text-secondary);flex-wrap:wrap}.import-tree-type{color:oklch(72% .15 265);font-weight:600}.import-tree-text{color:#6f80a5;font-style:italic;font-size:10px}.import-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:var(--text-muted)}.import-empty i{font-size:28px;opacity:.3}.import-empty span{font-size:11px;text-align:center}.import-error{padding:8px 12px;border-radius:8px;background:oklch(45% .2 25 / .1);border:1px solid oklch(55% .2 25 / .3);color:oklch(75% .18 25);font-size:11px;display:flex;align-items:center;gap:6px}.import-dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid oklch(22% .015 265)}.import-cancel-btn{padding:8px 16px;border-radius:8px;background:#14161b;border:1px solid oklch(30% .02 265);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit}.import-cancel-btn:hover{background:#1f2227}.import-confirm-btn{padding:8px 20px;border-radius:8px;background:#4472e3;border:none;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;transition:all .15s}.import-confirm-btn:hover{background:oklch(65% .2 265)}.import-confirm-btn:disabled{opacity:.4;cursor:not-allowed}.import-tab-bar{display:flex;gap:0;padding:0 16px;border-bottom:1px solid var(--border-default, rgba(255,255,255,.08))}.import-tab-btn{padding:10px 18px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-muted, #707080);border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;transition:all .15s}.import-tab-btn.active{color:oklch(70% .18 265);border-bottom-color:#507ef1}.import-tab-btn:hover:not(.active){color:var(--text-secondary, #a0a0b0)}.json-drop-zone{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px dashed var(--border-default, rgba(255,255,255,.1));border-radius:10px;background:var(--surface-2, rgba(255,255,255,.02));margin-bottom:8px;transition:border-color .2s,background .2s}.json-drop-zone.drag-over{border-color:#507ef1;background:#507ef10f}.json-upload-btn{padding:7px 14px;border-radius:6px;border:1px solid var(--border-default, rgba(255,255,255,.1));background:var(--surface-2, rgba(255,255,255,.04));color:var(--text-primary, #e4e4e7);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s}.json-upload-btn:hover{background:#507ef11f;color:oklch(70% .18 265)}.import-option-row{padding:8px 0}.import-toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}.import-toggle-checkbox{width:16px;height:16px;accent-color:oklch(62% .18 265);cursor:pointer}.import-toggle-text{color:var(--text-primary, #e4e4e7);font-weight:500}.import-toggle-hint{color:var(--text-muted, #707080);font-size:11px;margin-left:4px}.import-retry-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:var(--text-secondary, #a0a0b0);font-size:12px;cursor:pointer;transition:all .15s}.import-retry-btn:hover{background:#ffffff14}.live-preview-overlay{position:fixed;inset:0;z-index:var(--z-max);background:#000c;backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;animation:fadeIn .15s ease}.live-preview-modal{width:min(96vw,1600px);height:min(92vh,1000px);background:#020306;border:1px solid oklch(25% .02 265);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px #0009}.live-preview-toolbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid oklch(22% .015 265);flex-shrink:0}.live-preview-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}.live-preview-title i{font-size:16px;color:oklch(75% .18 265)}.live-preview-viewports{display:flex;gap:4px;margin-left:auto}.live-preview-vp-btn{padding:5px 10px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}.live-preview-vp-btn:hover{background:#0f1216;color:var(--text-secondary)}.live-preview-vp-btn.active{background:#3c68d91f;border-color:#3c68d94d;color:oklch(80% .15 265)}.live-preview-vp-btn i{font-size:14px}.live-preview-actions{display:flex;align-items:center;gap:8px;margin-left:12px}.live-preview-size{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums;font-family:JetBrains Mono,monospace}.live-preview-action-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.live-preview-action-btn:hover{background:#14161b;color:var(--text-primary)}.live-preview-container{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:16px;overflow:auto;background:#010102;background-image:radial-gradient(oklch(15% .01 265) 1px,transparent 1px);background-size:20px 20px}.live-preview-device{border-radius:8px;box-shadow:0 8px 32px #0006,0 2px 8px #0000004d;border:1px solid oklch(22% .015 265);overflow:hidden;background:#0d0d12;transition:width .3s ease,height .3s ease}.live-preview-iframe{width:100%;height:100%;border:none;background:#0d0d12}.live-preview-device-frame{background:#08090c;border:2px solid oklch(25% .02 265);position:relative;transition:all .3s ease;box-shadow:0 12px 48px #00000080,0 4px 16px #0000004d}.live-preview-frame-mobile{background:#030304;border-color:#13161d;box-shadow:0 16px 56px #0009,inset 0 0 0 2px #0f1216}.live-preview-frame-tablet{background:#050608;border-color:#171b22;box-shadow:0 14px 52px #0000008c,inset 0 0 0 2px #0d0f14}.live-preview-frame-desktop{background:#040406;border-color:#1b1f29}.device-frame-notch{position:absolute;top:2px;left:50%;transform:translate(-50%);width:100px;height:14px;background:#010101;border-radius:0 0 14px 14px;z-index:2}.device-frame-address-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#050608;border-radius:8px;margin-bottom:4px}.device-frame-dots{display:flex;gap:5px}.device-frame-dots .dot{width:8px;height:8px;border-radius:50%}.device-frame-dots .dot.red{background:#ff5f57}.device-frame-dots .dot.yellow{background:#febc2e}.device-frame-dots .dot.green{background:#28c840}.device-frame-url{flex:1;text-align:center;font-size:10px;color:var(--text-muted);font-family:JetBrains Mono,monospace;background:#010202;border-radius:5px;padding:2px 8px}.device-frame-home{width:28px;height:28px;border-radius:50%;border:2px solid oklch(25% .015 265);margin:8px auto 0}.live-preview-custom-size{display:flex}.live-preview-custom-input{width:72px;padding:3px 6px;font-size:10px;font-family:JetBrains Mono,monospace;background:#050608;border:1px solid oklch(25% .02 265);border-radius:5px;color:var(--text-secondary);text-align:center;outline:none;transition:border-color .15s}.live-preview-custom-input:focus{border-color:#3c68d9}.live-preview-zoom{display:flex;gap:2px;background:#050608;border-radius:6px;padding:2px}.live-preview-zoom-btn{padding:2px 6px;border:none;background:transparent;color:var(--text-muted);font-size:9px;font-weight:600;border-radius:4px;cursor:pointer;transition:all .15s}.live-preview-zoom-btn:hover{color:var(--text-secondary)}.live-preview-zoom-btn.active{background:#3c68d926;color:oklch(80% .15 265)}.minimap-wrapper{position:absolute;bottom:16px;right:16px;z-index:var(--z-sticky);display:flex;flex-direction:column;align-items:flex-end;gap:6px;transition:opacity .2s ease}.minimap-wrapper.hidden{opacity:.5}.minimap-wrapper.hidden .minimap-canvas{display:none}.minimap-toggle{width:28px;height:28px;border-radius:7px;border:1px solid oklch(25% .02 265);background:#040609;color:var(--text-muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.minimap-toggle:hover{background:#0e1218;color:var(--text-secondary)}.minimap-canvas{background:#030305;border:1px solid oklch(25% .02 265);border-radius:8px;position:relative;overflow:hidden;cursor:crosshair;box-shadow:0 8px 24px #00000080;animation:minimapFadeIn .2s ease}@keyframes minimapFadeIn{0%{opacity:0;transform:scale(.9) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.minimap-node{position:absolute;border-radius:2px;opacity:.55;pointer-events:none;transition:opacity .15s}.minimap-viewport{position:absolute;border:1.5px solid oklch(70% .18 265);background:#3c68d914;border-radius:2px;cursor:grab;transition:background .1s}.minimap-viewport.dragging{cursor:grabbing;background:#3c68d926;border-color:oklch(80% .2 265)}@media (max-width: 768px){.minimap-wrapper{display:none}.cmd-palette{width:calc(100vw - 32px);margin:0 16px}.shortcuts-grid{grid-template-columns:1fr;gap:16px}.shortcuts-modal{padding:20px}}.multi-viewport{display:flex;flex-direction:column;gap:0;padding:0;height:100%;overflow:hidden;background:#010202}.mvp-controls-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#050608;border-bottom:1px solid var(--designer-border);flex-shrink:0}.mvp-toggle-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;user-select:none;transition:color .15s,background .15s,border-color .15s;padding:4px 10px;border-radius:6px;border:1px solid transparent}.mvp-toggle-label:hover{color:var(--text-secondary);background:#090b0f}.mvp-toggle-label.mvp-toggle-active{font-weight:700}.mvp-toggle-label input[type=checkbox]{width:14px;height:14px;accent-color:var(--cat-layout);cursor:pointer;margin:0}.mvp-toggle-label i{font-size:13px}.mvp-stack-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;font-size:9px;font-weight:700;color:#fff;padding:0 4px;margin-left:2px}.mvp-panels{display:flex;gap:24px;padding:20px 24px;flex:1;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:oklch(25% .02 265) transparent}.mvp-panels::-webkit-scrollbar{height:6px}.mvp-panels::-webkit-scrollbar-thumb{background:#1d222b;border-radius:3px}.mvp-panels::-webkit-scrollbar-track{background:transparent}.viewport-panel{flex:1 0 auto;display:flex;flex-direction:column;background:var(--designer-canvas-bg);border:1px solid var(--designer-border);border-radius:12px;overflow:hidden;min-width:200px;box-shadow:0 4px 16px #00000026;transition:box-shadow .25s var(--ease-smooth),transform .25s var(--ease-smooth),border-color .2s;scroll-snap-align:start}.viewport-panel:hover{box-shadow:0 8px 32px #00000040,0 0 24px #385db814;transform:translateY(-2px)}.viewport-panel.vp-active{border-color:var(--vp-accent, var(--cat-layout));box-shadow:0 8px 32px #00000040,0 0 0 1px var(--vp-accent, oklch(50% .15 265 / .15))}.viewport-header{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px;font-weight:700;color:var(--text-muted);border-bottom:1px solid var(--designer-border);background:#050608;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}.viewport-header i{font-size:14px}.viewport-breakpoint{font-size:9px;font-family:JetBrains Mono,monospace;font-weight:500;letter-spacing:.02em;text-transform:none}.viewport-zoom-controls{margin-left:auto;display:flex;align-items:center;gap:2px}.vp-zoom-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--designer-border);background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;transition:all .15s}.vp-zoom-btn:hover{background:var(--designer-hover);color:var(--text-primary)}.vp-zoom-btn:active{transform:scale(.9)}.vp-zoom-level{font-size:9px;font-family:JetBrains Mono,monospace;color:var(--text-muted);min-width:32px;text-align:center;font-weight:500}.viewport-frame-wrapper{flex:1;overflow:auto;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:16px 8px;background:#030304;background-image:radial-gradient(circle,oklch(18% .01 265) 1px,transparent 1px);background-size:16px 16px}.viewport-frame{background:var(--bg-darkest, #0a0a0f);padding:20px;position:relative}.viewport-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--text-muted);gap:8px;font-size:12px;opacity:.5}.viewport-empty i{font-size:24px;opacity:.3}.device-chrome-outer{display:flex;flex-direction:column;align-items:center}.device-chrome{position:relative;background:#0c0d11;border:2px solid oklch(22% .015 265);display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 32px #0000004d,inset 0 1px #1f2227;overflow:hidden}.device-chrome--desktop{border-radius:8px;border-width:2px}.device-chrome--tablet,.device-chrome--mobile{border-radius:28px;border-width:3px;padding:8px 4px 4px}.device-chrome-notch{display:flex;justify-content:center;width:100%;padding:2px 0 4px;transform-origin:center;flex-shrink:0}.device-notch{background:#050607;border-radius:10px}.device-notch--phone{width:80px;height:6px}.device-notch--tablet{width:10px;height:10px;border-radius:50%}.device-chrome-screen{overflow:hidden;background:var(--bg-darkest, #0a0a0f);flex-shrink:0}.device-chrome-chin{display:flex;justify-content:center;width:100%;padding:4px 0 2px;transform-origin:center;flex-shrink:0}.device-home-indicator{width:48px;height:4px;border-radius:2px;background:#2b2e33}.viewport-size-label{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;border-top:1px solid var(--designer-border);background:#030305;flex-shrink:0}.viewport-size-value{font-weight:700}.viewport-size-dim{opacity:.5}.viewport-stack-info{margin-left:6px;font-size:9px;font-weight:600;display:inline-flex;align-items:center;gap:3px}.viewport-stack-info i{font-size:10px}.mvp-will-stack{position:relative}.mvp-will-stack:after{content:"";position:absolute;inset:-1px;border:1px dashed currentColor;border-radius:3px;opacity:.25;pointer-events:none}.mvp-node{position:relative;outline:2px solid transparent;outline-offset:1px;border-radius:3px;transition:outline-color .15s;min-height:20px}.mvp-node:hover{outline-color:#4160a74d}.mvp-node.mvp-selected{outline-color:var(--cat-layout);box-shadow:0 0 8px #507ef133}.mvp-node[data-direction=row]{display:flex;flex-direction:row}.mvp-node[data-direction=grid]{display:grid}.mvp-node-label{position:absolute;top:-18px;left:0;font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px 4px 0 0;color:#fff;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap;z-index:2}.mvp-node:hover .mvp-node-label,.mvp-node.mvp-selected .mvp-node-label{opacity:1}.mvp-node-label[data-cat=Layout]{background:var(--cat-layout)}.mvp-node-label[data-cat=Typography]{background:var(--cat-typo);color:#1a1a2e}.mvp-node-label[data-cat=Interactive]{background:var(--cat-interactive);color:#1a1a2e}.mvp-node-label[data-cat="Data Display"]{background:var(--cat-data)}.mvp-node-label[data-cat=Navigation]{background:var(--cat-nav)}.mvp-node-label[data-cat=Feedback]{background:var(--cat-feedback)}.mvp-node-label[data-cat=Media]{background:var(--cat-media)}.theme-editor{display:flex;flex-direction:column;background:var(--designer-panel-bg);border-left:1px solid var(--designer-border);overflow-y:auto;height:100%;animation:slideInRight .3s var(--ease-out-expo)}.theme-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--designer-border);font-size:13px;font-weight:600}.theme-header i{font-size:16px;background:linear-gradient(135deg,var(--cat-layout),var(--cat-media));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.theme-section{padding:12px 16px;border-bottom:1px solid var(--designer-border)}.theme-section-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px}.theme-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.theme-label{font-size:11.5px;color:var(--text-secondary);width:70px;flex-shrink:0}.theme-color-input{flex:1;display:flex;align-items:center;gap:8px}.theme-color-picker{width:32px;height:32px;border-radius:8px;border:2px solid var(--designer-border);cursor:pointer;padding:0;background:none;flex-shrink:0;transition:transform .15s var(--spring),box-shadow .15s}.theme-color-picker:hover{transform:scale(1.1);box-shadow:0 0 12px var(--swatch-color, rgba(99,102,241,.3))}.theme-color-picker::-webkit-color-swatch-wrapper{padding:2px}.theme-color-picker::-webkit-color-swatch{border:none;border-radius:5px}.theme-color-hex{font-size:11px;font-family:JetBrains Mono,monospace;color:var(--text-muted);text-transform:uppercase}.theme-swatch-row{display:flex;gap:6px;margin-top:8px}.theme-swatch{flex:1;height:28px;border-radius:8px;transition:transform .15s var(--spring)}.theme-swatch:hover{transform:scaleY(1.2)}.theme-select{flex:1;padding:7px 28px 7px 10px;border-radius:7px;border:1px solid var(--designer-border);background:var(--bg-elevated, #1a1a2e);color:var(--text-primary);font-size:12px;font-family:inherit;outline:none;cursor:pointer;transition:all .2s var(--ease-smooth);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23707080' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.theme-select:focus{border-color:var(--cat-layout);box-shadow:0 0 0 3px #507ef114}.theme-slider-wrap{flex:1;display:flex;align-items:center;gap:8px}.theme-slider{flex:1;height:4px;border-radius:2px;appearance:none;background:#181b1f;outline:none;cursor:pointer}.theme-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cat-layout);border:2px solid oklch(75% .18 265);cursor:grab;transition:transform .15s var(--spring)}.theme-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.theme-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(.95)}.theme-slider-value{font-size:11px;font-family:JetBrains Mono,monospace;color:var(--text-muted);min-width:36px;text-align:right}.theme-reset-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 16px;padding:8px 16px;border-radius:8px;background:transparent;border:1px solid var(--designer-border);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}.theme-reset-btn:hover{background:#14161b;color:var(--text-secondary);border-color:#292e38}.theme-reset-btn i{font-size:13px}.theme-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px;margin-bottom:8px}.theme-preset-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:8px;border:1px solid var(--designer-border);background:#050607;cursor:pointer;transition:all .15s ease}.theme-preset-btn:hover{border-color:#345197;background:#090b0f;transform:translateY(-1px)}.theme-preset-swatches{display:flex;gap:3px}.theme-preset-swatch{width:16px;height:16px;border-radius:50%;border:1px solid oklch(30% .01 265)}.theme-preset-label{font-size:10px;color:var(--text-muted);font-weight:600;white-space:nowrap}.theme-randomize-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 12px 4px;padding:7px 12px;border-radius:8px;background:linear-gradient(135deg,#0d1528,#160928);border:1px solid oklch(30% .06 280);color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}.theme-randomize-btn:hover{border-color:#4a4b96;transform:translateY(-1px)}.theme-randomize-btn i{font-size:13px}.theme-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid oklch(30% .01 265);margin-right:5px;vertical-align:middle;flex-shrink:0}.theme-export-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 12px 8px;padding:7px 12px;border-radius:8px;background:transparent;border:1px solid var(--designer-border);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease;width:calc(100% - 24px)}.theme-export-btn:hover{background:#14161b;color:var(--text-secondary);border-color:#292e38}.theme-export-btn i{font-size:13px}.theme-import-wrap{padding:0 12px}.theme-import-textarea{width:100%;box-sizing:border-box;padding:6px 8px;border-radius:6px;background:#030304;border:1px solid var(--designer-border);color:var(--text-secondary);font-size:10px;font-family:JetBrains Mono,monospace;resize:vertical;min-height:48px}.theme-import-textarea::placeholder{color:var(--text-muted);opacity:.6}.theme-import-textarea:focus{outline:none;border-color:#345197}.theme-import-error{display:block;color:#f87171;font-size:10px;margin:2px 0}.theme-import-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 4px;padding:6px 12px;border-radius:6px;width:100%;background:#111a2d;border:1px solid oklch(30% .04 265);color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}.theme-import-btn:hover:not(:disabled){background:#152341;border-color:#324673}.theme-import-btn:disabled{opacity:.4;cursor:not-allowed}.theme-import-btn i{font-size:12px}.canvas-node.selected[data-cat=Layout]{outline-color:var(--cat-layout);--glow-color: oklch(62% .18 265 / .2)}.canvas-node.selected[data-cat=Typography]{outline-color:var(--cat-typo);--glow-color: oklch(75% .16 45 / .2)}.canvas-node.selected[data-cat=Interactive]{outline-color:var(--cat-interactive);--glow-color: oklch(70% .18 160 / .2)}.canvas-node.selected[data-cat="Data Display"]{outline-color:var(--cat-data);--glow-color: oklch(68% .2 330 / .2)}.canvas-node.selected[data-cat=Navigation]{outline-color:var(--cat-nav);--glow-color: oklch(68% .16 200 / .2)}.canvas-node.selected[data-cat=Feedback]{outline-color:var(--cat-feedback);--glow-color: oklch(70% .18 25 / .2)}.canvas-node.selected[data-cat=Media]{outline-color:var(--cat-media);--glow-color: oklch(65% .2 300 / .2)}.layer-item{position:relative}.layer-guide-line{position:absolute;top:0;bottom:0;width:1px;background:transparent;border-left:1px dotted oklch(28% .015 265 / .5);pointer-events:none}.layer-branch-line{position:absolute;top:0;width:1px;height:50%;background:transparent;border-left:1px dotted oklch(28% .015 265 / .5);pointer-events:none}.layer-branch-line:after{content:"";position:absolute;bottom:0;left:0;width:8px;height:1px;background:transparent;border-top:1px dotted oklch(28% .015 265 / .5)}.layer-branch-line.last{height:50%}.code-body.code-body-lined{display:flex;gap:0;padding:0}.code-line-numbers{margin:0;padding:12px 8px 12px 12px;font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.7;color:#383b40;text-align:right;user-select:none;flex-shrink:0;border-right:1px solid var(--designer-border);background:#030304;min-width:36px}.code-content{margin:0;padding:12px 16px;font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.7;color:var(--text-secondary);white-space:pre-wrap;word-break:break-all;flex:1;overflow-x:auto}.code-content .kw{color:#b180fc}.code-content .str{color:#5bb661}.code-content .tag{color:#fa6863}.code-content .attr{color:#d6a62e}.code-content .punc{color:var(--text-muted)}.code-content .comment{color:#505561;font-style:italic}.live-code-editor{background:#040406;border-top:1px solid var(--designer-border);transition:max-height .25s var(--ease-smooth);overflow:hidden;z-index:20;flex-shrink:0}.live-code-editor .code-header{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;user-select:none}.live-code-editor .code-header:hover{color:var(--text-primary)}.live-code-editor .code-icon{font-size:14px}.live-code-editor .toggle{transition:transform .2s;font-size:10px}.live-code-editor .toggle.open{transform:rotate(180deg)}.code-mode-badge{background:oklch(55% .2 145 / .15);color:#45ba50;font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.08em;animation:pulseGlow 2s ease-in-out infinite;--glow-color: oklch(55% .2 145 / .25)}.code-error-badge{background:#cc272e26;color:oklch(70% .2 25);font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;display:flex;align-items:center;gap:4px}.code-body-live{display:flex;overflow:auto;max-height:220px;font-size:12px;font-family:JetBrains Mono,Fira Code,monospace;line-height:1.6}.code-body-live .code-line-numbers{min-width:36px;padding:8px 6px 8px 12px;text-align:right;color:#424853;user-select:none;white-space:pre;flex-shrink:0}.code-edit-container{position:relative;flex:1;overflow:auto}.code-textarea{position:absolute;inset:0;width:100%;height:100%;padding:8px 12px;font:inherit;font-size:12px;font-family:JetBrains Mono,Fira Code,monospace;line-height:1.6;background:transparent;color:transparent;caret-color:oklch(80% .15 265);border:none;outline:none;resize:none;white-space:pre;overflow:auto;z-index:2;tab-size:2}.code-textarea:focus{background:#05060780}.code-highlight-overlay{position:absolute;inset:0;padding:8px 12px;font:inherit;font-size:12px;font-family:JetBrains Mono,Fira Code,monospace;line-height:1.6;white-space:pre;overflow:hidden;pointer-events:none;z-index:1;color:var(--text-primary)}.code-highlight-overlay .kw{color:#b180fc}.code-highlight-overlay .str{color:#5bb661}.code-highlight-overlay .tag{color:#fa6863}.code-highlight-overlay .attr{color:#d6a62e}.code-highlight-overlay .punc{color:var(--text-muted)}.variant-editor{padding:0 0 4px}.variant-row{padding:4px 14px 8px}.variant-row .prop-label{display:block;margin-bottom:6px;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.variant-pills{display:flex;flex-wrap:wrap;gap:4px}.variant-pill{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500;background:var(--designer-hover);color:var(--text-muted);border:1px solid transparent;cursor:pointer;transition:all .15s;text-transform:capitalize}.variant-pill:hover{color:var(--text-primary);border-color:var(--designer-border)}.variant-pill.active{background:#325ac226;color:oklch(75% .15 265);border-color:#325ac24d}.variant-pill-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0}.size-pill{min-width:36px;justify-content:center}.state-preview-grid{display:flex;flex-wrap:wrap;gap:6px}.state-preview-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px;border-radius:6px;border:1px solid transparent;transition:border-color .15s}.state-preview-item:hover{border-color:var(--designer-border)}.state-preview-item.active{border-color:#325ac266}.state-preview-swatch{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.state-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.show-matrix-btn{display:flex;align-items:center;gap:6px;width:calc(100% - 28px);margin:4px 14px 8px;padding:6px 10px;border-radius:6px;background:var(--designer-hover);color:var(--text-muted);border:1px solid var(--designer-border);cursor:pointer;font-size:11px;font-weight:500;transition:all .15s}.show-matrix-btn:hover{color:var(--text-primary);background:#171b22}.variant-matrix-grid{display:grid;grid-template-columns:auto repeat(var(--cols, 3),1fr);gap:4px;padding:4px 14px 8px}.matrix-cell{display:flex;align-items:center;justify-content:center;font-size:10px;padding:4px}.matrix-header{color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}.matrix-row-label{color:var(--text-muted);font-weight:600;justify-content:flex-end;padding-right:8px;text-transform:capitalize}.matrix-preview{cursor:pointer;border-radius:6px;border:1px solid transparent;transition:border-color .15s}.matrix-preview:hover{border-color:var(--designer-border)}.matrix-preview.active{border-color:#325ac280;background:#325ac20d}.matrix-preview-inner{padding:3px 8px;border-radius:4px;font-size:9px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}.palette-section-item{flex-direction:column!important;align-items:flex-start!important;padding:8px 12px!important;gap:4px!important;border-left:2px solid oklch(55% .18 265 / .4)}.palette-section-item:hover{border-left-color:#5888fc}.section-item-text{display:flex;flex-direction:column;gap:2px;overflow:hidden;width:100%}.section-item-name{font-size:12px;font-weight:600;color:var(--text-primary)}.section-item-desc{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cmd-section-item{border-left:2px solid oklch(55% .18 265 / .3)}.cmd-section-item.focused{border-left-color:#5888fc}.cmd-ai-item{border-left:2px solid oklch(55% .22 275 / .4)}.cmd-ai-item.focused{border-left-color:oklch(65% .22 275);background:#5358ee14}.column-resize-handle{width:4px;min-height:100%;flex-shrink:0;cursor:col-resize;position:relative;z-index:5;background:transparent;border-radius:2px;transition:background .15s ease,width .15s ease;align-self:stretch;margin:0 -1px}.column-resize-handle:hover,.column-resize-handle.active{width:6px;background:#507ef166;box-shadow:0 0 8px #507ef133}.column-resize-handle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:24px;border-radius:1px;background:#4160a74d;opacity:0;transition:opacity .15s}.column-resize-handle:hover:after{opacity:1}.column-ratio-bar{display:flex;gap:2px;margin:8px 0 12px;border-radius:6px;overflow:hidden;background:#0f1216;height:36px}.column-ratio-segment{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:background .15s ease,transform .1s;padding:2px 4px;min-width:32px;border-right:1px solid oklch(25% .015 265)}.column-ratio-segment:last-child{border-right:none}.column-ratio-segment:hover{background:#171b22}.column-ratio-segment.active{background:#507ef11f}.column-ratio-label{font-size:9px;font-weight:700;color:var(--text-muted);font-family:JetBrains Mono,monospace}.column-ratio-pct{font-size:8px;color:#5570ac;font-family:JetBrains Mono,monospace}.props-tabs{position:relative}.props-tab-indicator{position:absolute;bottom:0;height:2px;background:var(--cat-layout);border-radius:1px 1px 0 0;transition:left .25s var(--spring),width .25s var(--spring)}.prop-color-preview{width:22px;height:22px;border-radius:5px;border:1px solid oklch(30% .02 265 / .5);flex-shrink:0;cursor:pointer;transition:transform .15s var(--spring)}.prop-color-preview:hover{transform:scale(1.15)}.prop-number-wrap{display:flex;align-items:center;gap:0;flex:1}.prop-number-wrap .prop-input{border-radius:7px 0 0 7px;text-align:center}.prop-number-btn{width:28px;height:100%;border:1px solid var(--designer-border);background:#0f1216;color:var(--text-muted);cursor:pointer;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .1s}.prop-number-btn:first-of-type{border-radius:0;border-left:none}.prop-number-btn:last-of-type{border-radius:0 7px 7px 0;border-left:none}.prop-number-btn:hover{background:#171b22;color:var(--text-primary)}.prop-number-btn:active{background:#507ef126}.palette-item .search-highlight{background:oklch(75% .18 45 / .2);color:oklch(80% .16 45);border-radius:2px;padding:0 1px}.palette-category-header .caret{font-size:10px;transition:transform .3s var(--spring);margin-left:4px}.palette-category-header.collapsed .caret{transform:rotate(-90deg)}.zoom-badge{font-size:10px;font-weight:700;color:var(--text-muted);background:#0f1216;border:1px solid oklch(28% .015 265);padding:2px 8px;border-radius:5px;font-family:JetBrains Mono,monospace;font-variant-numeric:tabular-nums;transition:all .15s ease}*:focus-visible{outline:2px solid oklch(62% .18 265 / .6);outline-offset:2px}.toolbar-btn:focus-visible,.ctx-item:focus-visible{outline:2px solid oklch(62% .18 265 / .5);outline-offset:1px}.palette-item:focus-visible{outline:2px solid oklch(62% .18 265 / .5);outline-offset:-2px;border-radius:8px}.layer-item:focus-visible{outline:2px solid oklch(62% .18 265 / .5);outline-offset:-1px}.props-tab:focus-visible{outline:2px solid oklch(62% .18 265 / .5);outline-offset:-1px;border-radius:6px}.export-menu button:focus-visible,.history-item:focus-visible{outline:2px solid oklch(62% .18 265 / .5);outline-offset:-1px}.mobile-tab:focus-visible{outline:2px solid oklch(62% .18 265 / .5);outline-offset:-2px}@media print{.designer-toolbar,.sidebar-left,.sidebar-right,.live-code-editor,.export-toast,.ctx-menu,.ctx-submenu,.cmd-palette-overlay,.shortcuts-overlay,.sidebar-overlay{display:none!important}.canvas-center{width:100%!important}.designer-shell{height:auto!important}.canvas-node-label{opacity:1!important}.canvas-node{outline:1px solid #ccc!important}}.ctx-menu::-webkit-scrollbar{width:4px}.ctx-menu::-webkit-scrollbar-thumb{background:#292e38;border-radius:2px}.ctx-submenu::-webkit-scrollbar{width:3px}.ctx-submenu::-webkit-scrollbar-thumb{background:#292e38;border-radius:2px}.toolbar-tip{position:absolute;bottom:-32px;left:50%;transform:translate(-50%);font-size:10px;white-space:nowrap;padding:4px 10px;border-radius:6px;background:#0f1216f2;color:var(--text-secondary);pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:var(--z-overlay);border:1px solid oklch(28% .015 265);box-shadow:0 4px 12px #0000004d;transform:translate(-50%) translateY(-2px)}.toolbar-btn:hover .toolbar-tip{opacity:1;transform:translate(-50%) translateY(0)}.drop-zone.active.vertical{animation:dropBounce .3s var(--spring)}@keyframes dropBounce{0%{height:4px}40%{height:10px}to{height:8px}}.layer-item.selected[data-cat=Layout]{border-left-color:var(--cat-layout);border-left-width:3px}.layer-item.selected[data-cat=Typography]{border-left-color:var(--cat-typo);border-left-width:3px}.layer-item.selected[data-cat=Interactive]{border-left-color:var(--cat-interactive);border-left-width:3px}.layer-item.selected[data-cat="Data Display"]{border-left-color:var(--cat-data);border-left-width:3px}.layer-item.selected[data-cat=Navigation]{border-left-color:var(--cat-nav);border-left-width:3px}.layer-item.selected[data-cat=Feedback]{border-left-color:var(--cat-feedback);border-left-width:3px}.layer-item.selected[data-cat=Media]{border-left-color:var(--cat-media);border-left-width:3px}@media (max-width: 768px){.ctx-menu{min-width:200px;max-width:260px;border-radius:10px}.ctx-item{padding:10px 12px;font-size:13px}.ctx-kbd{font-size:9px}.ctx-submenu{min-width:180px;max-width:240px}.ctx-inline-btn{padding:8px}}.inline-text-edit{width:100%;padding:4px 8px;background:#07090d;border:2px solid oklch(62% .18 265 / .6);border-radius:6px;color:var(--text-primary);font:inherit;font-size:inherit;outline:none;z-index:10;box-shadow:0 0 12px #507ef126;animation:fadeScale .15s var(--spring)}.inline-text-edit:focus{border-color:#507ef1cc;box-shadow:0 0 20px #507ef133}.drop-zone.active.vertical:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:oklch(55% .22 200);border-radius:1px;transform:translateY(-50%);box-shadow:0 0 8px oklch(55% .22 200 / .5)}.drop-zone.active.horizontal:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:oklch(55% .22 200);border-radius:1px;transform:translate(-50%);box-shadow:0 0 8px oklch(55% .22 200 / .5)}.layer-item.keyboard-focused{background:#507ef114;outline:1px solid oklch(62% .18 265 / .3);outline-offset:-1px}.autosave-prompt{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#07090df7;backdrop-filter:blur(20px);border:1px solid oklch(28% .02 265 / .5);border-radius:12px;padding:12px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 16px 56px #00000080;animation:fadeUp .3s var(--spring);z-index:var(--z-max);font-size:13px;color:var(--text-secondary)}.autosave-prompt i{font-size:18px;color:#5888fc}.autosave-prompt button{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .15s}.autosave-prompt .restore-btn{background:#507ef1;color:#fff}.autosave-prompt .restore-btn:hover{background:#4472e3}.autosave-prompt .dismiss-btn{background:transparent;color:var(--text-muted);border:1px solid var(--designer-border)}.autosave-prompt .dismiss-btn:hover{background:#14161b;color:var(--text-secondary)}.project-name-input{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-primary);font-size:13px;font-weight:600;padding:4px 8px;max-width:200px;transition:border-color .15s}.project-name-input:hover{border-color:#3d485e4d}.project-name-input:focus{border-color:#507ef1;outline:none;background:#0d111b}.toolbar-export-dropdown{position:relative}.export-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:#07090df2;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid oklch(25% .02 265);border-radius:12px;padding:6px;z-index:var(--z-modal);box-shadow:0 12px 40px #00000080,0 0 0 1px #2a2e364d;animation:fadeScale .15s var(--ease-out-expo)}.export-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .15s;text-align:left}.export-menu button:hover{background:#161b24;color:var(--text-primary)}.export-menu button i{font-size:14px;width:18px;text-align:center;color:var(--cat-layout)}.export-menu-sep{height:1px;background:var(--designer-border);margin:4px 8px}.breakpoint-selector{margin-bottom:4px}.breakpoint-toggle-row{display:flex;gap:4px;background:#030304;border-radius:10px;padding:3px}.breakpoint-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 8px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:11px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s var(--ease-smooth)}.breakpoint-btn i{font-size:13px}.breakpoint-btn:hover{color:var(--text-secondary);background:#0b0d12}.breakpoint-btn.active{background:#325ac21f;color:oklch(75% .15 265);border-color:#325ac240;font-weight:600}.breakpoint-hint{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;background:#325ac20f;border-radius:6px;font-size:10px;color:#7a9ce9}.breakpoint-hint i{font-size:11px;flex-shrink:0}.bp-override-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:oklch(65% .22 265);margin-right:4px;vertical-align:middle;flex-shrink:0}.prop-row.prop-inherited{opacity:.55}.prop-row.prop-overridden .prop-label{color:oklch(75% .15 265);font-weight:600}.prop-reset-bp{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;border-radius:4px;transition:all .15s;flex-shrink:0;margin-left:2px}.prop-reset-bp:hover{background:#1d222b;color:#fa6863}.anim-transport{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#030304;border:1px solid var(--designer-border);border-radius:10px;margin-bottom:10px}.anim-transport-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:#0f1216;color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:13px;transition:all .15s}.anim-transport-btn:hover{background:#1d222b;color:var(--text-primary)}.anim-time-display{font-size:11px;font-weight:600;color:var(--cat-media);font-family:JetBrains Mono,monospace;min-width:80px;text-align:center}.anim-scrubber{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#14161b;border-radius:2px;outline:none;cursor:pointer}.anim-scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cat-media);border:2px solid #fff;cursor:grab;box-shadow:0 1px 4px #0000004d}.anim-tracks{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.anim-track-row{display:flex;align-items:center;gap:8px;background:#050608;border:1px solid var(--designer-border);border-radius:8px;padding:8px 10px}.anim-track-label{display:flex;align-items:center;gap:4px;min-width:70px;font-size:11px;font-weight:600;color:var(--text-secondary)}.anim-track-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:11px;border-radius:3px;transition:all .15s}.anim-track-remove:hover{background:#1d222b;color:#fa6863}.anim-track-bar{flex:1;height:24px;position:relative;border-radius:6px;overflow:visible}.anim-track-line{position:absolute;top:50%;left:0;right:0;height:2px;background:#14161b;border-radius:1px;transform:translateY(-50%)}.anim-track-row .anim-track-fill{position:absolute;top:50%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--cat-media),oklch(70% .18 265));transform:translateY(-50%);opacity:.7}.anim-keyframe-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--cat-media);cursor:grab;z-index:2;transition:transform .15s var(--spring)}.anim-keyframe-dot:hover{transform:translate(-50%,-50%) scale(1.3)}.anim-playhead{position:absolute;top:0;bottom:0;width:2px;background:oklch(75% .18 25);border-radius:1px;transform:translate(-50%);z-index:3;pointer-events:none;box-shadow:0 0 6px oklch(75% .18 25 / .4)}.anim-track-values{display:flex;gap:4px;min-width:60px}.anim-kf-value{width:42px;padding:3px 5px;border:1px solid var(--designer-border);background:#0b0d12;color:var(--text-primary);font-size:10px;font-family:JetBrains Mono,monospace;border-radius:4px;text-align:center}.anim-kf-value:focus{outline:none;border-color:var(--cat-media)}.anim-controls{display:flex;flex-direction:column;gap:8px;padding:10px;background:#050608;border:1px solid var(--designer-border);border-radius:10px;margin-bottom:12px}.anim-add-select{width:100%;padding:7px 10px;border:1px dashed var(--designer-border);background:transparent;color:var(--text-muted);font-size:11px;font-weight:500;border-radius:6px;cursor:pointer}.anim-add-select:hover{border-color:var(--cat-media);color:var(--text-secondary)}.anim-setting-row{display:flex;align-items:center;gap:8px}.anim-setting-label{font-size:11px;font-weight:500;color:var(--text-muted);min-width:55px}.anim-setting-input{flex:1;padding:5px 8px;border:1px solid var(--designer-border);background:#0b0d12;color:var(--text-primary);font-size:11px;border-radius:6px}.anim-setting-input:focus{outline:none;border-color:var(--cat-media)}.anim-setting-unit{font-size:10px;color:var(--text-muted);font-weight:600}.anim-loop-toggle{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--designer-border);background:transparent;color:var(--text-muted);font-size:11px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s}.anim-loop-toggle:hover{border-color:var(--cat-media)}.anim-loop-toggle.active{background:#a46bf51a;border-color:var(--cat-media);color:var(--cat-media)}.anim-clear-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px;border:1px solid oklch(70% .18 25 / .2);background:#fa68630d;color:#fa6863;font-size:11px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .15s}.anim-clear-btn:hover{background:#fa68631f}.breadcrumb-path-bar{display:flex;align-items:center;padding:6px 12px;background:#040609e6;backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default, rgba(255,255,255,.06));font-size:11px;gap:0;overflow-x:auto;scrollbar-width:none;z-index:10;flex-shrink:0}.breadcrumb-path-bar::-webkit-scrollbar{display:none}.breadcrumb-path-item{display:flex;align-items:center;white-space:nowrap}.breadcrumb-path-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border:none;background:transparent;color:var(--text-muted);font-size:11px;cursor:pointer;border-radius:4px;transition:all .15s;font-family:inherit}.breadcrumb-path-btn:hover{background:#ffffff0f;color:var(--text-primary)}.breadcrumb-path-btn.active{color:var(--text-primary);font-weight:600;background:#507ef11a}.quick-add-bar{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;justify-content:center}.quick-add-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--border-default, rgba(255,255,255,.08));background:#090b0fcc;color:var(--text-muted);font-size:10px;font-weight:500;border-radius:12px;cursor:pointer;font-family:inherit;transition:all .15s;backdrop-filter:blur(4px)}.quick-add-chip:hover{background:#507ef126;border-color:#507ef14d;color:var(--text-primary)}.quick-add-chip i{font-size:10px}.canvas-node[data-container=true]:not(.selected) .container-drop-zone:not(.active){border:1.5px dashed var(--border-default, rgba(255,255,255,.08));border-radius:8px;background:none;font-size:0;min-height:32px;padding:8px}.canvas-node[data-container=true]:not(.selected) .container-drop-zone:not(.active) i,.canvas-node[data-container=true]:not(.selected) .container-drop-zone:not(.active) .quick-add-bar{display:none}.canvas-node[data-container=true]:not(.selected):hover .container-drop-zone:not(.active){font-size:10px;opacity:.6;border-color:#4d62914d}.canvas-node[data-container=true]:not(.selected):hover .container-drop-zone:not(.active) i{display:inline}.layer-hint{font-size:10px;opacity:.35;margin-left:4px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px}.sidebar-left,.sidebar-right{transition:width .25s cubic-bezier(.4,0,.2,1),opacity .2s}.canvas-node{animation:nodeAppear .15s ease-out}.palette-category{transition:max-height .2s ease-out,opacity .15s}.ctx-menu{animation:ctxAppear .12s ease-out}@keyframes ctxAppear{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ctx-submenu{animation:subAppear .1s ease-out}@keyframes subAppear{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}.skeleton-block{background:linear-gradient(90deg,var(--bg-elevated) 25%,oklch(20% .01 265) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite}@keyframes skeletonShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.toolbar-badge{position:absolute;top:2px;right:0;min-width:14px;height:14px;line-height:14px;padding:0 3px;background:#507ef1;color:#fff;font-size:9px;font-weight:700;border-radius:7px;text-align:center;pointer-events:none}.toolbar-btn{position:relative}.history-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#03060dfa;border:1px solid var(--border-default, rgba(255,255,255,.08));border-radius:10px;padding:8px 0;min-width:200px;max-height:320px;overflow-y:auto;z-index:var(--z-dropdown);backdrop-filter:blur(20px);box-shadow:0 12px 40px #00000080;animation:ctxAppear .12s ease-out}.history-dropdown-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:4px 12px 8px;border-bottom:1px solid var(--border-default, rgba(255,255,255,.06));margin-bottom:4px}.history-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:12px;color:var(--text-secondary)}.history-item.current{color:#507ef1;font-weight:600}.history-item i{font-size:8px}.multi-select-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;background:#507ef126;color:oklch(72% .18 265);font-size:10px;font-weight:600;margin-right:6px}.multi-select-controls{display:inline-flex;align-items:center;gap:4px;margin-right:8px}.align-tools{display:inline-flex;gap:1px}.align-btn{all:unset;cursor:pointer;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;font-size:13px;color:var(--text-muted, #aaa);transition:background .15s,color .15s}.align-btn:hover{background:#507ef12e;color:oklch(72% .18 265)}.style-clipboard-bar{display:flex;gap:4px;padding:4px 8px;border-bottom:1px solid var(--border-default, rgba(255,255,255,.06))}.style-clipboard-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 8px;background:var(--bg-elevated, rgba(255,255,255,.04));border:1px solid var(--border-default, rgba(255,255,255,.06));border-radius:6px;color:var(--text-muted);font-size:10px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}.style-clipboard-btn:hover:not(:disabled){background:#507ef11a;border-color:#507ef14d;color:var(--text-primary)}.style-clipboard-btn:disabled{opacity:.3;cursor:default}.style-clipboard-btn i{font-size:11px}.interactions-panel{padding:0}.interactions-empty{display:flex;flex-direction:column;align-items:center;padding:24px 12px;text-align:center}.interaction-item{margin:4px 0;background:var(--bg-elevated, rgba(255,255,255,.03));border:1px solid var(--border-default, rgba(255,255,255,.06));border-radius:8px;overflow:hidden;transition:all .15s}.interaction-item.expanded{border-color:#507ef14d}.interaction-summary{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;font-size:11px;color:var(--text-secondary);transition:background .15s}.interaction-summary:hover{background:#ffffff08}.interaction-trigger-label{font-weight:600;color:#507ef1}.interaction-action-label{flex:1}.interaction-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;transition:all .15s}.interaction-remove-btn:hover{background:#d4092426;color:#f94144}.interaction-details{padding:8px 10px;border-top:1px solid var(--border-default, rgba(255,255,255,.06));background:#00000026}.interaction-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;margin-top:4px;background:#507ef114;border:1px dashed oklch(62% .18 265 / .3);border-radius:8px;color:oklch(72% .18 265);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}.interaction-add-btn:hover{background:#507ef126;border-color:#507ef180}.interaction-test-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;background:#54bf5c1f;border:1px solid oklch(72% .17 145 / .3);color:#6fda75;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}.interaction-test-btn:hover{background:#54bf5c40;border-color:#54bf5c80}.theme-type-scale{margin-top:8px}.theme-type-row{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:11px}.theme-type-label{min-width:28px;font-weight:600;color:var(--text-muted);font-size:10px;text-transform:uppercase}.theme-type-row .theme-slider{flex:1}.theme-type-preview{min-width:28px;text-align:center;color:var(--text-primary);font-weight:600}.theme-radius-row{display:flex;gap:6px;flex-wrap:wrap}.theme-radius-preview{flex:1;min-width:48px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--bg-elevated, rgba(255,255,255,.04));border:2px solid var(--border-default, rgba(255,255,255,.08));cursor:pointer;transition:all .15s}.theme-radius-preview span{font-size:10px;font-weight:600;color:var(--text-muted)}.theme-radius-preview.active{border-color:#507ef1;background:#507ef11a}.theme-radius-preview.active span{color:oklch(72% .18 265)}.theme-radius-preview:hover{border-color:#507ef166}.theme-shadow-row{display:flex;gap:8px;flex-wrap:wrap}.theme-shadow-preview{flex:1;min-width:52px;display:flex;align-items:center;justify-content:center;padding:12px 4px;background:var(--bg-elevated, rgba(255,255,255,.05));border:1px solid var(--border-default, rgba(255,255,255,.06));border-radius:8px}.theme-shadow-preview span{font-size:10px;font-weight:600;color:var(--text-muted)}.canvas-node.multi-selected{outline:2px dashed oklch(62% .18 265 / .5)!important;outline-offset:2px}.layer-item .layer-name{transition:opacity .15s}.layer-item[data-hidden=true] .layer-name{opacity:.35;text-decoration:line-through}.layer-item[data-locked=true] .layer-name{opacity:.6}.layer-item[data-locked=true]:after{content:"";position:absolute;right:80px;top:50%;transform:translateY(-50%);width:12px;height:12px}.layer-tree{overflow-y:auto;flex:1}.layer-type-emoji{font-size:11px;line-height:1;flex-shrink:0;width:16px;text-align:center;filter:saturate(.7)}.layer-item.layer-hovered{background:#161b2499}.layer-item.layer-hovered:not(.selected){border-left-color:#507ef166!important}.layer-item.multi-selected{background:#1f2d4c4d;border-left-color:#507ef199}.layer-item.multi-selected.selected{background:var(--designer-selected)}.layer-action-btn.active{opacity:1!important;color:#4f6eb7}.layer-item .layer-actions .layer-action-extra{display:none}.layer-item:hover .layer-actions .layer-action-extra,.layer-item.selected .layer-actions .layer-action-extra{display:inline-flex}.layer-collapse-btn{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:14px;height:14px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:8px;padding:0;border-radius:2px;transition:color .12s}.layer-collapse-btn:hover{color:var(--text-primary);background:#1f2227}.layer-item-row{position:relative}.layer-panel.layer-dragging{cursor:grabbing}.layer-item.dragging{opacity:.35}.layer-drop-line{position:absolute;left:0;right:0;height:2px;background:oklch(62% .22 265);pointer-events:none;z-index:10;box-shadow:0 0 4px oklch(62% .22 265 / .5)}.layer-drop-above{top:-1px}.layer-drop-below{bottom:-1px}.layer-item.drag-over-inside{background:#507ef11f;outline:1px dashed oklch(62% .18 265 / .4);outline-offset:-1px}.layer-group-bar{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#0d111b;border-bottom:1px solid var(--designer-border);font-size:11px}.layer-group-badge{font-size:10px;font-weight:600;color:#739bf5;background:#507ef11f;padding:1px 8px;border-radius:10px}.layer-group-btn{display:inline-flex;align-items:center;gap:4px;background:#507ef11f;border:1px solid oklch(62% .18 265 / .2);color:#89acfa;font-size:10px;font-weight:600;padding:2px 10px;border-radius:4px;cursor:pointer;transition:all .15s}.layer-group-btn:hover{background:#507ef133;color:oklch(85% .1 265)}.layer-group-btn i{font-size:11px}.layer-expand-toggle{display:inline-flex;width:12px;flex-shrink:0;align-items:center;justify-content:center}.export-menu{max-height:400px;overflow-y:auto}.delete-confirm-overlay{position:fixed;inset:0;z-index:var(--z-max);background:#00000080;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}.delete-confirm-dialog{background:var(--bg-surface, #16161f);border:1px solid var(--border-default, rgba(255,255,255,.1));border-radius:16px;padding:28px 32px;text-align:center;max-width:360px;width:90%;box-shadow:0 20px 60px #00000080}.delete-confirm-dialog p{margin:12px 0 20px;font-size:14px;color:var(--text-secondary, #a0a0b0);line-height:1.5}.delete-confirm-dialog strong{color:var(--text-primary, #fff)}.delete-confirm-actions{display:flex;gap:10px;justify-content:center}.delete-confirm-cancel{padding:8px 20px;border-radius:8px;border:1px solid var(--border-default, rgba(255,255,255,.1));background:transparent;color:var(--text-primary, #fff);font-size:13px;cursor:pointer;font-weight:500;transition:all .15s}.delete-confirm-cancel:hover{background:#ffffff0d}.delete-confirm-ok{padding:8px 20px;border-radius:8px;border:none;background:#ef4444;color:#fff;font-size:13px;cursor:pointer;font-weight:600;transition:all .15s}.delete-confirm-ok:hover{background:#dc2626}.props-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:8px 12px;margin-bottom:4px;background:var(--bg-elevated, rgba(255,255,255,.03));border-radius:8px;font-size:11px}.props-breadcrumb-sep{color:var(--text-muted, #555);margin:0 2px;font-size:10px;user-select:none}.props-breadcrumb-item{background:none;border:none;color:var(--text-muted, #888);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:500;transition:all .15s;white-space:nowrap}.props-breadcrumb-item:hover{background:#ffffff0f;color:var(--text-primary, #fff)}.props-breadcrumb-item.current{color:oklch(70% .18 265);font-weight:600;background:oklch(70% .18 265 / .08)}.project-manager-overlay{position:fixed;inset:0;z-index:var(--z-max);background:#0009;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}.project-manager{background:#0f1216;border:1px solid oklch(30% .02 265);border-radius:12px;width:440px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;animation:slideDown .2s ease}.project-manager-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid oklch(25% .02 265);font-size:15px;font-weight:600;color:#e2e8f0}.project-manager-header i{font-size:18px;color:oklch(70% .18 265)}.project-manager-close{margin-left:auto;background:none;border:none;color:#94a3b8;cursor:pointer;font-size:14px;padding:4px;border-radius:4px}.project-manager-close:hover{background:#1d222b;color:#e2e8f0}.project-save-row{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid oklch(22% .01 265)}.project-name-input{flex:1;padding:8px 12px;border-radius:6px;background:#07090d;border:1px solid oklch(30% .02 265);color:#e2e8f0;font-size:13px;outline:none}.project-name-input:focus{border-color:#5888fc}.project-save-btn{padding:8px 14px;border-radius:6px;border:none;background:#3c68d9;color:#fff;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}.project-save-btn:hover{background:#4a78ea}.project-save-btn:disabled{opacity:.4;cursor:not-allowed}.project-list{flex:1;overflow-y:auto;padding:8px;min-height:100px;max-height:50vh}.project-empty{text-align:center;padding:32px 16px;color:#64748b;display:flex;flex-direction:column;align-items:center;gap:4px}.project-item{display:flex;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s}.project-item:hover{background:#181b1f}.project-item-info{flex:1;min-width:0}.project-item-name{display:block;font-size:13px;font-weight:500;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-item-meta{font-size:11px;color:#64748b}.project-item-actions{display:flex;gap:4px;margin-left:8px}.project-item-delete{background:none;border:none;color:#64748b;cursor:pointer;padding:4px 6px;border-radius:4px;font-size:13px}.project-item-delete:hover{background:#4e1921;color:#ef4444}.project-delete-confirm{padding:4px 10px;border-radius:4px;border:none;background:#ef4444;color:#fff;font-size:11px;cursor:pointer}.project-delete-cancel{padding:4px 10px;border-radius:4px;border:none;background:#1d222b;color:#94a3b8;font-size:11px;cursor:pointer}.project-badge-shared{color:#22c55e}.project-tier-badge{margin-left:auto;margin-right:8px;font-size:11px;color:#94a3b8;background:#161b24;padding:2px 8px;border-radius:10px}.project-tier-badge.near-limit{color:#f59e0b;background:oklch(22% .06 80)}.project-tier-badge.at-limit{color:#ef4444;background:#310c11}.project-tier-badge small{opacity:.7}.project-status{padding:6px 16px;font-size:12px;border-bottom:1px solid oklch(25% .02 265)}.project-status-success{color:#22c55e;background:#051606}.project-status-error{color:#ef4444;background:#20090c}.project-status-warning{color:#f59e0b;background:oklch(18% .04 80)}.project-export-all{padding:8px 14px;border-radius:6px;border:1px solid oklch(30% .02 265);background:#14161b;color:#94a3b8;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}.project-export-all:hover{border-color:#424853;color:#e2e8f0}.project-item-load{background:none;border:none;color:#64748b;cursor:pointer;padding:4px 6px;border-radius:4px;font-size:13px}.project-item-load:hover{background:#1a2b56;color:oklch(70% .18 265)}.project-filter-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid oklch(25% .02 265)}.project-filter-tabs{display:flex;gap:2px;flex:1}.project-filter-tab{background:none;border:none;color:#64748b;cursor:pointer;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:background .15s,color .15s}.project-filter-tab:hover{background:#181b1f;color:#94a3b8}.project-filter-tab.active{background:#507ef11f;color:oklch(70% .18 265)}.project-search-input{background:#0b0d12;border:1px solid oklch(25% .02 265);border-radius:6px;padding:5px 10px;color:#e2e8f0;font-size:12px;width:140px;outline:none}.project-search-input:focus{border-color:#507ef1;width:180px}.project-section{margin-bottom:4px}.project-section-header{display:flex;align-items:center;gap:6px;padding:8px 16px 4px;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.project-section-header i{font-size:11px;color:oklch(70% .18 265)}.project-section-count{background:#161b24;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:700;color:#94a3b8}.project-item-showcase{border-left:2px solid oklch(62% .18 265)}.project-item-showcase:hover{border-left-color:oklch(70% .18 265)}.project-item-icon{margin-right:6px}.project-item-desc{display:block;font-size:11px;color:#64748b;line-height:1.4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}.project-item-tags{display:inline-flex;gap:4px;margin-left:6px}.project-tag{background:#161b24;color:#94a3b8;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:500}.project-footer-info{font-size:11px;color:#64748b;flex:1}.project-manager-footer{padding:10px 16px;border-top:1px solid oklch(25% .02 265);display:flex;align-items:center;gap:8px}.canvas-node.drop-target-container{outline:2px solid oklch(62% .22 265)!important;outline-offset:2px;animation:containerDropPulse 1s ease-in-out infinite;box-shadow:0 0 20px oklch(62% .22 265 / .2),inset 0 0 30px oklch(62% .22 265 / .04)}@keyframes containerDropPulse{0%,to{outline-color:oklch(62% .22 265);box-shadow:0 0 20px oklch(62% .22 265 / .2)}50%{outline-color:oklch(72% .22 265);box-shadow:0 0 32px oklch(72% .22 265 / .3)}}.canvas-node[data-drop=before]:after,.canvas-node[data-drop=after]:after{content:"";position:absolute;left:5%;width:90%;height:3px;background:oklch(65% .22 145);border-radius:2px;box-shadow:0 0 10px oklch(65% .22 145 / .6);animation:insertLinePulse .2s ease-out forwards;z-index:5;pointer-events:none}.canvas-node[data-drop=before]:after{top:-2px}.canvas-node[data-drop=after]:after{bottom:-2px}.canvas-node[data-drop=left]:after,.canvas-node[data-drop=right]:after{content:"";position:absolute;top:5%;height:90%;width:3px;background:oklch(55% .22 200);border-radius:2px;box-shadow:0 0 10px oklch(55% .22 200 / .6);animation:insertLinePulse .2s ease-out forwards;z-index:5;pointer-events:none}.canvas-node[data-drop=left]:after{left:-2px}.canvas-node[data-drop=right]:after{right:-2px}.canvas-node[data-nesting-quality=perfect][data-drop=before]:after,.canvas-node[data-nesting-quality=perfect][data-drop=after]:after{background:#10b981;box-shadow:0 0 10px #10b98199}.canvas-node[data-nesting-quality=good][data-drop=before]:after,.canvas-node[data-nesting-quality=good][data-drop=after]:after{background:#6366f1;box-shadow:0 0 10px #6366f199}.canvas-node[data-nesting-quality=possible][data-drop=before]:after,.canvas-node[data-nesting-quality=possible][data-drop=after]:after{background:#f59e0b;box-shadow:0 0 10px #f59e0b80}@keyframes insertLinePulse{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}.canvas-node[data-drop=inside]:before{content:"⬇ Move inside"}.canvas-node[data-drop=before]:before,.canvas-node[data-drop=after]:before,.canvas-node[data-drop=left]:before,.canvas-node[data-drop=right]:before{content:none}.canvas-node.drop-invalid{outline:2px dashed oklch(55% .25 25 / .7)!important;outline-offset:2px;background-color:oklch(55% .25 25 / .04)!important}.canvas-node[data-invalid-drop]:before{content:"🚫 Cannot drop here";position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:4px;background:oklch(45% .25 25 / .9);color:#fff;pointer-events:none;white-space:nowrap;animation:shakeInvalid .3s ease}@keyframes shakeInvalid{0%,to{transform:translate(-50%,-50%) translate(0)}25%{transform:translate(-50%,-50%) translate(-4px)}75%{transform:translate(-50%,-50%) translate(4px)}}.drag-handle{position:absolute;left:-4px;top:6px;width:18px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:#607195;opacity:0;cursor:grab;z-index:5;border-radius:4px;background:#141a2999;transition:opacity .15s,background .15s,color .15s,transform .15s;user-select:none;-webkit-user-drag:element;pointer-events:auto}.canvas-node .canvas-node>.drag-handle{z-index:6}.canvas-node .canvas-node .canvas-node>.drag-handle{z-index:7}.canvas-node .canvas-node .canvas-node .canvas-node>.drag-handle{z-index:8}.canvas-node .canvas-node .canvas-node .canvas-node .canvas-node>.drag-handle{z-index:9}.drag-handle:hover{background:#1f2d4c;color:oklch(80% .18 265);opacity:1!important;transform:scale(1.1)}.drag-handle:active{cursor:grabbing;color:#79ec80;background:#263864}.canvas-node:hover>.drag-handle{opacity:.8}.canvas-node:has(.canvas-node:hover)>.drag-handle{opacity:0;pointer-events:none}.canvas-node.selected>.drag-handle{opacity:.9;color:#739bf5}.canvas-node.preview-mode>.drag-handle{display:none}.resize-handle{position:absolute;z-index:20;background:#4a78ea;border:1.5px solid oklch(75% .14 265);border-radius:2px;opacity:0;transition:opacity .15s;pointer-events:auto}.canvas-node.selected>.resize-handle{opacity:1}.resize-handle:hover{background:oklch(70% .22 265);transform:scale(1.2)}.rh-e{right:-4px;top:50%;width:6px;height:24px;margin-top:-12px;cursor:e-resize}.rh-s{bottom:-4px;left:50%;width:24px;height:6px;margin-left:-12px;cursor:s-resize}.rh-se{right:-5px;bottom:-5px;width:10px;height:10px;border-radius:3px;cursor:se-resize}.rh-sw{left:-5px;bottom:-5px;width:10px;height:10px;border-radius:3px;cursor:sw-resize}.canvas-node.resizing{outline:2px solid oklch(65% .2 265)!important}.snap-grid-overlay{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,oklch(35% .06 265 / .12) 1px,transparent 1px),linear-gradient(to bottom,oklch(35% .06 265 / .12) 1px,transparent 1px);opacity:1;animation:fadeIn .3s ease}.snap-grid-wrapper{position:relative;display:flex;align-items:center;gap:2px}.snap-size-btn{background:none;border:1px solid oklch(30% .02 265);color:#778fc1;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all .15s}.snap-size-btn:hover{border-color:#4d6291;color:oklch(80% .12 265)}.snap-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#07090d;border:1px solid oklch(25% .02 265);border-radius:8px;padding:4px;z-index:var(--z-modal);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column;gap:2px;min-width:60px}.snap-option{padding:5px 10px;border:none;background:none;color:#8c9ec5;font-size:11px;font-weight:500;border-radius:4px;cursor:pointer;font-family:inherit;text-align:left;transition:all .1s}.snap-option:hover{background:#161b24;color:#fff}.snap-option.active{background:#507ef126;color:oklch(75% .18 265)}.quick-actions-bar{position:absolute;z-index:var(--z-dropdown);display:flex;align-items:center;gap:2px;padding:3px 4px;background:#06090feb;backdrop-filter:blur(16px);border:1px solid oklch(28% .02 265 / .6);border-radius:10px;box-shadow:0 6px 24px #00000073;animation:fadeScale .15s var(--ease-out-expo);pointer-events:auto}.quick-actions-bar button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:7px;background:transparent;color:#92a5cb;font-size:13px;cursor:pointer;transition:all .12s;font-family:inherit}.quick-actions-bar button:hover:not(:disabled){background:#1d222b;color:#fff}.quick-actions-bar button:disabled{opacity:.3;cursor:not-allowed}.quick-actions-bar button:first-child:hover{color:#ef4444}.palette-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:none;background:#292e38;color:var(--text-muted);font-size:10px;cursor:pointer;transition:all .15s}.palette-search-clear:hover{background:#3d485e;color:#fff}.palette-header-count{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:0 2px 8px}.palette-search-status{padding:4px 16px 8px;font-size:11px;color:var(--text-muted)}.palette-search-status span{color:oklch(70% .18 160);font-weight:600}.palette-category-filters{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}.palette-category-chip{padding:2px 8px;font-size:10px;font-weight:600;border-radius:10px;border:1px solid var(--designer-border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}.palette-category-chip:hover{background:#161b24;color:var(--text-secondary)}.palette-category-chip.active{background:#507ef126;border-color:#507ef159;color:oklch(75% .14 265)}.palette-fav-btn{margin-left:auto;flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer;border-radius:4px;opacity:0;transition:all .15s;padding:0;line-height:1}.palette-item:hover .palette-fav-btn,.palette-fav-btn.active{opacity:1}.palette-fav-btn:hover{background:#1d222b;color:#f59e0b}.palette-fav-btn.active{color:#f59e0b}.palette-fav-btn.active:hover{color:#d97706}.palette-category[data-cat=Favorites] .palette-item i{color:#f59e0b}.palette-category[data-cat=Favorites] .palette-item{--item-hover-bg: oklch(75% .16 45 / .06);--item-border: oklch(75% .16 45 / .12)}.history-item{cursor:pointer;transition:background .1s}.history-item:hover{background:#13161d}.history-time{margin-left:auto;font-size:10px;opacity:.4}.style-presets-group .quick-style-chips{display:flex;flex-wrap:wrap;gap:4px;padding:6px 0 2px}.style-preset-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 6px;font-size:11px;font-weight:500;border-radius:6px;border:1px solid oklch(28% .02 265);background:#0f1216;color:#98a5be;cursor:pointer;transition:all .15s;white-space:nowrap}.style-preset-chip:hover{background:#181f2e;border-color:#334263;color:#fff}.style-preset-swatch{box-shadow:0 0 0 1px #ffffff0f}.quick-functions-group{padding:8px 10px 4px;border-bottom:1px solid oklch(22% .01 265)}.quick-functions-group .prop-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#66728a;display:flex;align-items:center;gap:6px;margin-bottom:8px}.quick-functions-grid{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:6px}.quick-function-chip{display:inline-flex;align-items:center;border-radius:6px;border:1px solid oklch(26% .02 265);background:#0b0d12;overflow:hidden;transition:all .15s}.quick-function-chip:hover{border-color:#303a50}.quick-function-chip.active{border-color:#3c68d9;background:#0d1528}.quick-function-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;font-size:11px;font-weight:500;border:none;background:transparent;color:#8c98b2;cursor:pointer;white-space:nowrap;transition:color .15s}.quick-function-btn:hover{color:#fff}.quick-function-chip.active .quick-function-btn{color:oklch(75% .18 265)}.quick-function-check{font-size:10px;color:oklch(65% .22 150)}.quick-function-name{pointer-events:none}.quick-function-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:100%;border:none;border-left:1px solid oklch(26% .02 265);background:transparent;color:#8b5050;cursor:pointer;font-size:10px;transition:all .15s}.quick-function-remove:hover{background:#4f191c;color:#fa676e}.empty-quickstart-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 20px;max-width:600px}@media (max-width: 600px){.empty-quickstart-cards{grid-template-columns:repeat(2,1fr)}}.empty-quickstart-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px 16px;border-radius:14px;border:1px solid oklch(25% .02 265);background:#090b0f;cursor:pointer;transition:all .2s;text-align:center}.empty-quickstart-card:hover{border-color:#2e4fa2;background:#0f1624;transform:translateY(-2px);box-shadow:0 8px 24px #00000040}.empty-quickstart-card>i{font-size:24px;color:#5888fc;opacity:.9}.empty-quickstart-card:hover>i{color:oklch(72% .22 265);opacity:1}.empty-quickstart-name{font-size:13px;font-weight:600;color:#c7cedb}.empty-quickstart-desc{font-size:11px;color:#6c727e;line-height:1.3}.suggested-section{border-bottom:1px solid rgba(245,158,11,.15)}.suggested-section .palette-category-header{color:#f59e0b!important}.suggested-section .palette-category-header .cat-icon{color:#f59e0b}.suggested-section .palette-category-header .cat-count{background:#f59e0b26;color:#f59e0b}.suggested-item{position:relative}.suggested-item:after{content:"✦";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#f59e0b;font-size:10px;opacity:.6}.suggested-item:hover:after{opacity:1}.suggested-item:hover{border-color:#f59e0b40!important}.animation-preset-chip{transition:all .2s ease;padding:6px 4px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text-1);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3;font-size:10px;line-height:1.2}.animation-preset-chip:hover{border-color:var(--primary-6)!important;background:#6366f114!important;transform:translateY(-1px)}.animation-preset-chip:hover .animation-preview{animation:var(--anim-preview, pulse) .6s ease}.animation-preset-chip.active{border-color:var(--primary-6)!important;background:#6366f126!important;box-shadow:0 0 8px #6366f133}.animation-preset-chip.active .animation-preview{color:var(--primary-6)}.animation-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.animation-preview{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-3);border-radius:4px;position:relative}.animation-preset-chip.active .animation-preview i{color:var(--primary-6)}.animation-preset-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.animation-controls{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:10px}.animation-controls .prop-row{margin-bottom:4px}.animation-controls .prop-label{min-width:64px}.animation-controls input[type=range]{height:4px;appearance:auto}.animation-controls select{font-size:11px}.style-preset-chip{transition:all .15s ease}.style-preset-chip:hover{transform:scale(1.05);box-shadow:0 2px 8px #0003}.effect-preset-swatch{width:24px;height:24px;border-radius:6px;backdrop-filter:blur(4px)}.canvas-node[data-animation=fadeIn]{animation:designerFadeIn .6s ease both}.canvas-node[data-animation=fadeUp]{animation:designerFadeUp .6s ease both}.canvas-node[data-animation=fadeDown]{animation:designerFadeDown .6s ease both}.canvas-node[data-animation=scaleIn]{animation:designerScaleIn .5s ease both}.canvas-node[data-animation=bounce]{animation:designerBounce .6s ease both}.canvas-node[data-animation=slideLeft]{animation:designerSlideLeft .5s ease both}.canvas-node[data-animation=slideRight]{animation:designerSlideRight .5s ease both}.canvas-node[data-animation=rotate]{animation:designerRotate .6s ease both}.canvas-node[data-animation=flipX]{animation:designerFlipX .6s ease both}.canvas-node[data-animation=flipY]{animation:designerFlipY .6s ease both}.canvas-node[data-animation=pulse]{animation:designerPulse 2s ease infinite}.canvas-node[data-animation=float]{animation:designerFloat 3s ease-in-out infinite}.canvas-node[data-animation=shake]{animation:designerShake .5s ease}.canvas-node[data-animation=glitch]{animation:designerGlitch .5s ease}.canvas-node[data-animation=neon]{animation:designerNeon 2s ease infinite}.canvas-node[data-animation=rainbow]{animation:designerRainbow 3s linear infinite}@keyframes designerFadeIn{0%{opacity:0}to{opacity:1}}@keyframes designerFadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes designerFadeDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes designerScaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes designerBounce{0%{transform:scale(1)}30%{transform:scale(1.15)}60%{transform:scale(.95)}to{transform:scale(1)}}@keyframes designerSlideLeft{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes designerSlideRight{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes designerRotate{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}@keyframes designerFlipX{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}to{opacity:1;transform:perspective(400px) rotateY(0)}}@keyframes designerFlipY{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}@keyframes designerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes designerFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes designerShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes designerGlitch{0%{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}to{transform:translate(0)}}@keyframes designerNeon{0%,to{text-shadow:0 0 4px currentColor}50%{text-shadow:0 0 12px currentColor,0 0 24px currentColor}}@keyframes designerRainbow{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes flipX{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}to{opacity:1;transform:perspective(400px) rotateY(0)}}@keyframes flipY{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}to{transform:translate(0)}}@keyframes neon{0%,to{text-shadow:0 0 4px currentColor}50%{text-shadow:0 0 12px currentColor,0 0 24px currentColor}}@keyframes rainbow{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.canvas-node.selected{box-shadow:0 0 0 2px var(--primary-6),0 0 16px #6366f126!important;transition:box-shadow .2s ease}.canvas-node{transition:opacity .2s,transform .2s,box-shadow .2s}.palette-item:hover{background:#6366f10f;transform:translate(2px);transition:all .15s ease}.drop-zone-perfect{box-shadow:0 0 0 2px #10b981,0 0 12px #10b9814d!important;transition:box-shadow .15s ease!important}.drop-zone-good{box-shadow:0 0 0 2px #6366f1,0 0 12px #6366f14d!important;transition:box-shadow .15s ease!important}.drop-zone-possible{box-shadow:0 0 0 2px #f59e0b,0 0 8px #f59e0b33!important;transition:box-shadow .15s ease!important}.drop-zone-bad{box-shadow:0 0 0 2px #ef4444!important;animation:dropReject .3s ease!important}@keyframes dropReject{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.canvas-node[data-nesting-quality=perfect][data-drop=inside]:before{content:"✓ PERFECT"!important;background:#10b981!important;color:#fff!important}.canvas-node[data-nesting-quality=good][data-drop=inside]:before{content:"◆ INSIDE"!important;background:#6366f1!important;color:#fff!important}.canvas-node[data-nesting-quality=possible][data-drop=inside]:before{content:"~ POSSIBLE"!important;background:#f59e0b!important;color:#000!important}.canvas-node[data-nesting-quality=bad][data-drop=inside]:before{content:"✕ BLOCKED"!important;background:#ef4444!important;color:#fff!important;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-node[data-nesting-quality=bad][data-drop=before]:before,.canvas-node[data-nesting-quality=bad][data-drop=after]:before,.canvas-node[data-nesting-quality=bad][data-drop=left]:before,.canvas-node[data-nesting-quality=bad][data-drop=right]:before{display:none}.drop-zone-perfect[data-drop=before],.drop-zone-perfect[data-drop=after]{box-shadow:0 -2px #10b981,0 -6px 12px -4px #10b9814d!important}.drop-zone-good[data-drop=before],.drop-zone-good[data-drop=after]{box-shadow:0 -2px #6366f1,0 -6px 12px -4px #6366f14d!important}.drop-zone-possible[data-drop=before],.drop-zone-possible[data-drop=after]{box-shadow:0 -2px #f59e0b,0 -6px 12px -4px #f59e0b4d!important}.drop-insertion-line{animation:insertionLineGrow .2s ease-out forwards}@keyframes insertionLineGrow{0%{transform:translateY(-50%) scaleX(0);opacity:0}to{transform:translateY(-50%) scaleX(1);opacity:1}}.canvas-node[data-type=Button]:hover button,.canvas-node[data-type=ButtonOutline]:hover button,.canvas-node[data-type=IconButton]:hover button{filter:brightness(1.1);transform:translateY(-1px);transition:all .15s ease}.canvas-node[data-type=Card]:hover>div{box-shadow:0 8px 24px #00000026;transition:box-shadow .2s ease}.canvas-node[data-type=Link]:hover a{text-decoration:underline}.canvas-node[data-type=Badge]:hover span{transform:scale(1.05);transition:transform .15s;display:inline-block}.canvas-node[data-type=Toggle]:hover>div>div:first-child{box-shadow:0 0 0 3px #6366f126;transition:box-shadow .2s ease}.canvas-node[data-type=Checkbox]:hover>div>div:first-child{box-shadow:0 0 0 3px #6366f11f;transition:box-shadow .2s ease}.canvas-node[data-type=Carousel]:hover>div>div:last-child,.canvas-node[data-type=Carousel]:hover>div>div:nth-last-child(2){opacity:.8}.canvas-node[data-type=NavItem]:hover>div{background:#325ac20f!important;transition:background .15s ease}.canvas-node[data-type=Pricing]:hover>div{transform:translateY(-2px);box-shadow:0 12px 32px #0003;transition:all .2s ease}.canvas-node[data-type=TestimonialCard]:hover>div{box-shadow:0 8px 24px #00000026;transition:box-shadow .2s ease}.canvas-node[data-type=MetricCard]:hover>div{box-shadow:0 8px 24px #0000001f;transition:box-shadow .2s ease}.device-frame{transition:width .3s ease,border-radius .3s ease}.device-frame-content{transition:width .3s ease}.breakpoint-indicator{animation:designerFadeIn .3s ease}.responsive-suggestions{margin-bottom:12px}.responsive-suggestion-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;margin:4px 0;background:#10b98114;border:1px solid rgba(16,185,129,.2);border-radius:8px;color:var(--text-1);cursor:pointer;font-size:12px;transition:all .15s;text-align:left}.responsive-suggestion-btn:hover{background:#10b98126;transform:translate(2px);border-color:#10b98166}.responsive-suggestion-btn code{color:#10b981;font-size:11px;white-space:nowrap;font-family:JetBrains Mono,monospace}.responsive-suggestion-btn span{flex:1;margin-right:8px}.device-toolbar{display:flex;align-items:center;gap:4px}.device-btn{padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:5px;font-size:12px;transition:all .15s;white-space:nowrap}.device-btn.active{background:#6366f126;border-color:var(--primary-6);color:var(--primary-6)}.device-btn:hover{border-color:var(--primary-6);color:var(--primary-6)}.device-btn-label{font-size:11px}.device-btn .device-btn-size{display:none}.device-btn:not(.active) .device-btn-label{display:none}.designer-toolbar>.sidebar-toggle:first-child{position:sticky;left:0;z-index:2;background:var(--designer-panel-bg);box-shadow:6px 0 8px -6px #0000008c}.designer-toolbar>.sidebar-toggle:last-child{position:sticky;right:0;z-index:2;background:var(--designer-panel-bg);box-shadow:-6px 0 8px -6px #0000008c}.device-btn-size{font-size:9px;opacity:.6;font-family:JetBrains Mono,monospace}.toolbar-sep-inline{width:1px;height:20px;background:var(--border);margin:0 4px}@media (max-width: 1600px){.device-btn-label,.device-btn-size{display:none}.device-btn{padding:5px 8px}.designer-toolbar .project-name-input{max-width:140px}.responsive-preset-btn span{display:none}.responsive-preset-btn{padding:4px 8px}.responsive-toolbar-bp span:not(.responsive-toolbar-dot){display:none}.responsive-toolbar{gap:4px;padding:0 6px}}@media (max-width: 1400px){.designer-toolbar{gap:4px;padding:0 10px}.designer-toolbar .project-name-input{max-width:100px}.toolbar-group{gap:1px}}.prop-inherited-tag{font-size:9px;color:var(--text-3);margin-left:4px;padding:1px 4px;background:#8080801a;border-radius:3px;font-style:italic}.prop-reset-bp{transition:all .15s}.prop-reset-bp:hover{transform:scale(1.15)}.device-frame-notch-bar{animation:designerFadeIn .3s ease}.prop-row{transition:border-left .15s ease,padding-left .15s ease}.canvas-interactive-label{color:var(--text-secondary);font-size:12px;margin-left:6px;user-select:none}.canvas-interactive-value{color:var(--text-secondary);font-size:12px;margin-left:8px;font-variant-numeric:tabular-nums}.canvas-toggle-track{position:relative;border:2px solid var(--border-default, rgba(255,255,255,.08));transition:background .25s;cursor:pointer}.canvas-toggle-track[data-on=true]{background:var(--primary-9, #818cf8)}.canvas-toggle-track[data-on=false]{background:var(--bg-elevated, #1a1a2e)}.canvas-toggle-thumb{position:absolute;top:1px;background:#fff;border-radius:50%;transition:left .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 4px #0003}.canvas-checkbox-box{display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:12px;color:#fff;cursor:pointer}.canvas-checkbox-box[data-checked=true]{background:var(--primary-9, #818cf8);border:none}.canvas-checkbox-box[data-checked=false]{background:transparent;border:2px solid var(--border-default, rgba(255,255,255,.08))}.canvas-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:var(--bg-elevated, #1a1a2e);font-weight:600;font-size:14px;transition:background .15s}.canvas-accordion-header:hover{background:#ffffff0a}.canvas-range-input{flex:1;accent-color:var(--primary-9, #6366f1)}.canvas-tab-content{padding:16px 0;color:var(--text-secondary, #a0a0b0);font-size:13px}.canvas-accordion-body{padding:12px 16px;font-size:13px;color:var(--text-secondary);line-height:1.6;border-top:1px solid var(--border-default, rgba(255,255,255,.06))}.template-delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px;margin-left:auto;opacity:0;transition:opacity .15s;font-size:14px}.palette-item:hover .template-delete-btn{opacity:.7}.template-delete-btn:hover{color:var(--error, #ef4444);opacity:1!important}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.prop-clear-btn{flex-shrink:0;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:#ef44441a;color:#ef4444;border:none;border-radius:4px;cursor:pointer;font-size:12px;padding:0;margin-left:4px;opacity:.6;transition:opacity .15s,background .15s}.prop-clear-btn:hover{opacity:1;background:#ef444433}.prop-field .prop-clear-btn{margin-left:2px}@keyframes zoomIn{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes zoomInDown{0%{opacity:0;transform:scale(.1) translateY(-1000px)}60%{opacity:1;transform:scale(.475) translateY(60px)}to{transform:scale(1) translateY(0)}}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{transform:perspective(400px) rotateX(-20deg)}60%{opacity:1;transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{transform:perspective(400px) rotateY(-20deg)}60%{opacity:1;transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px)}}@keyframes lightSpeedIn{0%{opacity:0;transform:translate3d(100%,0,0) skew(-30deg)}60%{opacity:1;transform:skew(20deg)}80%{transform:skew(-5deg)}to{opacity:1;transform:none}}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}@keyframes backInUp{0%{opacity:.7;transform:translateY(1200px) scale(.7)}80%{opacity:.7;transform:translateY(0) scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes blur{0%{opacity:0;filter:blur(20px)}to{opacity:1;filter:blur(0)}}@keyframes morphIn{0%{opacity:0;border-radius:50%;transform:scale(.5)}50%{border-radius:25%}to{opacity:1;border-radius:0;transform:scale(1)}}@keyframes expandUp{0%{opacity:0;transform:scaleY(0);transform-origin:bottom}to{opacity:1;transform:scaleY(1);transform-origin:bottom}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translateY(20px)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translateY(-20px)}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale(.3)}to{opacity:0}}@keyframes slideOutLeft{0%{transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes slideOutRight{0%{transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes slideOutUp{0%{transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes slideOutDown{0%{transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skew(-12.5deg) skewY(-12.5deg)}33.3%{transform:skew(6.25deg) skewY(6.25deg)}44.4%{transform:skew(-3.125deg) skewY(-3.125deg)}55.5%{transform:skew(1.5625deg) skewY(1.5625deg)}66.6%{transform:skew(-.78125deg) skewY(-.78125deg)}77.7%{transform:skew(.390625deg) skewY(.390625deg)}88.8%{transform:skew(-.1953125deg) skewY(-.1953125deg)}}@keyframes rubberBand{0%{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scale(1)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0)}}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}@keyframes headShake{0%{transform:translate(0)}6.5%{transform:translate(-6px) rotateY(-9deg)}18.5%{transform:translate(5px) rotateY(7deg)}31.5%{transform:translate(-3px) rotateY(-5deg)}43.5%{transform:translate(2px) rotateY(3deg)}50%{transform:translate(0)}}@keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@keyframes breathe{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes wave{0%,to{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}}@keyframes morphBg{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30%}to{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}}.canvas-node[data-component-type=BarChart] svg,.canvas-node[data-component-type=LineChart] svg,.canvas-node[data-component-type=PieChart] svg,.canvas-node[data-component-type=AreaChart] svg,.canvas-node[data-component-type=DonutChart] svg,.canvas-node[data-component-type=RadarChart] svg{width:100%;height:auto;display:block}.style-builder-group{border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden}.style-builder-group .prop-group-title{margin:0;padding:8px 10px;background:#ffffff05}.style-builder-group .prop-group-title:hover{background:#ffffff0a}.builder-active-dot{width:6px;height:6px;border-radius:50%;background:#818cf8;display:inline-block;margin-left:6px;vertical-align:middle}.builder-content{padding:8px 10px}.builder-action-btn{font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s}.builder-action-btn:hover{background:#ffffff14}.builder-apply-btn{border-color:#6366f14d;color:#818cf8}.builder-apply-btn:hover{background:#6366f11f}.builder-clear-btn{border-color:#ef444433;color:#ef4444}.builder-clear-btn:hover{background:#ef444414}.border-side-row{display:flex;align-items:center;gap:4px;padding:3px 0}.border-side-label{font-size:11px;color:var(--text-muted);min-width:38px;text-align:right}.gradient-stop-row,.gradient-stop{align-items:center}.gradient-editor .gradient-preview{height:40px;border-radius:8px;margin-bottom:8px;border:1px solid rgba(255,255,255,.1);background-size:cover;background-position:center}.bg-mode-tabs{display:flex;gap:2px;margin-bottom:8px;background:#ffffff08;border-radius:8px;padding:2px}.bg-mode-tab{flex:1;padding:5px 4px;border:none;border-radius:6px;background:transparent;color:var(--text-3);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;gap:3px;transition:all .15s}.bg-mode-tab:hover{background:#ffffff0d;color:var(--text-2)}.bg-mode-tab.active{background:#6366f126;color:#a5b4fc;box-shadow:0 1px 3px #0003}.bg-mode-tab i{font-size:11px}.bg-section{display:flex;flex-direction:column;gap:4px}.gradient-direction-picker{position:relative;width:72px;height:72px;margin:6px auto 8px}.dir-arrow-btn{position:absolute;width:24px;height:24px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:#ffffff0a;color:var(--text-3);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;line-height:1}.dir-arrow-btn:hover{background:#ffffff14;color:var(--text-1)}.dir-arrow-btn.active{background:#6366f133;border-color:#6366f166;color:#a5b4fc;box-shadow:0 0 8px #6366f133}.dir-arrow-btn:nth-child(1){top:0;left:50%;transform:translate(-50%)}.dir-arrow-btn:nth-child(2){top:4px;right:4px}.dir-arrow-btn:nth-child(3){top:50%;right:0;transform:translateY(-50%)}.dir-arrow-btn:nth-child(4){bottom:4px;right:4px}.dir-arrow-btn:nth-child(5){bottom:0;left:50%;transform:translate(-50%)}.dir-arrow-btn:nth-child(6){bottom:4px;left:4px}.dir-arrow-btn:nth-child(7){top:50%;left:0;transform:translateY(-50%)}.dir-arrow-btn:nth-child(8){top:4px;left:4px}.gradient-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 0;margin-top:4px}.gradient-preset-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:transparent;cursor:pointer;transition:all .15s}.gradient-preset-card:hover{border-color:#6366f14d;background:#ffffff08}.gradient-preset-swatch{width:100%;height:24px;border-radius:5px;border:1px solid rgba(255,255,255,.06)}.gradient-preset-name{font-size:9px;color:var(--text-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.bg-recent-colors{display:flex;align-items:center;gap:6px;padding:4px 0}.bg-recent-grid{display:flex;gap:3px;flex-wrap:wrap}.bg-recent-swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all .15s;padding:0}.bg-recent-swatch:hover{transform:scale(1.2);border-color:#ffffff4d;box-shadow:0 0 6px #0006}.shadow-controls-grid{display:flex;flex-direction:column;gap:2px}.shadow-ctrl,.filter-ctrl,.transform-ctrl{display:flex;align-items:center;gap:6px;min-height:22px}.shadow-ctrl-label,.filter-ctrl-label,.transform-ctrl-label{font-size:11px;color:var(--text-muted);min-width:48px;text-align:right}.shadow-ctrl-val,.filter-ctrl-val,.transform-ctrl-val{font-size:10px;color:var(--text-muted);min-width:40px;text-align:right;font-family:JetBrains Mono,monospace}.custom-css-editor::placeholder{color:#fff3}.custom-css-editor:focus{border-color:#6366f166;outline:none}.page-tabs-bar{display:flex;align-items:center;gap:2px;padding:4px 8px;background:#0f0f19f2;border-bottom:1px solid rgba(255,255,255,.06);min-height:36px;flex-shrink:0;overflow:hidden}.page-tabs-scroll{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.page-tabs-scroll::-webkit-scrollbar{height:3px}.page-tabs-scroll::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.page-tab{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px 6px 0 0;background:#ffffff08;border:1px solid transparent;border-bottom:none;cursor:pointer;font-size:12px;color:#ffffff80;white-space:nowrap;transition:all .15s;position:relative;user-select:none;min-width:70px}.page-tab:hover{background:#ffffff0f;color:#fffc}.page-tab-active{background:#6366f11f;color:#fff;border-color:#6366f14d;border-bottom:2px solid #6366f1}.page-tab-dragover{border-color:#6366f1;background:#6366f114}.page-tab-icon{font-size:13px}.page-tab-name{max-width:100px;overflow:hidden;text-overflow:ellipsis}.page-tab-home-badge{font-size:10px;color:#f59e0b;margin-left:2px}.page-tab-route{font-size:9px;color:#ffffff40;background:#ffffff0a;padding:1px 4px;border-radius:3px}.page-tab-rename{background:transparent;border:1px solid rgba(99,102,241,.4);color:#fff;font-size:12px;padding:1px 4px;border-radius:3px;width:80px;outline:none}.page-tab-menu{position:absolute;top:100%;left:0;z-index:999;background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:4px;display:flex;flex-direction:column;min-width:140px;box-shadow:0 8px 24px #0009}.page-tab-menu button{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;color:#fffc;background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;white-space:nowrap}.page-tab-menu button:hover{background:#ffffff14}.page-tab-menu-delete{color:#f87171!important}.page-tab-menu-delete:hover{background:#f871711a!important}.page-tab-add{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1px dashed rgba(255,255,255,.15);background:transparent;color:#fff6;cursor:pointer;font-size:16px;flex-shrink:0;transition:all .15s}.page-tab-add:hover{border-color:#6366f1;color:#6366f1;background:#6366f114}.page-tab-add-wrap{position:relative;flex-shrink:0}.page-tab-add-menu{position:absolute;top:100%;right:0;margin-top:6px;z-index:200;background:#1e1e2e;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 24px #00000080;min-width:200px;padding:6px;max-height:320px;overflow-y:auto}.page-tab-add-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:none;background:transparent;color:#fffc;font-size:13px;border-radius:6px;cursor:pointer;text-align:left;white-space:nowrap}.page-tab-add-menu button:hover{background:#6366f126;color:#fff}.page-tab-add-menu button i{font-size:14px;opacity:.6;width:18px;text-align:center}.page-tab-add-divider{padding:6px 12px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#ffffff4d;border-top:1px solid rgba(255,255,255,.06);margin-top:2px}.ai-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(4px);animation:fadeIn .15s ease}.ai-modal{width:min(580px,92vw);max-height:85vh;overflow-y:auto;border-radius:16px;background:#0b0d14;border:1px solid rgba(99,102,241,.25);box-shadow:0 24px 80px #00000080,0 0 0 1px #6366f11a;animation:designerScaleIn .2s cubic-bezier(.22,1,.36,1)}.ai-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)}.ai-modal-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#e2e8f0}.ai-modal-close{background:none;border:none;color:#fff6;cursor:pointer;padding:6px;border-radius:6px;font-size:14px;transition:all .15s}.ai-modal-close:hover{color:#fff;background:#ffffff14}.ai-modal-body{padding:20px}.ai-modal-textarea{width:100%;min-height:100px;resize:vertical;border-radius:10px;padding:14px 16px;background:#050609;border:1px solid rgba(255,255,255,.1);color:#e2e8f0;font-size:14px;line-height:1.6;font-family:inherit;outline:none;transition:border-color .2s}.ai-modal-textarea::placeholder{color:#ffffff4d}.ai-modal-textarea:focus{border-color:#6366f180;box-shadow:0 0 0 3px #6366f11a}.ai-modal-hint{margin-top:8px;font-size:11px;color:#ffffff4d;display:flex;align-items:center;gap:4px}.ai-modal-hint kbd{padding:1px 5px;border-radius:3px;font-size:10px;font-family:inherit;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#ffffff80}.ai-modal-examples{padding:0 20px 16px}.ai-examples-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#ffffff59;margin-bottom:10px}.ai-examples-grid{display:flex;flex-wrap:wrap;gap:8px}.ai-example-chip{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;background:#6366f114;border:1px solid rgba(99,102,241,.15);color:#ffffffb3;font-size:12px;cursor:pointer;transition:all .15s;font-family:inherit}.ai-example-chip:hover{background:#6366f12e;border-color:#6366f159;color:#e2e8f0;transform:translateY(-1px)}.ai-example-chip i{color:#6366f1;font-size:13px}.ai-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid rgba(255,255,255,.06)}.ai-modal-cancel{padding:8px 18px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;background:none;border:1px solid rgba(255,255,255,.12);color:#fff9;transition:all .15s}.ai-modal-cancel:hover{border-color:#ffffff40;color:#fff}.ai-modal-generate{display:flex;align-items:center;gap:8px;padding:8px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;transition:all .2s;box-shadow:0 2px 8px #6366f14d}.ai-modal-generate:hover{transform:translateY(-1px);box-shadow:0 4px 16px #6366f166;filter:brightness(1.1)}.ai-modal-generate:active{transform:translateY(0)}.ai-modal-generate:disabled{opacity:.4;cursor:default;transform:none;filter:none;box-shadow:none}.ai-modal-loading{padding:48px 20px;text-align:center}.ai-loading-orb{position:relative;width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center}.ai-loading-orb>i{font-size:28px;color:#6366f1;z-index:1;animation:designerPulse 1.5s ease infinite}.ai-orb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#6366f1;animation:spin 1.2s linear infinite}.ai-orb-ring-2{inset:8px;border-top-color:#8b5cf6;animation-duration:1.8s;animation-direction:reverse}.ai-loading-text{font-size:15px;font-weight:500;color:#e2e8f0;margin-bottom:16px;min-height:22px}.ai-loading-bar{width:240px;height:4px;border-radius:2px;background:#ffffff14;margin:0 auto 16px;overflow:hidden}.ai-loading-fill{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.22,1,.36,1);background:linear-gradient(90deg,#6366f1,#8b5cf6,#6366f1);background-size:200% 100%;animation:shimmer 1.5s ease infinite}.ai-loading-prompt{font-size:12px;color:#ffffff4d;font-style:italic;max-width:300px;margin:0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-accordion-item{border-bottom:1px solid rgba(255,255,255,.06)}.rd-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:14px 0;cursor:pointer;color:#e2e8f0;font-weight:500;font-size:15px;transition:color .15s}.rd-accordion-header:hover{color:#6366f1}.rd-accordion-icon{transition:transform .25s ease;font-size:12px;color:#fff6}.rd-accordion-icon.open{transform:rotate(180deg)}.rd-accordion-body{overflow:hidden;transition:max-height .3s ease,opacity .25s ease;color:#fff9;font-size:14px;line-height:1.6}.rd-accordion-body.collapsed{max-height:0;opacity:0;padding-bottom:0}.rd-accordion-body.expanded{max-height:400px;opacity:1;padding-bottom:14px}.rd-tabs-header{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px}.rd-tab-btn{padding:10px 20px;font-size:14px;font-weight:500;color:#ffffff80;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s ease;white-space:nowrap}.rd-tab-btn:hover{color:#fffc;background:#ffffff08}.rd-tab-btn.active{color:#6366f1;border-bottom-color:#6366f1;background:#6366f10f}.rd-tab-content{padding:8px 0;color:#ffffffb3;font-size:14px;line-height:1.6;animation:tabFadeIn .2s ease}.rd-carousel{position:relative;overflow:hidden;border-radius:12px}.rd-carousel-slide{padding:40px 60px;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:carouselSlideIn .4s ease}@keyframes carouselSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.rd-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:#00000080;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;backdrop-filter:blur(4px);z-index:2}.rd-carousel-nav:hover{background:#6366f166;border-color:#6366f180}.rd-carousel-nav.prev{left:12px}.rd-carousel-nav.next{right:12px}.rd-carousel-dots{display:flex;gap:8px;justify-content:center;padding:12px 0}.rd-carousel-dot{width:8px;height:8px;border-radius:4px;border:none;cursor:pointer;background:#fff3;transition:all .25s ease}.rd-carousel-dot.active{width:20px;background:#6366f1}.carousel-arrow{opacity:.7}.carousel-arrow:hover{background:#000000b3!important;opacity:1;transform:translateY(-50%) scale(1.1)!important}.carousel-arrow:focus-visible{outline:2px solid #6366f1;outline-offset:2px;opacity:1}.carousel-arrow:active{transform:translateY(-50%) scale(.95)!important}[data-interactive=carousel]:hover .carousel-arrow{opacity:1}.carousel-dot:hover{background:#ffffffb3!important}.carousel-dot:focus-visible{outline:2px solid #6366f1;outline-offset:2px}[data-interactive=carousel]:focus-visible{outline:2px solid oklch(72% .19 265 / .6);outline-offset:2px}.preview-active [data-component-type=Button]{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.preview-active [data-component-type=Button]:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000004d;filter:brightness(1.1)}.preview-active [data-component-type=Button]:active{transform:translateY(0) scale(.98)}.preview-active [data-component-type=Card]:hover{box-shadow:0 8px 32px #0003}.preview-active [data-component-type=Image]:hover{filter:brightness(1.05)}.preview-active a:hover{opacity:.85}.canvas-node[data-drop-before]:before{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;background:#6366f1;border-radius:2px;box-shadow:0 0 8px #6366f180;animation:dropLineGlow .4s ease infinite alternate;z-index:50}.canvas-node[data-drop-after]:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;background:#6366f1;border-radius:2px;box-shadow:0 0 8px #6366f180;animation:dropLineGlow .4s ease infinite alternate;z-index:50}@keyframes dropLineGlow{0%{box-shadow:0 0 4px #6366f14d}to{box-shadow:0 0 12px #6366f1b3}}.preview-mode .canvas-node[data-type=FlexRow]>.canvas-node-children,.preview-mode .canvas-node[data-type=Row]>.canvas-node-children{flex-wrap:wrap}.preview-mode .canvas-frame{scroll-behavior:smooth}@keyframes btnRipple{to{transform:scale(2.5);opacity:0}}@keyframes carouselDotPulse{0%,to{opacity:.4}50%{opacity:.7}}@keyframes stepBounce{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.preview-mode [data-interactive=button]:hover{filter:brightness(1.1);transform:translateY(-1px);transition:all .15s ease}.preview-mode [data-interactive=tabs] [role=tab]:hover{background:#ffffff0a}.preview-mode [data-interactive=accordion] .canvas-accordion-header:hover{background:#ffffff08}.preview-mode [data-interactive=carousel] button:hover{background:#000000b3!important}.preview-mode [data-interactive=stepper]>div:hover{opacity:.85}.preview-mode input[type=text]:focus,.preview-mode textarea:focus{outline:2px solid var(--primary-9, #6366f1);outline-offset:1px}.preview-mode .auto-hover-card:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:0 12px 40px #00000040}.canvas-node.selected>.drag-handle{opacity:1;background:#14295fe6;color:oklch(80% .2 265);box-shadow:0 0 6px #5888fc4d}@keyframes drag-pulse{0%,to{box-shadow:0 0 4px #5888fc33}50%{box-shadow:0 0 8px #5888fc66}}.canvas-node.selected:hover>.drag-handle{animation:drag-pulse 2s ease-in-out infinite}.canvas-node.selected>.canvas-node-inner{outline:2px solid oklch(65% .18 265 / .6);outline-offset:1px;border-radius:4px}.preview-mode .canvas-accordion-content{transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,padding .3s ease}.preview-mode .canvas-accordion-header:hover{background:#1d222b99}.preview-mode .tab-panel-content{animation:tab-fade-in .3s ease}@keyframes tab-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.preview-mode .carousel-slide-wrapper{transition:transform .5s cubic-bezier(.25,.1,.25,1)}.preview-mode [class*=progress-bar],.preview-mode .counter-bar-fill{transition:width 1.2s cubic-bezier(.4,0,.2,1)}.preview-mode [data-tooltip]:hover:after{animation:tooltip-appear .2s ease forwards}@keyframes tooltip-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.preview-mode button:focus-visible,.preview-mode a:focus-visible,.preview-mode [role=button]:focus-visible,.preview-mode [role=tab]:focus-visible{outline:2px solid oklch(70% .2 265);outline-offset:2px;border-radius:4px}.preview-mode .rating-star{transition:transform .15s ease,filter .15s ease}.preview-mode .rating-star:hover{transform:scale(1.2);filter:brightness(1.2)}.preview-mode .modal-overlay{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.preview-mode [class*=kanban-column]:hover{background:#12161f80}.preview-mode .timeline-dot:hover,.preview-mode [class*=timeline] .step-circle:hover{transform:scale(1.15);box-shadow:0 0 12px #5888fc66;transition:transform .2s ease,box-shadow .2s ease}.preview-mode [class*=stepper] .connector-active{transition:width .6s cubic-bezier(.4,0,.2,1)}@keyframes skeleton-shimmer{0%{background-position:-200% center}to{background-position:200% center}}.preview-mode .skeleton-block{background:linear-gradient(90deg,#14161b 25%,#242933,#14161b 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.canvas-viewport.dragging-active,.canvas-viewport.dragging-active *{cursor:grabbing!important}.canvas-viewport.dragging-active .canvas-node:not(.drag-source){transition:transform .15s ease,opacity .15s ease}.canvas-node.drag-source{opacity:.35!important;outline:2px dashed oklch(65% .18 265 / .4)!important;pointer-events:none}@keyframes dropZonePulse{0%,to{border-color:#31aa404d}50%{border-color:#31aa40b3}}.canvas-node[data-drop]{animation:dropZonePulse 1s ease infinite}.code-block-wrapper{background:#040609;border:1px solid oklch(25% .02 265);border-radius:12px;overflow:hidden;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,monospace}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#090b0f;border-bottom:1px solid oklch(22% .02 265);font-size:12px;color:#838fa8}.code-block-header .lang-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:4px;background:#0e1e47;color:#80a3f0}.code-block-header .copy-btn{cursor:pointer;padding:4px 8px;border-radius:4px;background:transparent;border:none;color:#758099;font-size:11px;transition:all .15s ease}.code-block-header .copy-btn:hover{background:#182135;color:#b1bed8}.code-block-body{padding:16px;overflow-x:auto;font-size:13px;line-height:1.6}.code-block-body .line-number{display:inline-block;width:32px;text-align:right;padding-right:12px;color:#424853;user-select:none;font-size:11px}.code-block-body .code-keyword{color:#c385ef}.code-block-body .code-string{color:#67bb6b}.code-block-body .code-comment{color:#58637b;font-style:italic}.code-block-body .code-function{color:oklch(75% .16 85)}.code-block-body .code-number{color:#eb8656}.chat-bubble-wrapper{display:flex;gap:10px;max-width:70%;align-items:flex-end}.chat-bubble-wrapper.own{flex-direction:row-reverse;margin-left:auto}.chat-bubble-avatar{width:32px;height:32px;border-radius:50%;background:#496dc3;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;flex-shrink:0}.chat-bubble-content{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;position:relative}.chat-bubble-wrapper:not(.own) .chat-bubble-content{background:#12161f;border:1px solid oklch(28% .02 265);border-bottom-left-radius:4px;color:#c7cedb}.chat-bubble-wrapper.own .chat-bubble-content{background:#3c68d9;color:#fff;border-bottom-right-radius:4px}.chat-bubble-time{font-size:10px;color:#58637b;margin-top:4px}.chat-bubble-sender{font-size:11px;font-weight:600;color:#778fc1;margin-bottom:2px}.countdown-wrapper{text-align:center}.countdown-label{font-size:14px;font-weight:600;color:#929fb8;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}.countdown-units{display:flex;gap:12px;justify-content:center}.countdown-unit{display:flex;flex-direction:column;align-items:center;gap:4px}.countdown-number{font-size:36px;font-weight:800;color:#fff;background:#0f1624;border:1px solid oklch(30% .04 265);border-radius:12px;padding:12px 18px;min-width:64px;text-align:center;line-height:1;font-variant-numeric:tabular-nums}.countdown-unit-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#66728a}.countdown-separator{font-size:28px;font-weight:700;color:#4d6291;align-self:flex-start;padding-top:14px}.marquee-wrapper{overflow:hidden;white-space:nowrap;position:relative;padding:12px 0;background:#060911;border-top:1px solid oklch(22% .02 265);border-bottom:1px solid oklch(22% .02 265)}.marquee-content{display:inline-flex;animation:marquee-scroll var(--marquee-duration, 20s) linear infinite}.marquee-content span{padding:0 48px;font-size:14px;font-weight:500;color:#a2aec8}.marquee-wrapper:before,.marquee-wrapper:after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}.marquee-wrapper:before{left:0;background:linear-gradient(to right,oklch(14% .02 265),transparent)}.marquee-wrapper:after{right:0;background:linear-gradient(to left,oklch(14% .02 265),transparent)}.video-player-wrapper{position:relative;border-radius:12px;overflow:hidden;background:#020306;border:1px solid oklch(22% .02 265);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}.video-player-overlay{display:flex;flex-direction:column;align-items:center;gap:16px}.video-play-btn{width:64px;height:64px;border-radius:50%;background:#3c68d9d9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(8px)}.video-play-btn:hover{transform:scale(1.1);background:#4475f6f2}.video-play-btn:after{content:"";width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;margin-left:4px}.video-player-title{font-size:14px;font-weight:600;color:#b7becb}.video-player-duration{font-size:11px;color:#66728a}.video-player-controls{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;display:flex;align-items:center;gap:12px;background:linear-gradient(transparent,#010203e6)}.video-progress{flex:1;height:3px;background:#292e38;border-radius:2px;position:relative}.video-progress-fill{position:absolute;top:0;left:0;height:100%;width:35%;background:#5888fc;border-radius:2px}.canvas-node.multi-selected{outline:2px solid oklch(65% .18 145 / .5)!important;outline-offset:1px}.canvas-node.multi-selected .canvas-node-label{background:#31aa40e6!important}.preview-mode .chat-bubble-wrapper{animation:fadeSlideUp .3s ease both}.preview-mode .chat-bubble-wrapper:nth-child(2){animation-delay:.1s}.preview-mode .chat-bubble-wrapper:nth-child(3){animation-delay:.2s}.preview-mode .chat-bubble-wrapper:nth-child(4){animation-delay:.3s}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.preview-mode .kanban-card{transition:transform .15s ease,box-shadow .15s ease}.preview-mode .kanban-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000004d}.preview-mode .data-table tbody tr{transition:background-color .15s ease}.preview-mode .data-table tbody tr:hover{background-color:#12161f!important}.preview-mode .data-table th{cursor:pointer;user-select:none}.preview-mode .data-table th:hover{background-color:#161b24}.preview-mode .modal-overlay{animation:modalFadeIn .2s ease}.preview-mode .modal-content{animation:modalSlideIn .25s cubic-bezier(.4,0,.2,1)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.preview-mode .alert-component{transition:all .2s ease}.preview-mode .alert-component:hover{transform:translate(2px)}.preview-mode .toggle-track{transition:background-color .25s ease}.preview-mode .toggle-thumb{transition:transform .25s cubic-bezier(.4,0,.2,1)}.props-empty-shortcuts{margin-top:16px;display:flex;flex-direction:column;gap:6px;width:100%;max-width:200px}.shortcut-tip{display:flex;align-items:center;gap:6px;font-size:11px;color:#7a8ba0;line-height:1.4}.shortcut-tip kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 4px;border:1px solid #3a4557;border-radius:3px;background:#1e2736;color:#b0bec5;font-size:10px;font-family:monospace;box-shadow:0 1px #0d1117;white-space:nowrap}@keyframes dropPulse{0%,to{opacity:1;box-shadow:0 0 6px #6366f166}50%{opacity:.7;box-shadow:0 0 12px #6366f1b3}}.drop-target-highlight{outline-offset:-2px;transition:all .15s ease}.layer-node:hover{background:#6366f10f}.layer-node.selected{background:#6366f11f;border-left:2px solid #6366f1}.preview-mode .canvas-viewport{scroll-behavior:smooth}.sidebar-left::-webkit-scrollbar,.props-panel::-webkit-scrollbar{width:4px}.sidebar-left::-webkit-scrollbar-track,.props-panel::-webkit-scrollbar-track{background:transparent}.sidebar-left::-webkit-scrollbar-thumb,.props-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.sidebar-left::-webkit-scrollbar-thumb:hover,.props-panel::-webkit-scrollbar-thumb:hover{background:#fff3}.preview-mode button:not(.preview-exit-btn):active{transform:scale(.97);transition:transform .1s ease}@keyframes sparklineDraw{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.preview-mode .metric-sparkline path,.preview-mode .metric-sparkline polyline{stroke-dasharray:100;animation:sparklineDraw 1.5s ease-out forwards}@keyframes progressFill{0%{width:0}}.preview-mode .progress-fill,.preview-mode [class*=progress]>div:first-child{animation:progressFill 1s ease-out forwards}.toast-notification{animation:toastSlideIn .3s ease-out}.preview-mode .carousel-dot.active{position:relative;overflow:hidden}@keyframes nodeEnter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.canvas-node{animation:nodeEnter .15s ease-out}.page-tab.active{position:relative}.page-tab.active:after{content:"";position:absolute;bottom:-1px;left:4px;right:4px;height:2px;background:#6366f1;border-radius:2px 2px 0 0}.designer-toolbar button:focus-visible,.palette-item:focus-visible,.layer-node:focus-visible{outline:2px solid #6366f1;outline-offset:-1px;border-radius:4px}.template-card:hover{border-color:#6366f166;transform:translateY(-1px);transition:all .2s ease}.preview-mode .chat-bubble-component{animation:chatBubbleIn .3s ease-out}.countdown-digit{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.preview-mode .marquee-component:hover .marquee-content{animation-play-state:paused}.device-frame{transition:width .3s ease,box-shadow .3s ease}.grid-overlay{opacity:.3;transition:opacity .2s ease}.skeleton-component [style*=shimmer]{will-change:background-position}.tooltip-component .tooltip-bubble{opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none}.tooltip-component:hover .tooltip-bubble{opacity:1}.tooltip-component .tooltip-top{transform:translate(-50%) translateY(-4px)}.tooltip-component:hover .tooltip-top{transform:translate(-50%) translateY(0)}.tooltip-component .tooltip-bottom{transform:translate(-50%) translateY(4px)}.tooltip-component:hover .tooltip-bottom{transform:translate(-50%) translateY(0)}.color-swatch-component div[title]:hover{transform:scale(1.15)!important;box-shadow:0 0 0 3px #6366f166!important}.canvas-node.drag-over-before:before{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#6366f1,#8b5cf6,#6366f1,transparent);border-radius:2px;z-index:10;animation:drop-pulse 1s ease infinite}.canvas-node.drag-over-after:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#6366f1,#8b5cf6,#6366f1,transparent);border-radius:2px;z-index:10;animation:drop-pulse 1s ease infinite}.canvas-node.drag-over-inside{outline:2px dashed rgba(99,102,241,.6)!important;outline-offset:-2px;background:#6366f10d!important}@keyframes drop-pulse{0%,to{opacity:.6}50%{opacity:1}}.prop-panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.prop-panel-empty .empty-icon{font-size:32px;opacity:.2}.prop-panel-empty .empty-text{font-size:13px;color:var(--text-muted);line-height:1.5}.prop-panel-empty .empty-hint{font-size:11px;color:var(--text-muted);opacity:.5;margin-top:8px}.canvas-node:hover>.canvas-node-content{box-shadow:0 0 0 1px #6366f126}.canvas-node.selected>.canvas-node-content{box-shadow:0 0 0 2px #6366f166,0 0 12px #6366f11a}.preview-mode .canvas-node[data-type=Card]:hover>div,.preview-mode .canvas-node[data-type=Section]:hover>div{transform:translateY(-1px);transition:transform .2s ease}.drag-ghost-label{backdrop-filter:blur(8px);font-weight:600;letter-spacing:.02em}.category-section .category-header:hover{background:#6366f10f}.layer-item{border-left:2px solid transparent;transition:border-color .15s ease}.layer-item:hover{border-left-color:#6366f14d}.layer-item.selected{border-left-color:#6366f1}.breakpoint-btn.active{background:#6366f126;border-color:#6366f14d}.page-tab{transition:all .2s ease}.page-tab:hover{background:#ffffff0a}.page-tab.active{box-shadow:inset 0 -2px #6366f1}.jsx-output-panel pre{scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.3) transparent}.jsx-output-panel pre::-webkit-scrollbar{width:6px;height:6px}.jsx-output-panel pre::-webkit-scrollbar-thumb{background:#6366f14d;border-radius:3px}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(99,102,241,.5);outline-offset:2px}.project-item.loading{opacity:.6;pointer-events:none}.project-item.loading:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(99,102,241,.05) 50%,transparent 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}.canvas-node[data-mouse-drop=before]:before,.canvas-node[data-mouse-drop=after]:after{animation:dropPulse .8s ease-in-out infinite alternate!important}@keyframes dropPulse{0%{opacity:.7;box-shadow:0 0 4px #6366f14d}to{opacity:1;box-shadow:0 0 12px #6366f199}}.canvas-node.selected>.canvas-node-wrapper{box-shadow:0 0 0 2px #6366f1cc,0 0 16px #6366f126!important;transition:box-shadow .15s ease}.drag-ghost{backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;border:1px solid rgba(99,102,241,.4)!important;box-shadow:0 8px 32px #0006,0 0 0 1px #6366f133!important}.interactive-tabs .tab-btn:after{transition:width .25s cubic-bezier(.22,1,.36,1),left .25s cubic-bezier(.22,1,.36,1)!important}.accordion-header .accordion-chevron,.accordion-header i[class*=chevron]{transition:transform .3s cubic-bezier(.22,1,.36,1)!important}.preview-mode .canvas-node[data-type=MetricCard]>div{transition:transform .2s ease,box-shadow .2s ease}.preview-mode .canvas-node[data-type=MetricCard]>div:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}.preview-mode .canvas-node[data-type=Button] button:hover{filter:brightness(1.1);transform:translateY(-1px);transition:all .15s ease}.preview-mode .canvas-node[data-type=Card]>div:hover{transform:translateY(-3px);box-shadow:0 12px 40px #00000040!important;transition:all .25s cubic-bezier(.22,1,.36,1)}.preview-mode .canvas-node[data-type=Badge] span:hover{transform:scale(1.05);transition:transform .15s ease}.preview-mode [data-chart-type] svg{cursor:crosshair}.preview-mode [data-chart-type] .chart-bar:hover{filter:brightness(1.2);transition:filter .15s ease}.interactive-carousel .carousel-arrow{transition:background-color .2s ease,transform .2s ease,opacity .2s ease!important}.interactive-carousel .carousel-arrow:hover{transform:scale(1.15)!important}@keyframes skeletonPulse{0%,to{opacity:.4}50%{opacity:.8}}.canvas-node[data-type=Skeleton]>div{animation:skeletonPulse 1.8s cubic-bezier(.4,0,.6,1) infinite}.preview-mode .canvas-node[data-type=Timeline] .timeline-dot{animation:timelinePulse 2s ease infinite}@keyframes timelinePulse{0%,to{box-shadow:0 0 #6366f14d}50%{box-shadow:0 0 0 6px #6366f100}}.layer-item{transition:background-color .12s ease,padding-left .2s ease}.canvas-empty-state{animation:fadeInUp .5s ease both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.preview-mode .canvas-node[data-type=Rating] .star-filled{text-shadow:0 0 8px rgba(234,179,8,.4)}.preview-mode .canvas-node[data-type=AvatarGroup]>div>*:hover{transform:translateY(-4px) scale(1.1);z-index:10;transition:all .2s ease}.canvas-viewport::-webkit-scrollbar{width:8px;height:8px}.canvas-viewport::-webkit-scrollbar-track{background:transparent}.canvas-viewport::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:4px}.canvas-viewport::-webkit-scrollbar-thumb:hover{background:#ffffff26}.selection-marquee{border:1.5px dashed rgba(99,102,241,.7)!important;background:#6366f10f!important}.resize-handle:hover,.rh-e:hover,.rh-s:hover,.rh-se:hover,.rh-sw:hover{background:#6366f1cc!important;box-shadow:0 0 6px #6366f166}.toast-notification{backdrop-filter:blur(12px)!important;border:1px solid rgba(255,255,255,.08)}.page-tab:hover:not(.active){background:#ffffff0a;transition:background .15s ease}.page-tab.active{box-shadow:0 1px 0 0 var(--color-primary, #6366f1)}.preview-mode .canvas-node[data-type=ChatBubble]>div{animation:chatBubbleIn .3s cubic-bezier(.22,1,.36,1) both}@keyframes chatBubbleIn{0%{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.canvas-node[data-type=CountdownTimer] .countdown-value{font-variant-numeric:tabular-nums;transition:all .3s ease}.canvas-node[data-type=Marquee]>div{mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}.canvas-node.drop-target:after{content:"";position:absolute;inset:-2px;border:2px dashed #6366f1;border-radius:6px;pointer-events:none;animation:dropPulse 1s ease infinite;z-index:100}@keyframes dropPulse{0%,to{border-color:#6366f1;box-shadow:0 0 #6366f14d}50%{border-color:#818cf8;box-shadow:0 0 12px 2px #6366f126}}.drop-indicator-line{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#6366f1,#818cf8,#6366f1,transparent);border-radius:2px;pointer-events:none;z-index:200;animation:lineGlow .8s ease infinite alternate}@keyframes lineGlow{0%{opacity:.7;transform:scaleY(1)}to{opacity:1;transform:scaleY(1.5)}}.canvas-node.selected{outline:2px solid #6366f1!important;outline-offset:1px;z-index:10}.canvas-node.selected:before{content:"";position:absolute;inset:-3px;border-radius:6px;background:#6366f10a;pointer-events:none;z-index:-1}.canvas-node.multi-selected{outline:2px solid #22d3ee!important;outline-offset:1px}.drag-ghost-label{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 32px #0006,0 0 0 1px #6366f14d}.breakpoint-active{position:relative}.breakpoint-active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#6366f1;border-radius:1px}.canvas-node.empty-container:not(.selected){min-height:48px;border:1px dashed rgba(99,102,241,.2);border-radius:6px;display:flex;align-items:center;justify-content:center}.canvas-node.empty-container:not(.selected):after{content:"Drop components here";color:#6366f14d;font-size:12px;font-style:italic;pointer-events:none}.preview-mode .page-tab-bar button{transition:all .2s ease}.preview-mode .page-tab-bar button:hover{background:#6366f11a}.preview-mode .page-tab-bar button.active{background:#6366f126;box-shadow:inset 0 -2px #6366f1}.preview-mode .canvas-node[data-type=Card]:hover,.preview-mode .canvas-node[data-type=ProductCard]:hover,.preview-mode .canvas-node[data-type=PricingCard]:hover,.preview-mode .canvas-node[data-type=FeatureCard]:hover,.preview-mode .canvas-node[data-type=TestimonialCard]:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003;transition:transform .2s ease,box-shadow .2s ease}.preview-mode .canvas-node[data-type=Button] button:hover,.preview-mode .canvas-node[data-type=ButtonOutline] button:hover{filter:brightness(1.1);box-shadow:0 4px 16px #6366f14d}.accordion-content-wrapper{overflow:hidden;transition:max-height .3s cubic-bezier(.22,1,.36,1)}.interactive-tab-content{animation:tabFadeIn .2s ease}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.stepper-step{transition:all .3s ease}.stepper-step.active .stepper-circle{transform:scale(1.15);box-shadow:0 0 0 4px #6366f133}.preview-mode .canvas-node[data-type=Timeline] .timeline-entry{animation:timelineSlide .4s cubic-bezier(.22,1,.36,1) both}.preview-mode .canvas-node[data-type=Timeline] .timeline-entry:nth-child(1){animation-delay:0s}.preview-mode .canvas-node[data-type=Timeline] .timeline-entry:nth-child(2){animation-delay:.1s}.preview-mode .canvas-node[data-type=Timeline] .timeline-entry:nth-child(3){animation-delay:.2s}.preview-mode .canvas-node[data-type=Timeline] .timeline-entry:nth-child(4){animation-delay:.3s}@keyframes timelineSlide{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.preview-mode .canvas-node[data-type=Rating] span[style*="cursor:pointer"]:hover{transform:scale(1.2);transition:transform .15s ease}.canvas-node[data-type=Tooltip]:hover>div>div:last-child{animation:tooltipIn .15s ease}@keyframes tooltipIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.preview-mode table tbody tr:hover{background:#6366f10f!important;transition:background .15s ease}.preview-mode .canvas-node[data-type=Navbar] nav{transition:padding .2s ease}.preview-mode .canvas-node[data-type=ProgressBar]>div>div{animation:progressGrow 1s cubic-bezier(.22,1,.36,1) both}@keyframes progressGrow{0%{width:0!important}}.preview-mode .canvas-node[data-type=MetricCard] svg{animation:sparklineDraw 1.2s ease both}@keyframes sparklineDraw{0%{stroke-dashoffset:200;opacity:0}to{stroke-dashoffset:0;opacity:1}}.preview-mode .canvas-node[data-type=Badge]>span[style*="border-radius: 999px"]{animation:badgePop .3s cubic-bezier(.22,1,.36,1)}@keyframes badgePop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.layer-item{transition:background .1s ease,transform .1s ease}.layer-item:active{transform:scale(.98)}.layer-item.dragging{opacity:.5;background:#6366f11a}.prop-group{transition:opacity .2s ease}.prop-group-title{transition:color .15s ease}.prop-group-title:hover{color:#a5b4fc}.component-item{transition:all .15s ease}.component-item:hover{background:#6366f114;transform:translate(2px)}.section-item{transition:all .2s ease}.section-item:hover{border-color:#6366f14d;box-shadow:0 4px 12px #0003}.sidebar-left::-webkit-scrollbar,.sidebar-right::-webkit-scrollbar,.layer-tree::-webkit-scrollbar{width:5px}.sidebar-left::-webkit-scrollbar-thumb,.sidebar-right::-webkit-scrollbar-thumb,.layer-tree::-webkit-scrollbar-thumb{background:#6366f133;border-radius:3px}.sidebar-left::-webkit-scrollbar-thumb:hover,.sidebar-right::-webkit-scrollbar-thumb:hover,.layer-tree::-webkit-scrollbar-thumb:hover{background:#6366f166}.toast-notification{animation:toastSlide .3s cubic-bezier(.22,1,.36,1)}@keyframes toastSlide{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.jsx-output-panel{transition:height .3s ease}.jsx-output-panel .line-number{transition:color .1s}.live-preview-overlay{backdrop-filter:blur(12px);animation:overlayFade .25s ease}@keyframes overlayFade{0%{opacity:0}to{opacity:1}}.preview-browser-chrome{border-radius:12px;box-shadow:0 25px 80px #00000080,0 0 0 1px #ffffff0f}.drop-indicator-before:before,.drop-indicator-after:after{content:"";position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#22c55e,transparent);border-radius:2px;animation:dropPulse .8s ease-in-out infinite alternate}.drop-indicator-before:before{top:-2px}.drop-indicator-after:after{bottom:-2px}@keyframes dropPulse{0%{opacity:.5;box-shadow:0 0 4px #22c55e}to{opacity:1;box-shadow:0 0 12px #22c55e}}.canvas-node:hover>.drag-handle{opacity:.7!important;transition:opacity .15s ease}.canvas-node:focus-within>.drag-handle{opacity:.9!important}.canvas-node[data-selected=true]{outline:2px solid #6366f1;outline-offset:2px;transition:outline-color .2s}.canvas-node[data-selected=true]:focus-within{outline-color:#818cf8}.canvas-node[data-multi-selected=true]{outline:2px dashed #818cf8;outline-offset:2px;animation:multiSelectShimmer 1.5s ease-in-out infinite}@keyframes multiSelectShimmer{0%,to{outline-color:#818cf8}50%{outline-color:#6366f1}}.resize-handle{opacity:0;transition:opacity .15s,transform .15s}.canvas-node:hover .resize-handle,.canvas-node[data-selected=true] .resize-handle{opacity:1}.resize-handle:hover{transform:scale(1.3);background:#6366f1!important}.page-tabs-bar{border-bottom:1px solid rgba(255,255,255,.06);scrollbar-width:none}.page-tabs-bar::-webkit-scrollbar{display:none}.page-tab{transition:all .2s;position:relative}.page-tab:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:#6366f1;border-radius:1px;transition:all .2s;transform:translate(-50%)}.page-tab:hover:after{width:60%}.page-tab.active:after{width:80%}.search-components-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126;outline:none}.layer-tree-item{transition:background .1s,transform .1s;border-left:2px solid transparent}.layer-tree-item:hover{background:#6366f10f;border-left-color:#6366f133}.layer-tree-item.selected{background:#6366f11f;border-left-color:#6366f1}.layer-tree-item.dragging{opacity:.5;transform:scale(.98)}.props-panel-section{animation:propsSectionIn .2s ease}@keyframes propsSectionIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.color-swatch{width:28px;height:28px;border-radius:6px;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:transform .15s,box-shadow .15s}.color-swatch:hover{transform:scale(1.1);box-shadow:0 0 0 3px #ffffff1a}.empty-canvas-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#4b5563;animation:emptyFade .5s ease}@keyframes emptyFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.export-dropdown{animation:exportDropIn .2s cubic-bezier(.22,1,.36,1);transform-origin:top right}@keyframes exportDropIn{0%{opacity:0;transform:scaleY(.9) translateY(-4px)}to{opacity:1;transform:scaleY(1) translateY(0)}}.canvas-viewport{scroll-behavior:smooth}.canvas-frame{transition:max-width .3s cubic-bezier(.22,1,.36,1)}.preview-mode .interactive-accordion summary:hover,.preview-mode .interactive-tabs [role=tab]:hover,.preview-mode .interactive-stepper .step:hover{background:#6366f114;transition:background .2s}.quick-add-bar button{transition:all .2s;border:1px dashed rgba(255,255,255,.1)}.quick-add-bar button:hover{border-color:#6366f1;color:#818cf8;background:#6366f114}@keyframes chartLineReveal{to{stroke-dashoffset:0}}@keyframes chartDotPop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes chartAreaFade{0%{opacity:0}to{opacity:1}}@keyframes chartBarGrow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes chartSliceReveal{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.canvas-node.selected>.canvas-node-wrapper{box-shadow:0 0 0 2px #6366f1,0 0 12px #6366f126}.copy-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:#22c55e;color:#fff;padding:8px 20px;border-radius:8px;font-size:13px;font-weight:500;opacity:0;animation:toastSlideUp 2s ease forwards;z-index:10000;pointer-events:none}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}15%{opacity:1;transform:translate(-50%) translateY(0)}85%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.layer-tree-item.drag-over-above:before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:#6366f1;border-radius:1px;z-index:5}.layer-tree-item.drag-over-below:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#6366f1;border-radius:1px;z-index:5}.layer-tree-item.drag-over-inside{background:#6366f11f!important;border-radius:4px}.canvas-frame[data-breakpoint=tablet]{box-shadow:0 4px 20px #0000004d;border-radius:12px;border:1px solid #2a2a3e}.canvas-frame[data-breakpoint=phone],.canvas-frame[data-breakpoint=small-phone]{box-shadow:0 4px 20px #0000004d;border-radius:24px;border:2px solid #2a2a3e;padding-top:28px;position:relative}.canvas-frame[data-breakpoint=phone]:before,.canvas-frame[data-breakpoint=small-phone]:before{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);width:40px;height:6px;background:#2a2a3e;border-radius:3px}.toolbar-btn{transition:background .15s,color .15s,transform .1s}.toolbar-btn:active{transform:scale(.95)}.props-panel input:focus,.props-panel select:focus,.props-panel textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}@keyframes undoFlash{0%{background:#6366f126}to{background:transparent}}.canvas-viewport.undo-flash{animation:undoFlash .3s ease}.canvas-node.just-added{animation:nodeEntrance .35s cubic-bezier(.34,1.56,.64,1) both}@keyframes nodeEntrance{0%{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.canvas-node.just-added .canvas-node{animation-delay:.05s}.canvas-node.just-added .canvas-node .canvas-node{animation-delay:.1s}.canvas-node.drag-source{opacity:.3!important;outline:2px dashed var(--color-primary, #6366f1)!important;transition:opacity .15s ease}.canvas-node[data-touch-drop=inside]{box-shadow:inset 0 0 0 3px var(--color-primary, #6366f1)!important;background-color:#6366f10f!important}.canvas-node[data-touch-drop=before]:before,.canvas-node[data-touch-drop=above]:before{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;background:var(--color-primary, #6366f1);border-radius:2px;z-index:100;animation:dropPulse .8s ease infinite}.canvas-node[data-touch-drop=after]:after,.canvas-node[data-touch-drop=below]:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;background:var(--color-primary, #6366f1);border-radius:2px;z-index:100;animation:dropPulse .8s ease infinite}.canvas-node[data-touch-drop=left]:before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:3px;background:var(--color-primary, #6366f1);border-radius:2px;z-index:100}.canvas-node[data-touch-drop=right]:after{content:"";position:absolute;right:-2px;top:0;bottom:0;width:3px;background:var(--color-primary, #6366f1);border-radius:2px;z-index:100}@keyframes dropPulse{0%,to{opacity:1}50%{opacity:.5}}.canvas-node.multi-selected{outline:2px solid rgba(139,92,246,.7)!important;outline-offset:1px;background-color:#8b5cf60a!important}.canvas-node.selected-primary{outline:2px solid var(--color-primary, #6366f1)!important;outline-offset:2px;box-shadow:0 0 0 4px #6366f126}.canvas-node.locked-node{position:relative;pointer-events:auto;cursor:not-allowed}.canvas-node.locked-node:after{content:"🔒";position:absolute;top:2px;right:4px;font-size:10px;opacity:.5;z-index:50;pointer-events:none}.project-item:hover .project-actions{opacity:1;transform:translate(0)}.project-actions{opacity:0;transform:translate(8px);transition:all .2s ease}.project-item .project-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.project-item .project-tag{font-size:11px;padding:1px 6px;border-radius:4px;background:#6366f11f;color:#a5a5c3e6;border:1px solid rgba(99,102,241,.15);transition:all .15s ease}.project-item .project-tag:hover{background:#6366f133;color:#a5b4fc}.component-palette .comp-item mark{background:#6366f14d;color:inherit;border-radius:2px;padding:0 1px}.live-code-editor{border-top:1px solid rgba(255,255,255,.06)}.live-code-editor pre{font-family:JetBrains Mono,Fira Code,Cascadia Code,Consolas,monospace;font-size:12.5px;line-height:1.65;tab-size:2;-moz-tab-size:2}.live-code-editor .line-number{color:#ffffff2e;user-select:none;min-width:32px;text-align:right;padding-right:12px;font-size:11px}.quick-actions-bar{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px #0000004d,0 0 0 1px #ffffff14;border-radius:10px}.quick-actions-bar button{transition:all .15s ease;border-radius:6px}.quick-actions-bar button:hover{background:#6366f126;color:#a5b4fc;transform:scale(1.08)}.quick-actions-bar button:active{transform:scale(.95)}.toolbar-group{position:relative}.toolbar-group:after{content:"";position:absolute;right:-1px;top:25%;height:50%;width:1px;background:#ffffff0f}.toolbar-group:last-child:after{display:none}.preview-exit-banner{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 1px 3px rgba(0,0,0,.3)}.preview-exit-banner kbd{background:#ffffff26;padding:2px 6px;border-radius:4px;font-size:11px;border:1px solid rgba(255,255,255,.2)}.smart-suggestions-bar{padding:6px 12px;background:#0f0f19d9;backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.05)}.suggestion-label{font-size:11px;color:#fff6;white-space:nowrap;margin-right:8px}.suggestion-chips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.suggestion-chips::-webkit-scrollbar{display:none}.suggestion-chip{font-size:11px;padding:3px 8px;border-radius:6px;background:#6366f11a;color:#a5a5c3e6;border:1px solid rgba(99,102,241,.15);cursor:pointer;white-space:nowrap;transition:all .15s ease;display:flex;align-items:center;gap:4px}.suggestion-chip:hover{background:#6366f133;color:#c4b5fd;transform:translateY(-1px);box-shadow:0 2px 8px #6366f133}.suggestion-chip i{font-size:10px;opacity:.7}.canvas-frame-badge{position:absolute;top:-22px;right:8px;font-size:10px;padding:1px 6px;border-radius:4px 4px 0 0;background:#0f0f19b3;color:#ffffff59;border:1px solid rgba(255,255,255,.06);border-bottom:none}.layer-tree-item{position:relative}.layer-tree-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#ffffff0d}.layer-tree-item[data-depth="1"]:before{left:12px}.layer-tree-item[data-depth="2"]:before{left:24px}.layer-tree-item[data-depth="3"]:before{left:36px}.layer-tree-item[data-depth="4"]:before{left:48px}.layer-tree-item[data-depth="5"]:before{left:60px}.component-palette::-webkit-scrollbar,.layer-tree::-webkit-scrollbar,.props-panel::-webkit-scrollbar{width:5px}.component-palette::-webkit-scrollbar-track,.layer-tree::-webkit-scrollbar-track,.props-panel::-webkit-scrollbar-track{background:transparent}.component-palette::-webkit-scrollbar-thumb,.layer-tree::-webkit-scrollbar-thumb,.props-panel::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}.component-palette::-webkit-scrollbar-thumb:hover,.layer-tree::-webkit-scrollbar-thumb:hover,.props-panel::-webkit-scrollbar-thumb:hover{background:#ffffff26}.toast-container{position:fixed;top:72px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast-message{pointer-events:auto;animation:toastSlideIn .3s cubic-bezier(.34,1.56,.64,1) both,toastFadeOut .3s ease 2.7s both;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:8px;padding:8px 14px;font-size:12.5px;box-shadow:0 4px 16px #0000004d;border:1px solid rgba(255,255,255,.08)}.toast-message.success{background:#22c55e33;color:#86efac;border-color:#22c55e33}.toast-message.error{background:#ef444433;color:#fca5a5;border-color:#ef444433}.toast-message.info{background:#6366f133;color:#c4b5fd;border-color:#6366f133}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toastFadeOut{0%{opacity:1}to{opacity:0;transform:translateY(-8px)}}.context-menu{backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #00000080,0 0 0 1px #0003}.context-menu-item{transition:all .1s ease;border-radius:4px;margin:0 4px}.context-menu-item:hover{background:#6366f11f;color:#e0e7ff}.context-menu-item .shortcut-hint{font-size:10px;opacity:.4;margin-left:auto;padding-left:16px;font-family:system-ui}.context-menu .submenu-arrow{font-size:9px;opacity:.4;margin-left:auto}.context-menu-separator{margin:4px 8px;border-top:1px solid rgba(255,255,255,.06)}.import-modal textarea{font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;line-height:1.6;background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#e2e8f0;resize:vertical;tab-size:2}.import-modal textarea:focus{border-color:#6366f180;box-shadow:0 0 0 2px #6366f11a;outline:none}.ai-modal-overlay{backdrop-filter:blur(4px)}.ai-modal{border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 64px #00000080}.ai-modal .ai-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.ai-modal .ai-suggestion-chip{font-size:11px;padding:4px 10px;border-radius:6px;background:#6366f114;color:#a5a5c3cc;border:1px solid rgba(99,102,241,.12);cursor:pointer;transition:all .15s ease}.ai-modal .ai-suggestion-chip:hover{background:#6366f12e;color:#c4b5fd;border-color:#6366f14d}@keyframes anim-fade-in{0%{opacity:0}to{opacity:1}}@keyframes anim-fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes anim-fade-in-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes anim-fade-in-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes anim-fade-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes anim-scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes anim-scale-in-bounce{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.95)}to{transform:scale(1)}}@keyframes anim-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes anim-slide-up{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes anim-slide-down{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes anim-slide-left{0%{transform:translate(-40px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes anim-slide-right{0%{transform:translate(40px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes anim-rotate-in{0%{transform:rotate(-180deg);opacity:0}to{transform:rotate(0);opacity:1}}@keyframes anim-flip-in-x{0%{transform:perspective(400px) rotateX(90deg);opacity:0}to{transform:perspective(400px) rotateX(0);opacity:1}}@keyframes anim-flip-in-y{0%{transform:perspective(400px) rotateY(90deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}@keyframes anim-zoom-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes anim-zoom-out-in{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes anim-blur-in{0%{filter:blur(12px);opacity:0}to{filter:blur(0);opacity:1}}.anim-stagger>*{animation-delay:calc(var(--stagger-index, 0) * .08s);animation-fill-mode:both}@keyframes anim-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes anim-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes anim-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes anim-swing{0%,to{transform:rotate(0)}20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}}@keyframes anim-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes anim-glow{0%,to{box-shadow:0 0 5px #6366f14d}50%{box-shadow:0 0 20px #6366f199}}@keyframes anim-typewriter-cursor{0%,to{border-right-color:transparent}50%{border-right-color:currentColor}}.rd-animate{animation-fill-mode:both}.rd-animate-fast{animation-duration:.3s}.rd-animate-normal{animation-duration:.5s}.rd-animate-slow{animation-duration:.8s}.rd-animate-delay-1{animation-delay:.1s}.rd-animate-delay-2{animation-delay:.2s}.rd-animate-delay-3{animation-delay:.3s}.rd-animate-delay-4{animation-delay:.4s}.rd-animate-delay-5{animation-delay:.5s}@keyframes counter-roll{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes progress-fill{0%{width:0}to{width:var(--progress, 100%)}}.rd-progress-animate{animation:progress-fill 1.2s cubic-bezier(.4,0,.2,1) forwards}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes timeline-reveal{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.rd-card-hover{transition:transform .2s ease,box-shadow .2s ease}.rd-card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 24px #00000026}.rd-btn-press:active{transform:scale(.96)}@keyframes img-reveal{0%{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}@keyframes notif-slide{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes tab-underline{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes accordion-expand{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}@keyframes carousel-slide-left{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes carousel-slide-right{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes gauge-fill{0%{stroke-dashoffset:var(--gauge-circumference, 283)}to{stroke-dashoffset:var(--gauge-target, 0)}}@keyframes tooltip-appear{0%{opacity:0;transform:translateY(4px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modal-backdrop{0%{opacity:0}to{opacity:1}}@keyframes modal-content{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}.context-menu,.canvas-context-menu{animation:ctx-appear .15s cubic-bezier(.16,1,.3,1);transform-origin:top left;backdrop-filter:blur(16px) saturate(180%);box-shadow:0 8px 32px #0006,0 2px 8px #0003,inset 0 1px #ffffff0d}@keyframes ctx-appear{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.context-menu-item:hover,.ctx-item:hover{transition:background .12s ease}.context-menu-item:active,.ctx-item:active{transform:scale(.98)}.companion-chip,.smart-suggest-chip{transition:all .15s ease;cursor:pointer}.companion-chip:hover,.smart-suggest-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.snap-guide-h,.snap-guide-v{position:absolute;background:#6366f180;z-index:9999;pointer-events:none;animation:snap-flash .3s ease}.snap-guide-h{height:1px;left:0;right:0}.snap-guide-v{width:1px;top:0;bottom:0}@keyframes snap-flash{0%{opacity:0}50%{opacity:1}to{opacity:.5}}.canvas-node.resizing{outline-offset:2px}.canvas-node:not(.selected):not(.preview-mode):hover{outline:1px solid rgba(99,102,241,.3);outline-offset:-1px;transition:outline .12s ease}.selection-rubber-band{position:absolute;border:1px solid rgba(99,102,241,.6);background:#6366f114;pointer-events:none;z-index:9998;border-radius:2px}.project-item{transition:all .15s ease;border-radius:8px}.project-item:hover{transform:translate(2px)}.breadcrumb-item{transition:color .15s ease;cursor:pointer}.page-tab{transition:all .2s cubic-bezier(.16,1,.3,1);position:relative}.node-action-toolbar{animation:toolbar-pop .15s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 24px #00000059,inset 0 1px #ffffff0f;backdrop-filter:blur(16px)}@keyframes toolbar-pop{0%{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.layer-tree-item{border-left:2px solid transparent;transition:all .1s ease}.layer-tree-item:hover{border-left-color:#6366f14d;background:#ffffff05}.layer-tree-item.selected{border-left-color:#6366f1;background:#6366f114}.component-category-header{transition:all .15s ease;cursor:pointer}.component-category-header:hover{background:#ffffff08}@keyframes skeleton-pulse{0%,to{opacity:.4}50%{opacity:.8}}.skeleton-loader{background:linear-gradient(90deg,#ffffff08 25%,#ffffff0f,#ffffff08 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;border-radius:8px}.copy-toast{animation:toast-slide .3s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(12px)}@keyframes toast-slide{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.viewport-btn.active{position:relative}.zoom-display{font-variant-numeric:tabular-nums;min-width:44px;text-align:center}.ai-generate-modal{box-shadow:0 0 80px #6366f126,0 16px 48px #0006}.ai-generate-modal input:focus,.ai-generate-modal textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.drag-handle{cursor:grab;opacity:0;transition:opacity .15s ease}.canvas-node:hover .drag-handle{opacity:.5}.drag-handle:active{cursor:grabbing}.left-panel::-webkit-scrollbar,.right-panel::-webkit-scrollbar,.layer-tree::-webkit-scrollbar{width:4px}.left-panel::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb,.layer-tree::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}.left-panel::-webkit-scrollbar-thumb:hover,.right-panel::-webkit-scrollbar-thumb:hover,.layer-tree::-webkit-scrollbar-thumb:hover{background:#ffffff26}.empty-canvas-prompt{animation:empty-canvas-fadein .5s ease}@keyframes empty-canvas-fadein{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-canvas-prompt .template-card{transition:all .2s cubic-bezier(.16,1,.3,1)}.empty-canvas-prompt .template-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000004d}.color-picker-popup{animation:picker-appear .15s cubic-bezier(.16,1,.3,1);box-shadow:0 12px 40px #00000080}@keyframes picker-appear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.component-item{position:relative}.component-item:after{content:attr(data-preview);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:12px;padding:8px 12px;background:var(--bg-elevated, #1e1e2e);border:1px solid var(--border-color, #3a3a5c);border-radius:8px;color:var(--text-secondary, #a0a0b0);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:1000;box-shadow:0 4px 12px #0000004d}.component-item:hover:after{opacity:1;transform:translateY(-50%) translate(4px)}.sidebar-section-content{overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s}.sidebar-section-content.collapsed{max-height:0;opacity:0}.sidebar-section-content.expanded{max-height:2000px;opacity:1}.component-search-input:focus{border-color:var(--accent-color, #6366f1);box-shadow:0 0 0 3px #6366f126;background:var(--bg-primary, #15151e)}.component-search-results{animation:searchReveal .2s ease-out}@keyframes searchReveal{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.component-item.dragging{opacity:.5;transform:scale(.95);border:1px dashed var(--accent-color, #6366f1)}.component-item:active{transform:scale(.97)}.toolbar-group{display:flex;gap:2px;padding:2px;background:var(--bg-tertiary, #1a1a2e);border-radius:8px}.toolbar-group button{border-radius:6px}.toolbar-separator{width:1px;height:24px;background:var(--border-color, #3a3a5c);margin:0 6px;align-self:center}.page-tab{transition:all .2s ease;border-bottom:2px solid transparent}.page-tab:hover{background:#6366f11a}.page-tab.active{border-bottom-color:var(--accent-color, #6366f1);background:#6366f114}.page-tab .page-tab-close{opacity:0;transition:opacity .15s}.page-tab:hover .page-tab-close{opacity:.7}.page-tab .page-tab-close:hover{opacity:1;color:#ef4444}.status-bar{display:flex;align-items:center;gap:12px;padding:4px 12px;font-size:11px;color:var(--text-tertiary, #808090);border-top:1px solid var(--border-subtle, #2a2a3c);background:var(--bg-primary, #15151e)}.status-bar-item{display:flex;align-items:center;gap:4px}.status-bar-dot{width:6px;height:6px;border-radius:50%;background:#22c55e}.jsx-output-panel{font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;line-height:1.6}.jsx-output-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg-secondary, #1a1a2e);border-bottom:1px solid var(--border-subtle, #2a2a3c)}.jsx-output-copy-btn{padding:3px 8px;border-radius:4px;border:1px solid var(--border-color, #3a3a5c);background:transparent;color:var(--text-secondary, #a0a0b0);font-size:11px;cursor:pointer;transition:all .15s}.jsx-output-copy-btn:hover{background:var(--accent-color, #6366f1);color:#fff;border-color:var(--accent-color, #6366f1)}.multi-select-toolbar{position:fixed;top:60px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-elevated, #1e1e2e);border:1px solid var(--border-color, #3a3a5c);border-radius:10px;box-shadow:0 4px 20px #0006;z-index:9999;font-size:13px;color:var(--text-primary, #e0e0e0);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.multi-select-toolbar button{padding:4px 10px;border-radius:6px;border:1px solid var(--border-color, #3a3a5c);background:var(--bg-secondary, #252535);color:var(--text-primary, #e0e0e0);cursor:pointer;font-size:12px;transition:all .15s;display:flex;align-items:center;gap:4px;white-space:nowrap}.multi-select-toolbar button:hover{background:var(--accent-color, #6366f1);color:#fff;border-color:var(--accent-color, #6366f1)}.multi-select-toolbar button:active{transform:scale(.98)}.multi-select-toolbar button i{font-size:11px}.multi-select-count{font-weight:600;color:var(--accent-color, #6366f1);margin-right:4px}.multi-select-divider{width:1px;height:20px;background:var(--border-color, #3a3a5c);margin:0 4px}.history-panel{width:280px;flex-shrink:0;display:flex;flex-direction:column;background:var(--designer-panel-bg, #1e1e28);border-left:1px solid var(--designer-border, rgba(42, 42, 56, .5));overflow:hidden;animation:historyPanelSlideIn .2s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1))}@keyframes historyPanelSlideIn{0%{width:0;opacity:0}to{width:280px;opacity:1}}.history-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .5));flex-shrink:0}.history-panel-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary, #a0a0b0)}.history-panel-title i{font-size:14px;color:#507ef1}.history-panel-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--text-muted, #8888a0);border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.history-panel-close:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.history-panel-list{flex:1;overflow-y:auto;padding:6px 0}.history-panel-empty{padding:24px 14px;text-align:center;font-size:12px;color:var(--text-muted, #8888a0)}.history-entry{display:flex;align-items:center;gap:10px;width:100%;padding:7px 14px;border:none;background:transparent;color:var(--text-secondary, #a0a0b0);font-size:12px;font-family:inherit;text-align:left;cursor:pointer;border-left:3px solid transparent;transition:background .1s,border-color .1s,opacity .1s}.history-entry:hover{background:var(--designer-hover, #32323e)}.history-entry:focus-visible{outline:2px solid oklch(62% .18 265);outline-offset:-2px;border-radius:0}.history-entry.current{border-left-color:#507ef1;background:#507ef11a;color:var(--text-primary, #f0f0f5);font-weight:600}.history-entry.current i{color:#507ef1;font-size:8px}.history-entry.future{opacity:.4}.history-entry.future:hover{opacity:.65}.history-entry i{font-size:12px;flex-shrink:0;width:14px;text-align:center;color:var(--text-muted, #8888a0)}.history-entry-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-entry-time{font-size:10px;color:var(--text-muted, #8888a0);flex-shrink:0;opacity:.6}.history-panel-list::-webkit-scrollbar{width:5px}.history-panel-list::-webkit-scrollbar-track{background:transparent}.history-panel-list::-webkit-scrollbar-thumb{background:#292e3880;border-radius:3px}.history-panel-list::-webkit-scrollbar-thumb:hover{background:#424853b3}@media (max-width: 768px){.history-panel{display:none}}.search-panel{position:fixed;top:var(--toolbar-h, 44px);left:0;width:340px;max-width:90vw;height:calc(100vh - var(--toolbar-h, 44px));background:var(--designer-panel-bg, #1e1e28);border-right:1px solid var(--designer-border, rgba(42, 42, 56, .5));z-index:200;display:flex;flex-direction:column;animation:searchPanelSlideIn .2s cubic-bezier(.16,1,.3,1);box-shadow:4px 0 24px #0000004d}@keyframes searchPanelSlideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.search-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .5));flex-shrink:0}.search-panel-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary, #a0a0b0)}.search-panel-title i{font-size:14px;color:#507ef1}.search-result-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:#2955d34d;color:oklch(75% .15 265);font-size:10px;font-weight:700}.search-panel-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--text-muted, #8888a0);border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.search-panel-close:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.search-input-row{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .3));flex-shrink:0}.search-input-wrapper{flex:1;position:relative;display:flex;align-items:center}.search-input-icon{position:absolute;left:8px;font-size:12px;color:var(--text-muted, #8888a0);pointer-events:none}.search-input{width:100%;padding:6px 28px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:6px;background:var(--bg-input, #14141e);color:var(--text-primary, #f0f0f5);font-size:12px;outline:none;transition:border-color .15s}.search-input:focus{border-color:#507ef1}.search-input-clear{position:absolute;right:4px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--text-muted, #8888a0);cursor:pointer;border-radius:4px;font-size:14px}.search-input-clear:hover{color:var(--text-primary, #f0f0f5);background:var(--designer-hover, #32323e)}.search-nav-btns{display:flex;flex-direction:column;gap:1px}.search-nav-btns button{display:flex;align-items:center;justify-content:center;width:22px;height:16px;border:none;background:transparent;color:var(--text-muted, #8888a0);cursor:pointer;border-radius:3px;font-size:10px}.search-nav-btns button:hover:not(:disabled){background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.search-nav-btns button:disabled{opacity:.3;cursor:default}.search-modes{display:flex;gap:4px;padding:6px 10px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .3));flex-shrink:0}.search-mode-btn{display:flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--text-muted, #8888a0);font-size:11px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.search-mode-btn:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.search-mode-btn.active{background:#2955d326;color:oklch(75% .15 265);border-color:#385db84d}.search-mode-btn i{font-size:11px}.search-filters{display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .3));flex-shrink:0}.search-filter-select{padding:3px 6px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:4px;background:var(--bg-input, #14141e);color:var(--text-primary, #f0f0f5);font-size:11px;outline:none;cursor:pointer}.search-filter-select:focus{border-color:#507ef1}.search-toggle-row{display:flex;gap:4px;padding:6px 10px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .3));flex-shrink:0}.search-toggle-btn{display:flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:4px;background:transparent;color:var(--text-muted, #8888a0);font-size:11px;cursor:pointer;transition:background .15s,color .15s}.search-toggle-btn:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.search-toggle-btn.active{background:#2955d31f;color:oklch(75% .15 265);border-color:#385db84d}.search-toggle-btn i{font-size:11px}.search-replace-section{padding:8px 10px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .3));display:flex;flex-direction:column;gap:6px;flex-shrink:0}.search-replace-btns{display:flex;gap:4px}.search-replace-btns button{flex:1;padding:4px 8px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:4px;background:#2955d31a;color:oklch(75% .15 265);font-size:11px;cursor:pointer;transition:background .15s}.search-replace-btns button:hover:not(:disabled){background:#2955d340}.search-replace-btns button:disabled{opacity:.35;cursor:default}.search-replace-hint{font-size:10px;color:var(--text-muted, #8888a0);font-style:italic}.search-batch-section{padding:8px 10px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .3));display:flex;flex-direction:column;gap:8px;flex-shrink:0}.search-batch-row{display:flex;gap:4px}.search-batch-row button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:4px 8px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:4px;background:transparent;color:var(--text-secondary, #a0a0b0);font-size:11px;cursor:pointer;transition:background .15s,color .15s}.search-batch-row button:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.search-batch-danger{color:#f14d4c!important}.search-batch-danger:hover{background:#86111833!important}.search-batch-group{display:flex;flex-direction:column;gap:3px}.search-batch-group label{font-size:10px;color:var(--text-muted, #8888a0);text-transform:uppercase;letter-spacing:.04em}.search-batch-inline{display:flex;gap:4px}.search-batch-inline input{flex:1;min-width:0;padding:4px 6px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:4px;background:var(--bg-input, #14141e);color:var(--text-primary, #f0f0f5);font-size:11px;outline:none}.search-batch-inline input:focus{border-color:#507ef1}.search-batch-inline button{padding:4px 10px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:4px;background:#2955d31a;color:oklch(75% .15 265);font-size:11px;cursor:pointer;white-space:nowrap;transition:background .15s}.search-batch-inline button:hover:not(:disabled){background:#2955d340}.search-batch-inline button:disabled{opacity:.35;cursor:default}.search-results{flex:1;overflow-y:auto;padding:4px 0}.search-results::-webkit-scrollbar{width:5px}.search-results::-webkit-scrollbar-track{background:transparent}.search-results::-webkit-scrollbar-thumb{background:#292e3880;border-radius:3px}.search-results::-webkit-scrollbar-thumb:hover{background:#424853b3}.search-empty{padding:24px 14px;text-align:center;font-size:12px;color:var(--text-muted, #8888a0)}.search-result-item{display:flex;align-items:flex-start;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;color:var(--text-secondary, #a0a0b0);cursor:pointer;text-align:left;transition:background .12s;border-left:2px solid transparent}.search-result-item:hover{background:var(--designer-hover, #32323e)}.search-result-item.active{background:#2955d31a;border-left-color:#507ef1}.search-result-icon{font-size:14px;color:#5981e0;margin-top:1px;flex-shrink:0}.search-result-info{flex:1;min-width:0;overflow:hidden}.search-result-type{font-size:12px;font-weight:600;color:var(--text-primary, #f0f0f5);display:flex;align-items:center;gap:6px}.search-result-page{font-size:10px;font-weight:400;color:var(--text-muted, #8888a0);background:#292e384d;padding:1px 5px;border-radius:3px}.search-result-match{display:flex;flex-direction:column;gap:1px;margin-top:2px}.search-result-field{font-size:11px;color:var(--text-muted, #8888a0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-field-label{color:#5570ac;font-weight:500;font-size:10px}.search-result-more{font-size:10px;color:var(--text-muted, #8888a0);font-style:italic}mark.search-highlight{background:oklch(65% .2 80 / .35);color:oklch(90% .1 80);padding:0 1px;border-radius:2px}.search-status{padding:5px 12px;font-size:10px;color:var(--text-muted, #8888a0);border-top:1px solid var(--designer-border, rgba(42, 42, 56, .3));text-align:center;flex-shrink:0}.canvas-node.search-match-highlight{box-shadow:0 0 0 2px oklch(65% .2 80 / .5),0 0 12px oklch(65% .2 80 / .2)}@media (max-width: 768px){.search-panel{width:100%;max-width:100vw}}.a11y-panel{position:fixed;top:var(--toolbar-h, 44px);right:0;width:360px;max-width:90vw;height:calc(100vh - var(--toolbar-h, 44px));background:var(--bg-panel, #12121a);border-left:1px solid var(--designer-border, rgba(255,255,255,.06));z-index:200;display:flex;flex-direction:column;animation:a11y-slide-in .2s ease-out;box-shadow:-4px 0 24px #0000004d;overflow:hidden}@keyframes a11y-slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.a11y-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--designer-border, rgba(255,255,255,.06));flex-shrink:0}.a11y-panel-title{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--text-primary, #e0e0f0)}.a11y-panel-close{background:none;border:none;color:var(--text-muted, #888);cursor:pointer;padding:4px;border-radius:4px;font-size:14px}.a11y-panel-close:hover{background:#ffffff0f;color:var(--text-primary)}.a11y-score-ring{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px 12px;flex-shrink:0}.a11y-score-value{font-size:48px;font-weight:800;color:var(--score-color, #22c55e);line-height:1;font-variant-numeric:tabular-nums}.a11y-score-label{font-size:14px;color:var(--text-muted, #888);margin-top:2px}.a11y-grade{font-size:16px;font-weight:700;color:var(--score-color, #22c55e);margin-top:4px;padding:2px 10px;border-radius:6px;background:color-mix(in oklch,var(--score-color) 12%,transparent)}.a11y-summary{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;justify-content:center;flex-shrink:0}.a11y-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600}.a11y-badge.error{background:#ef44441f;color:#f87171}.a11y-badge.warning{background:#eab3081f;color:#fbbf24}.a11y-badge.info{background:#3b82f61f;color:#60a5fa}.a11y-badge.success{background:#22c55e1f;color:#4ade80}.a11y-issues-list{flex:1;overflow-y:auto;padding:0 12px 12px}.a11y-issue-group{margin-bottom:8px}.a11y-issue-group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:8px 4px 4px;position:sticky;top:0;background:var(--bg-panel, #12121a);z-index:1}.a11y-issue-group-title.error{color:#f87171}.a11y-issue-group-title.warning{color:#fbbf24}.a11y-issue-group-title.info{color:#60a5fa}.a11y-issue-item{padding:8px 10px;margin:4px 0;border-radius:8px;border-left:3px solid transparent;cursor:pointer;transition:background .15s;background:#ffffff05}.a11y-issue-item:hover{background:#ffffff0d}.a11y-issue-item.error{border-left-color:#ef4444}.a11y-issue-item.warning{border-left-color:#eab308}.a11y-issue-item.info{border-left-color:#3b82f6}.a11y-issue-rule{font-size:11px;font-weight:700;font-family:JetBrains Mono,monospace;color:var(--text-muted, #888);margin-bottom:2px}.a11y-issue-msg{font-size:12px;color:var(--text-primary, #e0e0f0);line-height:1.4}.a11y-issue-fix{font-size:11px;color:var(--text-muted, #888);margin-top:3px;font-style:italic}.a11y-issue-actions{display:flex;gap:6px;margin-top:6px}.a11y-locate-btn,.a11y-fix-btn{font-size:11px;padding:2px 8px;border-radius:4px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:var(--text-muted, #888);cursor:pointer;display:inline-flex;align-items:center;gap:4px}.a11y-locate-btn:hover{background:#ffffff0f;color:var(--text-primary)}.a11y-fix-btn{border-color:#22c55e33;color:#4ade80}.a11y-fix-btn:hover{background:#22c55e1a}.a11y-panel-footer{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--designer-border, rgba(255,255,255,.06));flex-shrink:0}.a11y-rerun-btn,.a11y-export-btn{flex:1;padding:7px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:var(--text-primary, #e0e0f0);cursor:pointer;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s}.a11y-rerun-btn:hover{background:#6366f11a}.a11y-export-btn:hover{background:#ffffff0f}.a11y-rerun-btn:disabled{opacity:.5;cursor:not-allowed}.a11y-node-section{margin:8px 0;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:#ffffff04}.a11y-node-header{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-primary, #e0e0f0);padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:6px}.a11y-node-count{margin-left:auto;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:700}.a11y-node-count.error{background:#ef44441f;color:#f87171}.a11y-node-count.warning{background:#eab3081f;color:#fbbf24}.a11y-node-issue{padding:6px 0}.a11y-node-issue+.a11y-node-issue{border-top:1px solid rgba(255,255,255,.03)}.a11y-node-issue-msg{font-size:11px;color:var(--text-primary, #e0e0f0);line-height:1.4;display:flex;align-items:flex-start;gap:6px}.a11y-severity-dot{width:6px;height:6px;border-radius:50%;margin-top:4px;flex-shrink:0}.a11y-node-issue.error .a11y-severity-dot{background:#ef4444}.a11y-node-issue.warning .a11y-severity-dot{background:#eab308}.a11y-node-issue.info .a11y-severity-dot{background:#3b82f6}.a11y-node-issue-suggestion{font-size:10px;color:var(--text-muted, #888);margin-top:2px;margin-left:12px;font-style:italic}.a11y-node-fix-btn{font-size:10px;padding:2px 8px;border-radius:4px;border:1px solid rgba(34,197,94,.2);background:#22c55e0f;color:#4ade80;cursor:pointer;margin-top:4px;margin-left:12px;display:inline-flex;align-items:center;gap:4px}.a11y-node-fix-btn:hover{background:#22c55e1f}.comp-lib-panel{width:300px;flex-shrink:0;display:flex;flex-direction:column;background:var(--designer-panel-bg, #1e1e28);border-left:1px solid var(--designer-border, rgba(42, 42, 56, .5));overflow:hidden;animation:compLibSlideIn .2s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));max-height:100%}@keyframes compLibSlideIn{0%{width:0;opacity:0}to{width:300px;opacity:1}}.comp-lib-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .5));flex-shrink:0}.comp-lib-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary, #a0a0b0)}.comp-lib-title i{font-size:14px;color:oklch(70% .18 160)}.comp-lib-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--text-muted, #8888a0);border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.comp-lib-close:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.comp-lib-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .5))}.comp-lib-search i{font-size:12px;color:var(--text-muted, #8888a0);flex-shrink:0}.comp-lib-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary, #f0f0f5);font-size:12px;font-family:inherit}.comp-lib-search input::placeholder{color:var(--text-muted, #8888a0)}.comp-lib-search-clear{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:var(--text-muted, #8888a0);cursor:pointer;border-radius:4px;font-size:14px}.comp-lib-search-clear:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.comp-lib-categories{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .5));flex-wrap:wrap}.comp-lib-cat-btn{font-size:10px;padding:3px 8px;border-radius:10px;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));background:transparent;color:var(--text-muted, #8888a0);cursor:pointer;transition:background .15s,color .15s,border-color .15s;display:flex;align-items:center;gap:4px;font-family:inherit;white-space:nowrap}.comp-lib-cat-btn:hover{background:var(--designer-hover, #32323e);color:var(--text-secondary, #a0a0b0)}.comp-lib-cat-btn.active{background:oklch(70% .18 160 / .15);border-color:oklch(70% .18 160 / .4);color:oklch(70% .18 160)}.comp-lib-cat-count{font-size:9px;background:#ffffff0f;padding:0 4px;border-radius:6px;min-width:14px;text-align:center}.comp-lib-list{flex:1;overflow-y:auto;padding:6px}.comp-lib-list::-webkit-scrollbar{width:5px}.comp-lib-list::-webkit-scrollbar-track{background:transparent}.comp-lib-list::-webkit-scrollbar-thumb{background:#292e3880;border-radius:3px}.comp-lib-list::-webkit-scrollbar-thumb:hover{background:#424853b3}.comp-lib-empty{padding:32px 14px;text-align:center;font-size:12px;color:var(--text-muted, #8888a0);display:flex;flex-direction:column;align-items:center;gap:8px}.comp-lib-empty i{font-size:28px;opacity:.3}.comp-lib-empty-hint{font-size:10px;opacity:.6;margin-top:4px}.comp-lib-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .12s;border:1px solid transparent;margin-bottom:2px}.comp-lib-card:hover{background:var(--designer-hover, #32323e);border-color:var(--designer-border, rgba(42, 42, 56, .5))}.comp-lib-card:active{background:oklch(70% .18 160 / .1)}.comp-lib-thumb{width:44px;height:44px;border-radius:8px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;gap:1px;overflow:hidden}.comp-lib-thumb-empty{width:44px;height:44px;border-radius:8px;background:#ffffff08;display:flex;align-items:center;justify-content:center;color:var(--text-muted, #8888a0);font-size:18px;opacity:.4;flex-shrink:0}.comp-lib-thumb-icon{font-size:16px}.comp-lib-thumb-type{font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40px}.comp-lib-thumb-children{display:flex;gap:1px;font-size:8px;color:var(--text-muted, #8888a0);opacity:.7}.comp-lib-thumb-child{font-size:7px}.comp-lib-thumb-more{font-size:7px;opacity:.5}.comp-lib-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.comp-lib-card-name{font-size:12px;font-weight:600;color:var(--text-primary, #f0f0f5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comp-lib-card-meta{font-size:10px;color:var(--text-muted, #8888a0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comp-lib-rename-input{font-size:12px;font-weight:600;color:var(--text-primary, #f0f0f5);background:#ffffff0f;border:1px solid oklch(70% .18 160 / .4);border-radius:4px;padding:2px 6px;outline:none;font-family:inherit;width:100%}.comp-lib-card-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s;flex-shrink:0}.comp-lib-card:hover .comp-lib-card-actions{opacity:1}.comp-lib-action-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:var(--text-muted, #8888a0);border-radius:4px;cursor:pointer;font-size:11px;transition:background .1s,color .1s}.comp-lib-action-btn:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.comp-lib-action-danger:hover{background:#ef444426;color:#f87171}.comp-lib-context-menu{position:fixed;z-index:var(--z-popover, 1500);background:var(--designer-panel-bg, #1e1e28);border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:8px;box-shadow:0 8px 24px #0006;padding:4px;min-width:180px}.comp-lib-context-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:transparent;color:var(--text-secondary, #a0a0b0);font-size:12px;font-family:inherit;cursor:pointer;border-radius:5px;text-align:left;transition:background .1s,color .1s}.comp-lib-context-menu button:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.comp-lib-context-menu button i{font-size:12px;width:14px;text-align:center}.comp-lib-context-sep{height:1px;background:var(--designer-border, rgba(42, 42, 56, .5));margin:3px 6px}.comp-lib-context-danger{color:#f87171!important}.comp-lib-context-danger:hover{background:#ef444426!important}@media (max-width: 768px){.comp-lib-panel{display:none}}.css-editor-wrapper{position:relative;margin-top:6px}.css-editor-textarea{width:100%;min-height:180px;background:#0d0d1a;color:#e4e4e7;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 14px;font-family:JetBrains Mono,Fira Code,Cascadia Code,Consolas,monospace;font-size:12px;line-height:1.6;resize:vertical;tab-size:2;white-space:pre;overflow-x:auto}.css-editor-textarea:focus{outline:none;border-color:#6366f180;box-shadow:0 0 0 3px #6366f11f}.css-editor-textarea::placeholder{color:#fff3;font-style:italic}.css-editor-scope-hint{font-size:11px;color:var(--text-muted, #888);margin-bottom:4px}.css-editor-scope-hint code{background:#6366f11f;color:#a5b4fc;padding:1px 6px;border-radius:4px;font-size:11px;font-family:JetBrains Mono,monospace}.css-editor-preview{margin-top:8px;background:#0a0a14;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:10px 14px;font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;line-height:1.6;color:#a0a0b8;white-space:pre-wrap;word-break:break-all;overflow-x:auto;max-height:200px;overflow-y:auto}.css-editor-preview .css-hl-selector{color:#fb923c}.css-editor-preview .css-hl-property{color:#c084fc}.css-editor-preview .css-hl-value{color:#4ade80}.css-editor-preview .css-hl-keyword{color:#60a5fa;font-weight:600}.css-editor-preview .css-hl-unit{color:#f472b6}.css-editor-preview .css-hl-comment{color:#555;font-style:italic}.css-classes-input{font-family:JetBrains Mono,monospace;font-size:12px;letter-spacing:.3px}.css-editor-hint{font-size:10px;color:var(--text-muted, #666);margin-top:4px;font-style:italic}.custom-attrs-section .custom-attr-row .prop-input{padding:5px 8px}.custom-attrs-section select.prop-input{cursor:pointer}.custom-attrs-section select.prop-input option{background:#1a1a2e;color:#f0f0f5}.custom-attrs-section select.prop-input optgroup{background:#1a1a2e;color:#a0a0b0;font-weight:600}.custom-attr-add-btn:hover{background:#6366f140!important;border-color:#6366f180!important}.style-search-wrap .style-search-input{transition:border-color .2s,box-shadow .2s}.style-search-wrap .style-search-input:focus{border-color:#6366f166!important;box-shadow:0 0 0 2px #6366f126;background:#ffffff0f!important}.ps-overlay{position:fixed;inset:0;z-index:var(--z-max, 9999);background:#000000a6;backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;animation:fadeIn .15s ease}.ps-modal{width:min(92vw,720px);max-height:85vh;background:#040609fa;border:1px solid oklch(25% .02 265);border-radius:16px;display:flex;flex-direction:column;box-shadow:0 24px 80px #00000080;animation:ctxAppear .2s ease}.ps-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid oklch(22% .015 265)}.ps-header-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-primary, #f5f5f5)}.ps-header-title i{font-size:18px;color:oklch(72% .18 265)}.ps-close{width:28px;height:28px;border-radius:8px;border:none;background:#14161b;color:var(--text-secondary, #a1a1aa);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.ps-close:hover{background:#2b2e33}.ps-tabs{display:flex;gap:2px;padding:8px 16px 0;border-bottom:1px solid oklch(22% .015 265)}.ps-tab{padding:8px 14px;border-radius:8px 8px 0 0;border:none;background:transparent;color:var(--text-secondary, #a1a1aa);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;transition:all .15s}.ps-tab:hover{background:#0f1216;color:var(--text-primary, #f5f5f5)}.ps-tab.active{background:#13161d;color:oklch(78% .18 265);border-bottom:2px solid oklch(65% .2 265);font-weight:600}.ps-tab i{font-size:14px}.ps-body{flex:1;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:oklch(30% .01 265) transparent}.ps-tab-content{padding:16px 20px;display:flex;flex-direction:column;gap:14px}.ps-section-title{font-size:13px;font-weight:700;color:oklch(78% .15 265);display:flex;align-items:center;gap:6px;margin-top:4px}.ps-section-title i{font-size:14px}.ps-divider{height:1px;background:#171b22;margin:4px 0}.ps-field{display:flex;flex-direction:column;gap:4px}.ps-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted, #a1a1aa);display:flex;align-items:center;gap:6px}.ps-input,.ps-textarea,.ps-select{padding:8px 12px;border-radius:8px;background:#010202;border:1px solid oklch(25% .02 265);color:var(--text-primary, #f5f5f5);font-size:12px;font-family:inherit;transition:border-color .15s}.ps-input:focus,.ps-textarea:focus,.ps-select:focus{outline:none;border-color:#3c68d9}.ps-input::placeholder,.ps-textarea::placeholder{color:var(--text-muted, #666)}.ps-textarea{resize:vertical;min-height:60px;line-height:1.5}.ps-code-textarea{font-family:JetBrains Mono,monospace;font-size:11px}.ps-select{cursor:pointer}.ps-hint{font-size:10px;color:var(--text-muted, #666);font-style:italic}.ps-char-count{font-size:10px;font-weight:400;margin-left:auto}.ps-char-green{color:#45ba50}.ps-char-yellow{color:oklch(75% .18 85)}.ps-char-red{color:#f94144}.ps-tag-container{display:flex;flex-direction:column;gap:6px}.ps-tag-pills{display:flex;flex-wrap:wrap;gap:4px;min-height:24px}.ps-tag-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;background:#3c68d926;color:oklch(78% .15 265);font-size:11px;font-weight:500}.ps-tag-remove{width:16px;height:16px;border-radius:50%;border:none;background:#2743874d;color:#89acfa;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.ps-tag-remove:hover{background:#c5363766;color:oklch(80% .15 25)}.ps-tag-input-row{display:flex;gap:6px}.ps-tag-input{flex:1}.ps-tag-add-btn{padding:6px 12px;border-radius:8px;border:none;background:#3c68d926;color:oklch(78% .15 265);font-size:11px;font-weight:500;cursor:pointer;font-family:inherit}.ps-tag-add-btn:hover{background:#3c68d940}.ps-tag-add-btn:disabled{opacity:.4;cursor:default}.ps-favicon-row{display:flex;align-items:center;gap:8px}.ps-favicon-row .ps-input{flex:1}.ps-favicon-preview{width:24px;height:24px;object-fit:contain;border-radius:4px}.ps-radio-group{display:flex;gap:6px;flex-wrap:wrap}.ps-radio-label{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;background:#090b0f;border:1px solid oklch(25% .02 265);color:var(--text-secondary, #a1a1aa);font-size:12px;cursor:pointer;transition:all .15s}.ps-radio-label input{display:none}.ps-radio-label i{font-size:14px}.ps-radio-label.active{background:#3c68d91f;border-color:#3c68d966;color:oklch(78% .15 265)}.ps-radio-label:hover{background:#14161b}.ps-checkbox-row{display:flex;gap:16px}.ps-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary, #a1a1aa);cursor:pointer}.ps-checkbox-label input[type=checkbox]{accent-color:oklch(65% .2 265)}.ps-toggle-row{padding:2px 0}.ps-toggle-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary, #a1a1aa);cursor:pointer}.ps-toggle-label input[type=checkbox]{accent-color:oklch(65% .2 265)}.ps-toggle-text{flex:1}.ps-og-preview{margin-top:4px}.ps-og-preview-label{font-size:10px;font-weight:600;color:var(--text-muted, #666);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}.ps-og-card{border-radius:10px;overflow:hidden;border:1px solid oklch(25% .02 265);background:#030304}.ps-og-image{height:140px;background-size:cover;background-position:center;background-color:#0f1216}.ps-og-content{padding:10px 12px}.ps-og-url{font-size:10px;color:var(--text-muted, #666);margin-bottom:2px;text-transform:uppercase}.ps-og-title{font-size:13px;font-weight:600;color:oklch(78% .12 265);margin-bottom:2px}.ps-og-desc{font-size:11px;color:var(--text-secondary, #a1a1aa);line-height:1.4}.ps-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:8px;color:var(--text-muted, #666)}.ps-empty i{font-size:32px;opacity:.3}.ps-empty span{font-size:12px;text-align:center}.ps-page-list{display:flex;flex-direction:column;gap:12px}.ps-page-item{border-radius:10px;border:1px solid oklch(22% .015 265);background:#08090c;overflow:hidden}.ps-page-item.dragging{opacity:.5}.ps-page-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#0b0d12;border-bottom:1px solid oklch(22% .015 265)}.ps-drag-handle{color:var(--text-muted, #666);cursor:grab;font-size:14px}.ps-page-name{font-size:13px;font-weight:600;color:var(--text-primary, #f5f5f5)}.ps-page-route{font-size:11px;color:var(--text-muted, #666);margin-left:auto}.ps-page-badge{font-size:9px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:oklch(55% .18 145 / .15);color:#45ba50}.ps-page-fields{padding:12px 14px;display:flex;flex-direction:column;gap:10px}@media (max-width: 768px){.ps-modal{width:96vw;max-height:90vh}.ps-tabs{overflow-x:auto;padding:6px 12px 0}.ps-tab{font-size:11px;padding:6px 10px;white-space:nowrap}.ps-tab-content{padding:12px 14px}.ps-og-image{height:100px}}.chart-svg{overflow:visible}.chart-svg text{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;pointer-events:none}.chart-svg .chart-bar rect{transition:opacity .2s ease}.chart-svg .chart-bar rect:hover{opacity:1!important;filter:brightness(1.15)}.chart-svg path[d]:hover,.chart-svg circle:hover{filter:brightness(1.1)}.chart-svg title{pointer-events:none}.chart-sparkline{vertical-align:middle}.am-overlay{position:fixed;inset:0;z-index:9999;background:#0009;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:am-fadeIn .15s ease}@keyframes am-fadeIn{0%{opacity:0}to{opacity:1}}.am-panel{width:min(820px,92vw);max-height:88vh;background:var(--bg-surface, #12121f);border:1px solid var(--designer-border, rgba(255,255,255,.08));border-radius:16px;display:flex;flex-direction:column;box-shadow:0 24px 80px #00000080;animation:am-slideUp .2s ease;overflow:hidden}@keyframes am-slideUp{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.am-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--designer-border, rgba(255,255,255,.08))}.am-title{margin:0;font-size:15px;font-weight:700;color:var(--text-primary, #e2e2f0);display:flex;align-items:center;gap:8px}.am-title i{color:var(--primary-9, #6366f1);font-size:16px}.am-close{background:none;border:none;color:var(--text-secondary, #888);cursor:pointer;padding:6px;border-radius:8px;font-size:14px;transition:all .15s}.am-close:hover{background:#ffffff14;color:#fff}.am-tabs{display:flex;gap:2px;padding:8px 16px 0;border-bottom:1px solid var(--designer-border, rgba(255,255,255,.08))}.am-tab{background:none;border:none;color:var(--text-secondary, #888);padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;display:flex;align-items:center;gap:6px;border-radius:8px 8px 0 0}.am-tab:hover{color:var(--text-primary, #e2e2f0);background:#ffffff08}.am-tab.active{color:var(--primary-9, #6366f1);border-bottom-color:var(--primary-9, #6366f1);background:#6366f10f}.am-tab i{font-size:14px}.am-body{flex:1;overflow-y:auto;padding:16px}.am-icon-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.am-search-wrap{position:relative;display:flex;align-items:center}.am-search-wrap>i{position:absolute;left:10px;color:var(--text-secondary, #888);font-size:13px;pointer-events:none}.am-search{width:100%;padding:8px 30px 8px 32px;background:var(--bg-elevated, #1a1a2e);border:1px solid var(--designer-border, rgba(255,255,255,.08));border-radius:8px;color:var(--text-primary, #e2e2f0);font-size:13px;outline:none;transition:border-color .15s}.am-search:focus{border-color:var(--primary-9, #6366f1)}.am-search-clear{position:absolute;right:8px;background:none;border:none;color:var(--text-secondary, #888);cursor:pointer;padding:2px;font-size:14px}.am-search-clear:hover{color:#fff}.am-icon-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.am-size-selector{display:flex;gap:2px}.am-size-btn{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--designer-border, rgba(255,255,255,.08));background:transparent;color:var(--text-secondary, #888);cursor:pointer;transition:all .15s}.am-size-btn:hover{border-color:var(--primary-9, #6366f1);color:var(--text-primary, #e2e2f0)}.am-size-btn.active{background:var(--primary-9, #6366f1);color:#fff;border-color:var(--primary-9, #6366f1)}.am-color-pick{display:flex;align-items:center;gap:6px}.am-color-pick input[type=color]{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0}.am-color-pick input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.am-color-pick input[type=color]::-webkit-color-swatch{border-radius:4px;border:1px solid rgba(255,255,255,.1)}.am-color-label{font-size:11px;color:var(--text-secondary, #888);font-family:monospace}.am-category-pills{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--designer-border, rgba(255,255,255,.06))}.am-pill{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--designer-border, rgba(255,255,255,.08));background:transparent;color:var(--text-secondary, #888);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px}.am-pill:hover{border-color:#ffffff26;color:var(--text-primary, #e2e2f0)}.am-pill.active{background:var(--primary-9, #6366f1);color:#fff;border-color:var(--primary-9, #6366f1)}.am-pill-count{font-size:10px;background:#ffffff1a;padding:1px 5px;border-radius:8px}.am-pill.active .am-pill-count{background:#fff3}.am-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:4px;max-height:400px;overflow-y:auto;padding-right:4px}.am-icon-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 6px;border-radius:8px;border:1px solid transparent;background:transparent;cursor:pointer;transition:all .15s;color:var(--text-secondary, #888)}.am-icon-cell:hover{background:#6366f11a;border-color:#6366f14d}.am-icon-cell:active{transform:scale(.95)}.am-icon-name{font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary, #888);opacity:.7}.am-icon-cell:hover .am-icon-name{opacity:1;color:var(--text-primary, #e2e2f0)}.am-empty{grid-column:1 / -1;text-align:center;padding:32px 16px;color:var(--text-secondary, #888);font-size:13px}.am-images-tab{display:flex;flex-direction:column;gap:20px}.am-img-section{display:flex;flex-direction:column;gap:8px}.am-label{font-size:12px;font-weight:600;color:var(--text-primary, #e2e2f0);text-transform:uppercase;letter-spacing:.5px}.am-img-url-row{display:flex;gap:8px}.am-input{flex:1;padding:8px 12px;background:var(--bg-elevated, #1a1a2e);border:1px solid var(--designer-border, rgba(255,255,255,.08));border-radius:8px;color:var(--text-primary, #e2e2f0);font-size:13px;outline:none;transition:border-color .15s}.am-input:focus{border-color:var(--primary-9, #6366f1)}.am-input-sm{flex:0 0 70px;text-align:center}.am-input-md{flex:0 0 130px}.am-btn-primary{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;background:var(--primary-9, #6366f1);color:#fff;border:none;cursor:pointer;transition:all .15s;white-space:nowrap}.am-btn-primary:hover{filter:brightness(1.15)}.am-btn-primary:disabled{opacity:.4;cursor:not-allowed}.am-x{color:var(--text-secondary, #888);font-size:13px;align-self:center}.am-img-preview{border-radius:8px;overflow:hidden;background:var(--bg-elevated, #1a1a2e);border:1px solid var(--designer-border, rgba(255,255,255,.08));max-height:200px}.am-img-preview img{width:100%;height:auto;display:block;object-fit:contain;max-height:200px}.am-placeholder-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.am-placeholder-row input[type=color]{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0}.am-placeholder-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.am-placeholder-row input[type=color]::-webkit-color-swatch{border-radius:4px;border:1px solid rgba(255,255,255,.1)}.am-placeholder-preview{border-radius:8px;overflow:hidden;max-height:120px;border:1px solid var(--designer-border, rgba(255,255,255,.08))}.am-placeholder-preview img{width:100%;height:auto;display:block;object-fit:contain;max-height:120px}.am-recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}.am-recent-card{aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid var(--designer-border, rgba(255,255,255,.08));background:var(--bg-elevated, #1a1a2e);transition:all .15s}.am-recent-card:hover{border-color:var(--primary-9, #6366f1);box-shadow:0 0 0 1px var(--primary-9, #6366f1);transform:scale(1.03)}.am-recent-card img{width:100%;height:100%;object-fit:cover;display:block}.am-gradients-tab{display:flex;flex-direction:column;gap:12px}.am-gradient-hint{padding:10px 14px;border-radius:8px;font-size:12px;background:#6366f114;color:var(--primary-9, #6366f1);display:flex;align-items:center;gap:8px;border:1px solid rgba(99,102,241,.15)}.am-gradient-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.am-gradient-card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;border:1px solid var(--designer-border, rgba(255,255,255,.08));transition:all .2s}.am-gradient-card:hover{border-color:#fff3;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.am-gradient-card.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.am-gradient-swatch{height:72px;width:100%}.am-gradient-name{display:block;text-align:center;padding:6px 4px;font-size:11px;font-weight:500;color:var(--text-primary, #e2e2f0);background:var(--bg-elevated, #1a1a2e)}.am-gradient-css{position:absolute;bottom:28px;left:0;right:0;padding:6px 8px;font-size:9px;font-family:monospace;background:#000000d9;color:#a5f3fc;text-align:center;line-height:1.3;word-break:break-all;animation:am-fadeIn .1s ease}.am-body::-webkit-scrollbar,.am-icon-grid::-webkit-scrollbar{width:6px}.am-body::-webkit-scrollbar-track,.am-icon-grid::-webkit-scrollbar-track{background:transparent}.am-body::-webkit-scrollbar-thumb,.am-icon-grid::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.am-body::-webkit-scrollbar-thumb:hover,.am-icon-grid::-webkit-scrollbar-thumb:hover{background:#fff3}.vh-panel{width:310px;flex-shrink:0;display:flex;flex-direction:column;background:var(--designer-panel-bg, #1e1e28);border-left:1px solid var(--designer-border, rgba(42, 42, 56, .5));overflow:hidden;animation:vhSlideIn .2s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));position:relative}@keyframes vhSlideIn{0%{width:0;opacity:0}to{width:310px;opacity:1}}.vh-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .5));flex-shrink:0}.vh-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary, #a0a0b0)}.vh-title i{font-size:14px;color:#507ef1}.vh-count{font-size:10px;background:#507ef133;color:#79a1fc;padding:1px 6px;border-radius:10px;font-weight:600}.vh-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--text-muted, #8888a0);border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.vh-close:hover{background:var(--designer-hover, #32323e);color:var(--text-primary, #f0f0f5)}.vh-save-section{padding:10px 14px;border-bottom:1px solid var(--designer-border, rgba(42, 42, 56, .5));flex-shrink:0}.vh-save-row{display:flex;gap:6px}.vh-save-input{flex:1;padding:6px 10px;background:#ffffff0a;border:1px solid var(--designer-border, rgba(42, 42, 56, .5));border-radius:6px;color:var(--text-primary, #f0f0f5);font-size:12px;font-family:inherit;outline:none;transition:border-color .15s}.vh-save-input:focus{border-color:#507ef199}.vh-save-input::placeholder{color:var(--text-muted, #8888a0);opacity:.6}.vh-save-hint{font-size:10px;color:var(--text-muted, #8888a0);opacity:.6;margin-top:6px}.vh-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:none;border-radius:6px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,color .15s,opacity .15s;white-space:nowrap}.vh-btn:disabled{opacity:.35;pointer-events:none}.vh-btn-save{background:#507ef1;color:#fff}.vh-btn-save:hover{background:#3665e4}.vh-list{flex:1;overflow-y:auto;padding:8px 0}.vh-list::-webkit-scrollbar{width:5px}.vh-list::-webkit-scrollbar-track{background:transparent}.vh-list::-webkit-scrollbar-thumb{background:#292e3880;border-radius:3px}.vh-list::-webkit-scrollbar-thumb:hover{background:#424853b3}.vh-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 14px;text-align:center;color:var(--text-muted, #8888a0)}.vh-empty p{font-size:13px;margin:0;font-weight:600;opacity:.7}.vh-empty span{font-size:11px;opacity:.5;line-height:1.4}.vh-entry{display:flex;gap:0;padding:0 14px 0 10px}.vh-timeline-col{display:flex;flex-direction:column;align-items:center;width:20px;flex-shrink:0;padding-top:12px}.vh-dot{width:10px;height:10px;border-radius:50%;background:#507ef1;border:2px solid oklch(62% .18 265 / .3);flex-shrink:0;z-index:1}.vh-dot-auto{width:8px;height:8px;background:var(--text-muted, #8888a0);border-color:#8888a04d}.vh-line{width:2px;flex:1;background:var(--designer-border, rgba(42, 42, 56, .5));min-height:8px}.vh-content{flex:1;min-width:0}.vh-entry-header{display:flex;align-items:center;width:100%;padding:8px;border:none;background:transparent;color:var(--text-secondary, #a0a0b0);font-size:12px;font-family:inherit;text-align:left;cursor:pointer;border-radius:6px;transition:background .1s;gap:6px}.vh-entry-header:hover{background:var(--designer-hover, #32323e)}.vh-entry.vh-expanded .vh-entry-header{background:#6366f10f}.vh-entry-info{flex:1;min-width:0}.vh-entry-label{display:flex;align-items:center;gap:4px;font-weight:600;color:var(--text-primary, #f0f0f5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.vh-autosave .vh-entry-label{font-style:italic;color:var(--text-muted, #8888a0);font-weight:500}.vh-autosave .vh-entry-label i{font-size:10px;opacity:.5}.vh-entry-meta{font-size:10px;color:var(--text-muted, #8888a0);opacity:.6;margin-top:2px;display:block}.vh-chevron{font-size:10px;color:var(--text-muted, #8888a0);flex-shrink:0;transition:transform .15s}.vh-entry-details{padding:6px 8px 10px}.vh-entry-actions{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}.vh-btn-action{background:#ffffff0a;color:var(--text-secondary, #a0a0b0);padding:4px 8px;font-size:10px;border-radius:5px}.vh-btn-action:hover{background:#ffffff14;color:var(--text-primary, #f0f0f5)}.vh-btn-action i{font-size:10px}.vh-btn-delete{color:#f14d4c}.vh-btn-delete:hover{background:#f14d4c1f;color:oklch(75% .18 25)}.vh-diff-badges{display:flex;gap:6px;flex-wrap:wrap}.vh-diff-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;font-family:SF Mono,Consolas,monospace}.vh-diff-added{background:#1c882d26;color:#54b85b}.vh-diff-removed{background:#cc272e26;color:#fa6863}.vh-diff-modified{background:oklch(65% .16 85 / .15);color:#e0af3b}.vh-diff-unchanged{background:#ffffff0a;color:var(--text-muted, #8888a0);font-weight:500}.vh-confirm-overlay{position:absolute;inset:0;background:#0a0a14d9;display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(4px);animation:vhFadeIn .15s ease}@keyframes vhFadeIn{0%{opacity:0}to{opacity:1}}.vh-confirm-dialog{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 20px;text-align:center}.vh-confirm-dialog p{font-size:14px;font-weight:700;color:var(--text-primary, #f0f0f5);margin:0}.vh-confirm-sub{font-size:11px;color:var(--text-muted, #8888a0);line-height:1.4;max-width:220px}.vh-confirm-actions{display:flex;gap:8px;margin-top:8px}.vh-btn-cancel{background:#ffffff0f;color:var(--text-secondary, #a0a0b0)}.vh-btn-cancel:hover{background:#ffffff1a;color:var(--text-primary, #f0f0f5)}.vh-btn-restore{background:#507ef1;color:#fff}.vh-btn-restore:hover{background:#3665e4}.vh-footer{padding:8px 14px;border-top:1px solid var(--designer-border, rgba(42, 42, 56, .5));font-size:10px;color:var(--text-muted, #8888a0);opacity:.5;flex-shrink:0}@media (max-width: 768px){.vh-panel{display:none}}.export-modal-overlay{position:fixed;inset:0;z-index:var(--z-max, 9999);background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease;padding:24px}.export-modal{background:#040609;border:1px solid oklch(22% .015 265);border-radius:20px;width:100%;max-width:960px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 80px #0009,0 0 0 1px #1f22274d;animation:fadeScale .2s var(--ease-out-expo, cubic-bezier(.19, 1, .22, 1));overflow:hidden}.export-modal-header{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid oklch(20% .01 265 / .6);flex-shrink:0}.export-modal-header h2{font-size:16px;font-weight:700;color:var(--text-primary, #f0f0f5);margin:0;display:flex;align-items:center;gap:8px}.export-modal-header h2 i{font-size:18px;color:#507ef1}.export-modal-subtitle{font-size:12px;color:var(--text-muted, #8888a0);margin-left:4px}.export-modal-close{margin-left:auto;background:none;border:none;color:var(--text-secondary, #a0a0b0);font-size:16px;cursor:pointer;padding:6px 8px;border-radius:8px;transition:all .15s}.export-modal-close:hover{background:#161b24;color:var(--text-primary, #f0f0f5)}.export-modal-body{display:flex;flex:1;min-height:0;overflow:hidden}.export-modal-formats{width:300px;flex-shrink:0;overflow-y:auto;padding:12px;border-right:1px solid oklch(20% .01 265 / .6);display:flex;flex-direction:column;gap:4px}.export-modal-formats-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted, #8888a0);padding:4px 10px 8px}.export-format-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid transparent;background:transparent;border-radius:10px;cursor:pointer;transition:all .15s;text-align:left;width:100%;color:var(--text-secondary, #a0a0b0)}.export-format-card:hover{background:#0f1216;color:var(--text-primary, #f0f0f5)}.export-format-card.active{background:#101622;border-color:#2b4ea7;color:var(--text-primary, #f0f0f5);box-shadow:0 0 0 1px #2b4ea74d}.export-format-card>i{font-size:18px;width:24px;text-align:center;flex-shrink:0}.export-format-card-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.export-format-card-label{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.export-format-card-desc{font-size:11px;color:var(--text-muted, #8888a0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.export-format-card.active .export-format-card-desc{color:var(--text-secondary, #a0a0b0)}.export-format-card-ext{font-size:10px;font-weight:500;color:var(--text-muted, #8888a0);background:#0f1216;padding:2px 6px;border-radius:4px;flex-shrink:0;font-family:SF Mono,Fira Code,JetBrains Mono,monospace}.export-format-card.active .export-format-card-ext{background:#242d42;color:#89acfa}.export-modal-preview{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.export-preview-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted, #8888a0);padding:40px}.export-preview-empty i{font-size:48px;opacity:.3}.export-preview-empty p{font-size:14px}.export-preview-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid oklch(20% .01 265 / .6);flex-shrink:0}.export-preview-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-primary, #f0f0f5)}.export-preview-title i{font-size:16px}.export-preview-actions{display:flex;gap:8px}.export-preview-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1px solid oklch(25% .015 265);background:#0b0d12;color:var(--text-secondary, #a0a0b0);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.export-preview-btn:hover{background:#161b24;color:var(--text-primary, #f0f0f5);border-color:#353b45}.export-preview-btn-primary{background:#2f58c8;border-color:#3c68d9;color:#fff}.export-preview-btn-primary:hover{background:#3665e4;border-color:#4475f6;color:#fff}.export-preview-code-wrapper{flex:1;min-height:0;overflow:hidden;position:relative}.export-preview-loading{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;color:var(--text-muted, #8888a0);font-size:14px}.export-preview-loading i{font-size:18px}.export-preview-code{width:100%;height:100%;padding:16px;background:#010203;border:none;outline:none;color:#a1c6c8;font-family:SF Mono,Fira Code,JetBrains Mono,Cascadia Code,Consolas,monospace;font-size:12px;line-height:1.6;tab-size:2;resize:none;white-space:pre;overflow:auto;scrollbar-width:thin;scrollbar-color:oklch(25% .01 265) transparent}.export-preview-code::-webkit-scrollbar{width:8px;height:8px}.export-preview-code::-webkit-scrollbar-track{background:transparent}.export-preview-code::-webkit-scrollbar-thumb{background:#1f2227;border-radius:4px}.export-preview-code::-webkit-scrollbar-thumb:hover{background:#2a2e36}@media (max-width: 768px){.export-modal-overlay{padding:8px}.export-modal{max-height:95vh;border-radius:16px}.export-modal-body{flex-direction:column}.export-modal-formats{width:100%;max-height:200px;border-right:none;border-bottom:1px solid oklch(20% .01 265 / .6);flex-direction:row;flex-wrap:wrap;gap:6px;padding:8px;overflow-x:auto}.export-modal-formats-label{display:none}.export-format-card{flex:0 0 auto;padding:8px 10px}.export-format-card-desc,.export-format-card-ext{display:none}.export-preview-code{font-size:11px}}.alignment-guides-overlay{position:fixed;inset:0;pointer-events:none;z-index:var(--z-max);overflow:hidden}.rd-account{position:relative;flex:0 0 auto}.rd-account-menu{position:fixed;top:56px;left:12px;z-index:10050;min-width:220px;max-width:min(320px,calc(100vw - 24px));padding:6px;border-radius:10px;background:var(--bg-surface, #14141f);color:var(--text-primary, #f0f0f5);border:1px solid var(--border-default, rgba(255,255,255,.1));box-shadow:0 12px 32px #00000073}.rd-account-who{padding:8px 10px;font-size:12px;color:var(--text-muted, #9ca3af);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--border-default, rgba(255,255,255,.08));margin-bottom:4px}.rd-account-item{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;text-decoration:none;cursor:pointer}.rd-account-item:hover,.rd-account-item:focus-visible{background:var(--bg-hover, rgba(255,255,255,.06));outline:none}.rd-account-menu .rd-account-item{min-height:44px!important;height:auto!important}