    /* Semantiva Studio Color Palette - Professional & Intuitive */
:root {
  /* Core Channel Colors */
  --config-primary: #8e8e93;
  --config-light: #f2f2f7;
  --config-border: #d1d1d6;
  
  --data-primary: #007aff;
  --data-light: #e8f4fd;
  --data-border: #c7e0f4;
  
  --context-primary: #af52de;
  --context-light: #f5e6ff;
  --context-border: #e6ccff;
  
  /* I/O Flow Colors */
  --input-primary: #34c759;
  --input-light: #e8f5ea;
  --input-border: #c3e6cd;
  
  --output-primary: #ff9500;
  --output-light: #fff4e6;
  --output-border: #ffe0b3;
  
  /* System Colors */
  --neutral-primary: #48484a;
  --neutral-light: #f8f9fa;
  --neutral-border: #e5e5ea;
  
  --success-primary: #30d158;
  --warning-primary: #ff9f0a;
  --error-primary: #ff3b30;
  
  /* Semantic Colors for Data Types */
  --type-primary: #5856d6;
  --type-light: #eeecff;
  --type-border: #d4d2ff;
}

body, html { 
  margin:0; 
  height:100%; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
  background: var(--neutral-light);
}
#root { display:flex; height:100%; width:100%; }
#sidebar { 
  width:400px; 
  min-width: 200px;
  max-width: 600px;
  border-right:1px solid var(--neutral-border); 
  overflow:auto; 
  padding:4px; 
  background: white;
  position: relative;
}
#details { 
  width:375px; 
  min-width: 200px;
  max-width: 500px;
  border-left:1px solid var(--neutral-border); 
  overflow:auto; 
  padding:20px; 
  background: #fafbfc;
  position: relative;
}
#graph { flex:1; overflow:auto; position: relative; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); }

/* Resize handles */
.resize-handle {
  position: absolute;
  background: transparent;
  transition: background-color 0.2s ease;
  z-index: 1000;
}

.resize-handle:hover {
  background-color: var(--data-primary);
}

.resize-handle-right {
  top: 0;
  right: -2px;
  width: 4px;
  height: 100%;
  cursor: ew-resize;
}

.resize-handle-left {
  top: 0;
  left: -2px;
  width: 4px;
  height: 100%;
  cursor: ew-resize;
}

