/* Color-Coded Error Highlighting by Type */

/* Spelling Errors - Red */
.error-spelling {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.3) 100%);
    color: #991b1b;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.1);
}

/* Grammar Errors - Blue */
.error-grammar {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.3) 100%);
    color: #1e40af;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
}

/* Punctuation Errors - Yellow/Gold */
.error-punctuation {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.3) 100%);
    color: #92400e;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.1);
}

/* Capitalization Errors - Purple */
.error-capitalization {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(147, 51, 234, 0.3) 100%);
    color: #6b21a8;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 1px 3px rgba(168, 85, 247, 0.1);
}

/* Word Choice Errors - Orange */
.error-word-choice {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(234, 88, 12, 0.3) 100%);
    color: #9a3412;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(249, 115, 22, 0.4);
    box-shadow: 0 1px 3px rgba(249, 115, 22, 0.1);
}

/* Clarity Errors - Teal/Green */
.error-clarity {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(13, 148, 136, 0.3) 100%);
    color: #115e59;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(20, 184, 166, 0.4);
    box-shadow: 0 1px 3px rgba(20, 184, 166, 0.1);
}

/* Error Legend/Key */
.error-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    background: rgba(109, 129, 150, 0.05);
    border-radius: 12px;
    border: 2px solid rgba(109, 129, 150, 0.2);
    margin: 16px 0;
}

.error-legend-title {
    width: 100%;
    font-weight: 700;
    color: #485566;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.error-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    font-size: 0.9rem;
}

.error-legend-sample {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
}