*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #0d0d12;--bg-panel: #14141c;--bg-input: #1a1a24;--bg-hover: #22222e;--bg-selected: #2a2a3a;--border: #2a2a36;--text: #e0e0e8;--text-dim: #888898;--text-bright: #ffffff;--accent: #cd412b;--accent-hover: #e04d37;--accent-dim: rgba(205, 65, 43, .3);--green: #3a8a4a;--blue: #3a6a9a;--yellow: #c8a030}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--text);background:var(--bg-dark)}.app{display:flex;flex-direction:column;height:100vh;width:100vw}.toolbar{display:flex;align-items:center;justify-content:space-between;height:44px;min-height:44px;padding:0 12px;background:var(--bg-panel);border-bottom:1px solid var(--border);gap:6px}.toolbar-left,.toolbar-center,.toolbar-right{display:flex;align-items:center;gap:6px}.toolbar-brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--text-bright);margin-right:8px;white-space:nowrap}.brand-icon{color:var(--accent);font-size:18px}.toolbar-filename{color:var(--text-dim);font-size:11px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-select{background:var(--bg-input);border:1px solid var(--border);color:var(--text);padding:3px 6px;border-radius:4px;font-size:11px}.toolbar-res{min-width:130px}.toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 2px;flex-shrink:0}.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .15s}.btn:hover{background:var(--bg-hover);border-color:#3a3a4a}.btn:disabled{opacity:.4;cursor:default}.btn:disabled:hover{background:var(--bg-input)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn-primary:hover{background:var(--accent-hover)}.btn-sm{padding:3px 8px;font-size:11px}.btn-icon{width:28px;padding:3px;justify-content:center;font-size:14px}.btn-tool{border-color:transparent;background:transparent;gap:3px}.btn-tool:hover{background:var(--bg-hover)}.btn-tool-active{background:var(--accent-dim)!important;border-color:var(--accent)!important;color:var(--accent)}.tool-icon{display:inline-block;width:14px;text-align:center;font-weight:700;color:var(--text-dim);font-size:12px}.btn-tool-active .tool-icon{color:var(--accent)}.tool-label{font-size:11px}.btn-active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.btn-export{background:var(--green);border-color:var(--green);color:#fff;font-size:10px;padding:3px 6px}.btn-export:hover{opacity:.9}.error-bar{display:flex;align-items:center;gap:12px;padding:6px 16px;background:#cd412b26;border-bottom:1px solid var(--accent);color:#ff8a7a;font-size:12px}.info-bar{background:#3a8a4a26;border-bottom-color:var(--green);color:#8fd4a0}.error-close{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px;margin-left:auto}.main-area{display:flex;flex:1;min-height:0;overflow:hidden}.element-tree{width:230px;min-width:230px;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column}.panel-header{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);border-bottom:1px solid var(--border);background:var(--bg-dark);display:flex;align-items:center;justify-content:space-between}.panel-header-count{background:var(--bg-input);padding:1px 6px;border-radius:8px;font-size:10px;color:var(--text-dim)}.tree-list{flex:1;overflow-y:auto;padding:4px 0}.tree-empty{padding:20px 12px;color:var(--text-dim);font-size:12px;text-align:center;line-height:1.6}.tree-item{display:flex;align-items:center;gap:4px;padding:3px 8px;cursor:pointer;font-size:12px;border-left:2px solid transparent;min-height:26px;transition:background .1s}.tree-item:hover{background:var(--bg-hover)}.tree-item.selected{background:var(--bg-selected);border-left-color:var(--accent)}.tree-item.drag-over{background:var(--accent-dim);border-left-color:var(--yellow)}.tree-collapse{width:14px;text-align:center;font-size:10px;cursor:pointer;color:var(--text-dim);flex-shrink:0;-webkit-user-select:none;user-select:none}.tree-collapse:hover{color:var(--text)}.tree-collapse-spacer{width:14px;flex-shrink:0}.tree-type-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border-radius:2px;flex-shrink:0}.type-panel{color:#6aa;background:#64aaaa26}.type-label{color:#aaa;background:#aaaaaa26}.type-button{color:#a8d;background:#aa88dd26}.type-image,.type-rawimage{color:#da8;background:#ddaa8826}.type-inputfield{color:#8ad;background:#88aadd26}.type-itemicon{color:#ad8;background:#aadd8826}.tree-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.tree-actions{display:flex;gap:1px;margin-left:auto;flex-shrink:0}.tree-action-btn{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:none;background:var(--bg-input);color:var(--text-dim);border-radius:2px;cursor:pointer;font-size:11px}.tree-action-btn:hover{background:var(--bg-hover);color:var(--text)}.tree-action-delete:hover{color:var(--accent)}.preview-container{flex:1;display:flex;align-items:center;justify-content:center;background:#08080c;overflow:hidden;padding:16px}.preview-screen{position:relative;background:linear-gradient(180deg,#1a1e2e,#0e1018);box-shadow:0 0 40px #00000080,inset 0 0 100px #0000004d;border:1px solid #222;overflow:hidden}.preview-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:10% 10%;pointer-events:none;z-index:0}.preview-crosshair-h,.preview-crosshair-v{position:absolute;pointer-events:none;z-index:0}.preview-crosshair-h{left:48%;right:48%;top:50%;height:1px;background:#ffffff14}.preview-crosshair-v{top:48%;bottom:48%;left:50%;width:1px;background:#ffffff14}.preview-resolution{position:absolute;bottom:4px;right:8px;font-size:10px;color:#ffffff26;pointer-events:none;z-index:999}.preview-element{z-index:1;transition:box-shadow .1s}.preview-element.selected{outline:2px solid var(--accent);outline-offset:-1px;z-index:100}.preview-element:hover:not(.selected){outline:1px solid rgba(205,65,43,.4);outline-offset:-1px}.preview-ghost{background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,180,50,.06) 4px,rgba(255,180,50,.06) 8px)!important}.ghost-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffb43280;font-family:monospace;font-size:9px;white-space:nowrap;pointer-events:none;text-overflow:ellipsis;overflow:hidden;max-width:90%}.resize-handle{position:absolute;width:8px;height:8px;background:var(--accent);border:1px solid white;border-radius:1px;z-index:200}.resize-handle.nw{top:-4px;left:-4px;cursor:nw-resize}.resize-handle.ne{top:-4px;right:-4px;cursor:ne-resize}.resize-handle.sw{bottom:-4px;left:-4px;cursor:sw-resize}.resize-handle.se{bottom:-4px;right:-4px;cursor:se-resize}.resize-handle.n{top:-4px;left:50%;transform:translate(-50%);cursor:n-resize}.resize-handle.s{bottom:-4px;left:50%;transform:translate(-50%);cursor:s-resize}.resize-handle.e{right:-4px;top:50%;transform:translateY(-50%);cursor:e-resize}.resize-handle.w{left:-4px;top:50%;transform:translateY(-50%);cursor:w-resize}.property-panel{width:280px;min-width:280px;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.prop-empty{padding:20px 12px;color:var(--text-dim);font-size:12px;text-align:center;line-height:1.5}.prop-shortcuts{margin-top:16px;text-align:left;padding:12px;background:var(--bg-dark);border-radius:6px}.shortcut-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:8px}.shortcut-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:11px;color:var(--text-dim)}.shortcut-row kbd{background:var(--bg-input);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;font-family:monospace;color:var(--text);min-width:50px;text-align:center}.prop-section{padding:8px 12px;border-bottom:1px solid var(--border)}.prop-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:6px}.prop-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.prop-label{width:70px;min-width:70px;font-size:11px;color:var(--text-dim);white-space:nowrap}.prop-input{flex:1;min-width:0;padding:3px 6px;background:var(--bg-input);border:1px solid var(--border);border-radius:3px;color:var(--text);font-size:11px;font-family:JetBrains Mono,Fira Code,monospace}.prop-input:focus{outline:none;border-color:var(--accent)}select.prop-input{cursor:pointer;font-size:10px}.prop-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:4px}.prop-grid-2 .prop-row{margin-bottom:0}.prop-grid-2 .prop-label{width:40px;min-width:40px}.prop-color-row{flex-wrap:wrap}.prop-color-group{display:flex;align-items:center;gap:4px;flex:1}.prop-color-picker{width:28px;height:22px;padding:0;border:1px solid var(--border);border-radius:3px;cursor:pointer;background:none}.prop-color-picker::-webkit-color-swatch-wrapper{padding:2px}.prop-color-picker::-webkit-color-swatch{border:none;border-radius:2px}.prop-alpha{width:48px!important;flex:0 0 48px!important}.prop-hint{font-size:10px;color:var(--text-dim)}.prop-code-preview{background:var(--bg-dark);border-radius:4px;padding:8px;font-family:JetBrains Mono,Fira Code,monospace;font-size:10px;line-height:1.6;color:var(--text-dim)}.code-key{color:var(--blue)}.anchor-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.anchor-preset-btn{position:relative;width:100%;aspect-ratio:16 / 9;background:var(--bg-dark);border:1px solid var(--border);border-radius:3px;cursor:pointer;overflow:hidden;padding:0}.anchor-preset-btn:hover{border-color:var(--accent)}.anchor-preset-visual{position:absolute;background:var(--accent-dim);border:1px solid var(--accent);border-radius:1px}.code-output{height:250px;min-height:200px;background:var(--bg-dark);border-top:1px solid var(--border);display:flex;flex-direction:column}.code-output-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg-panel);border-bottom:1px solid var(--border)}.code-output-actions{display:flex;gap:4px}.code-output-textarea{flex:1;width:100%;padding:12px;background:var(--bg-dark);color:#b8d4b8;border:none;resize:none;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:12px;line-height:1.5;-moz-tab-size:4;tab-size:4}.code-output-textarea:focus{outline:none}.code-output-tabs{display:flex;gap:0}.code-tab{padding:4px 12px;background:transparent;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;border-bottom:2px solid transparent}.code-tab:hover{color:var(--text)}.code-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.ai-panel{width:340px;min-width:340px;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column}.ai-close{font-size:14px;border:none;background:none;color:var(--text-dim);cursor:pointer;padding:0 4px}.ai-close:hover{color:var(--text)}.ai-key-section{padding:12px;border-bottom:1px solid var(--border)}.ai-key-label{font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px}.ai-key-input{width:100%;margin-bottom:4px}.ai-key-hint{font-size:10px;color:var(--text-dim);opacity:.7}.ai-messages{flex:1;overflow-y:auto;padding:8px}.ai-welcome{text-align:center;padding:20px 12px}.ai-welcome-title{font-size:16px;font-weight:700;color:var(--text-bright);margin-bottom:8px}.ai-welcome-text{font-size:12px;color:var(--text-dim);line-height:1.5;margin-bottom:16px}.ai-examples{display:flex;flex-direction:column;gap:6px}.ai-example{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text);font-size:12px;cursor:pointer;text-align:left;transition:all .15s}.ai-example:hover{background:var(--bg-hover);border-color:var(--accent)}.ai-msg{margin-bottom:12px}.ai-msg-role{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:4px}.ai-msg-user .ai-msg-role{color:var(--blue)}.ai-msg-assistant .ai-msg-role{color:var(--green)}.ai-msg-system .ai-msg-role{color:var(--yellow)}.ai-msg-content{font-size:12px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word;background:var(--bg-dark);border-radius:6px;padding:8px 12px}.ai-msg-user .ai-msg-content{background:var(--accent-dim)}.ai-loading{color:var(--text-dim);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.ai-input-area{display:flex;gap:6px;padding:8px;border-top:1px solid var(--border);background:var(--bg-dark)}.ai-input{flex:1;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;font-family:inherit;resize:none;line-height:1.4}.ai-input:focus{outline:none;border-color:var(--accent)}.ai-send{align-self:flex-end;padding:8px 16px}.json-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}.json-modal{width:700px;max-width:90vw;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;max-height:80vh}.json-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px}.json-modal-hint{padding:8px 16px;font-size:12px;color:var(--text-dim);margin:0}.json-modal-textarea{flex:1;min-height:300px;margin:0 16px;padding:12px;background:var(--bg-dark);border:1px solid var(--border);border-radius:4px;color:#b8d4b8;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;line-height:1.5;resize:vertical}.json-modal-textarea:focus{outline:none;border-color:var(--accent)}.json-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}@media (max-width: 1200px){.ai-panel{width:280px;min-width:280px}.tool-label{display:none}}@media (max-width: 900px){.element-tree{width:180px;min-width:180px}.property-panel{width:240px;min-width:240px}.toolbar-center{display:none}}@keyframes cuiFadeIn{0%{opacity:0}to{opacity:1}}.mode-toggle{display:inline-flex;border:1px solid var(--border, #2a2f3a);border-radius:6px;overflow:hidden}.mode-toggle-btn{background:transparent;color:var(--text-dim, #8a93a6);border:none;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}.mode-toggle-btn:hover{color:#e6e9ef}.mode-toggle-btn.active{background:var(--accent, #ff5b22);color:#fff}.preview-screen-test{cursor:default}.preview-screen-test .preview-element{-webkit-user-select:none;user-select:none}.preview-test-badge{position:absolute;top:6px;left:50%;transform:translate(-50%);background:#ff5b22eb;color:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 10px;border-radius:4px;pointer-events:none;z-index:50}.preview-container.is-test{background:radial-gradient(ellipse at 50% 35%,#2b2f36,#15171b 60%,#0c0d10)}.preview-container.is-test .preview-screen{box-shadow:0 0 0 1px #ffffff0a,0 24px 80px #0000008c;background:linear-gradient(#14161a59,#14161a8c),repeating-linear-gradient(45deg,#1c1f25 0,#1c1f25 2px,#191c21 2px,#191c21 4px)}.ip-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.ip-modal{width:min(840px,92vw);height:min(620px,88vh);background:#15171b;border:1px solid #2a2f3a;border-radius:10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px #0009}.ip-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #2a2f3a}.ip-search{flex:1;background:#0e1014;border:1px solid #2a2f3a;border-radius:6px;color:#e6e9ef;padding:8px 10px;font-size:13px}.ip-count{color:#8a93a6;font-size:12px;white-space:nowrap}.ip-grid{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;align-content:start}.ip-cell{background:#1a1c22;border:1px solid transparent;border-radius:8px;padding:8px 4px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .1s,background .1s}.ip-cell:hover{background:#21242c;border-color:#3a4150}.ip-cell.active{border-color:#ff5b22;background:#2a1a12}.ip-cell img{width:48px;height:48px;object-fit:contain}.ip-name{font-size:10px;color:#aeb6c4;text-align:center;word-break:break-all;line-height:1.1}.ip-empty{grid-column:1 / -1;color:#8a93a6;text-align:center;padding:40px}.ip-pag{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px;border-top:1px solid #2a2f3a;color:#8a93a6;font-size:12px}.live-panel{width:380px;min-width:380px;display:flex;flex-direction:column;border-left:1px solid #2a2f3a;background:#121419}.live-body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;overflow:hidden}.live-hint{font-size:11px;color:#8a93a6;line-height:1.4}.live-badge{background:#1f9d55;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:4px}.live-code{flex:1;min-height:240px;resize:none;background:#0e1014;border:1px solid #2a2f3a;border-radius:6px;color:#cdd3df;font-family:monospace;font-size:11px;padding:8px;line-height:1.4;white-space:pre}.live-actions{display:flex;gap:8px;align-items:center}.live-status{font-size:11px;color:#aeb6c4;white-space:pre-wrap;word-break:break-word;max-height:120px;overflow-y:auto}.btn-live{box-shadow:0 0 0 1px #1f9d55 inset;color:#4ade80!important}