:root{--accent-green: #6CFF39;--accent-green-rgb: 108, 255, 57;--accent-blue: #5EFFFF;--accent-blue-rgb: 94, 255, 255;--accent-purple: #D173FF;--accent-purple-rgb: 209, 115, 255;--accent-pink: #FF59AD;--accent-pink-rgb: 255, 89, 173;--accent-red: #FE4747;--accent-red-rgb: 254, 71, 71;--accent-yellow: #FFFF3D;--accent-yellow-rgb: 255, 255, 61;--accent-orange: #FFB234;--accent-orange-rgb: 255, 178, 52;--bg-dark: #000000;--bg-panel: #0A0A0A;--bg-node: #141414;--bg-input: #141414;--text-primary: #FFFFFF;--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .5);--border-thick: 2px;--border-thin: 1px;--border-color: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .25);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--radius-bubble: 24px;--radius-panel: 20px;--radius-button: 16px;--radius-input: 12px;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Typo,Outfit,Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-dark);color:var(--text-primary);overflow:hidden;height:100vh}.app-container{display:flex;flex-direction:column;height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--bg-dark);border-bottom:var(--border-thick) solid var(--border-color);z-index:100;box-shadow:var(--shadow-md)}.header-left{display:flex;align-items:center;gap:16px}.logo-image{height:32px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.subtitle{font-size:14px;color:#ffffffe6;font-weight:600;background:#ffffff26;padding:6px 14px;border-radius:20px;backdrop-filter:blur(10px)}.header-actions{display:flex;gap:10px}button{padding:10px 20px;border:var(--border-thick) solid transparent;border-radius:var(--radius-button);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all var(--transition-medium);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#fff0);opacity:0;transition:opacity var(--transition-fast);pointer-events:none}button:hover:before{opacity:1}button:hover{box-shadow:var(--shadow-md)}button:active{box-shadow:var(--shadow-sm)}.btn-primary{background:var(--accent-blue);color:#000;border-color:var(--accent-blue)}.btn-primary:hover{background:var(--accent-purple);border-color:var(--accent-purple);box-shadow:0 0 24px rgba(var(--accent-purple-rgb),.5)}.btn-success{background:var(--accent-green);color:#000;border-color:var(--accent-green)}.btn-success:hover{background:var(--accent-orange);border-color:var(--accent-orange);box-shadow:0 0 20px rgba(var(--accent-orange-rgb),.4)}.btn-danger{background:var(--accent-red);color:#000;border-color:var(--accent-red)}.btn-danger:hover{background:var(--accent-orange);border-color:var(--accent-orange);box-shadow:0 0 20px rgba(var(--accent-orange-rgb),.4)}.btn-secondary{background:#ffffff0d;color:var(--text-primary);border:var(--border-thin) solid var(--border-color)}.btn-secondary:hover{background:#ffffff1a;border-color:var(--accent-blue)}.main-layout{display:flex;flex-direction:row;height:calc(100vh - 68px);width:100vw;overflow:hidden;background:var(--bg-dark);align-items:stretch;--w-left: 320px;--w-middle: 1fr;--w-right: 320px;--w-middle-section: 60%}[class^=column-]{display:flex;flex-direction:column;height:100%;min-height:0;flex-shrink:0}.column-left{width:var(--w-left);min-width:200px;padding:12px;gap:12px}.column-middle{flex:1;min-width:600px;background:var(--bg-panel);border-left:var(--border-thick) solid var(--bg-dark);border-right:var(--border-thick) solid var(--bg-dark);position:relative;display:flex;flex-direction:row;padding:12px;gap:12px}.workspace-section{flex:.6;min-width:300px;display:flex;flex-direction:column;gap:12px;overflow:hidden;height:100%}.phone-preview-section{flex:.4;min-width:280px;display:flex;flex-direction:column;gap:12px;overflow:hidden}.column-right{width:var(--w-right);min-width:300px;padding:12px;gap:12px;display:flex;flex-direction:column}#panel-properties{flex:1;min-height:200px}#panel-export{flex:0 0 auto;padding-bottom:12px}.glass-panel{background:var(--bg-panel);border:var(--border-thick) solid var(--border-color);border-radius:var(--radius-panel);overflow:hidden;transition:all var(--transition-medium);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;backdrop-filter:blur(10px);flex:1;min-height:0}.glass-panel:before{content:"";position:absolute;inset:0;border-radius:var(--radius-panel);background:linear-gradient(135deg,#ffffff08,#ffffff03);pointer-events:none;z-index:0}.glass-panel>*{position:relative;z-index:1}.glass-panel:hover{border-color:var(--accent-blue);box-shadow:var(--shadow-md)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:var(--border-thick) solid var(--border-color);flex-shrink:0}.panel-title{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--accent-blue);background:linear-gradient(135deg,#5effff26,#d173ff1a);border-bottom:none;flex-shrink:0;cursor:grab;user-select:none;position:relative;margin:0;border:none;background:none}.panel-title:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:32px;background:var(--accent-blue);border-radius:0 8px 8px 0;box-shadow:0 0 12px var(--accent-blue);opacity:.8}.panel-title:active{cursor:grabbing}.panel-title h2{font-size:14px;font-weight:800;margin:0;color:var(--text-primary);display:flex;align-items:center;gap:6px}.panel-actions{display:flex;gap:8px;align-items:center}.btn-sm{font-size:12px!important;padding:6px 12px!important}.panel-content{padding:16px;overflow:auto;flex:1;min-height:0}.preset-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:8px}.preset-item{display:flex;align-items:center;gap:12px;padding:12px;background:#ffffff08;border:var(--border-thin) solid var(--border-color);border-radius:var(--radius-button);cursor:pointer;transition:all var(--transition-fast);font-size:13px}.preset-item:hover{background:#5effff1a;border-color:var(--accent-blue);box-shadow:var(--shadow-sm)}.preset-item span:first-child{font-size:24px}.node-palette{display:flex;flex-direction:column;gap:8px;padding:8px;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}@container node-palette (max-width: 200px){.node-palette{grid-template-columns:1fr;grid-auto-rows:minmax(80px,auto)}}@container node-palette (min-width: 201px) and (max-width: 300px){.node-palette{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(80px,auto)}}@container node-palette (min-width: 301px) and (max-width: 400px){.node-palette{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(80px,auto)}}@container node-palette (min-width: 401px) and (max-width: 500px){.node-palette{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(80px,auto)}}@container node-palette (min-width: 501px){.node-palette{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));grid-auto-rows:minmax(80px,auto)}}@supports not (container-type: inline-size){.node-palette{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));grid-auto-rows:minmax(80px,auto)}}.node-btn{width:100%;height:100%;min-height:80px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;word-wrap:break-word;hyphens:auto}.node-label{font-size:10px;font-weight:700;line-height:1.1;color:var(--text-secondary);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.node-btn{aspect-ratio:1;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-node);border:var(--border-thin) solid var(--border-color);border-radius:var(--radius-button);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);min-height:80px;box-sizing:border-box;overflow:hidden}.node-btn:hover{background:#5effff1a;border-color:var(--accent-blue);box-shadow:var(--shadow-md);z-index:10}.node-icon{font-size:28px;margin-bottom:8px;flex-shrink:0}.node-label{font-size:10px;font-weight:700;line-height:1.1;color:var(--text-secondary);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;flex-shrink:0}.node-editor-container{background:var(--bg-node);position:relative;padding:0!important;overflow:hidden;flex:1;min-height:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;border-radius:var(--radius-panel);border:var(--border-thick) solid var(--border-color)}#node-canvas{display:block}.visual-editor-container{position:relative;width:100%;height:100%}.phone-preview-frame{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 8px 8px;overflow:hidden}.phone-aspect{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--bg-node);background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;margin:0 0 8px;border-radius:32px;border:8px solid var(--bg-panel);box-shadow:0 15px 40px #000000b3;position:relative;overflow:hidden;width:100%;min-width:280px}#visual-canvas-main{width:100%;height:100%;display:block;object-fit:contain;position:relative;z-index:1;will-change:transform;transform-origin:center center}.phone-aspect{isolation:isolate}#preview-bottom-controls{position:relative;z-index:100;flex:0 0 auto;width:100%;padding:12px;pointer-events:auto;background:#0a0a0af5;border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 -4px 18px #00000059;overflow:hidden}#preview-bottom-controls *{position:relative;z-index:101}.frame-timeline{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:0 4px 2px}.frame-timeline-label{flex:0 0 auto;color:var(--accent-blue);font-size:8px;font-weight:800;letter-spacing:.08em}.frame-timeline-value{flex:0 0 42px;color:var(--accent-blue);font-family:monospace;font-size:9px;text-align:right}#frame-timeline{flex:1 1 auto;min-width:0;height:22px;margin:0;cursor:ew-resize;touch-action:none;-webkit-appearance:none;appearance:none;background:transparent}#frame-timeline::-webkit-slider-runnable-track{height:8px;border:1px solid rgba(94,255,255,.4);border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(2.5% - 1px),rgba(94,255,255,.9) calc(2.5% - 1px),rgba(94,255,255,.9) 2.5%),#000000a6}#frame-timeline::-moz-range-track{height:8px;border:1px solid rgba(94,255,255,.4);border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(2.5% - 1px),rgba(94,255,255,.9) calc(2.5% - 1px),rgba(94,255,255,.9) 2.5%),#000000a6}#frame-timeline::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border:2px solid #fff;border-radius:50%;background:var(--accent-blue);box-shadow:0 0 8px #5effffe6,0 1px 4px #0009;cursor:grab}#frame-timeline::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}#frame-timeline::-moz-range-thumb{width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--accent-blue);box-shadow:0 0 8px #5effffe6,0 1px 4px #0009;cursor:grab}#frame-timeline:focus-visible{outline:2px solid var(--accent-purple);outline-offset:3px;border-radius:8px}#visual-canvas-reference-wallpaper{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;flex:none!important;display:block;object-fit:contain;object-position:center;background:transparent!important;border:0!important;border-radius:0!important;transform:none;transform-origin:center center;pointer-events:none;z-index:0;opacity:.95}.properties-panel{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.property-group{background:#0003;border-radius:var(--radius-input);padding:12px;border:var(--border-thin) solid var(--border-color)}.property-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;display:block;letter-spacing:.5px}input[type=text],input[type=number],select{width:100%;background:var(--bg-input);border:var(--border-thin) solid var(--border-color);border-radius:var(--radius-input);padding:10px 12px;color:var(--text-primary);font-family:inherit;font-size:14px;outline:none;transition:all var(--transition-fast)}input:focus,select:focus{background:#5effff1a;border-color:var(--accent-blue);box-shadow:0 0 0 3px #5effff33}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--accent-blue);cursor:pointer;margin-top:-7px;box-shadow:0 2px 8px #5effff80;border:2px solid white}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--bg-input);border-radius:2px;border:var(--border-thin) solid var(--border-color)}.export-summary{margin-top:auto;border-top:var(--border-thin) solid var(--border-color);background:#0003;border-radius:var(--radius-input);padding:12px;margin-bottom:8px}.summary-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.05)}.summary-row:last-child{border-bottom:none;margin-bottom:0}.summary-row span:first-child{color:var(--text-secondary)}.summary-row span:last-child{color:var(--accent-blue);font-weight:700}.state-toggle{background:#0009;padding:4px;border-radius:var(--radius-input);display:flex;gap:4px}.state-toggle button{padding:8px 12px;font-size:11px;font-weight:700;border:none;background:transparent;color:#fff;cursor:pointer;border-radius:8px;transition:all var(--transition-fast)}.state-toggle button.active{background:var(--accent-green);color:#000;box-shadow:0 2px 8px #6cff394d}.visual-controls{display:flex;gap:4px;align-items:center;justify-content:center;background:#0006;padding:6px;border-radius:var(--radius-input);border:var(--border-thin) solid var(--border-color)}.visual-controls button{padding:6px 10px;font-size:10px;border-radius:6px;background:#ffffff0d;border:var(--border-thin) solid var(--border-color);color:#fff;cursor:pointer;transition:all var(--transition-fast)}.visual-controls button:hover{background:#5effff1a;border-color:var(--accent-blue)}.visual-controls span{font-family:monospace;font-size:11px;color:var(--accent-blue);margin-left:8px;padding:4px 8px;background:#0000004d;border-radius:6px;border:1px solid rgba(94,255,255,.2)}.visual-state-toggle{display:flex;gap:4px;justify-content:center;background:#0000004d;padding:4px;border-radius:var(--radius-input);border:var(--border-thin) solid var(--border-color)}.visual-state-toggle button{flex:1;padding:8px;font-size:11px;background:#ffffff0d;border:var(--border-thin) solid var(--border-color);border-radius:6px;color:#fff;cursor:pointer;transition:all var(--transition-fast);font-weight:700}.visual-state-toggle button.active{background:var(--accent-green);color:#000;border-color:var(--accent-green);box-shadow:0 2px 8px #6cff394d}.visual-state-toggle button:hover:not(.active){background:#ffffff1a}.visual-tools{display:flex;gap:6px;flex-wrap:wrap;background:#0003;padding:6px;border-radius:var(--radius-input);border:var(--border-thin) solid var(--border-color)}.visual-tools button{flex:1;min-width:80px;padding:8px 10px;border-radius:6px;background:#ffffff0d;border:var(--border-thin) solid var(--border-color);color:#fff;font-size:10px;cursor:pointer;transition:all var(--transition-fast)}.visual-tools button:hover{background:#5effff1a;border-color:var(--accent-blue)}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.6;pointer-events:none;transition:opacity .3s ease;background:#0000004d;padding:20px;border-radius:var(--radius-panel);border:var(--border-thin) dashed rgba(255,255,255,.1)}.empty-icon{font-size:48px;filter:drop-shadow(0 0 8px rgba(94,255,255,.5))}.empty-state h3{font-size:14px;font-weight:700;color:var(--accent-blue);text-transform:uppercase;letter-spacing:1px;margin:0}.empty-state p{font-size:11px;color:var(--text-secondary);margin:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-node);border-radius:4px;border:1px solid var(--border-color)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.notification-widget{position:fixed;top:80px;right:20px;padding:12px 20px;border-radius:var(--radius-button);font-weight:600;z-index:10001;animation:slideIn .3s ease;box-shadow:var(--shadow-lg);border:var(--border-thick) solid;background:var(--bg-panel);backdrop-filter:blur(10px)}.notification-widget.success{border-color:var(--accent-green);color:var(--accent-green)}.notification-widget.error{border-color:var(--accent-red);color:var(--accent-red)}.notification-widget.info{border-color:var(--accent-blue);color:var(--accent-blue)}#notification-container{position:fixed;top:80px;right:20px;z-index:10001;pointer-events:none}.notification{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;margin-bottom:8px;border-radius:var(--radius-button);font-weight:500;font-size:14px;pointer-events:auto;animation:slideIn .3s ease;box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.toast-info{background:var(--bg-panel);color:var(--text-primary);border-color:var(--accent-blue)}.toast-success{background:#4bd6ef1a;color:var(--accent-green);border-color:var(--accent-green)}.toast-error{background:#ff55551a;color:var(--accent-red);border-color:var(--accent-red)}.toast-warning{background:#ffc4001a;color:var(--accent-yellow);border-color:var(--accent-yellow)}.notification .close{cursor:pointer;margin-left:12px;font-weight:700;opacity:.7}.notification .close:hover{opacity:1}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.alert-dialog,.confirm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-panel);border:var(--border-thick) solid var(--border-color);border-radius:var(--radius-panel);padding:24px;min-width:300px;max-width:500px;box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);z-index:10002;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}.alert-dialog h3,.confirm-dialog h3{color:var(--accent-blue);font-size:18px;font-weight:700;margin-bottom:12px;text-align:center}.alert-dialog p,.confirm-dialog p{color:var(--text-secondary);font-size:14px;line-height:1.5;margin-bottom:20px;text-align:center}.alert-dialog .actions,.confirm-dialog .actions{display:flex;gap:12px;justify-content:center}.alert-dialog button,.confirm-dialog button{padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.alert-dialog .btn-primary,.confirm-dialog .btn-primary{background:var(--accent-blue);color:#000;border:none}.alert-dialog .btn-primary:hover,.confirm-dialog .btn-primary:hover{box-shadow:0 4px 12px #5effff66}.confirm-dialog .btn-secondary{background:#ffffff0d;color:var(--text-primary);border:var(--border-thin) solid var(--border-color)}.confirm-dialog .btn-secondary:hover{background:#ffffff1a;border-color:var(--accent-blue)}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.dialog-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(4px);z-index:10001;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ghost{pointer-events:none;border:2px dashed var(--accent-blue)!important;background:#5effff1a!important;backdrop-filter:blur(5px)}.widget-panel.dragging,section[class^=panel-].dragging{opacity:.7;transform:scale(.98);box-shadow:0 0 20px var(--accent-blue)}.widget-panel.drop-target,section[class^=panel-].drop-target{outline:2px dashed var(--accent-blue);outline-offset:-4px;background:#5effff0d}.loading-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(5px)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-toast{position:fixed;bottom:20px;right:20px;background:var(--bg-panel);color:var(--text-primary);padding:16px 20px;border-radius:var(--radius-panel);border:var(--border-thick) solid var(--accent-blue);box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);z-index:20001;animation:popIn .3s cubic-bezier(.34,1.56,.64,1);min-width:240px}.loading-toast .toast-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px}.loading-toast .toast-status{font-size:11px;color:var(--text-secondary);margin-bottom:8px}.loading-toast .loading-bar-track{height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.loading-toast .loading-bar-fill{height:100%;background:var(--accent-blue);border-radius:2px;width:0%;transition:width .1s}.loading-toast.done{border-color:var(--accent-green);box-shadow:0 0 20px #6cff394d}.loading-toast.done .loading-bar-fill{background:var(--accent-green)}.export-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:20000;backdrop-filter:blur(8px)}.export-progress-box{background:var(--bg-panel);border:var(--border-thick) solid var(--accent-blue);border-radius:var(--radius-panel);padding:32px 40px;min-width:420px;max-width:520px;width:90%;box-shadow:0 0 40px #5effff40;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}.export-progress-box h2{font-size:18px;font-weight:800;color:var(--text-primary);margin-bottom:20px;text-align:center;display:flex;align-items:center;gap:10px;justify-content:center}.export-progress-box .spinner-ring{width:20px;height:20px;border:3px solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite}.export-status-item{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:8px;border-radius:var(--radius-input);background:#0000004d;border:1px solid rgba(255,255,255,.05);font-size:13px;font-weight:600;color:var(--text-secondary);transition:all .2s ease}.export-status-item.active{color:var(--accent-blue);border-color:#5effff4d;background:#5effff0d;box-shadow:0 0 12px #5effff1a}.export-status-item.done{color:var(--accent-green);border-color:#6cff3933;background:transparent}.export-status-item .status-dot{width:10px;height:10px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.export-status-item.active .status-dot{background:var(--accent-blue);box-shadow:0 0 8px var(--accent-blue);animation:pulse 1.2s ease-in-out infinite}.export-status-item.done .status-dot{background:var(--accent-green);box-shadow:0 0 6px #6cff3966}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}@media (max-width: 1600px){.main-layout{--w-left: 22%;--w-right: 22%}}@media (max-width: 1400px){.main-layout{--w-left: 20%;--w-right: 20%}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center}.modal-content{background:var(--bg-panel);border:var(--border-thick) solid var(--border-color);border-radius:var(--radius-panel);max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:var(--border-thin) solid var(--border-color)}.modal-header h3{margin:0;color:var(--text-primary)}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;padding:5px;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.modal-close:hover{background:#ffffff1a}.modal-body{padding:0}@media (max-width: 1200px){.main-layout{--w-left: 18%;--w-right: 18%}}.wm-modal-backdrop{position:fixed;inset:0;background:#0009;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:10000;font-family:Outfit,sans-serif;padding:16px}.wm-modal{background:#1a1d2e;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:24px;max-width:380px;width:100%;box-shadow:0 12px 40px #00000080;text-align:center;color:#cdd6f4}.wm-modal-icon{font-size:34px;margin-bottom:8px}.wm-modal-title{margin:0 0 10px;font-size:17px;font-weight:800;color:#ff6b6b}.wm-modal-body{font-size:13px;line-height:1.6;margin:0 0 20px;color:#cdd6f4}.wm-modal-body strong{color:#fff}.wm-modal-actions{display:flex;gap:10px;justify-content:center}.wm-btn{border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .08s ease,filter .15s ease}.wm-btn:active{transform:scale(.97)}.wm-btn-cancel{background:#ffffff1a;color:#cdd6f4}.wm-btn-cancel:hover{background:#ffffff2e}.wm-btn-primary{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff}.wm-btn-primary:hover{filter:brightness(1.08)}.wm-download-modal{max-width:340px}.wm-spinner{width:56px;height:56px;margin:4px auto 14px;border:5px solid rgba(255,255,255,.12);border-top-color:#ffb234;border-radius:50%;animation:wm-spin .9s linear infinite}@keyframes wm-spin{to{transform:rotate(360deg)}}.wm-progress-track{width:100%;height:10px;background:#ffffff1a;border-radius:999px;overflow:hidden;margin:12px 0 6px}.wm-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffb234,#ff6b6b);border-radius:999px;transition:width .2s ease}.wm-progress-text{font-size:13px;font-weight:800;color:#fff}.wm-download-stats{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:#9aa4c4}.wm-mobile-nav{display:none}@media (max-width: 900px){body.mobile-mode{--wm-mobile-nav-h: 60px;overflow:hidden;overscroll-behavior:none}body.mobile-mode .app-container{height:100dvh;height:100vh;overflow:hidden}body.mobile-mode .header{padding:10px 12px;gap:8px;flex-wrap:nowrap;flex-shrink:0}body.mobile-mode .header-left{gap:8px;flex-shrink:0}body.mobile-mode .logo-image{height:26px}body.mobile-mode .subtitle{display:none}body.mobile-mode .header-actions{gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1;justify-content:flex-end;scrollbar-width:none}body.mobile-mode .header-actions::-webkit-scrollbar{display:none}body.mobile-mode .header-actions button{padding:8px 12px;font-size:12px;white-space:nowrap;flex-shrink:0}body.mobile-mode #btn-guide,body.mobile-mode #btn-load-template,body.mobile-mode #btn-save-template,body.mobile-mode #btn-project-export,body.mobile-mode #btn-project-import,body.mobile-mode #btn-restart,body.mobile-mode #btn-debug,body.mobile-mode #btn-test-runtime,body.mobile-mode #btn-clear{display:none}body.mobile-mode #btn-export{padding:9px 14px}body.mobile-mode .main-layout{display:flex;flex-direction:column;width:100%;height:calc(100dvh - var(--wm-header-h, 58px) - var(--wm-mobile-nav-h, 60px));height:calc(100vh - var(--wm-header-h, 58px) - var(--wm-mobile-nav-h, 60px));overflow:hidden;--w-left: auto;--w-right: auto}body.mobile-mode [class^=column-]{width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;padding:8px!important;gap:8px!important;border:none!important;display:none}body.mobile-mode .column-middle{flex-direction:column}body.mobile-mode .workspace-section,body.mobile-mode .phone-preview-section{display:none;width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;padding:0!important;gap:8px!important;flex:1 1 100%!important}body.mobile-mode.mv-toolbox .column-left,body.mobile-mode.mv-workspace .column-middle,body.mobile-mode.mv-workspace .workspace-section,body.mobile-mode.mv-preview .column-middle,body.mobile-mode.mv-preview .phone-preview-section,body.mobile-mode.mv-properties .column-right{display:flex}body.mobile-mode .glass-panel{border-radius:16px}body.mobile-mode .panel-title{padding:10px 12px;font-size:12px}body.mobile-mode #panel-properties{min-height:0}body.mobile-mode .node-editor-container{min-height:0;border-radius:16px}body.mobile-mode #node-canvas{display:block;touch-action:none}body.mobile-mode .phone-preview-frame,body.mobile-mode .visual-editor-container,body.mobile-mode #panel-visual-canvas{min-width:0!important;width:100%!important}body.mobile-mode .phone-preview-frame{height:100%!important;padding:0 6px 6px}body.mobile-mode .phone-aspect{height:auto!important;min-height:0;margin:0 0 6px!important;border-radius:24px!important;border-width:6px!important}body.mobile-mode #preview-bottom-controls{padding:8px;border-radius:16px}body.mobile-mode .wm-mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--wm-mobile-nav-h, 60px);z-index:5000;background:#0d0d12f7;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -4px 20px #0006;backdrop-filter:blur(12px);padding-bottom:env(safe-area-inset-bottom,0px)}body.mobile-mode .wm-mobile-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent!important;border:none!important;box-shadow:none!important;color:#ffffff8c;font-size:10px;font-weight:700;padding:4px 2px;min-width:0;overflow:hidden;text-transform:uppercase;letter-spacing:.03em;border-radius:0}body.mobile-mode .wm-mobile-nav button:before{display:none!important}body.mobile-mode .wm-mobile-nav button .nav-ico{font-size:19px;line-height:1}body.mobile-mode .wm-mobile-nav button.active{color:#6cff39;background:linear-gradient(180deg,rgba(108,255,57,.12),transparent)!important}body.mobile-mode .wm-mobile-nav button.active .nav-ico{filter:drop-shadow(0 0 6px rgba(108,255,57,.6))}}