.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-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}.playground-editor-wrap .sp-wrapper{height:100%!important;max-height:100%!important;display:flex!important;flex-direction:column!important;flex:1!important;--sp-layout-height: 100% !important}.playground-editor-wrap .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{height:100%!important;max-height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}.playground-editor-wrap .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{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{height:100%!important;max-height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}.playground-editor-wrap .sp-preview-iframe{height:100%!important;width:100%!important;flex:1!important;border:none!important;background:#fff!important}.playground-editor-wrap .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{background-color:#1a1c2b!important;border-bottom:1px solid #282a3d!important}.playground-editor-wrap .sp-tab-button{color:#94a3b8!important}.playground-editor-wrap .sp-tab-button[data-active=true]{color:#fff!important;background-color:#24273a!important}.playground-editor-wrap .cm-editor,.playground-editor-wrap .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{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-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}