.playground-container{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100vw;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;padding:0;background-color:#12131c;color:#e2e8f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden;z-index:100}.playground-container.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;height:100vh}.playground-header{height:54px;background-color:#181926;border-bottom:1px solid #282a3d;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;flex-shrink:0}.playground-title-input{background:transparent;border:1px solid transparent;border-radius:4px;color:#f1f5f9;font-size:15px;font-weight:600;padding:4px 8px;max-width:200px;transition:all .2s ease}.playground-title-input:hover{background:#24273a;border-color:#3b4261}.playground-title-input:focus{background:#24273a;border-color:#6366f1;outline:none}.playground-select{background-color:#24273a;color:#f1f5f9;border:1px solid #3b4261;border-radius:6px;font-size:13px;padding:6px 12px;font-weight:500;cursor:pointer;outline:none;transition:all .2s}.playground-select:hover{border-color:#6366f1}.playground-select:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}.playground-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.playground-btn-primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 2px 4px #4f46e54d}.playground-btn-primary:hover{background:linear-gradient(135deg,#4f46e5,#4338ca);color:#fff}.playground-btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 4px #10b9814d}.playground-btn-success:hover{background:linear-gradient(135deg,#059669,#047857);color:#fff}.playground-btn-dark{background-color:#24273a;border-color:#3b4261;color:#cbd5e1}.playground-btn-dark:hover{background-color:#2e324a;border-color:#4b5278;color:#fff}.playground-btn-sm{padding:4px 8px;font-size:12px}.playground-user-btn{color:#e2e8f0;border:1px solid rgba(255,255,255,.15);transition:all .15s ease-in-out}.playground-user-btn .user-name-text{color:#f1f5f9;font-size:12px}.playground-user-btn:hover{background-color:#2e324a;border-color:#4b5278}.playground-user-btn:hover .user-name-text{color:#fff}.playground-btn-icon{padding:6px;border-radius:6px;color:#94a3b8;background:transparent;border:none;cursor:pointer;transition:all .15s}.playground-btn-icon:hover{background-color:#24273a;color:#f1f5f9}.save-badge{font-size:11px;display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:12px;background-color:#24273acc;border:1px solid #282a3d;color:#94a3b8}.save-badge.saved{color:#34d399}.save-badge.saving{color:#fbbf24}.playground-body{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}.playground-sidebar{width:280px;background-color:#151622;border-right:1px solid #282a3d;display:flex;flex-direction:column;flex-shrink:0;z-index:10;transition:width .2s ease,transform .2s ease}.playground-sidebar.collapsed{width:0;transform:translate(-100%);overflow:hidden;border-right:none}.sidebar-header{padding:12px 16px;border-bottom:1px solid #282a3d;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8}.project-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}.project-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:6px;background-color:transparent;border:1px solid transparent;color:#cbd5e1;font-size:13px;cursor:pointer;transition:all .15s}.project-item:hover{background-color:#1e2030;border-color:#282a3d;color:#f1f5f9}.project-item.active{background-color:#24273a;border-color:#6366f1;color:#fff}.project-meta{display:flex;flex-direction:column;overflow:hidden;gap:2px}.project-title-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-template-tag{font-size:10px;color:#818cf8;text-transform:uppercase}.playground-editor-wrap{flex:1;display:flex;flex-direction:column;height:100%;width:100%;min-width:0;min-height:0;background-color:#181926;position:relative;overflow:hidden}.sandpack-provider-full,.sandpack-provider-full.sp-wrapper,.sandpack-provider-wrapper .sp-wrapper,.playground-editor-wrap .sp-wrapper,.sandpack-component-wrap .sp-wrapper,.sandpack-normal .sp-wrapper,.sandpack-fullscreen .sp-wrapper{height:100%!important;max-height:100%!important;display:flex!important;flex-direction:column!important;flex:1!important;min-height:0!important;overflow:hidden!important;--sp-layout-height: 100% !important}.playground-editor-wrap .sp-layout,.sandpack-component-wrap .sp-layout,.sandpack-normal .sp-layout,.sandpack-fullscreen .sp-layout{height:100%!important;max-height:100%!important;flex:1!important;display:flex!important;flex-direction:row!important;border-radius:0!important;border:none!important;background-color:#181926!important}.playground-editor-wrap .sp-stack,.sandpack-component-wrap .sp-stack,.sandpack-normal .sp-stack,.sandpack-fullscreen .sp-stack{height:100%!important;max-height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}.playground-editor-wrap .sp-code-editor,.sandpack-component-wrap .sp-code-editor,.sandpack-normal .sp-code-editor,.sandpack-fullscreen .sp-code-editor{flex:1!important;width:100%!important;height:100%!important;max-height:100%!important;display:flex!important;flex-direction:column!important;border-right:none!important}.playground-editor-wrap .sp-preview,.sandpack-component-wrap .sp-preview,.sandpack-normal .sp-preview,.sandpack-fullscreen .sp-preview{flex:1!important;width:100%!important;height:100%!important;max-height:100%!important;display:flex!important;flex-direction:column!important;background:#fff!important}.playground-editor-wrap .sp-preview-container,.sandpack-component-wrap .sp-preview-container,.sandpack-normal .sp-preview-container,.sandpack-fullscreen .sp-preview-container{height:100%!important;max-height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}.playground-editor-wrap .sp-preview-iframe,.sandpack-component-wrap .sp-preview-iframe,.sandpack-normal .sp-preview-iframe,.sandpack-fullscreen .sp-preview-iframe{height:100%!important;width:100%!important;flex:1!important;border:none!important;background:#fff!important}.playground-editor-wrap .sp-file-explorer,.sandpack-component-wrap .sp-file-explorer,.sandpack-normal .sp-file-explorer,.sandpack-fullscreen .sp-file-explorer{height:100%!important;max-height:100%!important;width:100%!important;flex:1!important;border-right:none!important;background-color:#151622!important}.playground-editor-wrap .sp-tabs,.sandpack-component-wrap .sp-tabs,.sandpack-normal .sp-tabs,.sandpack-fullscreen .sp-tabs{background-color:#1a1c2b!important;border-bottom:1px solid #282a3d!important}.playground-editor-wrap .sp-tab-button,.sandpack-component-wrap .sp-tab-button,.sandpack-normal .sp-tab-button,.sandpack-fullscreen .sp-tab-button{color:#94a3b8!important}.playground-editor-wrap .sp-tab-button[data-active=true],.sandpack-component-wrap .sp-tab-button[data-active=true],.sandpack-normal .sp-tab-button[data-active=true],.sandpack-fullscreen .sp-tab-button[data-active=true]{color:#fff!important;background-color:#24273a!important}.playground-editor-wrap .cm-editor,.playground-editor-wrap .cm-scroller,.sandpack-component-wrap .cm-editor,.sandpack-component-wrap .cm-scroller,.sandpack-normal .cm-editor,.sandpack-normal .cm-scroller,.sandpack-fullscreen .cm-editor,.sandpack-fullscreen .cm-scroller{height:100%!important;max-height:100%!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important;font-size:13.5px!important}.playground-editor-wrap .sp-pane,.sandpack-component-wrap .sp-pane,.sandpack-normal .sp-pane,.sandpack-fullscreen .sp-pane{height:100%!important;max-height:100%!important}.sp-resizable-panel{height:100%;min-height:0;position:relative}.resizer-handle{position:relative;background-color:#282a3d;flex-shrink:0;transition:background-color .15s ease;z-index:20}.resizer-handle:hover,.resizer-handle:active,body.is-resizing .resizer-handle{background-color:#6366f1!important}.resizer-handle-col{width:5px;cursor:col-resize;height:100%}.resizer-handle-col:after{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-4px}.resizer-handle-row{height:5px;cursor:row-resize;width:100%}.resizer-handle-row:after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}body.is-resizing{-webkit-user-select:none!important;user-select:none!important}body.is-resizing iframe{pointer-events:none!important}.backend-editor-layout{display:flex;height:100%;width:100%;overflow:hidden}.backend-editor-layout.dock-bottom{flex-direction:column}.backend-editor-layout.dock-right{flex-direction:row}.backend-editor-layout.dock-left{flex-direction:row-reverse}.backend-editor-area{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;background-color:#181926;position:relative}.backend-terminal-pane{background-color:#12131c;display:flex;flex-direction:column;overflow:hidden;z-index:5;flex-shrink:0;transition:none}.backend-editor-layout.dock-bottom .backend-terminal-pane{width:100%}.backend-editor-layout.dock-right .backend-terminal-pane,.backend-editor-layout.dock-left .backend-terminal-pane{height:100%}.backend-editor-layout.dock-bottom .backend-terminal-pane.collapsed{height:38px!important}.backend-editor-layout.dock-right .backend-terminal-pane.collapsed,.backend-editor-layout.dock-left .backend-terminal-pane.collapsed{width:38px!important;min-width:38px!important}.drawer-header{height:38px;background-color:#1a1c2b;border-bottom:1px solid #282a3d;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:12px;font-weight:600;color:#94a3b8;-webkit-user-select:none;user-select:none;flex-shrink:0}.dock-btn-group{display:inline-flex;align-items:center;background-color:#12131c;border:1px solid #282a3d;border-radius:6px;padding:2px;gap:2px}.dock-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background:transparent;border:none;color:#64748b;cursor:pointer;padding:0;transition:all .15s}.dock-btn:hover{color:#cbd5e1;background-color:#1e2030}.dock-btn.active{color:#6366f1;background-color:#282a3d}.drawer-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;color:#94a3b8;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s}.drawer-tab:hover{color:#f1f5f9}.drawer-tab.active{color:#6366f1;border-bottom-color:#6366f1}.output-console{flex:1;padding:12px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.5;overflow-y:auto;white-space:pre-wrap;word-break:break-word;color:#e2e8f0}.output-console .stdout{color:#a7f3d0}.output-console .stderr{color:#fca5a5}.output-console .compilerout{color:#fcd34d}.output-console .empty-prompt{color:#64748b;font-style:italic;display:flex;align-items:center;justify-content:center;height:100%}.stdin-box{padding:12px 16px;background-color:#181926;flex:1;display:flex;flex-direction:column}.stdin-input{width:100%;flex:1;background-color:#12131c;border:1px solid #282a3d;border-radius:4px;color:#e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;padding:8px 12px;outline:none;resize:none}.stdin-input:focus{border-color:#6366f1}.share-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}.share-modal-card{background-color:#1e2030;border:1px solid #3b4261;border-radius:12px;width:100%;max-width:480px;padding:24px;box-shadow:0 20px 25px -5px #00000080;color:#f1f5f9}.playground-container ::-webkit-scrollbar{width:6px;height:6px}.playground-container ::-webkit-scrollbar-track{background:#12131c}.playground-container ::-webkit-scrollbar-thumb{background:#282a3d;border-radius:3px}.playground-container ::-webkit-scrollbar-thumb:hover{background:#3b4261}@media (max-width: 768px){.backend-split-container{flex-direction:column}.backend-editor-pane{border-right:none;border-bottom:1px solid #282a3d;height:50%}.backend-output-pane{height:50%}}.playground-container.theme-light{background-color:#f8fafc;color:#0f172a}.playground-container.theme-light .playground-header{background-color:#fff;border-bottom-color:#e2e8f0}.playground-container.theme-light .brand-title{color:#0f172a!important}.playground-container.theme-light .playground-title-input{color:#0f172a}.playground-container.theme-light .playground-title-input:hover,.playground-container.theme-light .playground-title-input:focus{background:#f1f5f9;border-color:#cbd5e1}.playground-container.theme-light .playground-select{background-color:#f1f5f9;color:#0f172a;border-color:#cbd5e1}.playground-container.theme-light .playground-select:hover{border-color:#6366f1}.playground-container.theme-light .playground-btn-dark{background-color:#f1f5f9;border-color:#cbd5e1;color:#1e293b}.playground-container.theme-light .playground-btn-dark:hover{background-color:#e2e8f0;border-color:#94a3b8;color:#0f172a}.playground-container.theme-light .playground-user-btn{background-color:#f1f5f9;border-color:#cbd5e1;color:#0f172a}.playground-container.theme-light .playground-user-btn .user-name-text{color:#0f172a!important;font-weight:600}.playground-container.theme-light .playground-user-btn:hover{background-color:#e2e8f0;border-color:#94a3b8}.playground-container.theme-light .playground-user-btn:hover .user-name-text{color:#000!important}.playground-container.theme-light .playground-btn-icon{color:#64748b}.playground-container.theme-light .playground-btn-icon:hover{background-color:#f1f5f9;color:#0f172a}.playground-container.theme-light .save-badge{background-color:#f1f5f9;border-color:#e2e8f0;color:#64748b}.playground-container.theme-light .save-badge.saved{color:#059669}.playground-container.theme-light .save-badge.saving{color:#d97706}.playground-container.theme-light .playground-sidebar{background-color:#f8fafc;border-right-color:#e2e8f0}.playground-container.theme-light .sidebar-header{border-bottom-color:#e2e8f0;color:#475569}.playground-container.theme-light .project-item{color:#334155}.playground-container.theme-light .project-item:hover{background-color:#f1f5f9;border-color:#e2e8f0;color:#0f172a}.playground-container.theme-light .project-item.active{background-color:#e0e7ff;border-color:#c7d2fe;color:#4338ca}.playground-container.theme-light .playground-editor-wrap,.playground-container.theme-light .backend-editor-area{background-color:#fff}.playground-container.theme-light .backend-editor-layout.dock-right .backend-editor-area{border-right-color:#e2e8f0}.playground-container.theme-light .backend-editor-layout.dock-left .backend-editor-area{border-left-color:#e2e8f0}.playground-container.theme-light .backend-terminal-pane{background-color:#f8fafc}.playground-container.theme-light .backend-editor-layout.dock-bottom .backend-terminal-pane{border-top-color:#e2e8f0}.playground-container.theme-light .backend-editor-layout.dock-right .backend-terminal-pane{border-left-color:#e2e8f0}.playground-container.theme-light .backend-editor-layout.dock-left .backend-terminal-pane{border-right-color:#e2e8f0}.playground-container.theme-light .drawer-header{background-color:#f1f5f9;border-bottom-color:#e2e8f0;color:#475569}.playground-container.theme-light .dock-btn-group{background-color:#fff;border-color:#cbd5e1}.playground-container.theme-light .dock-btn{color:#64748b}.playground-container.theme-light .dock-btn:hover{color:#0f172a;background-color:#f1f5f9}.playground-container.theme-light .dock-btn.active{color:#4f46e5;background-color:#e0e7ff}.playground-container.theme-light .drawer-tab{color:#64748b}.playground-container.theme-light .drawer-tab:hover{color:#0f172a}.playground-container.theme-light .drawer-tab.active{color:#4f46e5;border-bottom-color:#4f46e5}.playground-container.theme-light .output-console{background-color:#fff;color:#0f172a}.playground-container.theme-light .output-console .stdout{color:#047857}.playground-container.theme-light .output-console .stderr{color:#dc2626}.playground-container.theme-light .output-console .compilerout{color:#d97706}.playground-container.theme-light .output-console .empty-prompt{color:#94a3b8}.playground-container.theme-light .stdin-box{background-color:#f8fafc}.playground-container.theme-light .stdin-input{background-color:#fff;border-color:#cbd5e1;color:#0f172a}.playground-container.theme-light .stdin-input:focus{border-color:#6366f1}.playground-container.theme-light .playground-editor-wrap .sp-file-explorer{background-color:#f8fafc!important;border-right-color:#e2e8f0!important}.playground-container.theme-light .playground-editor-wrap .sp-layout{background-color:#fff!important}.playground-container.theme-light .playground-editor-wrap .sp-tabs{background-color:#f1f5f9!important;border-bottom-color:#e2e8f0!important}.playground-container.theme-light .playground-editor-wrap .sp-tab-button{color:#64748b!important}.playground-container.theme-light .playground-editor-wrap .sp-tab-button[data-active=true]{color:#0f172a!important;background-color:#fff!important}.playground-container.theme-light .playground-editor-wrap .sp-code-editor{border-right-color:#e2e8f0!important}.playground-container.theme-light .resizer-handle{background-color:#e2e8f0}.playground-container.theme-light .resizer-handle:hover,.playground-container.theme-light .resizer-handle:active,body.is-resizing .playground-container.theme-light .resizer-handle{background-color:#6366f1!important}.playground-container.theme-light .sp-resizable-panel{border-color:#e2e8f0}.playground-container.theme-light .share-modal-card{background-color:#fff;border-color:#e2e8f0;color:#0f172a}.playground-container.theme-light .share-modal-card .bg-dark{background-color:#f8fafc!important;border-color:#e2e8f0!important;color:#0f172a!important}.playground-container.theme-light ::-webkit-scrollbar-track{background:#f1f5f9}.playground-container.theme-light ::-webkit-scrollbar-thumb{background:#cbd5e1}.playground-container.theme-light ::-webkit-scrollbar-thumb:hover{background:#94a3b8}.draggable-tabs-bar{height:38px;min-height:38px;max-height:38px;background-color:#141522;border-bottom:1px solid #282a3d;display:flex;align-items:stretch;justify-content:space-between;-webkit-user-select:none;user-select:none;overflow:hidden;position:sticky;top:0;left:0;right:0;z-index:10;flex-shrink:0}.coding-panel{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;overflow:hidden!important;position:relative!important}.coding-panel .draggable-tabs-bar{position:sticky!important;top:0!important;left:0!important;right:0!important;z-index:10!important;flex-shrink:0!important;height:38px!important;min-height:38px!important;max-height:38px!important}.coding-panel .sp-code-editor{flex:1 1 0%!important;width:100%!important;height:calc(100% - 38px)!important;max-height:calc(100% - 38px)!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border-right:none!important}.coding-panel .cm-editor{flex:1 1 0%!important;height:100%!important;max-height:100%!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}.coding-panel .cm-scroller{flex:1 1 0%!important;height:100%!important;max-height:100%!important;min-height:0!important;overflow:auto!important}.draggable-tabs-list{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:1;min-width:0}.draggable-tabs-list::-webkit-scrollbar{display:none}.draggable-tab-item{display:inline-flex;align-items:center;gap:7px;padding:0 12px;height:100%;font-size:12.5px;font-weight:500;color:#94a3b8;background-color:#161726;border-right:1px solid #232536;border-top:2px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .12s ease,color .12s ease;position:relative;flex-shrink:0;max-width:200px}.draggable-tab-item:hover{background-color:#1e2033;color:#e2e8f0}.draggable-tab-item.active{background-color:#1e2138;color:#fff;border-top:2px solid #6366f1}.draggable-tab-item.dragging{opacity:.4;background-color:#2b2e4a}.draggable-tab-item.drop-indicator-left{box-shadow:inset 3px 0 #6366f1}.draggable-tab-item.drop-indicator-right{box-shadow:inset -3px 0 #6366f1}.tab-icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-close-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;margin-left:2px;border-radius:4px;border:none;background:transparent;color:#64748b;cursor:pointer;opacity:.6;transition:all .15s}.draggable-tab-item:hover .tab-close-btn,.draggable-tab-item.active .tab-close-btn{opacity:1}.tab-close-btn:hover{background-color:#ef444433;color:#ef4444}.tab-add-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;border-left:1px solid #232536;background-color:#141522;color:#94a3b8;cursor:pointer;flex-shrink:0;transition:all .15s}.tab-add-btn:hover{background-color:#22253b;color:#f1f5f9}.tab-sidebar-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;border:none;border-right:1px solid #232536;background-color:#141522;color:#94a3b8;cursor:pointer;flex-shrink:0;transition:all .15s ease}.tab-sidebar-toggle-btn:hover{background-color:#22253b;color:#f1f5f9}.playground-container.theme-light .draggable-tabs-bar{background-color:#f1f5f9;border-bottom-color:#e2e8f0}.playground-container.theme-light .draggable-tab-item{background-color:#f8fafc;border-right-color:#e2e8f0;color:#64748b}.playground-container.theme-light .draggable-tab-item:hover{background-color:#fff;color:#0f172a}.playground-container.theme-light .draggable-tab-item.active{background-color:#fff;color:#0f172a;border-top-color:#6366f1}.playground-container.theme-light .tab-add-btn{background-color:#f1f5f9;border-left-color:#e2e8f0;color:#64748b}.playground-container.theme-light .tab-add-btn:hover{background-color:#e2e8f0;color:#0f172a}.playground-container.theme-light .tab-sidebar-toggle-btn{background-color:#f1f5f9;border-right-color:#e2e8f0;color:#64748b}.playground-container.theme-light .tab-sidebar-toggle-btn:hover{background-color:#e2e8f0;color:#0f172a}.playground-file-tree{height:100%;width:100%;display:flex;flex-direction:column;background-color:#151622;border-right:1px solid #232536;overflow:hidden;-webkit-user-select:none;user-select:none;position:relative}.explorer-header{height:40px;padding:0 10px 0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #232536;background-color:#171827;flex-shrink:0}.explorer-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:#94a3b8}.explorer-actions{display:flex;align-items:center;gap:4px}.explorer-tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;border:none;background:transparent;color:#cbd5e1;cursor:pointer;transition:all .15s ease}.explorer-tool-btn:hover{background-color:#2b2f48;color:#fff}.tree-content{flex:1;overflow-y:auto;padding:6px 0}.tree-folder-group{display:flex;flex-direction:column}.tree-item{display:flex;align-items:center;gap:6px;height:27px;font-size:12.5px;color:#cbd5e1;cursor:pointer;position:relative;transition:background-color .1s ease;padding-right:8px}.tree-item:hover{background-color:#1e2033;color:#fff}.tree-file.active{background-color:#24273f;color:#fff;font-weight:500}.tree-item.selected:not(.active){background-color:#1f2137;color:#fff}.tree-empty-folder{height:22px;display:flex;align-items:center}.tree-item.tree-item-dragging{opacity:.45;background-color:#6366f126!important}.tree-item.tree-drop-target{background-color:#6366f138!important;outline:2px dashed #6366f1!important;outline-offset:-2px;color:#fff!important}.tree-item.tree-item-cut{opacity:.5;filter:grayscale(.5);border:1px dashed rgba(255,255,255,.25)}.tree-content.tree-root-drop-target{outline:2px dashed rgba(99,102,241,.5);outline-offset:-4px;background-color:#6366f10d}.tree-arrow{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:#64748b;flex-shrink:0}.tree-item:hover .tree-arrow{color:#cbd5e1}.tree-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;flex-shrink:0}.tree-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-label{font-weight:500}.tree-hover-actions{display:none;align-items:center;gap:3px;margin-left:auto;flex-shrink:0}.tree-item:hover .tree-hover-actions{display:inline-flex}.tree-action-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;border:none;background:transparent;color:#cbd5e1;cursor:pointer;padding:0;transition:all .12s}.tree-action-btn:hover{background-color:#2e3250;color:#fff}.tree-action-btn.delete-btn:hover{background-color:#ef444433;color:#ef4444}.tree-creating-item{background-color:#1e2035}.tree-inline-input{background-color:#12131d;border:1px solid #6366f1;border-radius:3px;color:#fff;font-size:12px;padding:2px 6px;height:22px;width:calc(100% - 28px);outline:none;box-shadow:0 0 0 2px #6366f140}.tree-context-menu{position:absolute;z-index:1000;min-width:160px;background-color:#1c1e2e;border:1px solid #2e324a;border-radius:6px;padding:4px;box-shadow:0 10px 25px -5px #0009,0 0 0 1px #ffffff14}.context-menu-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:12px;color:#cbd5e1;background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;transition:all .12s}.context-menu-item:hover{background-color:#6366f1;color:#fff}.context-menu-item.text-danger:hover{background-color:#ef4444;color:#fff}.context-menu-divider{height:1px;background-color:#2a2d42;margin:4px 0}.tree-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background-color:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}.tree-modal-card{width:100%;max-width:380px;background-color:#181a29;border:1px solid #2e324c;border-radius:8px;padding:20px;box-shadow:0 20px 40px #000000b3;animation:modalFadeIn .15s ease-out}.playground-container.theme-light .playground-file-tree{background-color:#f8fafc;border-right-color:#e2e8f0}.playground-container.theme-light .explorer-header{background-color:#f1f5f9;border-bottom-color:#e2e8f0}.playground-container.theme-light .explorer-title,.playground-container.theme-light .explorer-tool-btn{color:#64748b}.playground-container.theme-light .explorer-tool-btn:hover{background-color:#e2e8f0;color:#0f172a}.playground-container.theme-light .tree-item,.theme-light .tree-item,[data-theme=light] .tree-item{color:#334155}.playground-container.theme-light .tree-item:hover,.theme-light .tree-item:hover,[data-theme=light] .tree-item:hover{background-color:#e2e8f0;color:#0f172a}.playground-container.theme-light .tree-file.active,.theme-light .tree-file.active,[data-theme=light] .tree-file.active{background-color:#e0e7ff;color:#3730a3}.playground-container.theme-light .tree-item.selected:not(.active),.theme-light .tree-item.selected:not(.active),[data-theme=light] .tree-item.selected:not(.active){background-color:#e2e8f0!important;color:#0f172a!important}.playground-container.theme-light .tree-item.selected:not(.active):hover,.theme-light .tree-item.selected:not(.active):hover,[data-theme=light] .tree-item.selected:not(.active):hover{background-color:#cbd5e1!important;color:#0f172a!important}.playground-container.theme-light .folder-label,.theme-light .folder-label,[data-theme=light] .folder-label{color:#1e293b}.playground-container.theme-light .tree-item.selected .folder-label,.theme-light .tree-item.selected .folder-label,[data-theme=light] .tree-item.selected .folder-label{color:#0f172a;font-weight:600}.playground-container.theme-light .tree-arrow,.theme-light .tree-arrow,[data-theme=light] .tree-arrow{color:#64748b}.playground-container.theme-light .tree-item:hover .tree-arrow,.playground-container.theme-light .tree-item.selected .tree-arrow,.theme-light .tree-item:hover .tree-arrow,.theme-light .tree-item.selected .tree-arrow,[data-theme=light] .tree-item:hover .tree-arrow,[data-theme=light] .tree-item.selected .tree-arrow{color:#1e293b}.playground-container.theme-light .tree-empty-folder,.theme-light .tree-empty-folder,[data-theme=light] .tree-empty-folder{color:#94a3b8}.playground-container.theme-light .tree-creating-item,.theme-light .tree-creating-item,[data-theme=light] .tree-creating-item{background-color:#e2e8f0;color:#0f172a}.playground-container.theme-light .tree-item.tree-drop-target,.theme-light .tree-item.tree-drop-target,[data-theme=light] .tree-item.tree-drop-target{background-color:#6366f126!important;outline:2px dashed #6366f1!important;color:#0f172a!important}.playground-container.theme-light .tree-item.tree-item-dragging,.theme-light .tree-item.tree-item-dragging,[data-theme=light] .tree-item.tree-item-dragging{opacity:.5;background-color:#6366f11f!important}.playground-container.theme-light .tree-item.tree-item-cut,.theme-light .tree-item.tree-item-cut,[data-theme=light] .tree-item.tree-item-cut{border:1px dashed rgba(0,0,0,.3)}.playground-container.theme-light .tree-content.tree-root-drop-target,.theme-light .tree-content.tree-root-drop-target,[data-theme=light] .tree-content.tree-root-drop-target{outline:2px dashed rgba(99,102,241,.5);background-color:#6366f114}.playground-container.theme-light .tree-action-btn{color:#64748b}.playground-container.theme-light .tree-action-btn:hover{background-color:#cbd5e1;color:#0f172a}.playground-container.theme-light .tree-inline-input{background-color:#fff;border-color:#6366f1;color:#0f172a}.playground-container.theme-light .tree-context-menu{background-color:#fff;border-color:#e2e8f0;box-shadow:0 10px 25px -5px #00000026}.playground-container.theme-light .context-menu-item{color:#334155}.playground-container.theme-light .context-menu-divider{background-color:#e2e8f0}.playground-container.theme-light .context-menu-item:hover{background-color:#e0e7ff;color:#4338ca}.playground-container.theme-light .context-menu-item.text-danger:hover{background-color:#fee2e2;color:#dc2626}.playground-container.theme-light .tree-modal-card{background-color:#fff;border-color:#e2e8f0;color:#0f172a}.tree-modal-highlight{color:#fff}.playground-container.theme-light .tree-modal-highlight,.theme-light .tree-modal-highlight,[data-theme=light] .tree-modal-highlight{color:#0f172a}.preview-panel-wrapper{display:flex;flex-direction:column;background-color:#141522;position:relative}.preview-top-bar{height:38px;background-color:#171827;border-bottom:1px solid #232536;display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex-shrink:0;z-index:10}.preview-bar-title{font-size:12px;font-weight:600;color:#94a3b8;letter-spacing:.3px}.preview-control-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:5px;font-size:12px;font-weight:500;background-color:#222538;border:1px solid #333752;color:#cbd5e1;cursor:pointer;transition:all .15s ease}.preview-control-btn:hover{background-color:#2b2f47;border-color:#4b5278;color:#fff}.preview-control-btn.active{background-color:#2d261e;border-color:#f59e0b;color:#fbbf24}.device-viewport-group{display:inline-flex;align-items:center;background-color:#12131d;border:1px solid #2b2e46;border-radius:6px;padding:2px;gap:2px}.device-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:500;color:#64748b;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .12s}.device-btn:hover{color:#cbd5e1;background-color:#1e2030}.device-btn.active{color:#fff;background-color:#6366f1}.playground-container.theme-light .preview-top-bar{background-color:#f1f5f9;border-bottom-color:#e2e8f0}.playground-container.theme-light .preview-bar-title{color:#64748b}.playground-container.theme-light .preview-control-btn{background-color:#fff;border-color:#cbd5e1;color:#334155}.playground-container.theme-light .preview-control-btn:hover{background-color:#f8fafc;color:#0f172a}.playground-container.theme-light .device-viewport-group{background-color:#e2e8f0;border-color:#cbd5e1}.playground-container.theme-light .device-btn{color:#475569}.playground-container.theme-light .device-btn.active{background-color:#6366f1;color:#fff}.preview-control-btn.preview-run-btn{background-color:#142e22;border-color:#10b981;color:#34d399;font-weight:600}.preview-control-btn.preview-run-btn:hover{background-color:#10b981;border-color:#10b981;color:#fff;box-shadow:0 2px 8px #10b98159}.preview-control-btn.preview-run-btn .run-icon-svg{fill:currentColor}.auto-preview-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;-webkit-user-select:none;user-select:none;margin:0 4px 0 10px;padding:2px 6px;border-radius:4px;transition:all .15s ease}.auto-preview-toggle:hover .auto-preview-label{color:#e2e8f0}.auto-preview-switch{width:24px;height:13px;background-color:#2b2e46;border-radius:10px;position:relative;transition:background-color .2s ease;display:inline-block;flex-shrink:0}.auto-preview-switch.is-active{background-color:#10b981}.auto-preview-knob{width:9px;height:9px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000004d}.auto-preview-switch.is-active .auto-preview-knob{transform:translate(11px)}.auto-preview-label{font-size:11px;font-weight:600;color:#94a3b8;letter-spacing:.2px;transition:color .15s ease}.playground-container.theme-light .preview-control-btn.preview-run-btn{background-color:#ecfdf5;border-color:#6ee7b7;color:#059669}.playground-container.theme-light .preview-control-btn.preview-run-btn:hover{background-color:#10b981;border-color:#10b981;color:#fff;box-shadow:0 2px 8px #10b98140}.playground-container.theme-light .auto-preview-switch{background-color:#cbd5e1}.playground-container.theme-light .auto-preview-switch.is-active{background-color:#10b981}.playground-container.theme-light .auto-preview-label{color:#64748b}.playground-container.theme-light .auto-preview-toggle:hover .auto-preview-label{color:#1e293b}