.app[data-v-83616b36]{display:flex;flex-direction:column;height:100vh;background:var(--bg-primary)}.app-header[data-v-83616b36]{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);animation:slideUp-83616b36 .4s ease-out}.header-left[data-v-83616b36],.header-center[data-v-83616b36],.header-right[data-v-83616b36]{display:flex;align-items:center;gap:1rem}.logo[data-v-83616b36]{display:flex;align-items:center;gap:.75rem}.logo-icon[data-v-83616b36]{font-size:1.5rem}.logo-text[data-v-83616b36]{font-size:1.1rem;font-weight:600;background:linear-gradient(135deg,var(--accent-primary),#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-right[data-v-83616b36]{display:flex;align-items:center;gap:.75rem}.project-path[data-v-83616b36]{display:flex;align-items:center;gap:.4rem;padding:.4rem .8rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;font-size:.8rem;font-family:JetBrains Mono,Fira Code,monospace;cursor:pointer;transition:all .2s ease}.project-path[data-v-83616b36]:hover{background:var(--bg-elevated);border-color:var(--accent-primary)}.project-path:hover .edit-icon[data-v-83616b36]{opacity:1}.path-icon[data-v-83616b36]{font-size:.9rem}.path-text[data-v-83616b36]{color:var(--accent-primary);font-weight:500}.edit-icon[data-v-83616b36]{font-size:.75rem;opacity:.3;margin-left:.25rem;transition:opacity .2s ease}.source-badge[data-v-83616b36]{font-size:.65rem;padding:.15rem .4rem;background:#3b82f633;color:#60a5fa;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.modal-overlay[data-v-83616b36]{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn-83616b36 .2s ease}.modal[data-v-83616b36]{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;width:400px;max-width:90vw;animation:slideUp-83616b36 .3s ease}.modal-wide[data-v-83616b36]{width:480px}.modal-header[data-v-83616b36]{display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border-color)}.modal-icon[data-v-83616b36]{font-size:1.25rem}.modal-title[data-v-83616b36]{font-size:1rem;font-weight:600;color:var(--text-primary)}.modal-body[data-v-83616b36]{padding:1.25rem}.form-group[data-v-83616b36]{margin-bottom:1.25rem}.form-group[data-v-83616b36]:last-child{margin-bottom:0}.form-label[data-v-83616b36]{display:block;font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.form-hint[data-v-83616b36]{margin-top:.5rem;font-size:.75rem;color:var(--text-muted)}.source-toggle[data-v-83616b36]{display:flex;gap:.5rem}.toggle-btn[data-v-83616b36]{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;font-size:.85rem;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.toggle-btn[data-v-83616b36]:hover{background:var(--bg-elevated);color:var(--text-primary)}.toggle-btn.active[data-v-83616b36]{background:#6366f126;border-color:var(--accent-primary);color:var(--accent-primary)}.toggle-icon[data-v-83616b36]{font-size:1rem}.path-input[data-v-83616b36]{width:100%;padding:.75rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;font-size:.9rem;font-family:JetBrains Mono,Fira Code,monospace;color:var(--text-primary);outline:none;transition:border-color .2s ease}.path-input[data-v-83616b36]:focus{border-color:var(--accent-primary)}.path-input[data-v-83616b36]::placeholder{color:var(--text-muted)}.modal-footer[data-v-83616b36]{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.25rem;border-top:1px solid var(--border-color)}.btn[data-v-83616b36]{padding:.5rem 1rem;border-radius:6px;font-size:.85rem;font-weight:500;border:none;cursor:pointer;transition:all .2s ease}.btn-secondary[data-v-83616b36]{background:var(--bg-tertiary);color:var(--text-secondary)}.btn-secondary[data-v-83616b36]:hover{background:var(--bg-elevated);color:var(--text-primary)}.btn-primary[data-v-83616b36]{background:var(--accent-primary);color:#fff}.btn-primary[data-v-83616b36]:hover{background:var(--accent-hover)}@keyframes fadeIn-83616b36{0%{opacity:0}to{opacity:1}}.badge[data-v-83616b36]{display:flex;align-items:center;gap:.5rem;padding:.4rem 1rem;background:#10b9811a;border:1px solid rgba(16,185,129,.3);border-radius:999px;font-size:.8rem;font-weight:500;color:var(--success)}.badge-dot[data-v-83616b36]{width:8px;height:8px;background:var(--success);border-radius:50%;box-shadow:0 0 10px var(--success)}.app-main[data-v-83616b36]{flex:1;overflow:hidden;animation:slideUp-83616b36 .5s ease-out;animation-delay:.1s;animation-fill-mode:both}.sandpack-layout[data-v-83616b36]{height:100%!important;border:none!important;border-radius:0!important}[data-v-83616b36] .sp-wrapper{height:100%!important}[data-v-83616b36] .sp-layout{height:100%!important;border:none!important;background:var(--bg-primary)!important}[data-v-83616b36] .sp-stack{height:100%!important}[data-v-83616b36] .sp-file-explorer{background:var(--bg-secondary);border-right:1px solid var(--border-color);min-width:180px;max-width:200px}[data-v-83616b36] .sp-code-editor{background:var(--bg-tertiary);flex:1!important;height:100%!important}[data-v-83616b36] .sp-preview{background:var(--bg-secondary);flex:1!important;height:100%!important}[data-v-83616b36] .sp-preview-container{background:#fff;height:100%!important}[data-v-83616b36] .sp-preview-iframe{height:100%!important}[data-v-83616b36] .sp-tabs{background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}[data-v-83616b36] .sp-tab-button{color:var(--text-secondary)}[data-v-83616b36] .sp-tab-button[data-active=true]{color:var(--accent-primary);background:var(--bg-tertiary)}[data-v-83616b36] .cm-editor{height:100%!important}[data-v-83616b36] .cm-scroller{height:100%!important;overflow:auto!important}.app-footer[data-v-83616b36]{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem 1rem;background:var(--bg-secondary);border-top:1px solid var(--border-color);font-size:.75rem;color:var(--text-muted)}.footer-divider[data-v-83616b36]{opacity:.3}.footer-badge[data-v-83616b36]{background:#10b9811a;color:var(--success);padding:.2rem .5rem;border-radius:4px;font-weight:500}.loading-state[data-v-83616b36],.error-state[data-v-83616b36]{display:flex;align-items:center;justify-content:center}.loading-content[data-v-83616b36],.error-content[data-v-83616b36]{text-align:center;color:var(--text-secondary)}.loading-spinner[data-v-83616b36]{width:40px;height:40px;margin:0 auto 1rem;border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;animation:spin-83616b36 1s linear infinite}@keyframes spin-83616b36{to{transform:rotate(360deg)}}.error-icon[data-v-83616b36]{font-size:3rem;display:block;margin-bottom:1rem}.error-message[data-v-83616b36]{margin-bottom:1rem;color:var(--error)}@keyframes slideUp-83616b36{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:root{--bg-primary: #0d0d12;--bg-secondary: #13131a;--bg-tertiary: #1a1a24;--bg-elevated: #21212d;--border-color: #2d2d3a;--border-active: #4f46e5;--text-primary: #f4f4f6;--text-secondary: #9ca3af;--text-muted: #6b7280;--accent-primary: #6366f1;--accent-hover: #818cf8;--accent-glow: rgba(99, 102, 241, .3);--success: #10b981;--warning: #f59e0b;--error: #ef4444;--font-sans: "Outfit", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6}#app{height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent-primary);color:#fff}button{font-family:var(--font-sans);cursor:pointer;border:none;outline:none;transition:all .2s ease}.cm-editor{height:100%;font-family:var(--font-mono)!important;font-size:14px}.cm-scroller{font-family:var(--font-mono)!important}.cm-focused{outline:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-slide-up{animation:slideUp .4s ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}