.editor {
  .templatePreview {
    border: 1px solid var(--mantine-color-gray-3);
    border-radius: var(--mantine-radius-md);
    background: var(--mantine-color-gray-0);
    
    .previewHeader {
      padding: 1rem;
      background: var(--mantine-color-gray-1);
      border-bottom: 1px solid var(--mantine-color-gray-3);
      border-radius: var(--mantine-radius-md) var(--mantine-radius-md) 0 0;
    }
    
    .previewContent {
      padding: 1.5rem;
      
      :global(.mantine-TypographyStylesProvider-root) {
        line-height: 1.6;
        
        h1, h2, h3, h4, h5, h6 {
          margin-top: 1.5rem;
          margin-bottom: 0.5rem;
          
          &:first-child {
            margin-top: 0;
          }
        }
        
        p {
          margin-bottom: 1rem;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
        
        ul, ol {
          margin-bottom: 1rem;
          padding-left: 1.5rem;
        }
        
        li {
          margin-bottom: 0.25rem;
        }
        
        strong {
          font-weight: 600;
        }
        
        code {
          background: var(--mantine-color-gray-1);
          padding: 0.125rem 0.25rem;
          border-radius: 0.25rem;
          font-size: 0.875em;
        }
      }
    }
  }
  
  .tokenReference {
    background: var(--mantine-color-blue-0);
    border: 1px solid var(--mantine-color-blue-2);
    border-radius: var(--mantine-radius-sm);
    
    .tokenItem {
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--mantine-color-blue-1);
      
      &:last-child {
        border-bottom: none;
      }
      
      .tokenName {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 0.8rem;
        background: var(--mantine-color-blue-1);
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        display: inline-block;
        margin-bottom: 0.25rem;
      }
      
      .tokenDescription {
        font-size: 0.8rem;
        color: var(--mantine-color-gray-7);
      }
    }
  }
}

// Dark theme adjustments
[data-mantine-color-scheme='dark'] {
  .editor {
    .templatePreview {
      border-color: var(--mantine-color-dark-4);
      background: var(--mantine-color-dark-7);
      
      .previewHeader {
        background: var(--mantine-color-dark-6);
        border-bottom-color: var(--mantine-color-dark-4);
      }
    }
    
    .tokenReference {
      background: var(--mantine-color-dark-6);
      border-color: var(--mantine-color-blue-8);
      
      .tokenItem {
        border-bottom-color: var(--mantine-color-dark-5);
        
        .tokenName {
          background: var(--mantine-color-dark-5);
        }
      }
    }
  }
}