.app-container{width:100vw;height:100vh;overflow:hidden;position:fixed;top:0;left:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;contain:layout style paint;will-change:transform;transform:translateZ(0);backface-visibility:hidden;background-color:#fff!important}.loading,.error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#b0bec5,#90a4ae);color:#fff;text-align:center;padding:20px}.spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}.error h2{margin:0 0 16px;font-size:32px}.error p{margin:0 0 24px;font-size:18px;opacity:.9}.retry-button{background:#fff;color:#b0bec5;border:none;padding:12px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;margin:8px}.retry-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.panel-header{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;padding:8px 16px;margin:8px 16px;width:calc(100% - 32px);text-align:center}.header-content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%}.header-text{text-align:left;flex:1;min-width:0}.header-text h1{margin:0;font-size:16px;font-weight:700;color:#1e293b;white-space:nowrap}.header-subtitle{display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-align:left}.db-info,.db-name{font-size:12px;color:#64748b;font-weight:500;white-space:nowrap}.panel-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto;flex-shrink:0}.action-button{background:#fff;color:#374151;border:1px solid #e5e7eb;padding:5px 11px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 1px 2px #0000000d;line-height:1.2;height:26px;vertical-align:middle}.action-button:hover{background:#f9fafb;border-color:#d1d5db;box-shadow:0 2px 4px #0000001a}.action-button:active{transform:translateY(1px);box-shadow:0 1px 2px #0000000d}.action-button span{line-height:1.2;display:inline-block;vertical-align:middle}.action-icon{width:14px;height:14px;stroke-width:2;flex-shrink:0;display:inline-block;vertical-align:middle;margin:0;padding:0;line-height:1}.action-button.home-button{background:#fff;border-color:#e5e7eb;color:#374151}.action-button.home-button:hover{background:#f9fafb;border-color:#d1d5db}.action-button.highlight-active{background:#fef2f2;border-color:#fecaca;color:#dc2626}.action-button.highlight-active:hover{background:#fee2e2;border-color:#fca5a5}.action-button.highlight-active .action-icon{color:#dc2626}.table-controls{display:flex;gap:3px;background:#f8fafc;padding:3px;border-radius:6px;border:1px solid #e5e7eb;margin-left:8px;align-items:center;height:26px}.table-control-btn{background:transparent;border:none;padding:0;border-radius:4px;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;color:#64748b;line-height:1;height:20px;width:20px}.table-control-btn:hover{background:#f1f5f9;color:#374151}.table-control-btn.active{background:#fff;color:#1e293b;box-shadow:0 1px 2px #0000001a}.table-control-icon{width:14px;height:14px;stroke-width:2;display:block}.panel-info{background:#fff;border-radius:12px 12px 0 0;box-shadow:0 -4px 20px #00000026;margin:0 16px;max-width:calc(100% - 32px);transition:all .3s ease}.panel-info.panel-open{max-height:400px}.panel-info.panel-closed{max-height:48px}.panel-header-toggle{padding:12px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e7eb;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:600;color:#1e293b}.panel-header-toggle:hover{background:#f9fafb}.toggle-icon{font-size:12px;color:#64748b}.panel-content{padding:20px;overflow-y:auto;max-height:350px}.table-data-section h3{margin:0 0 16px;font-size:18px;font-weight:600;color:#1e293b}.data-table-container{overflow-x:auto;border-radius:8px;border:1px solid #e5e7eb}.data-table{width:100%;border-collapse:collapse;font-size:14px}.data-table thead{background:#f9fafb}.data-table th{padding:12px 16px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;white-space:nowrap}.data-table td{padding:12px 16px;border-bottom:1px solid #f3f4f6;color:#6b7280}.data-table tbody tr:hover{background:#f9fafb}.no-data{text-align:center;padding:40px;color:#9ca3af;font-size:14px}.no-selection{text-align:center;padding:40px;color:#9ca3af}.table-node{background:#fff;border:2px solid #e5e7eb;border-radius:8px;overflow:visible;font-family:inherit;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;min-height:auto!important;height:auto!important;max-height:none!important;display:flex!important;flex-direction:column!important}.table-node:hover{border-color:#b0bec5;box-shadow:0 6px 16px #6366f133;transform:translateY(-2px)}.table-node.highlighted{border:3px solid #3182ce!important;box-shadow:0 0 20px #3182ce80!important;transform:scale(1.02)}.table-node.compact{font-size:12px;height:auto!important;min-height:auto!important;max-height:none!important}.table-node.title-only{height:auto!important;min-height:auto!important;max-height:none!important}.table-node.compact{font-size:12px}.table-node.compact .column-item{padding:4px 8px;font-size:11px;min-height:auto;height:auto}.table-node.title-only{min-height:auto}.table-node.title-only .columns-list{display:none}.table-node.title-only .table-header{padding:8px 12px;font-size:12px;height:auto;display:flex;align-items:center;justify-content:center;color:#2d3748}.table-header{background:linear-gradient(135deg,#b0bec5,#90a4ae);color:#2d3748;padding:12px 16px;font-weight:600;font-size:14px;text-align:center}.columns-list{overflow-y:visible;max-height:none;height:auto!important;padding:0!important;margin:0!important;flex:0 0 auto!important;display:flex!important;flex-direction:column!important}.column-item{padding:8px 12px;border-bottom:1px solid #f3f4f6;font-size:13px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s;position:relative;min-height:auto!important;height:auto!important;box-sizing:border-box;flex-shrink:0;background:#f9fafb}.column-item:hover{background:#f9fafb}.column-item.selected{background:#eff6ff;border-left:3px solid #b0bec5}.column-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:8px}.react-flow__node,.react-flow__node .table-node{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}.react-flow__node[data-id*=public]{height:auto!important;min-height:auto!important;max-height:none!important}.react-flow__node[data-id*=public] .table-node{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}.column-content{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.column-name{color:#374151;font-weight:500;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.key-icon{font-size:12px}.no-columns{padding:20px;text-align:center;color:#9ca3af;font-size:12px}.title-only-mode{padding:8px;text-align:center;color:#9ca3af;font-size:11px}.handle{width:8px;height:8px;background:#b0bec5;border:2px solid white;border-radius:50%;position:absolute;z-index:10}.column-handle{opacity:0;transition:opacity .2s;pointer-events:all;cursor:crosshair}.column-item:hover .column-handle{opacity:1}.column-handle:hover{background:#3182ce;border-color:#fff;transform:scale(1.2)}.column-item{position:relative}.column-handle[data-handlepos=right]{right:-4px}.column-handle[data-handlepos=left]{left:-4px}.react-flow__edge{transition:all .3s ease;stroke:#64748b!important;stroke-width:2px!important;opacity:.8;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision;will-change:stroke,stroke-width,opacity}.react-flow__edge.highlighted{stroke:#3182ce!important;stroke-width:4px!important;opacity:1!important;filter:drop-shadow(0 0 6px rgba(49,130,206,.6));transition:all .2s ease}.react-flow__edge.dimmed{opacity:.2;stroke-width:1px;transition:opacity .15s ease}.react-flow__edge-path{fill:none;stroke-linecap:round;stroke-linejoin:round}.react-flow__edge.selected{stroke:#3182ce!important;stroke-width:3px!important;opacity:1!important}.react-flow__edge-text{font-size:11px;font-weight:600;fill:#2d3748;background:#fff;padding:2px 6px;border-radius:4px;border:1px solid #4a5568}@media (max-width: 1200px){.header-content{flex-wrap:wrap;gap:8px}.panel-actions{gap:6px;margin-left:auto}.action-button{padding:4px 8px;font-size:11px;height:24px;gap:4px}.action-button span{display:none}.action-icon{width:15px;height:15px}.table-controls{height:24px}.table-control-btn{height:18px;width:18px}}@media (max-width: 768px){.header-content{flex-direction:column;align-items:flex-start;gap:12px}.panel-actions{width:100%;justify-content:flex-end;gap:6px;margin-left:0}.action-button{flex:0 0 auto;min-width:auto;padding:4px 8px;font-size:11px;height:24px;gap:4px}.action-button span{display:none}.action-icon{width:15px;height:15px}.table-controls{margin-left:0;height:24px}.table-control-btn{height:18px;width:18px}.panel-info{margin:0 8px;max-width:calc(100% - 16px)}.header-text h1{font-size:14px}.db-info,.db-name{font-size:11px}}.error-help{margin-top:32px;padding:20px;background:#ffffff1a;border-radius:8px;text-align:left;max-width:600px}.error-help h3{margin:0 0 12px;font-size:18px}.error-help p{margin:0 0 12px;font-size:14px}.error-help pre{background:#0003;padding:16px;border-radius:6px;font-family:Courier New,monospace;font-size:13px;overflow-x:auto;text-align:left}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.relationship-modal{background:#fff;border-radius:12px;box-shadow:0 20px 40px #0000004d;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px 12px 0 0}.modal-header h2{margin:0;font-size:20px;font-weight:700;color:#1e293b}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#64748b;padding:4px;border-radius:4px;transition:all .2s}.modal-close:hover{background:#f1f5f9;color:#374151}.relationship-form{padding:24px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.form-row.single-column{grid-template-columns:1fr}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:600;color:#374151;margin-bottom:6px;font-size:14px}.form-group input,.form-group select,.form-group textarea{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:all .2s;background:#fff}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.form-group input.error,.form-group select.error,.form-group textarea.error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.error-text{color:#ef4444;font-size:12px;margin-top:4px;font-weight:500}.form-group textarea{resize:vertical;min-height:auto;font-family:inherit}.modal-actions{display:flex;gap:12px;justify-content:flex-end;padding:20px 24px;border-top:1px solid #e5e7eb;background:#f8fafc;border-radius:0 0 12px 12px;flex-shrink:0}.btn-primary,.btn-secondary{padding:10px 20px;border-radius:6px;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;border:none}.btn-primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f166}.btn-secondary{background:#f8fafc;color:#64748b;border:1px solid #e5e7eb}.btn-secondary:hover{background:#f1f5f9;color:#374151}@media (max-width: 768px){.relationship-modal{width:95%;margin:20px}.form-row{grid-template-columns:1fr;gap:12px}.modal-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%}}.relationship-manager-modal{background:#fff;border-radius:12px;box-shadow:0 20px 40px #0000004d;max-width:800px;width:95%;max-height:90vh;overflow:hidden;animation:modalSlideIn .3s ease-out;display:flex;flex-direction:column}.relationship-manager-content{padding:24px;flex:1;overflow-y:auto}.modal-danger-zone{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin:24px;padding:20px}.danger-zone-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.danger-zone-icon{font-size:20px;flex-shrink:0;margin-top:2px}.danger-zone-content h3{margin:0 0 8px;font-size:16px;font-weight:600;color:#dc2626}.danger-zone-content p{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5}.danger-zone-actions{display:flex;flex-direction:column;align-items:center;gap:8px}.danger-button{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-weight:600;padding:10px 20px;border-radius:6px;border:none;cursor:pointer;font-size:14px;transition:all .2s;min-width:200px;text-align:center}.danger-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ef444466}.danger-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.danger-zone-info{color:#7f1d1d;font-size:12px;text-align:center;margin:0}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.loading-state .spinner{width:40px;height:auto;border:3px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.error-state p{color:#ef4444;margin-bottom:16px;font-weight:500}.retry-button{background:#6366f1;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s}.retry-button:hover{background:#4f46e5;transform:translateY(-1px)}.empty-state p{color:#64748b;margin:0}.empty-subtitle{font-size:14px;margin-top:8px!important;opacity:.8}.relationships-list{margin-top:16px}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}.list-header h3{margin:0;font-size:18px;font-weight:600;color:#1e293b}.refresh-button{background:#f8fafc;color:#64748b;border:1px solid #e5e7eb;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s}.refresh-button:hover{background:#f1f5f9;color:#374151}.relationships-grid{display:grid;gap:16px}.relationship-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:16px;transition:all .2s}.relationship-card:hover{border-color:#d1d5db;box-shadow:0 2px 8px #0000001a}.relationship-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.constraint-name{font-weight:600;color:#374151;font-size:14px;background:#e5e7eb;padding:4px 8px;border-radius:4px;font-family:Courier New,monospace}.delete-button{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;padding:4px 6px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center}.delete-button:hover:not(:disabled){background:#fee2e2;border-color:#fca5a5;transform:scale(1.05)}.delete-button:disabled{opacity:.6;cursor:not-allowed}.relationship-details{display:flex;flex-direction:column;gap:12px}.relationship-path{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.source-table,.target-table{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.table-label{font-size:12px;color:#64748b;font-weight:500;white-space:nowrap}.table-name{font-weight:600;color:#1e293b;font-size:14px}.column-name{color:#374151;font-weight:500;font-size:18px;font-family:inherit}.relationship-arrow{color:#64748b;font-weight:700;font-size:16px;flex-shrink:0}.relationship-constraints{display:flex;gap:8px;flex-wrap:wrap}.constraint-tag{font-size:11px;padding:2px 6px;border-radius:4px;font-weight:500;font-family:Courier New,monospace}.constraint-tag.delete{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.constraint-tag.update{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}.constraint-tag.join{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}.relationship-card.custom-relationship{background:#fef3c7;border-color:#f59e0b}.relationship-card.db-relationship{background:#f8fafc;border-color:#e5e7eb}.relationship-card.report-relationship{background:#ecfdf5;border-color:#10b981}.relationship-card.report-relationship .delete-button{background:#f0fdf4;color:#059669;border:1px solid #bbf7d0;font-size:11px;padding:3px 5px;min-width:20px;height:20px}.relationship-card.report-relationship .delete-button:hover:not(:disabled){background:#dcfce7;border-color:#86efac;color:#047857}.relationship-type-badge{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:8px;text-transform:uppercase}.relationship-type-badge.custom{background:#f59e0b;color:#fff}.relationship-type-badge.report{background:#10b981;color:#fff}.relationship-type-badge{background:#64748b;color:#fff}.relationship-description{margin-top:8px;padding:8px;background:#0000000d;border-radius:4px;font-size:12px}.description-label{font-weight:600;color:#374151;margin-right:6px}.description-text{color:#6b7280;font-style:italic}@media (max-width: 768px){.relationship-manager-modal{width:98%;margin:10px}.relationship-path{flex-direction:column;align-items:flex-start;gap:8px}.relationship-arrow{align-self:center;transform:rotate(90deg)}.source-table,.target-table{width:100%}}.danger-zone-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.danger-zone-actions .danger-button{font-size:12px;padding:8px 12px;min-width:auto;white-space:nowrap}