*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}.app-container{display:flex;min-height:100vh}.sidebar{width:300px;background:#2c3e50;color:#fff;padding:20px;overflow-y:auto}.main-content{flex:1;display:flex;flex-direction:column;padding:20px;gap:20px}.builder-panel,.preview-panel,.list-panel{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 10px #0000001a}.form-meta{margin-bottom:20px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500}.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.form-group textarea{resize:vertical}.field-types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.field-type-btn{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.field-type-btn:hover{opacity:.9;transform:translateY(-1px)}.field-type-btn.text{background-color:#a5d8ff;color:#1864ab}.field-type-btn.email{background-color:#b2f2bb;color:#2b8a3e}.field-type-btn.password{background-color:#ffc9c9;color:#c92a2a}.field-type-btn.url{background-color:#d8f5a2;color:#5c940d}.field-type-btn.tel{background-color:#ffd8a8;color:#e67700}.field-type-btn.number{background-color:#eebefa;color:#862e9c}.field-type-btn.range{background-color:#bac8ff;color:#364fc7}.field-type-btn.date{background-color:#99e9f2;color:#0b7285}.field-type-btn.time{background-color:#ffdeeb;color:#a61e4d}.field-type-btn.textarea{background-color:#d0ebff;color:#1971c2}.field-type-btn.select{background-color:#fcc2d7;color:#c2255c}.field-type-btn.checkbox{background-color:#fff3bf;color:#e67700}.field-type-btn.radio{background-color:#c3fae8;color:#087f5b}.field-type-btn.file{background-color:#faa2c1;color:#a61e4d}.fields-container{display:flex;flex-direction:column;gap:20px;flex:1}.fields-list{max-height:300px;overflow-y:auto;padding-right:10px}.field-item{padding:12px;border:1px solid #ddd;border-radius:4px;margin-bottom:10px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.field-item.text{border-left:4px solid #a5d8ff}.field-item.email{border-left:4px solid #b2f2bb}.field-item.password{border-left:4px solid #ffc9c9}.field-item.url{border-left:4px solid #d8f5a2}.field-item.tel{border-left:4px solid #ffd8a8}.field-item.number{border-left:4px solid #eebefa}.field-item.range{border-left:4px solid #bac8ff}.field-item.date{border-left:4px solid #99e9f2}.field-item.time{border-left:4px solid #ffdeeb}.field-item.textarea{border-left:4px solid #d0ebff}.field-item.select{border-left:4px solid #fcc2d7}.field-item.checkbox{border-left:4px solid #fff3bf}.field-item.radio{border-left:4px solid #c3fae8}.field-item.file{border-left:4px solid #faa2c1}.field-item:hover{transform:translateY(-2px);box-shadow:0 2px 5px #0000001a}.field-item.active{background:#ebf5fb;border-color:#3498db}.field-header{display:flex;align-items:center;gap:10px}.field-type{font-size:12px;background:#3498db;color:#fff;padding:2px 6px;border-radius:10px}.field-label{flex:1;font-weight:500}.required-marker{color:#e74c3c;margin-left:5px}.delete-btn{background:#e74c3c;color:#fff;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px}.field-editor{padding:20px;background:#f8f9fa;border-radius:4px;border-top:3px solid #3498db;position:sticky;bottom:0;margin-top:auto}.field-editor.text{border-top-color:#a5d8ff}.field-editor.email{border-top-color:#b2f2bb}.field-editor.password{border-top-color:#ffc9c9}.field-editor.url{border-top-color:#d8f5a2}.field-editor.tel{border-top-color:#ffd8a8}.field-editor.number{border-top-color:#eebefa}.field-editor.range{border-top-color:#bac8ff}.field-editor.date{border-top-color:#99e9f2}.field-editor.time{border-top-color:#ffdeeb}.field-editor.textarea{border-top-color:#d0ebff}.field-editor.select{border-top-color:#fcc2d7}.field-editor.checkbox{border-top-color:#fff3bf}.field-editor.radio{border-top-color:#c3fae8}.field-editor.file{border-top-color:#faa2c1}.options-editor{margin-top:15px}.option-item{display:flex;gap:10px;margin-bottom:8px;align-items:center}.add-option{background:#2ecc71;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px;margin-top:8px}.add-option:hover{background:#27ae60}.remove-option{background:#e74c3c;color:#fff;border:none;padding:2px 6px;border-radius:4px;cursor:pointer;font-size:12px}.form-actions{margin-top:20px;text-align:right}.save-btn{background:#2ecc71;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:16px;transition:background .2s}.save-btn:hover{background:#27ae60}.preview-empty{text-align:center;padding:40px;color:#777}.form-description{color:#666;margin-bottom:15px}.form-field{margin-bottom:20px}.form-field.text .form-input{border-left:4px solid #a5d8ff}.form-field.email .form-input{border-left:4px solid #b2f2bb}.form-field.password .form-input{border-left:4px solid #ffc9c9}.form-field.url .form-input{border-left:4px solid #d8f5a2}.form-field.tel .form-input{border-left:4px solid #ffd8a8}.form-field.number .form-input{border-left:4px solid #eebefa}.form-field.range .form-input{border-left:4px solid #bac8ff}.form-field.date .form-input{border-left:4px solid #99e9f2}.form-field.time .form-input{border-left:4px solid #ffdeeb}.form-field.textarea textarea{border-left:4px solid #d0ebff}.form-field.select select{border-left:4px solid #fcc2d7}.form-field.checkbox input{accent-color:#fff3bf}.form-field.radio input{accent-color:#c3fae8}.form-field.file input{border-left:4px solid #faa2c1}.form-field label{display:block;margin-bottom:5px;font-weight:500}.form-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;background-color:#fff}.form-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.required{color:#e74c3c}.help-text{font-size:12px;color:#666;margin-top:5px}.error-message{color:#e74c3c;font-size:12px;margin-top:5px}.has-error .form-input{border-color:#e74c3c}.submit-btn{background:#2ecc71;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:16px;margin-top:15px}.submit-btn:hover{background:#27ae60}.list-panel{height:100%}.forms-container{margin-top:15px}.form-card{background:#fff;border-radius:6px;padding:15px;margin-bottom:15px;cursor:pointer;transition:all .2s;border:1px solid #e0e0e0}.form-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.form-title{margin:0;font-size:18px;color:#2c3e50}.delete-btn{background:#e74c3c;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px}.delete-btn:hover{background:#c0392b}.form-meta{display:flex;flex-direction:column;gap:8px}.meta-item{display:flex;align-items:center}.meta-label{font-weight:600;color:#7f8c8d;width:100px;font-size:13px}.meta-value{color:#34495e;font-size:14px}.empty-list{text-align:center;padding:30px;color:#7f8c8d;font-style:italic}.radio-group{display:flex;flex-direction:column;gap:8px}.radio-group label{display:flex;align-items:center;gap:8px;cursor:pointer}@media (max-width: 768px){.app-container{flex-direction:column}.sidebar{width:100%;height:auto}.main-content{padding:15px}.fields-container{flex-direction:column}.field-editor{position:static}}