.data-fields-panel{background:#f5f5f5;flex-direction:column;flex:1;min-height:0;padding:16px;display:flex;overflow:hidden}.data-fields-panel h3{color:#333;flex-shrink:0;margin:0 0 16px;font-size:14px;font-weight:600}.data-fields-fetch{background:#fff;border:1px solid #ddd;border-radius:4px;flex-shrink:0;margin-bottom:16px;padding:12px}.data-fields-fetch .property-group{margin-bottom:8px}.data-fields-fetch label{color:#555;margin-bottom:4px;font-size:12px;font-weight:500;display:block}.data-fields-fetch input{border:1px solid #ddd;border-radius:3px;width:100%;padding:6px 8px;font-size:13px}.fetch-button{color:#fff;cursor:pointer;background:#007acc;border:none;border-radius:4px;width:100%;padding:8px;font-size:13px;transition:background .2s}.fetch-button:hover:not(:disabled){background:#005a9e}.fetch-button:disabled{cursor:not-allowed;background:#ccc}.data-fields-error{color:#c62828;background:#ffebee;border:1px solid #ef5350;border-radius:4px;flex-shrink:0;margin-bottom:12px;padding:8px 12px;font-size:12px}.data-fields-empty{text-align:center;color:#999;flex-shrink:0;padding:24px 12px;font-size:12px}.data-fields-empty p{margin:0 0 4px}.data-fields-empty small{color:#bbb;font-size:11px;display:block}.data-fields-list{background:#fff;border:1px solid #ddd;border-radius:4px;flex:1;min-height:0;max-height:100%;overflow:hidden auto}.data-fields-list::-webkit-scrollbar{width:8px}.data-fields-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.data-fields-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.data-fields-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.data-fields-help{color:#1976d2;text-align:center;background:#e3f2fd;border-bottom:1px solid #90caf9;padding:8px 12px;font-size:11px}.data-field-item{border-bottom:1px solid #f0f0f0}.data-field-item:last-child{border-bottom:none}.data-field-row{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:6px 8px;font-size:12px;transition:background .15s;display:flex}.data-field-row:hover{background:#f5f5f5}.data-field-row[draggable=true]:active{opacity:.5;cursor:grabbing}.expand-icon{color:#666;cursor:pointer;flex-shrink:0;width:12px;font-size:10px}.expand-icon:hover{color:#007acc}.expand-icon-placeholder{flex-shrink:0;width:12px}.field-type{text-transform:uppercase;border-radius:3px;flex-shrink:0;padding:2px 6px;font-size:10px;font-weight:600}.field-type-string{color:#2e7d32;background:#e8f5e9}.field-type-number{color:#1565c0;background:#e3f2fd}.field-type-boolean{color:#e65100;background:#fff3e0}.field-type-array{color:#7b1fa2;background:#f3e5f5}.field-type-object{color:#c2185b;background:#fce4ec}.field-path{color:#333;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:Consolas,Monaco,Courier New,monospace;overflow:hidden}.field-sample{color:#666;text-overflow:ellipsis;white-space:nowrap;background:#f5f5f5;border-radius:3px;flex-shrink:0;max-width:120px;padding:2px 6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:11px;overflow:hidden}.data-field-children{border-left:2px solid #e0e0e0;margin-left:20px}.data-field-row[draggable=true]{cursor:grab}.data-field-row[draggable=true]:before{content:"⋮⋮";color:#ccc;margin-right:4px;font-size:10px}
.designer-canvas-container{background:#e0e0e0;flex:1;position:relative;overflow:auto}.designer-canvas-empty{color:#999;justify-content:center;align-items:center;height:100%;font-size:16px;display:flex}.canvas-workspace{justify-content:center;align-items:flex-start;min-height:100%;padding:40px;display:flex}.designer-canvas{cursor:default;position:relative;box-shadow:0 2px 12px #0003}.canvas-grid{pointer-events:none;background-image:repeating-linear-gradient(0deg,#0000,#0000 7px,#0000000d 7px 8px),repeating-linear-gradient(90deg,#0000,#0000 7px,#0000000d 7px 8px);position:absolute;inset:0}.canvas-margins{pointer-events:none;border:1px dashed #ff00004d;position:absolute}.page-break-indicator{pointer-events:none;border-top:2px dashed #999}.page-break-indicator:before{content:"";background:repeating-linear-gradient(90deg,#999 0 10px,#0000 10px 20px);height:2px;position:absolute;top:-1px;left:0;right:0}.canvas-element{cursor:move;-webkit-user-select:none;user-select:none;position:absolute}.canvas-element-content{pointer-events:none;width:100%;height:100%}.canvas-element.selected .canvas-element-outline{pointer-events:none;border:2px solid #2196f3;position:absolute;inset:-2px}.resize-handle{z-index:10;background:#fff;border:2px solid #2196f3;border-radius:50%;width:8px;height:8px;position:absolute}.resize-handle-nw{cursor:nw-resize;top:-4px;left:-4px}.resize-handle-ne{cursor:ne-resize;top:-4px;right:-4px}.resize-handle-sw{cursor:sw-resize;bottom:-4px;left:-4px}.resize-handle-se{cursor:se-resize;bottom:-4px;right:-4px}@media print{.designer-canvas-container{display:none!important}}
.element-palette{background:#f9f9f9;border-bottom:1px solid #ddd;flex-shrink:0;min-width:180px;padding:16px}.element-palette h3{color:#333;margin:0 0 16px;font-size:14px;font-weight:600}.palette-section{background:#fff;border:1px solid #e1e1e1;border-radius:6px;margin-bottom:10px;overflow:hidden}.palette-section-header{text-align:left;cursor:pointer;background:#f5f5f5;border:none;border-bottom:1px solid #e8e8e8;align-items:center;gap:8px;width:100%;padding:8px 10px;font-weight:600;display:flex}.element-palette-buttons{flex-direction:column;gap:8px;padding:10px;display:flex}.element-palette-buttons button{cursor:pointer;text-align:left;background:#fff;border:1px solid #ddd;border-radius:4px;padding:10px 12px;font-size:13px;transition:all .2s}.element-palette-buttons button:hover{background:#f0f0f0;border-color:#999}.element-palette-buttons button:active{background:#e0e0e0}
.property-panel{background:#f9f9f9;border-left:1px solid #ddd;min-width:280px;max-width:320px;height:100%;padding:16px;overflow-y:auto}.property-panel h3{color:#333;margin:0 0 16px;font-size:14px;font-weight:600}.property-panel h4{color:#555;border-bottom:1px solid #e0e0e0;margin:12px 0 8px;padding-bottom:4px;font-size:13px;font-weight:600}.property-section{margin-bottom:24px}.property-section:first-of-type{margin-top:0}.property-panel-empty{color:#999;font-size:13px}.property-group{margin-bottom:16px}.property-group label{color:#555;margin-bottom:6px;font-size:12px;font-weight:500;display:block}.property-group input[type=text],.property-group input[type=number],.property-group textarea,.property-group select{border:1px solid #ddd;border-radius:4px;width:100%;padding:6px 8px;font-family:inherit;font-size:13px}.property-group input[type=color]{cursor:pointer;border:1px solid #ddd;border-radius:4px;width:100%;height:36px}.property-group textarea{resize:vertical;min-height:60px;font-family:inherit}.property-grid-2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.table-columns-list{background:#fff;border:1px solid #ddd;border-radius:4px;max-height:300px;overflow-y:auto}.table-column-item{border-bottom:1px solid #eee}.table-column-item:last-child{border-bottom:none}.table-column-header{justify-content:space-between;align-items:center;padding:8px;font-size:13px;display:flex}.table-column-actions{gap:4px;display:flex}.table-column-actions button{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:3px;padding:2px 6px;font-size:11px}.table-column-actions button:hover{background:#f0f0f0}.table-column-editor{background:#f9f9f9;border-top:1px solid #eee;flex-direction:column;gap:6px;padding:8px;display:flex}.table-column-editor input,.table-column-editor select{padding:4px 6px;font-size:12px}.add-column-button{cursor:pointer;color:#666;background:#fff;border:1px dashed #999;border-radius:4px;width:100%;margin-top:8px;padding:8px;font-size:12px}.add-column-button:hover{background:#f0f0f0;border-color:#666}.align-buttons{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.align-buttons button{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:4px;padding:8px;font-size:16px}.align-buttons button:hover{background:#f0f0f0;border-color:#999}@media print{.property-panel{display:none!important}}
.resizable-panel{flex-direction:column;flex-shrink:0;display:flex;position:relative;overflow:hidden}.resizable-panel-left{background:#fff;border-right:1px solid #e0e0e0}.resizable-panel-right{background:#fff;border-left:1px solid #e0e0e0;overflow-y:auto}.resize-handle{cursor:col-resize;z-index:100;justify-content:center;align-items:center;width:8px;transition:background-color .2s;display:flex;position:absolute;top:0;bottom:0}.resize-handle-left{right:-4px}.resize-handle-right{left:-4px}.resize-handle:hover{background-color:#3b82f61a}.resize-handle:hover .resize-handle-line{background-color:#3b82f6;box-shadow:0 0 4px #3b82f64d}.resize-handle:active{background-color:#3b82f633}.resize-handle-line{pointer-events:none;background-color:#d1d5db;border-radius:2px;width:2px;height:40px;transition:all .2s}body[style*="cursor: col-resize"] .resize-handle-line{background-color:#3b82f6;height:100%;box-shadow:0 0 8px #3b82f680}@media (max-width:900px){.resize-handle{display:none}}
.toolbar{background:#fff;border-bottom:1px solid #ddd;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex}.toolbar-group{align-items:center;gap:4px;display:flex}.toolbar-separator{background:#ddd;width:1px;height:24px;margin:0 4px}.toolbar button{cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #ddd;border-radius:4px;padding:6px 10px;font-size:13px;transition:all .2s}.toolbar button:hover:not(:disabled){background:#f0f0f0;border-color:#999}.toolbar button:active:not(:disabled){background:#e0e0e0}.toolbar button:disabled{opacity:.5;cursor:not-allowed}.toolbar-zoom-display{color:#666;text-align:center;min-width:45px;padding:0 8px;font-size:13px}.toolbar-template-name{color:#333;margin-left:auto;font-size:14px;font-weight:600}.toolbar-dropdown{position:relative}.toolbar-dropdown-menu{z-index:1000;background:#fff;border:1px solid #ddd;border-radius:4px;min-width:200px;max-height:300px;margin-top:4px;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 2px 8px #00000026}.toolbar-dropdown-item{cursor:pointer;padding:8px 12px;font-size:13px}.toolbar-dropdown-item:hover:not(.disabled){background:#f0f0f0}.toolbar-dropdown-item.disabled{color:#999;cursor:default}@media print{.toolbar{display:none!important}}