.level-a2 { background-color: #8B1E3F; }
.level-a2-light { background-color: rgba(139, 30, 63, 0.1); }
.level-a2-text { color: #8B1E3F; }

.level-b1 { background-color: #E74C3C; }
.level-b1-light { background-color: rgba(231, 76, 60, 0.1); }
.level-b1-text { color: #E74C3C; }

.level-b2 { background-color: #27AE60; }
.level-b2-light { background-color: rgba(39, 174, 96, 0.1); }
.level-b2-text { color: #27AE60; }

.level-c1 { background-color: #1A4B8C; }
.level-c1-light { background-color: rgba(26, 75, 140, 0.1); }
.level-c1-text { color: #1A4B8C; }

.level-c2 { background-color: #5E35B1; }
.level-c2-light { background-color: rgba(94, 53, 177, 0.1); }
.level-c2-text { color: #5E35B1; }

.bg-success-light { background-color: #dcfce7; }
.bg-blue-light { background-color: #dbeafe !important; }
.text-blue-dark {
    color: #1e40af !important;
}

.text-muted-dark {
    color: #374151;
}

.alternative-box{
    color: #b45309 !important;
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
}
.alternative-text{
    color: #b45309 !important;
}
.play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    transition: background-color 0.2s;
}

.play-btn:hover {
    background-color: #e9ecef;
}

.play-btn.playing {
    background-color: #e9ecef;
}

.category-score {
    min-width: 60px;
}

.improvement-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    flex-shrink: 0;
}

.question-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}

@media (max-width: 768px) {
    .category-grid {
        display: block !important;
    }
    
    .category-grid > div {
        margin-bottom: 0.5rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #dee2e6;
    }
    
    .category-grid > div:last-child {
        border-bottom: none;
    }
}