:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.form-builder[data-v-c1f483ae]{display:grid;grid-template-columns:250px minmax(200px,650px) 300px;gap:16px;min-height:100vh;background-color:#f8fafc;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;width:100%;margin:0}.toolbox[data-v-c1f483ae],.canvas[data-v-c1f483ae],.properties-panel[data-v-c1f483ae]{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000000d;padding:16px;overflow-y:auto;height:calc(100vh - var(--navbar-height) - var(--footer-height) - 0px);scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;top:calc(var(--navbar-height) + 16px)}.canvas[data-v-c1f483ae],.properties-panel[data-v-c1f483ae]{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000000d;padding:16px;overflow-y:auto;height:100%;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9}.toolbox[data-v-c1f483ae]::-webkit-scrollbar,.canvas[data-v-c1f483ae]::-webkit-scrollbar,.properties-panel[data-v-c1f483ae]::-webkit-scrollbar{width:8px}.toolbox[data-v-c1f483ae]::-webkit-scrollbar-track,.canvas[data-v-c1f483ae]::-webkit-scrollbar-track,.properties-panel[data-v-c1f483ae]::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.toolbox[data-v-c1f483ae]::-webkit-scrollbar-thumb,.canvas[data-v-c1f483ae]::-webkit-scrollbar-thumb,.properties-panel[data-v-c1f483ae]::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease}.toolbox[data-v-c1f483ae]::-webkit-scrollbar-thumb:hover,.canvas[data-v-c1f483ae]::-webkit-scrollbar-thumb:hover,.properties-panel[data-v-c1f483ae]::-webkit-scrollbar-thumb:hover{background:#94a3b8}.toolbox-item[data-v-c1f483ae]{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;margin-bottom:12px;cursor:move;transition:all .2s ease-in-out;font-weight:500;color:#334155}.toolbox-item[data-v-c1f483ae]:hover{background:#e2e8f0;transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a}.form-canvas[data-v-c1f483ae]{min-height:400px;border:2px dashed #cbd5e1;border-radius:8px;padding:24px;transition:border-color .2s ease-in-out}.form-canvas[data-v-c1f483ae]:empty{display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:.875rem}.form-canvas[data-v-c1f483ae]:empty:before{content:"Drag and drop form elements here"}.form-element[data-v-c1f483ae]{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;cursor:move;transition:all .2s ease-in-out;position:relative}.delete-element[data-v-c1f483ae]{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:#ef4444;color:#fff;border:none;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:16px;line-height:1;opacity:.8;transition:all .2s ease-in-out;padding:0}.delete-element[data-v-c1f483ae]:hover{opacity:1;background:#dc2626}.form-element:hover .delete-element[data-v-c1f483ae]{display:flex}.form-element[data-v-c1f483ae]:hover{border-color:#3b82f6;box-shadow:0 4px 6px -1px #3b82f61a}.form-element.selected[data-v-c1f483ae]{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.element-label[data-v-c1f483ae]{display:block;margin-bottom:8px;font-weight:600;color:#1e293b;font-size:.875rem;text-align:left}.option-item[data-v-c1f483ae]{display:flex;align-items:center;gap:8px;margin-bottom:12px;text-align:left;position:relative;padding-left:4px}.option-item input[type=checkbox][data-v-c1f483ae],.option-item input[type=radio][data-v-c1f483ae]{margin:0;width:16px;height:16px;cursor:pointer}.option-item label[data-v-c1f483ae]{text-align:left;margin:0;font-size:.875rem;color:#1e293b;cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}.form-input[data-v-c1f483ae]{width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;transition:all .2s ease-in-out;background-color:#fff;color:#1e293b;text-align:left}.form-input[data-v-c1f483ae]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633;background-color:#fff}.property-group[data-v-c1f483ae]{margin-bottom:15px}.property-group label[data-v-c1f483ae]{display:block;margin-bottom:6px;font-weight:500;color:#475569;font-size:.875rem;text-align:left}.property-input[data-v-c1f483ae]{width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;transition:all .2s ease-in-out;background-color:#fff;color:#1e293b}.property-input[data-v-c1f483ae]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.no-selection[data-v-c1f483ae]{color:#94a3b8;font-style:italic;text-align:center;padding:24px;font-size:.875rem}h3[data-v-c1f483ae]{margin-top:0;margin-bottom:24px;color:#1e293b;font-weight:600;font-size:1.125rem;letter-spacing:-.025em}.canvas-header[data-v-c1f483ae]{display:flex;justify-content:flex-end;margin-bottom:16px}.reset-button[data-v-c1f483ae]{padding:8px 16px;background:#f1f5f9;color:#000;border:none;border-radius:40px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease-in-out}.reset-button[data-v-c1f483ae]:hover{background:#e2e8f0;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.reset-button[data-v-c1f483ae]:focus{outline:none;box-shadow:0 0 0 3px #0000001a}.copy-button[data-v-c1f483ae]{padding:8px 16px;background:#f1f5f9;color:#000;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease-in-out}.copy-button[data-v-c1f483ae]:hover{background:#2563eb}.copy-button[data-v-c1f483ae]:focus{outline:none;box-shadow:0 0 0 2px #3b82f633}.modal-overlay[data-v-c1f483ae]{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.modal-content[data-v-c1f483ae]{background:#fff;padding:1.5rem;border-radius:12px;width:95%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative;animation:slideIn .2s ease-out}.code-block[data-v-c1f483ae]{background:#1e293b;border-radius:8px;padding:16px;margin:16px 0;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.5;color:#e2e8f0;white-space:pre-wrap;text-align:left;word-break:break-word;width:100%;max-width:100%}.code-block[data-v-c1f483ae] code{color:#d4d4d4}.code-block[data-v-c1f483ae] .tag{color:#569cd6}.code-block[data-v-c1f483ae] .attribute{color:#9cdcfe}.code-block[data-v-c1f483ae] .value{color:#ce9178}.code-block[data-v-c1f483ae] .comment{color:#6a9955}.modal-overlay[data-v-c1f483ae]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content[data-v-c1f483ae]{background-color:#fff;padding:2.5rem;border-radius:12px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative;margin:auto;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.modal-close[data-v-c1f483ae]{position:absolute;top:1rem;right:1rem;background:#475569;color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;z-index:1010;transition:background-color .2s ease}.modal-close[data-v-c1f483ae]:hover{background:#334155}.modal-close[data-v-c1f483ae]:focus{outline:none;box-shadow:0 0 0 2px #47556933}.copy-button[data-v-c1f483ae]{margin-top:1rem;padding:.5rem 1rem;background-color:#f1f5f9;color:#000;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease-in-out}.copy-button[data-v-c1f483ae]:hover{background-color:#e9eaeb}.download-button[data-v-c1f483ae]{padding:8px 16px;background:#f1f5f9;color:#000;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease-in-out;margin-left:8px}.download-button[data-v-c1f483ae]:hover{background-color:#e9eaeb}.download-button[data-v-c1f483ae]:focus{outline:none;box-shadow:0 0 0 2px #10b98133}.property-checkbox[data-v-c1f483ae]{margin:0;padding:0;width:auto;display:block}.color-picker-wrapper[data-v-c1f483ae]{display:flex;align-items:center;gap:10px}.color-input[data-v-c1f483ae]{flex:1}.color-preview[data-v-c1f483ae]{width:30px;height:30px;border-radius:4px;border:1px solid #e2e8f0}:root{--primary-bg: #f8fafc;--text-primary: #1e293b;--text-secondary: #475569;--nav-bg: #ffffff;--footer-bg: #1e293b;--navbar-height: 4rem;--footer-height: 5rem}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--primary-bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;overflow:hidden}.app-container{height:100vh;display:flex;flex-direction:column;overflow:hidden}.navbar{background-color:var(--nav-bg);box-shadow:0 1px 3px #0000001a;padding:1rem 0;position:sticky;top:0;z-index:1000;width:100%;height:var(--navbar-height)}.nav-content{width:100%;max-width:1200px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;align-items:center}.nav-brand{font-size:1.5rem;font-weight:600;color:var(--text-primary);text-decoration:none;transition:color .2s ease}.nav-brand:hover{color:#3b82f6}.nav-links{display:flex;gap:2rem}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s ease}.nav-link:hover{color:var(--text-primary)}.main-content{flex:1;height:calc(100vh - var(--navbar-height) - var(--footer-height));overflow:hidden;padding:0;max-width:1200px;margin:0 auto}.footer{background-color:#f8fafc;border-top:1px solid #e2e8f0;color:#475569;padding:1.5rem 0;height:var(--footer-height)}.footer-content{max-width:1200px;margin:0 auto;padding:0 1rem;text-align:center;font-size:.875rem;display:flex;justify-content:center;align-items:center;gap:.5rem}.footer-content p{color:#64748b;font-weight:500}.footer-link{color:inherit;text-decoration:none;transition:color .2s ease}.footer-link:hover{color:#3b82f6}