.resize-handle:active,
.resize-handle.resizing {
  background-color: var(--data-primary);
}
    
    /* Main header styling */
    .graph-header {
      padding: 15px 20px;
      border-bottom: 2px solid var(--neutral-border);
      background: linear-gradient(135deg, white 0%, var(--neutral-light) 100%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .graph-header-content h3 {
      margin: 0;
      color: var(--type-primary);
      font-size: 18px;
      font-weight: 600;
    }
    
    .graph-header-content p {
      margin: 5px 0 0 0;
      font-size: 12px;
      color: var(--neutral-primary);
    }
    
    .header-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .checkbox-container {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      font-size: 13px;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .checkbox-container:hover {
      background: #f8f9fa;
      border-color: #007acc;
    }
    
    .checkbox-container input[type="checkbox"] {
      margin: 0;
      cursor: pointer;
    }
    
    .checkbox-container label {
      cursor: pointer;
      font-weight: 500;
      user-select: none;
    }
    
    /* Sidebar styling */
    #sidebar h3 {
      margin: 15px 10px 10px 10px;
      color: var(--type-primary);
      font-size: 16px;
      font-weight: 600;
      border-bottom: 2px solid var(--type-primary);
      padding-bottom: 5px;
    }
    
    .component-group {
      margin-bottom: 20px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .component-group h4 {
      margin: 0;
      padding: 12px 15px;
      font-size: 14px;
      font-weight: 600;
      color: white;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .group-checkbox {
      margin: 0;
      transform: scale(1.1);
      cursor: pointer;
    }
    
    .group-checkbox:hover {
      transform: scale(1.2);
    }
    
    /* Component type colors - updated to match new palette */
    .group-data-processor h4 { background: linear-gradient(135deg, var(--data-primary) 0%, #0056d6 100%); }
    .group-context-processor h4 { background: linear-gradient(135deg, var(--context-primary) 0%, #8e44ad 100%); }
    .group-io-component h4 { background: linear-gradient(135deg, var(--error-primary) 0%, #e74c3c 100%); }
    .group-workflow h4 { background: linear-gradient(135deg, var(--success-primary) 0%, #27ae60 100%); }
    .group-default h4 { background: linear-gradient(135deg, var(--neutral-primary) 0%, #2c3e50 100%); }
    
    .node-item {
      cursor: pointer;
      padding: 12px 15px;
      border: none;
      margin: 0;
      background: white;
      border-bottom: 1px solid #e0e0e0;
      transition: all 0.2s ease;
      font-size: 13px;
      line-height: 1.4;
    }
    
    .node-item:hover {
      background: #f5f5f5;
      transform: translateX(3px);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .node-item.selected {
      background: var(--data-light);
      border-left: 4px solid var(--data-primary);
      font-weight: 500;
    }
    
    .node-item:last-child {
      border-bottom: none;
    }
    
    /* Tree node styling in main area */
    .tree-container {
      padding: 20px;
      min-height: calc(100vh - 100px);
    }
    
    .tree-node {
      margin: 8px 0;
    }
    
    .tree-node-item {
      display: inline-block;
      min-width: 250px;
      padding: 15px 20px;
      background: white;
      border: 2px solid #007acc;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      font-size: 13px;
      line-height: 1.3;
      transition: all 0.2s ease;
      position: relative;
    }
    
    .tree-node-item:hover {
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      transform: translateY(-2px);
    }
    
    .tree-node-item.selected {
      border-color: #28a745;
      box-shadow: 0 6px 12px rgba(40,167,69,0.3);
    }
    
    /* Component type styling for tree nodes */
    .tree-node-item.data-processor {
      border-color: var(--data-primary);
      background: linear-gradient(135deg, var(--data-light) 0%, #f8fbff 100%);
    }
    .tree-node-item.data-processor:hover {
      background: linear-gradient(135deg, var(--data-border) 0%, var(--data-light) 100%);
      border-color: #0056d6;
    }
    
    .tree-node-item.context-processor {
      border-color: var(--context-primary);
      background: linear-gradient(135deg, var(--context-light) 0%, #faf8fb 100%);
    }
    .tree-node-item.context-processor:hover {
      background: linear-gradient(135deg, var(--context-border) 0%, var(--context-light) 100%);
      border-color: #8e44ad;
    }
    
    .tree-node-item.io-component {
      border-color: var(--error-primary);
      background: linear-gradient(135deg, #ffebee 0%, #fff8f8 100%);
    }
    .tree-node-item.io-component:hover {
      background: linear-gradient(135deg, #ffcdd2 0%, #ffebee 100%);
      border-color: #e74c3c;
    }
    
    .tree-node-item.workflow {
      border-color: var(--success-primary);
      background: linear-gradient(135deg, var(--input-light) 0%, #f8fbf8 100%);
    }
    .tree-node-item.workflow:hover {
      background: linear-gradient(135deg, var(--input-border) 0%, var(--input-light) 100%);
      border-color: #27ae60;
    }
    
    .tree-node-item.default {
      border-color: var(--neutral-primary);
      background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
    }
    .tree-node-item.default:hover {
      background: linear-gradient(135deg, #eeeeee 0%, #f5f5f5 100%);
      border-color: #2c3e50;
    }
    
    /* Component type indicator */
    .component-type-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 10px;
      font-weight: bold;
      padding: 2px 6px;
      border-radius: 4px;
      color: white;
      text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    }
    
    .data-processor .component-type-badge { background: var(--data-primary); }
    .context-processor .component-type-badge { background: var(--context-primary); }
    .io-component .component-type-badge { background: var(--error-primary); }
    .workflow .component-type-badge { background: var(--success-primary); }
    .default .component-type-badge { background: var(--neutral-primary); }
    
    /* Details panel styling */
    #details h3 {
      margin: 0 0 15px 0;
      color: var(--type-primary);
      font-size: 18px;
      font-weight: 600;
      border-bottom: 2px solid var(--type-primary);
      padding-bottom: 8px;
    }
    
    /* Subheader styling for detail sections - Card-compatible */
    .details-subheader {
      margin: 0 0 12px 0;
      color: var(--neutral-primary);
      font-size: 16px;
      font-weight: 700;
      border-bottom: 2px solid #e8e9ea;
      padding-bottom: 8px;
    }
    
    /* Section containers for better visual separation - Card-like styling */
    .details-section {
      margin: 16px 0;
      padding: 16px;
      background: white;
      border: 1px solid #e8e9ea;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
      transition: box-shadow 0.2s ease;
    }
    
    .details-section:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .details-section:first-child {
      margin-top: 0;
    }
    
    /* Contract items styling (Input Type, Output Type, Role) - Card-compatible */
    .contract-item {
      margin: 8px 0;
      padding: 10px 12px;
      background: #f8f9fa;
      border-radius: 6px;
      border-left: 3px solid #dee2e6;
      font-size: 14px;
      line-height: 1.4;
    }
    
    .contract-item strong {
      font-weight: 600;
      color: var(--neutral-primary);
    }
    
    /* Provenance box styling - Card-compatible, simplified */
    .prov-box {
      margin: 8px 0;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #dee2e6;
      background: #f8f9fa;
      font-size: 12px;
      line-height: 1.4;
    }
    
    .prov-box-config .prov-header,
    .prov-box-default .prov-header,
    .prov-box-context .prov-header {
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--neutral-primary);
    }
    
    /* Trace and context item styling */
    .trace-item {
      margin: 6px 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--neutral-primary);
    }
    
    .trace-item strong {
      font-weight: 600;
      color: var(--neutral-primary);
    }
    
    #details p {
      margin: 10px 0;
      font-size: 14px;
      line-height: 1.5;
    }
    
    #details b {
      color: var(--neutral-primary);
      font-weight: 600;
    }
    
    #details pre {
      white-space: pre-wrap;
      background: var(--neutral-light);
      border: 1px solid var(--neutral-border);
      border-radius: 6px;
      padding: 15px;
      font-size: 12px;
      line-height: 1.4;
      color: #495057;
      margin: 15px 0;
      overflow-x: auto;
    }
    
    .details-section {
      margin: 15px 0;
      padding: 12px;
      background: var(--neutral-light);
      border-radius: 6px;
      border-left: 4px solid var(--type-primary);
    }
    
    .details-section b {
      color: var(--type-primary);
    }
    
    .no-selection {
      text-align: center;
      color: #999;
      font-style: italic;
      margin-top: 50px;
      font-size: 14px;
    }
    
    /* Connection lines for tree structure */
    .tree-connector {
      border-left: 2px dashed #ccc;
      margin-left: 20px;
      padding-left: 20px;
    }

    /* Mobile Responsive Styles */
    @media (max-width: 768px) {
      /* Override the main container's inline flex styles */
      #root > div {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
      }
      
      #root { 
        flex-direction: column;
        height: auto;
        min-height: 100vh;
      }
      
      /* Force all children to be visible and properly ordered */
      #root > div > * {
        flex-shrink: 0 !important;
      }
      
      #sidebar { 
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        border-right: none;
        border-bottom: 1px solid var(--neutral-border);
        order: 1;
        max-height: 200px;
        overflow-y: auto;
      }
      
      #graph { 
        flex: none;
        order: 2;
        min-height: 400px;
        overflow-x: auto;
      }
      
      #details { 
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        border-left: none;
        border-top: 1px solid var(--neutral-border);
        order: 3;
        max-height: 400px;
        overflow-y: auto;
        display: block !important;
        position: relative !important;
        background: white;
        min-height: 200px;
        border-top: 3px solid var(--data-primary);
        padding: 15px !important;
        margin: 10px 0 !important;
      }
      
      /* Hide resize handles on mobile */
      .resize-handle {
        display: none;
      }
      
      /* Improve header layout */
      .graph-header {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 15px;
      }
      
      .graph-header-content {
        margin-bottom: 10px;
      }
      
      .header-controls {
        justify-content: center;
        flex-wrap: wrap;
      }
      
      /* Improve touch targets */
      .node-item {
        padding: 12px 15px;
        margin: 2px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
      }
      
      .tree-node-item {
        min-width: 200px;
        padding: 15px;
        font-size: 14px;
        margin: 8px 0;
      }
      
      /* Make component groups more mobile-friendly */
      .component-group h4 {
        padding: 15px;
        font-size: 15px;
      }
      
      .checkbox-container {
        padding: 10px 15px;
        font-size: 14px;
        min-height: 44px;
      }
      
      /* Improve readability */
      .details-section {
        margin: 12px 0;
        padding: 12px;
        font-size: 14px;
      }
      
      .contract-item {
        padding: 12px;
        font-size: 14px;
      }
      
      .trace-item {
        font-size: 13px;
        margin: 8px 0;
      }
      
      /* Make the details panel more visible on mobile */
      #details h3 {
        font-size: 18px;
        margin-bottom: 10px;
        color: var(--type-primary);
      }
      
      #details p {
        font-size: 14px;
        line-height: 1.5;
        color: var(--neutral-primary);
      }
      
      /* Ensure details content is visible */
      #details > div {
        min-height: 100px;
        padding: 15px !important;
      }
      
      /* Tree structure improvements */
      .tree-container {
        padding: 15px;
      }
      
      .tree-connector {
        margin-left: 15px;
        padding-left: 15px;
      }
    }

    /* Small mobile devices */
    @media (max-width: 480px) {
      #sidebar {
        max-height: 150px;
      }
      
      #details {
        padding: 12px;
        max-height: 40vh;
        min-height: 120px !important;
        background: white !important;
        border-top: 2px solid var(--data-primary) !important;
      }
      
      /* Ensure details content is visible on small screens */
      #details > div {
        padding: 12px !important;
        min-height: 80px;
      }
      
      #details h3 {
        font-size: 16px;
        color: var(--data-primary) !important;
      }
      
      #details p {
        font-size: 13px;
      }
      
      .graph-header {
        padding: 10px 12px;
      }
      
      .tree-node-item {
        min-width: 160px;
        padding: 12px;
        font-size: 13px;
      }
      
      .component-group h4 {
        padding: 12px;
        font-size: 14px;
      }
      
      .details-section h3 {
        font-size: 16px;
      }
      
      .details-subheader {
        font-size: 14px;
      }
      
      .tree-container {
        padding: 12px;
      }
    }
