.editor-theme{--font-editor:"Sora Variable", "Sora", sans-serif;font-family:var(--font-editor);--bg-void:hsl(var(--background));--bg-deep:hsl(var(--input));--bg-panel:hsl(var(--card));--bg-surface:hsl(var(--muted));--bg-hover:hsl(var(--accent));--ed-border:hsl(var(--border));--text-primary:hsl(var(--foreground));--text-secondary:hsl(var(--muted-foreground));--text-muted:hsl(var(--dim));--gold:hsl(var(--primary));--gold-dim:hsl(var(--primary) / .12);--gold-mid:hsl(var(--primary) / .25);--gold-text:hsl(var(--primary));--warn:hsl(var(--destructive));--warn-dim:hsl(var(--destructive) / .12)}.editor-layout{flex-direction:column;height:100vh;display:flex;overflow:hidden}.topbar{background:var(--bg-panel);border-bottom:1px solid var(--ed-border);flex-shrink:0;align-items:center;gap:2px;height:44px;padding:0 12px;display:flex}.editor-body{flex:1;display:flex;overflow:hidden}.left-sidebar,.insert-panel,.cms-panel{background:var(--bg-panel);border-right:1px solid var(--ed-border);flex-direction:column;flex-shrink:0;width:230px;display:flex;overflow:hidden}.canvas-area{background:var(--bg-void);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.right-panel{background:var(--bg-panel);border-left:1px solid var(--ed-border);flex-shrink:0;width:270px;overflow-y:auto}.logo{background:var(--gold);width:28px;height:28px;color:var(--bg-panel);border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;margin-right:12px;font-size:13px;font-weight:500;display:flex}.nav-btn{cursor:pointer;color:var(--text-secondary);font-size:12px;font-family:var(--font-editor);background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:5px 12px;transition:all .15s;display:flex}.nav-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-btn.active{background:var(--bg-deep);color:var(--gold);border:1px solid var(--ed-border)}.spacer{flex:1}.top-right{align-items:center;gap:6px;display:flex}.pub-btn{background:var(--gold);color:#fff;font-family:var(--font-editor);cursor:pointer;border:none;border-radius:7px;padding:6px 18px;font-size:12px;font-weight:500;transition:all .15s}.dark .pub-btn{color:var(--bg-deep)}.pub-btn:hover{filter:brightness(1.1)}.panel-header{border-bottom:1px solid var(--ed-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.panel-header h3{color:var(--text-primary);margin:0;font-size:12px;font-weight:500}.panel-close{width:22px;height:22px;color:var(--text-muted);cursor:pointer;font-size:14px;font-family:var(--font-editor);background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;transition:all .15s;display:flex}.panel-close:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-placeholder{color:var(--text-muted);flex:1;justify-content:center;align-items:center;font-size:12px;display:flex}.sb-tabs{border-bottom:1px solid var(--ed-border);flex-shrink:0;display:flex}.sb-tab{text-align:center;cursor:pointer;color:var(--text-muted);font-size:11px;font-weight:500;font-family:var(--font-editor);background:0 0;border:none;flex:1;padding:10px 0;transition:all .15s;position:relative}.sb-tab:hover{color:var(--text-secondary)}.sb-tab.active{color:var(--gold);background:var(--bg-deep)}.sb-tab.active:after{content:"";background:var(--gold);border-radius:1px;height:2px;position:absolute;bottom:0;left:20%;right:20%}.sb-body{flex:1;padding:8px;overflow-y:auto}.sb-section-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);justify-content:space-between;align-items:center;padding:8px 8px 4px;font-size:10px;font-weight:500;display:flex}.sb-section-label button{cursor:pointer;color:var(--text-muted);font-size:14px;font-family:var(--font-editor);background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;width:20px;height:20px;transition:all .15s;display:flex}.sb-section-label button:hover{background:var(--bg-hover);color:var(--text-primary)}.tree-item{cursor:pointer;color:var(--text-secondary);font-size:12px;font-family:var(--font-editor);text-align:left;background:0 0;border:none;border-radius:5px;align-items:center;gap:6px;width:100%;margin-bottom:1px;padding:5px 8px;transition:all .12s;display:flex}.tree-item:hover{background:var(--bg-hover);color:var(--text-primary)}.tree-item.selected{background:var(--gold-dim);color:var(--gold-text);border-left:2px solid var(--gold);border-radius:0 5px 5px 0}.sb-empty{color:var(--text-muted);text-align:center;padding:24px 16px;font-size:11px;line-height:1.5}.insert-header{border-bottom:1px solid var(--ed-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.insert-header-title{color:var(--text-primary);font-size:13px;font-weight:500}.insert-close{width:22px;height:22px;color:var(--text-muted);cursor:pointer;font-size:14px;font-family:var(--font-editor);background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;transition:all .15s;display:flex}.insert-close:hover{background:var(--bg-hover);color:var(--text-primary)}.insert-tabs{border-bottom:1px solid var(--ed-border);flex-shrink:0;display:flex}.insert-tab{text-align:center;cursor:pointer;color:var(--text-muted);font-size:11px;font-weight:500;font-family:var(--font-editor);background:0 0;border:none;flex:1;padding:9px 0;transition:all .15s;position:relative}.insert-tab:hover{color:var(--text-secondary)}.insert-tab.active{color:var(--gold);background:var(--bg-deep)}.insert-tab.active:after{content:"";background:var(--gold);border-radius:1px;height:2px;position:absolute;bottom:0;left:20%;right:20%}.insert-search{border-bottom:1px solid var(--ed-border);flex-shrink:0;padding:8px 10px}.insert-search input{border:1px solid var(--ed-border);background:var(--bg-deep);width:100%;color:var(--text-primary);font-size:11px;font-family:var(--font-editor);border-radius:6px;outline:none;padding:6px 10px;transition:border-color .15s}.insert-search input:focus{border-color:var(--gold)}.insert-search input::placeholder{color:var(--text-muted)}.insert-body{flex:1;padding:8px;overflow-y:auto}.insert-category{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);padding:10px 6px 5px;font-size:9px;font-weight:500}.insert-item{cursor:pointer;width:100%;font-family:var(--font-editor);text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;margin-bottom:2px;padding:8px;transition:all .12s;display:flex}.insert-item:hover{background:var(--bg-hover)}.insert-item-stubbed{opacity:.6}.insert-item-icon{background:var(--bg-surface);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.insert-item-icon svg{width:16px;height:16px;color:var(--text-muted)}.insert-item-name{color:var(--text-primary);font-size:12px;font-weight:500}.insert-item-desc{color:var(--text-muted);margin-top:1px;font-size:10px}.insert-item-back{cursor:pointer;justify-content:center;min-height:auto;padding:4px 8px}.insert-preset-grid{grid-template-columns:1fr 1fr;gap:6px;padding:4px 8px 8px;display:grid}.insert-preset-card{border:1px solid var(--ed-border);background:var(--bg-panel);cursor:pointer;text-align:center;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:10px 6px;transition:all .15s;display:flex}.insert-preset-card:hover{border-color:var(--gold);background:var(--bg-hover)}.insert-preset-card-name{color:var(--text-primary);font-size:11px;font-weight:600}.insert-preset-card-desc{color:var(--text-muted);font-size:9px;line-height:1.3}.section-card{border:1px solid var(--ed-border);cursor:pointer;width:100%;font-family:var(--font-editor);text-align:left;background:0 0;border-radius:8px;margin-bottom:8px;padding:0;transition:all .15s;display:block;overflow:hidden}.section-card:hover{border-color:var(--gold)}.section-thumb{background:var(--bg-surface);justify-content:center;align-items:center;height:64px;display:flex}.section-thumb svg{color:var(--text-muted)}.section-label{color:var(--text-primary);padding:8px 10px;font-size:11px;font-weight:500}.section-label span{color:var(--text-muted);margin-top:1px;font-size:10px;font-weight:400;display:block}.template-card{border:1px solid var(--ed-border);cursor:pointer;width:100%;font-family:var(--font-editor);text-align:left;background:0 0;border-radius:8px;margin-bottom:8px;padding:0;transition:all .15s;display:block;overflow:hidden}.template-card:hover{border-color:var(--gold)}.template-thumb{background:var(--bg-deep);justify-content:center;align-items:center;height:90px;display:flex}.template-thumb svg{color:var(--text-muted)}.template-label{color:var(--text-primary);padding:8px 10px;font-size:11px;font-weight:500}.template-label span{color:var(--text-muted);margin-top:1px;font-size:10px;font-weight:400;display:block}.insert-empty{color:var(--text-muted);text-align:center;padding:24px 16px;font-size:11px}.canvas-toolbar{background:var(--bg-panel);border-bottom:1px solid var(--ed-border);flex-shrink:0;justify-content:space-between;align-items:center;height:38px;padding:0 12px;display:flex}.mode-pill{background:var(--bg-deep);border-radius:6px;gap:2px;padding:2px;display:flex}.mode-pill button{color:var(--text-muted);cursor:pointer;font-size:11px;font-weight:500;font-family:var(--font-editor);background:0 0;border:1px solid #0000;border-radius:5px;padding:4px 12px;transition:all .15s}.mode-pill button:hover{color:var(--text-secondary)}.mode-pill button.active{background:var(--bg-panel);color:var(--gold);border:1px solid var(--ed-border)}.zoom-controls{background:var(--bg-surface);border-radius:5px;align-items:center;gap:2px;padding:1px;display:flex}.zoom-btn{width:24px;height:24px;color:var(--text-muted);cursor:pointer;font-family:var(--font-editor);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:13px;transition:all .12s;display:flex}.zoom-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.zoom-badge{color:var(--text-muted);font-size:10px;font-weight:500;font-family:var(--font-editor);cursor:pointer;text-align:center;background:0 0;border:none;border-radius:4px;min-width:36px;padding:3px 6px;transition:all .12s}.zoom-badge:hover{background:var(--bg-hover);color:var(--text-primary)}.canvas-body{background:var(--bg-void);flex:1;position:relative;overflow:auto}.canvas-frame{background:#fff;border-radius:8px;width:100%;margin:28px auto;transition:max-width .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.canvas-empty{height:100%;color:var(--text-muted);justify-content:center;align-items:center;font-size:12px;display:flex}.canvas-empty-sections{color:#9b9589;flex-direction:column;justify-content:center;align-items:center;gap:6px;height:16rem;display:flex}.canvas-empty-sections p{font-size:13px;font-weight:500}.canvas-empty-sections span{font-size:11px}.infinite-canvas{background:var(--bg-void);cursor:default;touch-action:none;flex:1;position:relative;overflow:hidden}.canvas-content{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.vp-wrapper{position:absolute;top:0}.vp-header{justify-content:space-between;align-items:center;padding:0 0 8px;display:flex;position:absolute;top:-28px;left:0;right:0}.vp-header-label{color:var(--text-muted);font-size:11px;font-weight:500;font-family:var(--font-editor);align-items:center;gap:6px;display:flex}.vp-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.vp-header-width{color:var(--text-muted);background:var(--bg-surface);font-size:10px;font-family:var(--font-editor);border-radius:4px;padding:2px 8px}.vp-frame{background:#fff;border:2px solid #0000;border-radius:8px;transition:border-color .2s;position:relative;overflow:hidden}.vp-frame--active{border-color:var(--gold)}.vp-sel-overlay{pointer-events:none;border:2px solid var(--gold);z-index:50;border-radius:4px;transition:all 80ms;position:absolute}.vp-sel-overlay--dim{border-color:var(--gold);opacity:.4}@keyframes vp-ai-pulse{0%,to{opacity:1;outline-color:hsl(var(--primary) / .9)}50%{opacity:.55;outline-color:hsl(var(--primary) / .3)}}.vp-ai-hl{pointer-events:none;border:2px solid hsl(var(--primary) / .8);outline:3px solid hsl(var(--primary) / .35);outline-offset:1px;z-index:49;background:hsl(var(--primary) / .05);border-radius:4px;animation:1.8s ease-in-out infinite vp-ai-pulse;position:absolute}.vp-ai-hl--focused{pointer-events:none;border:2px solid hsl(var(--primary));outline:4px solid hsl(var(--primary) / .5);outline-offset:2px;z-index:50;background:hsl(var(--primary) / .08);border-radius:4px;position:absolute}.zoom-btn--fit{width:auto;padding:0 8px;font-size:10px;font-weight:500}.canvas-minimap{background:var(--bg-panel);border-top:1px solid var(--ed-border);flex-shrink:0;align-items:center;gap:10px;height:40px;padding:0 16px;display:flex}.minimap-label{color:var(--text-muted);font-size:10px;font-family:var(--font-editor);font-weight:500}.minimap-frame{border:1px solid var(--ed-border);background:var(--bg-surface);cursor:pointer;border-radius:4px;flex-direction:column;height:28px;padding:3px;transition:border-color .15s;display:flex;overflow:hidden}.minimap-frame:hover,.minimap-frame--active{border-color:var(--gold)}.minimap-blocks{flex-direction:column;flex:1;gap:2px;display:flex}.minimap-block{background:var(--bg-hover);border-radius:2px;flex-shrink:0}.selection-overlay{pointer-events:none;border:2px solid var(--gold);z-index:50;border-radius:4px;transition:all 80ms;position:absolute}.sel-bar{z-index:51;pointer-events:auto;background:var(--bg-deep);border:1px solid var(--ed-border);white-space:nowrap;font-size:10px;font-family:var(--font-editor);border-radius:6px;align-items:center;gap:4px;padding:3px 8px;display:flex;position:absolute}.sel-bar-sep{color:var(--text-muted);font-size:8px}.sel-bar-crumb{color:var(--text-muted);cursor:pointer;transition:color .1s}.sel-bar-crumb:hover{color:var(--text-secondary)}.sel-bar-crumb--active{color:var(--gold);cursor:default;font-weight:500}.sel-bar-divider{background:var(--ed-border);flex-shrink:0;width:1px;height:12px;margin:0 2px}.sel-bar-badge{color:var(--gold);background:var(--gold-dim);border-radius:3px;align-items:center;gap:2px;padding:1px 5px;font-size:9px;font-weight:500;display:inline-flex}.sel-bar-badge--lock{color:var(--gold);background:var(--gold-dim)}.sel-bar-badge--var{color:var(--gold-text);background:var(--gold-dim)}.sel-bar-badge--comp{color:var(--gold-text);background:var(--gold-dim);cursor:pointer;font-family:var(--font-editor);border:none;font-size:9px;font-weight:500;transition:background .12s}.sel-bar-badge--comp:hover{background:var(--gold-mid)}.sel-bar-badge--anim{color:var(--gold);background:0 0;padding:1px 2px}.sel-bar-badge--parent{color:var(--text-muted);cursor:pointer;font-family:var(--font-editor);background:0 0;border:none;padding:1px 3px;font-size:9px;transition:color .12s}.sel-bar-badge--parent:hover{color:var(--gold)}.sel-icon{flex-shrink:0;width:9px;height:9px}.sel-bar-badge--form{color:#2dd4bf;background:#2dd4bf1a;gap:3px;padding:1px 5px}.sel-bar-badge--form-required{color:#f59e0b;background:#f59e0b1a;gap:3px;padding:1px 5px}.sel-bar-badge--form-validated{color:#22c55e;background:#22c55e1a;gap:3px;padding:1px 5px}.sel-badge-text{font-size:9px;line-height:1}.ai-bar{background:var(--bg-panel);border:1px solid var(--ed-border);z-index:50;border-radius:12px;align-items:center;gap:10px;width:380px;padding:8px 14px;transition:border-color .2s;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.ai-bar:hover,.ai-bar:focus-within{border-color:var(--gold)}.ai-spark{background:var(--gold-dim);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:flex}.ai-spark-icon{width:10px;height:10px;color:var(--gold)}.ai-bar input{color:var(--text-primary);font-family:var(--font-editor);background:0 0;border:none;outline:none;flex:1;font-size:12px}.ai-bar input::placeholder{color:var(--text-muted)}.ai-bar input:disabled{opacity:.5}.ai-shortcut{color:var(--text-muted);background:var(--bg-surface);border-radius:4px;flex-shrink:0;padding:2px 8px;font-size:10px}.ai-bar-send{cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:0;transition:color .12s;display:flex}.ai-bar-send:hover{color:var(--gold)}.ai-bar-action{width:14px;height:14px;color:var(--text-muted);flex-shrink:0}.ai-bar-action--spin{color:var(--gold);animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.ai-response{background:var(--bg-panel);border:1px solid var(--ed-border);z-index:50;border-radius:10px;flex-direction:column;width:380px;max-height:200px;animation:.2s ease-out ai-slide-up;display:flex;position:absolute;bottom:56px;left:50%;overflow:hidden;transform:translate(-50%)}@keyframes ai-slide-up{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.ai-response-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:4px;padding:2px;transition:color .12s;position:absolute;top:6px;right:6px}.ai-response-close:hover{color:var(--text-primary)}.ai-response-icon{width:12px;height:12px}.ai-response-text{color:var(--text-secondary);font-size:12px;line-height:1.6;font-family:var(--font-editor);padding:12px 14px;overflow-y:auto}.ai-response-text p{margin:0 0 6px}.ai-response-text p:last-child{margin-bottom:0}.ai-response-text strong{color:var(--text-primary);font-weight:600}.ai-response-text em{font-style:italic}.ai-response-text code{background:var(--bg-surface);color:var(--gold-text);border-radius:3px;padding:1px 4px;font-size:11px}.ai-response-text ul,.ai-response-text ol{margin:4px 0;padding-left:16px}.ai-response-text li{margin-bottom:2px}.ai-response-text h1,.ai-response-text h2,.ai-response-text h3{color:var(--text-primary);margin:8px 0 4px;font-size:12px;font-weight:600}.ai-response-text hr{border:none;border-top:1px solid var(--ed-border);margin:8px 0}.ai-cursor{background:var(--gold);vertical-align:text-bottom;width:2px;height:13px;margin-left:2px;animation:.8s step-end infinite ai-blink;display:inline-block}@keyframes ai-blink{50%{opacity:0}}.comp-canvas{background:var(--bg-void);flex-direction:column;height:100%;display:flex}.comp-header{border-bottom:1px solid var(--ed-border);background:var(--bg-panel);flex-shrink:0;align-items:center;gap:8px;padding:8px 14px;display:flex}.comp-back{width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:all .12s;display:flex}.comp-back:hover{background:var(--bg-hover);color:var(--text-primary)}.comp-back-icon{width:14px;height:14px}.comp-breadcrumb{align-items:center;gap:4px;font-size:11px;display:flex}.comp-crumb-dim{color:var(--text-muted)}.comp-crumb-sep{width:12px;height:12px;color:var(--text-muted)}.comp-crumb-active{color:var(--text-primary);align-items:center;gap:5px;font-weight:500;display:flex}.comp-icon{background:var(--gold);border-radius:4px;justify-content:center;align-items:center;width:16px;height:16px;display:flex}.comp-icon-svg{width:10px;height:10px;color:var(--bg-deep)}.comp-instance-badge{background:var(--gold-dim);border:1px solid var(--gold-mid);color:var(--gold);border-radius:12px;align-items:center;gap:5px;padding:3px 10px;font-size:10px;font-weight:500;display:flex}.comp-instance-dot{background:var(--gold);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.comp-state-strip{background:var(--gold);flex-shrink:0;height:2px}.comp-canvas-body{background:var(--bg-void);flex:1;position:relative;overflow:auto}.comp-artboard-wrap{justify-content:center;align-items:center;min-height:100%;padding:48px;display:flex}.comp-artboard{border:1px solid var(--ed-border);border-radius:10px;min-width:320px;max-width:600px;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #0006}.comp-tab-bar{border-bottom:1px solid var(--ed-border);background:var(--bg-void);gap:2px;padding:4px 14px;display:flex}.comp-tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 12px;font-size:11px;font-weight:500;transition:all 80ms}.comp-tab:hover{color:var(--text-main);background:var(--bg-subtle)}.comp-tab--active{color:var(--gold);background:color-mix(in srgb, var(--gold) 12%, transparent)}.comp-footer{border-top:1px solid var(--ed-border);background:var(--bg-panel);flex-shrink:0;align-items:center;gap:4px;padding:6px 14px;font-size:10px;display:flex}.comp-footer-sep{color:var(--text-muted);margin:0 2px}.comp-footer-crumb{font-family:var(--font-editor);color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:10px;transition:color .1s}.comp-footer-crumb:hover{color:var(--text-secondary)}.comp-footer-crumb--active{color:var(--text-primary);font-weight:500}.comp-footer-hint{color:var(--text-muted)}.comp-footer-state{color:var(--text-muted);font-family:monospace;font-size:10px}.lib-var-row:hover .lib-delete-btn{opacity:1}