body { 
    font-family: 'Inter', sans-serif; 
    background-color: #111827; 
}
.CodeMirror { 
    height: calc(100vh - 150px); 
    border: none; 
    background-color: #1f2937; 
}
.tabs button.active { 
    color: #3b82f6; 
    border-color: #3b82f6; 
}
.highlighted-line { 
    background-color: rgba(59, 130, 246, 0.25) !important; 
}
.snippet-card { 
    transition: all 0.2s ease-in-out; 
    cursor: pointer; 
    border: 1px solid #374151; 
}
.snippet-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 
    border-color: #3b82f6; 
}
.diff-added { 
    background-color: rgba(16, 185, 129, 0.2); 
    border-left: 2px solid #10B981; 
}
.diff-changed { 
    background-color: rgba(245, 158, 11, 0.2); 
    border-left: 2px solid #F59E0B; 
}
.live-highlight { 
    outline: 2px solid #3b82f6 !important; 
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.7); 
}
#doc-tooltip { 
    position: absolute; 
    display: none; 
    z-index: 1000; 
    background-color: #2d3748; 
    border: 1px solid #4a5568; 
    border-radius: 5px; 
    padding: 10px; 
    max-width: 300px; 
    color: #e2e8f0; 
    font-size: 0.875rem; 
    pointer-events: none; 
}
#doc-tooltip h4 { 
    font-weight: bold; 
    color: #63b3ed; 
    margin-bottom: 5px; 
}
#watcher-container .watcher-row { 
    display: flex; 
    align-items: center; 
    margin-bottom: 4px; 
}
#watcher-container input { 
    flex-grow: 1; 
    background-color: #374151; 
    border: 1px solid #4a5568; 
    border-radius: 3px; 
    padding: 2px 6px; 
}
#watcher-container .watcher-value,
.json-tree,
#watcher-container .watcher-value {
    font-family: 'Fira Code', monospace;
    color: #a5b4fc;
}
#watcher-container .watcher-error { 
    color: #f87171; 
}
#watcher-container .watcher-row button { 
    background: none; 
    border: none; 
    color: #ef4444; 
    cursor: pointer; 
    margin-left: 5px; 
    font-weight: bold; 
}
.value-changed { 
    animation: highlight 1s ease; 
}
@keyframes highlight { 
    from { background-color: #f59e0b40; } 
    to { background-color: transparent; } 
}
.a11y-report .impact-critical { 
    border-left-color: #ef4444; 
}
.a11y-report .impact-serious { 
    border-left-color: #f59e0b; 
}
.a11y-report .violation-card { 
    border-left-width: 4px; 
}
#error-banner {
    transition: opacity 0.5s, transform 0.5s;
}
#error-banner.hidden {
    opacity: 0;
    transform: translateY(100%);
}

/* Added styles for icons */
.tabs button i,
header button i {
    margin-right: 0.5rem;
}

/* Added transition for tab content */
#xml-editor-container,
#context-editor-container,
#snippet-container-parent,
#preview-container,
#inspector-container,
#watcher-container,
#a11y-container {
    transition: opacity 0.3s ease-in-out;
}

/* Enhanced hover effects for buttons */
header button,
.tabs button {
    transition: transform 0.2s ease;
}
header button:hover,
.tabs button:hover {
    transform: translateY(-1px);
}